/** Shopify CDN: Minification failed Line 3230:4 Unexpected "}" **/ /* SHOPIFY_STYLESHEETS_VERSION: 1.0 */ /* CSS from section stylesheet tags */ /* START_SECTION:br-announcement (INDEX:1) */ .announcement-bar-section-template--21692356886685__announcement { background: #111111; overflow: hidden; position: relative; } .announcement-bar-section-template--21692356886685__announcement, .announcement-bar-section-template--21692356886685__announcement * { color: #ffffff; font-size: 11px; } @media screen and (min-width: 750px) { .announcement-bar-section-template--21692356886685__announcement, .announcement-bar-section-template--21692356886685__announcement * { font-size: 13px; } } .announcement-slider-template--21692356886685__announcement { position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; box-sizing: border-box; height: 35px; } @media screen and (min-width: 750px) { .announcement-slider-template--21692356886685__announcement { height: 35px; } } .announcement-slider-template--21692356886685__announcement .announcement-slide-template--21692356886685__announcement { position: absolute; height: 100%; } .announcement-slide-template--21692356886685__announcement { position: absolute; top: 0; left: 0; width: 100%; display: flex; align-items: center; justify-content: center; text-align: center; transform: translateY(100%); opacity: 1; transition: transform 500ms ease, opacity 500ms ease; pointer-events: none; z-index: 1; padding: 12px 15px; box-sizing: border-box; visibility: hidden; } .announcement-slide-template--21692356886685__announcement.entering { transform: translateY(100%); opacity: 1; visibility: visible; } .announcement-slider-template--21692356886685__announcement.is-prev .announcement-slide-template--21692356886685__announcement.entering { transform: translateY(-100%); opacity: 1; visibility: visible; } .announcement-slide-template--21692356886685__announcement.active { position: relative; transform: none; opacity: 1; pointer-events: auto; z-index: 3; visibility: visible; } .announcement-slide-template--21692356886685__announcement.exiting { transform: translateY(-100%); opacity: 1; z-index: 2; visibility: visible; } .announcement-slider-template--21692356886685__announcement.is-prev .announcement-slide-template--21692356886685__announcement.exiting { transform: translateY(100%); opacity: 1; visibility: visible; } @media screen and (max-width: 749px) { .announcement-slide-template--21692356886685__announcement { padding: 8px 15px; } } .announcement-static-template--21692356886685__announcement { text-align: center; padding: 12px 15px; } @media screen and (max-width: 749px) { .announcement-static-template--21692356886685__announcement { padding: 8px 15px; } } .announcement-slide-template--21692356886685__announcement p, .announcement-static-template--21692356886685__announcement p { margin: 0; padding: 0; } .announcement-slide-content-template--21692356886685__announcement { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 !important; max-width: 100%; flex-wrap: wrap; } .announcement-slide-icon-template--21692356886685__announcement { flex-shrink: 0; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; } .announcement-slide-icon-template--21692356886685__announcement img, .announcement-slide-icon-template--21692356886685__announcement svg { width: 100%; height: 100%; object-fit: contain; } .announcement-slide-text-template--21692356886685__announcement { display: inline; } .announcement-slide-text-template--21692356886685__announcement p { display: inline; margin: 0; padding: 0; } @media screen and (max-width: 749px) { .announcement-slide-text-template--21692356886685__announcement, .announcement-slide-text-template--21692356886685__announcement p { display: block; text-align: center; word-wrap: break-word; overflow-wrap: break-word; } .announcement-slide-content-template--21692356886685__announcement { flex-direction: row; gap: 8px; width: 100%; } } .announcement-slide-button-template--21692356886685__announcement { display: inline-block; text-decoration: none; font-weight: 600; transition: opacity 0.2s ease, background-color 0.2s ease; white-space: nowrap; letter-spacing: var(--letter-spacing-body); } .announcement-slide-button-template--21692356886685__announcement:hover { opacity: 0.85; } .announcement-nav-template--21692356886685__announcement { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; background: transparent; border: none; cursor: pointer; padding: 8px; display: flex; align-items: center; justify-content: center; opacity: 0.7; transition: opacity 0.2s ease; } .announcement-nav-template--21692356886685__announcement:hover { opacity: 1; } .announcement-nav-template--21692356886685__announcement svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .announcement-nav-prev-template--21692356886685__announcement { left: 10px; } .announcement-nav-next-template--21692356886685__announcement { right: 10px; } @media screen and (min-width: 750px) { .announcement-nav-template--21692356886685__announcement { padding: 10px; } .announcement-nav-template--21692356886685__announcement svg { width: 18px; height: 18px; } .announcement-nav-prev-template--21692356886685__announcement { left: 20px; } .announcement-nav-next-template--21692356886685__announcement { right: 20px; } } .announcement-bar-section { position: relative; z-index: 2; padding: 0px 0px; text-align: center; } .announcement-bar-section p { margin: 0; letter-spacing: var(--letter-spacing-body); font-weight: var(--font-weight-regular) !important; } [dir="rtl"].announcement-bar-section p { text-align: center; } /* END_SECTION:br-announcement */ /* START_SECTION:br-before-after (INDEX:2) */ .br-before-after {background:#f5f8fd;color:#1b1f3b;padding:64px 24px;overflow:hidden} .br-before-after * {box-sizing:border-box} .br-ba-inner {max-width:1200px;margin:0 auto} .br-ba-header {text-align:center;margin-bottom:48px} .br-before-after .br-ba-title {font-size:28px!important;line-height:1.25!important;font-weight:700;margin:0 0 20px;color:#1b1f3b} .br-before-after .br-ba-title span {font-size:inherit!important;color:#668aba} .br-before-after .br-ba-subtitle {font-size:18px!important;line-height:1.55!important;color:#1b1f3b;margin:0} .br-ba-track {display:flex;gap:32px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;padding:4px 0;margin:0;list-style:none} .br-ba-track::-webkit-scrollbar {display:none} .br-ba-track:focus-visible {outline:2px solid #668aba;outline-offset:5px} .br-ba-pair {flex:0 0 calc((100% - 64px)/3);min-width:0;scroll-snap-align:start;scroll-snap-stop:always;list-style:none;margin:0;padding:0} .br-ba-images {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px;align-items:start} .br-ba-image {margin:0;text-align:center;min-width:0} .br-before-after .br-ba-label {display:table;max-width:100%;min-height:34px;background:#e1e8f2;border-radius:7px 7px 0 0;margin:0 auto;padding:6px 18px;font-size:16px!important;line-height:1.4!important;font-weight:600;color:#1b1f3b;overflow-wrap:anywhere} .br-before-after .br-ba-label--after {background:#668aba;color:#1b1f3b} .br-ba-photo {aspect-ratio:255/303;background:#e1e8f2;border-radius:6px;overflow:hidden;display:grid;place-items:center} .br-ba-photo img {display:block;width:100%;height:100%;aspect-ratio:255/303;object-fit:cover} .br-ba-placeholder {display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;width:100%;height:100%;padding:16px;color:#526581} .br-ba-placeholder svg {display:block;width:32px;height:32px;opacity:.7} .br-ba-placeholder span {font-size:16px!important;line-height:1.5!important} .br-ba-navigation {display:flex;align-items:center;justify-content:space-between;gap:24px;max-width:760px;margin:32px auto 0} .br-ba-navigation[hidden] {display:none} .br-ba-arrow {display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;padding:0;border:1px solid #c7d9f1;border-radius:50%!important;background:#fff;color:#1b1f3b;cursor:pointer;box-shadow:none} .br-ba-arrow::before,.br-ba-arrow::after {display:none} .br-ba-arrow svg {width:20px;height:20px} .br-ba-arrow:disabled {opacity:.3;cursor:default} .br-ba-arrow:focus-visible,.br-ba-dot:focus-visible {outline:2px solid #668aba;outline-offset:3px} .br-ba-dots {display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:0} .br-ba-dot {display:grid;place-items:center;width:28px;height:44px;background:none;border:0;padding:0;cursor:pointer;color:#c7d9f1} .br-ba-dot::after {content:'';position:static;display:block;width:9px;height:9px;border:0;border-radius:50%;background:currentColor;box-shadow:none} .br-ba-dot::before {display:none} .br-ba-dot[aria-current=true] {color:#1b1f3b} @media(max-width:1023px){.br-ba-track{gap:24px}.br-ba-pair{flex-basis:calc((100% - 24px)/2)}} @media(max-width:749px){.br-before-after{padding:44px 20px}.br-ba-header{margin-bottom:30px}.br-before-after .br-ba-title{font-size:24px!important;margin-bottom:14px}.br-ba-track{gap:20px}.br-ba-pair{flex-basis:100%}.br-before-after .br-ba-label{padding:6px 12px}.br-ba-navigation{margin-top:24px}} /* END_SECTION:br-before-after */ /* START_SECTION:br-benefits (INDEX:3) */ #media-template--21692356886685__benefits { --media-grid-padding: 60px 20px 60px 20px; --media-grid-max-width: 1200px; --media-grid-gap: 20px 15px; --image-border-radius: 4px; --list-icon-color: #E41E1E; --list-icon-mark: #FFFFFF; --list-icon-size: 18px; --list-item-gap: 8px; background-color: #ffffff; } #media-template--21692356886685__benefits .media-grid__heading { font-weight: var(--font-weight-bold, 700); letter-spacing: var(--letter-spacing-heading) !important; } #media-template--21692356886685__benefits .media-grid__subtitle { font-weight: var(--font-weight-regular, 400); letter-spacing: var(--letter-spacing-body, 0); } #media-template--21692356886685__benefits .media-grid__accent { padding: 0 4px; margin: 0 -4px; color: #EF4A65 !important; margin-left: 0px; font-family: var(--font-accent-family) !important; font-style: var(--font-accent-style) !important; font-weight: var(--font-accent-weight) !important; } #media-template--21692356886685__benefits .media-item__media { border-radius: 4px !important; border-radius: 4px !important; background-color: #ffffff; } #media-template--21692356886685__benefits .media-item__image, #media-template--21692356886685__benefits .media-item__video { border-radius: 4px !important; border-radius: 4px !important; object-position: center; } #media-template--21692356886685__benefits .media-item__placeholder { background-color: #f5f5f5; border-radius: 4px !important; border-radius: 4px !important; } #media-template--21692356886685__benefits .media-item__placeholder-text { color: #8c8c8c; } #media-template--21692356886685__benefits .media-item__content { margin-top: 14px !important; } #media-template--21692356886685__benefits .media-item__title { color: #2a2a2a !important; font-size: 16px; margin-top: 0px; margin-bottom: 0px; text-align: left; } #media-template--21692356886685__benefits .media-item__problem { margin: 0 0 calc(4px - 8px); color: #8a8a8a; font-size: 15px; line-height: 1.4; text-align: left; } #media-template--21692356886685__benefits .media-item__problem s { text-decoration-line: line-through; text-decoration-color: #d64545; text-decoration-thickness: 1px; } #media-template--21692356886685__benefits .media-item__solution { margin: 0; color: #2a2a2a; font-size: 18px; line-height: 1.45; text-align: left; } #media-template--21692356886685__benefits .media-item__solution strong, #media-template--21692356886685__benefits .media-item__solution b { color: #111111; font-weight: 700; } #media-template--21692356886685__benefits .media-item__solution + .media-item__title, #media-template--21692356886685__benefits .media-item__solution + .media-item__description { margin-top: 6px; } @media screen and (max-width: 749px) { #media-template--21692356886685__benefits .media-item__problem { font-size: 14px; } #media-template--21692356886685__benefits .media-item__solution { font-size: 16px; } } #media-template--21692356886685__benefits .media-item__description { color: #8c8c8c !important; font-size: 14px; margin-top: 0px; margin-bottom: 0px; text-align: left; } #media-template--21692356886685__benefits .media-item { padding-left: 4px; padding-right: 4px; } #media-template--21692356886685__benefits .media-item__number { color: #2a2a2a; } #media-template--21692356886685__benefits .media-item > .media-item__media, #media-template--21692356886685__benefits .media-item > .media-item__compare { width: 100%; justify-self: start; } #media-template--21692356886685__benefits .media-item__media { aspect-ratio: 1 / 1; } #media-template--21692356886685__benefits .media-item--media-bottom { display: flex; flex-direction: column; } #media-template--21692356886685__benefits .media-item--media-bottom .media-item__content { margin-top: 0 !important; margin-bottom: 14px; } #media-template--21692356886685__benefits .media-item--media-bottom > .media-item__media, #media-template--21692356886685__benefits .media-item--media-bottom > .media-item__compare { margin-top: auto; align-self: flex-start; } #media-template--21692356886685__benefits .media-item--media-hidden .media-item__content { margin-top: 0 !important; } #media-template--21692356886685__benefits .media-item__compare { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; } #media-template--21692356886685__benefits .media-item__compare .media-item__media { width: 100%; } #media-template--21692356886685__benefits .media-item__label { position: absolute; left: 8px; bottom: 8px; z-index: 1; padding: 4px 10px; border-radius: 4px; background-color: #000000; color: #FFFFFF; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; line-height: 1.2; text-transform: uppercase; pointer-events: none; } @media (max-width: 1024px) { #media-template--21692356886685__benefits .media-grid__items { grid-template-columns: repeat(2, 1fr) !important; gap: 30px 30px !important; } } @media (max-width: 640px) { #media-template--21692356886685__benefits .media-grid__items { grid-template-columns: repeat(2, 1fr) !important; gap: 15px 15px !important; } } #media-template--21692356886685__benefits .media-grid__dots { display: none; } #shopify-section-template--21692356886685__benefits h3 {font-weight: 500;} #shopify-section-template--21692356886685__benefits .elxr-section-header__eyebrow {color: #668aba;} #media-template--21692356886685__benefits .media-item__media{position:relative;overflow:hidden;aspect-ratio:506 / 376;background:#c7d9f1} #media-template--21692356886685__benefits .media-item__media .media-item__image{position:absolute;max-width:none;width:202.371542%;height:203.457447%;top:0;left:0;object-fit:fill;border-radius:0!important} #media-template--21692356886685__benefits article[data-original-image="top_right"] .media-item__image, #media-template--21692356886685__benefits article[data-original-image="bottom_right"] .media-item__image{left:-102.371542%} #media-template--21692356886685__benefits article[data-original-image="bottom_left"] .media-item__image, #media-template--21692356886685__benefits article[data-original-image="bottom_right"] .media-item__image{top:-103.457447%} .media-grid{--media-grid-gap: 30px;--media-grid-padding: 60px 20px;--media-grid-max-width: 1600px;width:100%;padding:var(--media-grid-padding);background-color:#fff}.media-grid__container{max-width:var(--media-grid-max-width);margin:0 auto}.media-grid__items{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--media-grid-gap)}.media-grid__items[data-columns="1"]{grid-template-columns:repeat(1,1fr)}.media-grid__items[data-columns="2"]{grid-template-columns:repeat(2,1fr)}.media-grid__items[data-columns="3"]{grid-template-columns:repeat(3,1fr)}.media-grid__items[data-columns="4"]{grid-template-columns:repeat(4,1fr)}.media-grid__items[data-columns="5"]{grid-template-columns:repeat(5,1fr)}.media-grid__items[data-columns="6"]{grid-template-columns:repeat(6,1fr)}.media-item{display:grid;align-content:start}.media-item__media{position:relative;overflow:hidden;aspect-ratio:1 / 1;background-color:#f5f5f5;border-radius:var(--image-border-radius, 4px)}.media-item__image,.media-item__video{width:100%;height:100%;object-fit:cover;object-position:center;display:block;border-radius:var(--image-border-radius, 4px)}.media-item__placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background-color:#f5f5f5;border-radius:4px}.media-item__placeholder-text{font-size:16px;color:#999}.media-item__content{margin-top:24px;display:flex;flex-direction:column;gap:8px}.media-item__title{font-size:20px;font-weight:var(--font-weight-bold, 700);line-height:1.2;margin:0;color:#181818;letter-spacing:var(--letter-spacing-body, 0)}.media-item__description{font-size:14px;line-height:1.5;margin:0;color:#181818;letter-spacing:var(--letter-spacing-body, 0);font-weight:var(--font-weight-regular, 400)}.media-item__number{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border:1px solid currentColor;border-radius:50%;font-family:var(--font-accent-family);font-style:var(--font-accent-style);font-size:18px;line-height:1}.media-item__lines{list-style:none;margin:6px 0 0;padding:8px 0 0;border-top:1px solid rgba(255,255,255,.6)}.media-item__lines li{padding:7px 0}.media-item__lines li+li{border-top:1px solid rgba(255,255,255,.25)}.media-item__icon-list{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:var(--list-item-gap, 8px)}.media-item__icon-list .media-item__description{display:flex;align-items:flex-start;gap:10px;margin:0!important;text-align:left!important}.media-item__list-icon{flex:0 0 auto;display:inline-flex;width:var(--list-icon-size, 18px);height:var(--list-icon-size, 18px);margin-top:calc((1.5em - var(--list-icon-size, 18px)) / 2);color:var(--list-icon-color, #e41e1e)}.media-item__list-icon svg{width:100%;height:100%;display:block}.media-item__divider{width:50%;height:2px;background-color:#000;margin:12px auto}.media-item--card{background-color:#fff;border:1px solid #e5e7eb;border-radius:4px;padding:20px 18px}.media-item--card .media-item__content{margin-top:20px}@media(max-width:1024px){.media-grid{--media-grid-padding: 60px 30px;--media-grid-gap: 30px}.media-grid__items{grid-template-columns:repeat(2,1fr)}.media-grid__items[data-columns="1"]{grid-template-columns:repeat(1,1fr)}.media-grid__items[data-columns="2"],.media-grid__items[data-columns="3"],.media-grid__items[data-columns="4"],.media-grid__items[data-columns="5"],.media-grid__items[data-columns="6"]{grid-template-columns:repeat(2,1fr)}}@media(max-width:749px){.media-grid{--media-grid-padding: 60px 20px;--media-grid-gap: 30px}.media-grid__items{grid-template-columns:repeat(2,1fr)}.media-item__title{font-size:18px}.media-item__description{font-size:14px}}@media(max-width:480px){.media-grid__items--single-column{grid-template-columns:repeat(1,1fr)}.media-grid__items--single-column .media-item{text-align:center}}.media-item{animation:fadeInUp .6s ease-out forwards;animation-delay:calc(.1s * var(--index, 0))}.media-item[data-index="1"]{--index: 1}.media-item[data-index="2"]{--index: 2}.media-item[data-index="3"]{--index: 3}.media-item[data-index="4"]{--index: 4}.media-item[data-index="5"]{--index: 5}.media-item[data-index="6"]{--index: 6} #media-template--21692356886685__benefits article[data-custom-image="true"] .media-item__image{position:static;max-width:100%;width:100%;height:100%;object-fit:cover} /* END_SECTION:br-benefits */ /* START_SECTION:br-comparison (INDEX:4) */ #shopify-section-template--21692356886685__comparison .comparison-section {background-color: #ffffff; --sticky-col-bg: #ffffff; padding-top: 40px; padding-bottom: 40px; padding-left: 20px; padding-right: 20px; } @media screen and (max-width: 749px) { #shopify-section-template--21692356886685__comparison .comparison-section { padding-top: 32px; padding-bottom: 32px; padding-left: 12px; padding-right: 0; } #shopify-section-template--21692356886685__comparison .comparison-text-column-wrapper { padding-right: 12px; } #shopify-section-template--21692356886685__comparison .comparison-text-column { padding-right: 20px; } } #shopify-section-template--21692356886685__comparison .comparison-container { max-width: 900px; } #shopify-section-template--21692356886685__comparison .comparison-table { table-layout: fixed; width: 100%; } #shopify-section-template--21692356886685__comparison .feature-header, #shopify-section-template--21692356886685__comparison .feature-cell { width: 22%; } #shopify-section-template--21692356886685__comparison .product-header, #shopify-section-template--21692356886685__comparison .value-cell { width: 26%; } @media (max-width: 991px) { #shopify-section-template--21692356886685__comparison .comparison-container { max-width: 100%; } #shopify-section-template--21692356886685__comparison .feature-header, #shopify-section-template--21692356886685__comparison .feature-cell { width: 25%; font-size: 11px; } #shopify-section-template--21692356886685__comparison .product-header, #shopify-section-template--21692356886685__comparison .value-cell { width: 25%; } #shopify-section-template--21692356886685__comparison .comparison-product-title { font-size: 11px; } #shopify-section-template--21692356886685__comparison .product-subtitle { font-size: 9px; } #shopify-section-template--21692356886685__comparison .comparison-img { max-height: 50px; } } @media (max-width: 600px) { #shopify-section-template--21692356886685__comparison .feature-header, #shopify-section-template--21692356886685__comparison .feature-cell { width: 28%; font-size: 10px; padding: 8px 5px; } #shopify-section-template--21692356886685__comparison .product-header, #shopify-section-template--21692356886685__comparison .value-cell { width: 24%; padding: 8px 5px; } #shopify-section-template--21692356886685__comparison .comparison-product-title { font-size: 10px; } #shopify-section-template--21692356886685__comparison .product-subtitle { font-size: 8px; padding: 2px 4px; } #shopify-section-template--21692356886685__comparison .comparison-img { max-height: 40px; } } #shopify-section-template--21692356886685__comparison .comparison-layout { display: flex; flex-direction: column; gap: var(--section-header-spacing-mobile, 28px); width: 100%; } #shopify-section-template--21692356886685__comparison .comparison-text-column-wrapper { width: 100%; } #shopify-section-template--21692356886685__comparison .comparison-text-column { width: 100%; text-align: center; padding-left: 20px; padding-right: 20px; } #shopify-section-template--21692356886685__comparison .comparison-desktop-description { display: none; margin-top: 15px; letter-spacing: var(--letter-spacing-body); font-size: 14px; line-height: 1.5; } #shopify-section-template--21692356886685__comparison .comparison-table-column { width: 100%; flex: 1; } @media screen and (min-width: 750px) { #shopify-section-template--21692356886685__comparison .comparison-layout { gap: var(--section-header-spacing, 40px); } } @media screen and (min-width: 990px) { #shopify-section-template--21692356886685__comparison .table-wrapper { width: 100%; } #shopify-section-template--21692356886685__comparison .comparison-desktop-description { display: block; font-size: 16px; } #shopify-section-template--21692356886685__comparison .comparison-text-column { padding-left: 0px; padding-right: 0px; } #shopify-section-template--21692356886685__comparison .comparison-table-column { width: auto; } #shopify-section-template--21692356886685__comparison .comparison-layout { flex-direction: row; align-items: stretch; gap: 4rem; min-height: 400px; } #shopify-section-template--21692356886685__comparison .comparison-text-column-wrapper { flex: 1; max-width: 40%; order: 1; align-self: stretch; display: flex; flex-direction: column; justify-content: center; align-items: center; } #shopify-section-template--21692356886685__comparison .comparison-text-column { width: auto; } #shopify-section-template--21692356886685__comparison .comparison-table-column { flex: 0 0 60%; max-width: 60%; order: 2; } } @media screen and (min-width: 990px) { #shopify-section-template--21692356886685__comparison .product-header { padding: 12px 6px; width: 35px; } #shopify-section-template--21692356886685__comparison .feature-cell { padding: 10px 6px; } #shopify-section-template--21692356886685__comparison .feature-header { width: 100px; padding: 10px 6px; } #shopify-section-template--21692356886685__comparison .value-cell { padding: 10px 6px; width: 35px; } #shopify-section-template--21692356886685__comparison .comparison-img-wrapper { margin-bottom: 8px; } #shopify-section-template--21692356886685__comparison .comparison-product-title { margin-bottom: 4px; } } #shopify-section-template--21692356886685__comparison .comparison-heading { font-family: var(--font-heading-family); font-weight: var(--font-weight-bold); font-style: var(--font-heading-style); letter-spacing: var(--font-heading-letter-spacing); text-transform: var(--font-heading-text-transform); } #shopify-section-template--21692356886685__comparison .comparison-heading .accent-text { line-height: 1; margin-left: 10px; font-family: var(--font-accent-family); font-style: var(--font-accent-style); font-weight: var(--font-accent-weight); letter-spacing: var(--font-accent-letter-spacing); text-transform: var(--font-accent-text-transform); color: #668aba; } #shopify-section-template--21692356886685__comparison .comparison-product-title { font-size: 15px; } #shopify-section-template--21692356886685__comparison .product-subtitle { font-size: 12px; } #shopify-section-template--21692356886685__comparison .feature-name { font-size: 16px; } #shopify-section-template--21692356886685__comparison .text-value { font-size: 14px; letter-spacing: var(--letter-spacing-body); } #shopify-section-template--21692356886685__comparison .text-value--under-icon { display: block; margin-top: 4px; line-height: 1.3; } #shopify-section-template--21692356886685__comparison .check-yes svg, #shopify-section-template--21692356886685__comparison .check-no svg, #shopify-section-template--21692356886685__comparison .check-yes .custom-check-icon, #shopify-section-template--21692356886685__comparison .check-no .custom-check-icon { width: 24px; height: 24px; } #shopify-section-template--21692356886685__comparison .check-yes .custom-check-icon, #shopify-section-template--21692356886685__comparison .check-no .custom-check-icon { object-fit: contain; } #shopify-section-template--21692356886685__comparison .feature-icon { color: #8c8c8c; } #shopify-section-template--21692356886685__comparison .check-yes { color: #006f06; } #shopify-section-template--21692356886685__comparison .check-no { color: #800000; } #shopify-section-template--21692356886685__comparison .value-cell.highlighted .check-yes { color: #ffffff; } #shopify-section-template--21692356886685__comparison .value-cell.highlighted .check-no { color: #ffffff; } #shopify-section-template--21692356886685__comparison .table-header th, #shopify-section-template--21692356886685__comparison .feature-row td { border-bottom: 1px solid #e9e9e9; } #shopify-section-template--21692356886685__comparison td.highlighted, #shopify-section-template--21692356886685__comparison th.highlighted { border-bottom-color: rgba(255, 255, 255, 0.15) !important; } #shopify-section-template--21692356886685__comparison .product-header.highlighted::before, #shopify-section-template--21692356886685__comparison .value-cell.highlighted::before {background-image: linear-gradient(75deg, #5b7394 0%, #c7d9f1 100%); background-size: 100% var(--highlight-col-height, 100%); background-position: 0 var(--highlight-bg-offset, 0px); background-repeat: no-repeat;} #shopify-section-template--21692356886685__comparison .product-header.highlighted::before { border-radius: 4px 4px 0 0; top: 0px; } #shopify-section-template--21692356886685__comparison tr:last-child .value-cell.highlighted::before { border-radius: 0 0 4px 4px; } #shopify-section-template--21692356886685__comparison .product-header.highlighted::after { border-radius: 4px 4px 0 0; top: 0px; } #shopify-section-template--21692356886685__comparison tr:last-child .value-cell.highlighted::after { border-radius: 0 0 4px 4px; } #shopify-section-template--21692356886685__comparison .product-header.highlighted::after, #shopify-section-template--21692356886685__comparison .value-cell.highlighted::after { box-shadow: none !important; }#shopify-section-template--21692356886685__comparison .comparison-img-wrapper { min-height: 80px; } #shopify-section-template--21692356886685__comparison .comparison-img { max-height: 80px; } #shopify-section-template--21692356886685__comparison .comparison-img--placeholder { width: 80px; height: 80px; } @media (max-width: 749px) {#shopify-section-template--21692356886685__comparison .comparison-table { min-width: 360px; } #shopify-section-template--21692356886685__comparison .feature-header, #shopify-section-template--21692356886685__comparison .feature-cell { width: 105px !important; } #shopify-section-template--21692356886685__comparison .product-header, #shopify-section-template--21692356886685__comparison .value-cell { width: 85px !important; } #shopify-section-template--21692356886685__comparison .comparison-product-title { font-size: 13px; } #shopify-section-template--21692356886685__comparison .product-subtitle { font-size: 10px; } #shopify-section-template--21692356886685__comparison .feature-name { font-size: 12px; } #shopify-section-template--21692356886685__comparison .text-value { font-size: 11px; } #shopify-section-template--21692356886685__comparison .check-yes svg, #shopify-section-template--21692356886685__comparison .check-no svg, #shopify-section-template--21692356886685__comparison .check-yes .custom-check-icon, #shopify-section-template--21692356886685__comparison .check-no .custom-check-icon { width: 20px; height: 20px; } #shopify-section-template--21692356886685__comparison .comparison-img-wrapper { min-height: 50px; } #shopify-section-template--21692356886685__comparison .comparison-img { max-height: 50px; } #shopify-section-template--21692356886685__comparison .comparison-img--placeholder { width: 50px; height: 50px; } #shopify-section-template--21692356886685__comparison tr:last-child .feature-cell::after { content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 17px; background-color: var(--sticky-col-bg, #fff); } } #shopify-section-template--21692356886685__comparison h3 {font-weight: 500;} #shopify-section-template--21692356886685__comparison .elxr-section-header__eyebrow {color: #668aba;} #shopify-section-template--21692356886685__comparison .br-comparison-value {position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:10px} #shopify-section-template--21692356886685__comparison .br-comparison-status {display:block;flex:none;width:24px;height:24px;color:#748091} #shopify-section-template--21692356886685__comparison .highlighted .br-comparison-status {color:#fff} #shopify-section-template--21692356886685__comparison .br-comparison-value p {margin:0;font-size:18px;line-height:1.55;color:inherit} #shopify-section-template--21692356886685__comparison .comparison-container {max-width:1200px} #shopify-section-template--21692356886685__comparison .comparison-product-title {white-space:normal;overflow-wrap:normal;line-height:1.4} #shopify-section-template--21692356886685__comparison .feature-header, #shopify-section-template--21692356886685__comparison .feature-cell {width:22%!important} #shopify-section-template--21692356886685__comparison .product-header, #shopify-section-template--21692356886685__comparison .value-cell {width:26%!important} @media(min-width:990px) { #shopify-section-template--21692356886685__comparison .comparison-layout {gap:32px} #shopify-section-template--21692356886685__comparison .comparison-text-column-wrapper {max-width:28%} #shopify-section-template--21692356886685__comparison .comparison-table-column {flex:0 0 72%;max-width:72%} } @media(max-width:749px) { #shopify-section-template--21692356886685__comparison .comparison-table {min-width:680px} } .comparison-section{padding:40px 20px;font-family:var(--font-body-family-override);letter-spacing:var(--letter-spacing-heading);position:relative;z-index:1;overflow:visible}.comparison-section *{--border-shadow-offset: 0 !important;box-shadow:none!important}.comparison-container{margin:0 auto;position:relative;overflow:visible;height:auto}.table-wrapper{width:100%;overflow-x:visible;overflow-y:visible}.comparison-heading{font-weight:var(--font-weight-bold);letter-spacing:var(--letter-spacing-heading)}.global-accent-text{margin-left:2px;font-family:var(--font-accent-family, var(--accent-text-font-family, var(--font-body-family)))!important;font-style:var(--font-accent-style, normal)!important;font-weight:var(--font-accent-weight, 400)!important;letter-spacing:var(--letter-spacing-heading)!important}.comparison-subheading{font-weight:var(--font-weight-regular);letter-spacing:var(--letter-spacing-body);max-width:700px}.comparison-table{width:100%;border-collapse:separate;border-spacing:0;position:relative;table-layout:fixed;margin:0 auto}.table-header th{position:relative;overflow:visible}.product-header{padding:20px 12px;text-align:center;width:140px}.comparison-img-wrapper{margin-bottom:15px;display:flex;justify-content:center;align-items:center}.comparison-img{max-width:100%;height:auto;max-height:80px;border-radius:4px;object-fit:contain;background:#fff0}.comparison-img--placeholder{width:80px;height:80px;display:flex;align-items:center;justify-content:center;background:#f0f0f0;border-radius:4px}.comparison-img--placeholder .placeholder-svg{width:60%;height:60%;fill:#0003}.feature-header{text-align:left;width:180px;position:relative;z-index:1}.comparison-product-title{font-weight:var(--font-weight-regular);line-height:1.2;letter-spacing:var(--letter-spacing-body);margin-bottom:6px;white-space:nowrap}.comparison-product-title strong,.comparison-product-title b{font-weight:var(--font-weight-bold)}.product-subtitle{font-weight:var(--font-weight-regular);letter-spacing:var(--letter-spacing-body);display:inline-flex;align-items:center;justify-content:center;margin-top:5px;gap:0;padding:0 10px;background:#fff3;border-radius:16px;box-shadow:0 4px 30px #0000001a;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);border:1px solid rgb(255 255 255 / .3)}.product-subtitle p{margin:0}.product-subtitle.no-background{background:#fff0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;border:none;padding:0}.subtitle-icon{display:inline-flex;align-items:center;justify-content:center;margin-right:4px;vertical-align:middle;line-height:1}.subtitle-icon svg{width:13px;height:13px;display:block;overflow:visible}.feature-icon{margin-right:14px;width:24px;height:24px;display:flex;align-items:center}[dir=rtl] .feature-icon{margin-left:14px}.feature-icon svg{width:24px;height:24px;stroke:currentColor}.close-icon{color:#000}.check-icon{color:#fff!important}.feature-cell{padding:16px 12px;text-align:left;position:relative;z-index:1}.feature-content{display:flex;flex-direction:row;align-items:center}.feature-name{font-weight:var(--font-weight-regular);line-height:1.4;letter-spacing:var(--letter-spacing-body)}.value-cell{padding:16px 12px;text-align:center;vertical-align:middle;position:relative;z-index:1}.check-yes{font-size:24px;font-weight:var(--font-weight-bold);display:inline-flex;align-items:center;justify-content:center}.check-yes svg{width:28px;height:28px}.check-no{font-size:24px;font-weight:var(--font-weight-bold);display:inline-flex;align-items:center;justify-content:center}.check-no svg{width:28px;height:28px}.product-header.highlighted{position:relative;z-index:2;border:none!important}.product-header.highlighted:before,.value-cell.highlighted:before{content:"";position:absolute;top:-1px;left:-1px;right:-1px;bottom:-1px;z-index:-1}.value-cell.highlighted{position:relative;z-index:2;border:none!important}td.highlighted,th.highlighted{border-bottom:1px solid rgba(255,255,255,.2)!important}tr:last-child td,tr:last-child td.highlighted{border-bottom:0!important}tr:last-child .value-cell.highlighted:before{bottom:-16px}tr:last-child .value-cell.highlighted:after{bottom:-16px}.product-header.highlighted:after,.value-cell.highlighted:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;z-index:-2;box-shadow:0 5px 15px #00000014!important;pointer-events:none}.text-value{font-weight:var(--font-weight-regular);font-family:var(--font-body-family-override);letter-spacing:var(--letter-spacing-body)}@media(max-width:991px){.comparison-table{max-width:100%}.product-header{width:100px;padding:15px 8px}.feature-header{width:150px}.product-subtitle{padding:1px 8px}.subtitle-icon svg{width:12px;height:12px}.check-yes,.check-no{font-size:22px}.check-yes svg{width:24px;height:24px}.feature-cell,.value-cell{padding:12px 8px}.feature-icon,.feature-icon svg{width:20px;height:20px}}@media(max-width:800px){.feature-header{width:150px}.product-header{width:100px;padding:14px 6px}.feature-cell,.value-cell{width:100px;padding:12px 6px}.feature-icon{margin-right:12px}}@media(max-width:749px){.table-wrapper{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-top:2px;padding-bottom:20px}.comparison-table{table-layout:fixed!important;width:100%!important;min-width:0}.feature-header,.feature-cell{width:130px!important;position:sticky!important;left:0;z-index:3;background-color:var(--sticky-col-bg, #fff)}.product-header.highlighted:before,.value-cell.highlighted:before{left:0;right:0}.product-header,.value-cell{width:140px!important}.comparison-product-title{white-space:normal;overflow-wrap:break-word}.subtitle-icon svg{width:11px;height:11px}.feature-content{flex-direction:row!important;align-items:center!important}.feature-icon{margin-right:12px!important;margin-bottom:0!important;width:18px!important;height:18px!important}.feature-icon svg{width:18px!important;height:18px!important}}@media(max-width:480px){.product-header{width:80px;padding:12px 4px}.feature-cell,.value-cell{padding:10px 4px}.check-yes svg{width:22px;height:22px}.check-yes,.check-no{font-size:20px}}@media(max-width:479px){.feature-icon{width:16px!important;height:16px!important;margin-right:12px!important}.feature-icon svg{width:16px!important;height:16px!important}.product-subtitle{padding:1px 5px;border-radius:10px}.subtitle-icon svg{width:10px;height:10px}.check-yes svg{width:20px;height:20px}.check-yes,.check-no{font-size:18px}}@media(max-width:380px){.feature-icon{width:16px!important;height:16px!important;margin-right:12px!important}.feature-icon svg{width:16px!important;height:16px!important}.feature-name{line-height:1.2}.product-subtitle{padding:1px 5px;border-radius:10px}.subtitle-icon svg{width:10px;height:10px;margin-top:2px}.check-yes svg{width:20px;height:20px}.check-yes,.check-no{font-size:18px}} /* END_SECTION:br-comparison */ /* START_SECTION:br-custom-content (INDEX:5) */ .br-custom-content{background:var(--br-content-background);color:var(--br-content-color);padding:var(--br-content-top) 20px var(--br-content-bottom);text-align:var(--br-content-align)} .br-custom-content__inner{max-width:var(--br-content-width);margin:0 auto;display:grid;gap:20px} .br-custom-content h2{font:500 clamp(24px,4vw,36px)/1.2 var(--font-heading-family);color:inherit;margin:0} .br-custom-content p{font:400 18px/1.6 var(--font-body-family);color:inherit;margin:0 0 12px} .br-custom-content img,.br-custom-content video{max-width:100%;height:auto;border-radius:8px} .br-custom-content__button{display:inline-block;background:var(--br-content-accent);color:#fff;padding:14px 24px;border-radius:8px;text-decoration:none;font-weight:700} /* END_SECTION:br-custom-content */ /* START_SECTION:br-disclaimer (INDEX:6) */ #shopify-section-template--21692356886685__disclaimer { border-top: 1px solid #e9e9e9 !important; } .rich-text-section-template--21692356886685__disclaimer { padding-top: 30px; padding-bottom: 40px; padding-left: 20px; padding-right: 20px; background-color: #ffffff; } .rich-text-section-template--21692356886685__disclaimer .rich-text-title { color: #8c8c8c !important; font-family: var(--font-heading-family) !important; font-weight: var(--section-heading-weight, var(--font-weight-bold)) !important; letter-spacing: var(--letter-spacing-heading) !important; font-size: var(--section-heading-size); line-height: 1.3; margin-bottom: 0px; } .rich-text-section-template--21692356886685__disclaimer .rich-text-title .accent { color: #EF4A65 !important; display: inline-block; } .rich-text-section-template--21692356886685__disclaimer .rich-text-subtitle { color: #8c8c8c !important; font-size: var(--section-subtitle-size); line-height: 1.6; letter-spacing: var(--letter-spacing-body); margin-bottom: 0px; max-width: 900px; margin-left: auto; margin-right: auto; text-align: center; } .rich-text-section-template--21692356886685__disclaimer .rich-text-subtitle p { margin: 0 0 1rem 0; color: inherit !important; } .rich-text-section-template--21692356886685__disclaimer .rich-text-subtitle p:last-child { margin-bottom: 0; color: inherit !important; } .rich-text-section-template--21692356886685__disclaimer .rich-text-subtitle strong, .rich-text-section-template--21692356886685__disclaimer .rich-text-subtitle b, .rich-text-section-template--21692356886685__disclaimer .rte strong, .rich-text-section-template--21692356886685__disclaimer .rte b { font-weight: var(--font-weight-bold) !important; } .rich-text-section-template--21692356886685__disclaimer .page-width { padding: 0 !important; margin-left: auto !important; margin-right: auto !important; } .rich-text-section-template--21692356886685__disclaimer .rich-text__inner { display: flex; flex-direction: column; } .rich-text-section-template--21692356886685__disclaimer .rich-text__inner--mobile-left { align-items: flex-start; text-align: left; } .rich-text-section-template--21692356886685__disclaimer .rich-text__inner--mobile-center { align-items: center; text-align: center; } .rich-text-section-template--21692356886685__disclaimer .rich-text__inner--mobile-right { align-items: flex-end; text-align: right; } .rich-text-section-template--21692356886685__disclaimer .rich-text-button-wrapper:has(.elxr-bs--full) { align-self: stretch; } @media screen and (max-width: 749px) { .rich-text-section-template--21692356886685__disclaimer .rich-text-button-wrapper:has(.elxr-bs--full-mobile) { align-self: stretch; } } @media screen and (min-width: 750px) { .rich-text-section-template--21692356886685__disclaimer .rich-text__inner--desktop-left { align-items: flex-start; text-align: left; } .rich-text-section-template--21692356886685__disclaimer .rich-text__inner--desktop-center { align-items: center; text-align: center; } .rich-text-section-template--21692356886685__disclaimer .rich-text__inner--desktop-right { align-items: flex-end; text-align: right; } } @media screen and (max-width: 749px) { .rich-text-section-template--21692356886685__disclaimer { padding-top: 23px; padding-bottom: 30px; } .rich-text-section-template--21692356886685__disclaimer .rich-text-title { font-size: var(--section-heading-size-mobile); margin-bottom: 0px; } .rich-text-section-template--21692356886685__disclaimer .rich-text-subtitle { font-size: var(--section-subtitle-size-mobile); margin-bottom: 0px; max-width: 100%; margin-left: auto; margin-right: auto; text-align: center; } .rich-text-section-template--21692356886685__disclaimer .rich-text-button { margin-top: 18px; } } #shopify-section-template--21692356886685__disclaimer h3 {font-weight: 500;} #shopify-section-template--21692356886685__disclaimer .elxr-section-header__eyebrow {color: #668aba;} /* END_SECTION:br-disclaimer */ /* START_SECTION:br-faq (INDEX:7) */ #shopify-section-template--21692356886685__faq .store-faq-section { padding-top: 60px; padding-bottom: 60px; background-color: #ffffff; } #shopify-section-template--21692356886685__faq .store-faq-container { width: 100%; max-width: 900px; margin: 0 auto; padding-left: 16px; padding-right: 16px; box-sizing: border-box; } #shopify-section-template--21692356886685__faq .store-faq-heading { letter-spacing: var(--letter-spacing-heading); word-wrap: break-word; overflow-wrap: break-word; } #shopify-section-template--21692356886685__faq .store-faq-subtitle { font-weight: var(--font-weight-regular); letter-spacing: var(--letter-spacing-body); } #shopify-section-template--21692356886685__faq .store-faq-subtitle > *:first-child { margin-top: 0; } #shopify-section-template--21692356886685__faq .store-faq-subtitle > *:last-child { margin-bottom: 0; } #shopify-section-template--21692356886685__faq .store-faq { width: 100%; box-sizing: border-box; } #shopify-section-template--21692356886685__faq .store-faq-items-container { width: 100%; box-sizing: border-box; } #shopify-section-template--21692356886685__faq .store-faq-item { width: 100%; box-sizing: border-box; } #shopify-section-template--21692356886685__faq .store-faq-style-boxed { border: 1px solid rgba(0,0,0,0); border-radius: 4px; overflow: hidden; } #shopify-section-template--21692356886685__faq .store-faq-style-boxed .store-faq-item:not(:last-child) { border-bottom: 1px solid #e9e9e9; } #shopify-section-template--21692356886685__faq .store-faq-style-separated { display: flex; flex-direction: column; gap: 10px; } #shopify-section-template--21692356886685__faq .store-faq-style-separated .store-faq-item { border: 1px solid rgba(0,0,0,0); border-radius: 4px; overflow: hidden; background: #f5f5f5; } #shopify-section-template--21692356886685__faq .store-faq-style-filled { display: flex; flex-direction: column; gap: 10px; } #shopify-section-template--21692356886685__faq .store-faq-style-filled .store-faq-item { border-radius: 4px; overflow: hidden; background: #f5f5f5; } #shopify-section-template--21692356886685__faq .store-faq-style-filled .store-faq-question, #shopify-section-template--21692356886685__faq .store-faq-style-filled .store-faq-answer-wrap > .store-faq-answer { background: transparent; } #shopify-section-template--21692356886685__faq .store-faq-style-underline .store-faq-item:not(:last-child) { border-bottom: 1px solid #e9e9e9; } #shopify-section-template--21692356886685__faq .store-faq-question { display: flex; align-items: center; gap: 12px; padding: 18px; cursor: pointer; font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-body); font-size: 15px; font-family: inherit; width: 100%; box-sizing: border-box; text-align: left; border: none; color: #2a2a2a; background: #f5f5f5; appearance: none; -webkit-appearance: none; transition: background-color 180ms ease; } #shopify-section-template--21692356886685__faq .store-faq-question:hover { background: rgba(0, 0, 0, 0.025); } #shopify-section-template--21692356886685__faq .store-faq-question[aria-expanded='true'] { background: #f5f5f5; } #shopify-section-template--21692356886685__faq .store-faq-question[aria-expanded='true'] + .store-faq-answer-wrap .store-faq-answer { background: #f5f5f5; } #shopify-section-template--21692356886685__faq .store-faq-question:focus-visible { outline: 2px solid #0f0f0f; outline-offset: -2px; } #shopify-section-template--21692356886685__faq .store-faq-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; line-height: 1; } #shopify-section-template--21692356886685__faq .store-faq-icon svg { width: 22px; height: 22px; } #shopify-section-template--21692356886685__faq .store-faq-question-text { flex: 1; word-wrap: break-word; overflow-wrap: break-word; word-break: break-word; } #shopify-section-template--21692356886685__faq .store-faq-question-text > *, #shopify-section-template--21692356886685__faq .store-faq-question-text p { margin: 0; font: inherit; color: inherit; } #shopify-section-template--21692356886685__faq .store-faq-toggle { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; transition: transform 240ms ease; } #shopify-section-template--21692356886685__faq .store-faq-question[aria-expanded='true'] .store-faq-toggle { transform: rotate(45deg); } #shopify-section-template--21692356886685__faq .store-faq-answer-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 280ms ease; } #shopify-section-template--21692356886685__faq .store-faq-question[aria-expanded='true'] + .store-faq-answer-wrap { grid-template-rows: 1fr; } #shopify-section-template--21692356886685__faq .store-faq-answer-wrap > .store-faq-answer { min-height: 0; overflow: hidden; color: #6b6b6b; background: #f5f5f5; padding: 0 18px; transition: padding 280ms ease; letter-spacing: var(--letter-spacing-body); font-size: 14px; line-height: 1.5; word-wrap: break-word; overflow-wrap: break-word; } #shopify-section-template--21692356886685__faq .store-faq-question[aria-expanded='true'] + .store-faq-answer-wrap > .store-faq-answer { padding: 18px; } #shopify-section-template--21692356886685__faq .store-faq-answer > *:first-child { margin-top: 0; } #shopify-section-template--21692356886685__faq .store-faq-answer > *:last-child { margin-bottom: 0; } @media (prefers-reduced-motion: reduce) { #shopify-section-template--21692356886685__faq .store-faq-answer-wrap, #shopify-section-template--21692356886685__faq .store-faq-answer-wrap > .store-faq-answer, #shopify-section-template--21692356886685__faq .store-faq-toggle, #shopify-section-template--21692356886685__faq .store-faq-question { transition: none; } } @media screen and (min-width: 750px) { #shopify-section-template--21692356886685__faq .store-faq-container { padding-left: 20px; padding-right: 20px; } #shopify-section-template--21692356886685__faq .store-faq-question { font-size: 16px; } #shopify-section-template--21692356886685__faq .store-faq-answer-wrap > .store-faq-answer { font-size: 15px; } } #shopify-section-template--21692356886685__faq h3 {font-weight: 500;} #shopify-section-template--21692356886685__faq .elxr-section-header__eyebrow {color: #668aba;} /* END_SECTION:br-faq */ /* START_SECTION:br-gentle (INDEX:8) */ .custom-benefits-section-wrapper { background-color: #111111 !important; padding-top: 50px; padding-bottom: 50px; padding-left: 25px; padding-right: 25px; } @media screen and (min-width: 750px) { .custom-benefits-section-wrapper { } } @media screen and (max-width: 749px) { .custom-benefits-section-wrapper { } } .custom-content-column { position: relative; z-index: 1; } @media screen and (min-width: 750px) { .custom-benefits-container { flex-direction: row !important; align-items: center !important; gap: 40px !important; } .custom-header-section { display: none !important; } .custom-content-column, .custom-image-column { flex: 1 !important; order: 0 !important; } .custom-content-column { order: 2 !important; position: relative; z-index: 1; } .custom-image-column { order: 1 !important; position: relative; z-index: 1; } } .custom-benefits-section .global-accent-text, .custom-benefits-section-wrapper .global-accent-text { margin-left: 0px !important; color: #EF4A65 !important; font-family: var(--font-accent-family, var(--font-body-family)) !important; font-style: var(--font-accent-style, normal) !important; font-weight: var(--font-accent-weight, inherit) !important; letter-spacing: var(--font-accent-letter-spacing, inherit) !important; text-transform: var(--font-accent-text-transform, none) !important; } .custom-benefits-section-wrapper .product-benefits-heading { letter-spacing: var(--letter-spacing-heading) !important; font-weight: var(--font-weight-bold) !important; } .custom-benefits-section-wrapper .custom-subtitle { letter-spacing: var(--letter-spacing-body); } @media screen and (max-width: 749px) { .custom-benefits-section-wrapper .custom-section-header.desktop-header { display: none !important; } } .custom-benefits-section .custom-benefit-title, .custom-benefits-section-wrapper .custom-benefit-title, .custom-benefits-section-wrapper h3.custom-benefit-title { font-size: 16px !important; letter-spacing: var(--letter-spacing-body) !important; margin-bottom: 0px !important; font-weight: var(--font-weight-bold) !important; } .custom-benefits-section [data-block-id="benefit_DemaYd"] .custom-benefit-title, .custom-benefits-section-wrapper [data-block-id="benefit_DemaYd"] .custom-benefit-title, .custom-benefits-section-wrapper [data-block-id="benefit_DemaYd"] h3.custom-benefit-title { color: #ffffff !important; } .custom-benefits-section [data-block-id="benefit_VePMVc"] .custom-benefit-title, .custom-benefits-section-wrapper [data-block-id="benefit_VePMVc"] .custom-benefit-title, .custom-benefits-section-wrapper [data-block-id="benefit_VePMVc"] h3.custom-benefit-title { color: #ffffff !important; } .custom-benefits-section [data-block-id="benefit_4wBd9x"] .custom-benefit-title, .custom-benefits-section-wrapper [data-block-id="benefit_4wBd9x"] .custom-benefit-title, .custom-benefits-section-wrapper [data-block-id="benefit_4wBd9x"] h3.custom-benefit-title { color: #ffffff !important; } .custom-benefits-section [data-block-id="benefit_MBq3Kq"] .custom-benefit-title, .custom-benefits-section-wrapper [data-block-id="benefit_MBq3Kq"] .custom-benefit-title, .custom-benefits-section-wrapper [data-block-id="benefit_MBq3Kq"] h3.custom-benefit-title { color: #ffffff !important; } html body .custom-benefits-section .custom-benefit-title, html body .custom-benefits-section-wrapper .custom-benefit-title, html body .custom-benefits-section-wrapper h3.custom-benefit-title, html body .custom-benefits-section .custom-benefit-item .custom-benefit-title, html body .custom-benefits-section-wrapper .custom-benefit-item .custom-benefit-title { color: #EF4A65 !important; } html body .custom-benefits-section .custom-benefit-item:nth-child(1) .custom-benefit-title, html body .custom-benefits-section-wrapper .custom-benefit-item:nth-child(1) .custom-benefit-title { color: #ffffff !important; } html body .custom-benefits-section .custom-benefit-item:nth-child(2) .custom-benefit-title, html body .custom-benefits-section-wrapper .custom-benefit-item:nth-child(2) .custom-benefit-title { color: #ffffff !important; } html body .custom-benefits-section .custom-benefit-item:nth-child(3) .custom-benefit-title, html body .custom-benefits-section-wrapper .custom-benefit-item:nth-child(3) .custom-benefit-title { color: #ffffff !important; } html body .custom-benefits-section .custom-benefit-item:nth-child(4) .custom-benefit-title, html body .custom-benefits-section-wrapper .custom-benefit-item:nth-child(4) .custom-benefit-title { color: #ffffff !important; } .custom-benefits-section .custom-benefit-description, .custom-benefits-section-wrapper .custom-benefit-description { font-size: 12px !important; letter-spacing: var(--letter-spacing-body); } .custom-benefits-section .custom-benefits-list, .custom-benefits-section-wrapper .custom-benefits-list { background: rgba(255,255,255,0.06) !important; border-radius: 4px !important; padding: 20px !important; max-width: 450px !important; margin: 0 auto !important; border: 1px solid rgba(255,255,255,0.12) !important; position: static !important; z-index: auto !important; } @media screen and (min-width: 750px) { .custom-benefits-section .custom-benefit-title, .custom-benefits-section-wrapper .custom-benefit-title, .custom-benefits-section-wrapper h3.custom-benefit-title { font-size: 16px !important; } .custom-benefits-section .custom-benefit-description, .custom-benefits-section-wrapper .custom-benefit-description { font-size: 12px !important; } } .custom-feature-video { width: 100%; height: auto; border-radius: 8px; overflow: hidden; background: #000; margin-top: 0px; margin-bottom: 20px; } .custom-video-element { width: 100% !important; height: auto !important; display: block !important; border-radius: 8px !important; background: #000 !important; } .custom-section-image-container { margin-top: 0px; margin-bottom: 20px; position: relative; z-index: 1; } .custom-feature-image img, .custom-feature-video, .custom-video-element, .custom-placeholder-image svg { border-radius: 4px !important; } @media screen and (max-width: 749px) { .custom-benefits-section .custom-benefits-list, .custom-benefits-section-wrapper .custom-benefits-list { position: relative !important; z-index: 2 !important; } .custom-content-column { position: relative !important; z-index: 1 !important; } } #shopify-section-template--21692356886685__gentle h3 {font-weight: 500;} #shopify-section-template--21692356886685__gentle .elxr-section-header__eyebrow {color: #668aba;} .custom-benefits-section-wrapper,.custom-benefits-section-wrapper *{box-sizing:border-box}.custom-benefits-section-wrapper{display:block;width:100%}.custom-benefits-section{max-width:1200px;margin:0 auto;padding:0;width:100%;display:block}.custom-feature-image{width:100%;height:0;padding-bottom:100%;position:relative;border-radius:8px;overflow:hidden}.custom-feature-image img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;border-radius:8px}.custom-placeholder-image{width:100%;height:0;padding-bottom:100%;margin:0 auto;background-color:#f5f5f5;border-radius:8px;position:relative;overflow:hidden}.custom-placeholder-svg{position:absolute;top:0;left:0;width:100%;height:100%;fill:#d0d0d0}.custom-benefit-item{margin-bottom:17px}.custom-benefit-item:last-child{margin-bottom:0}.custom-benefit-header{display:flex;align-items:center;margin-bottom:5px}.custom-benefit-icon{margin-right:10px;flex-shrink:0;width:24px;height:24px}[dir=rtl] .custom-benefit-icon{margin-left:10px}.custom-benefit-icon svg{width:100%;height:100%;fill:currentColor}.custom-benefit-description-container{padding-left:0}.custom-benefit-description{margin:0}.custom-icon-image{width:100%;height:100%;object-fit:contain;display:block}.custom-benefits-container{display:flex;flex-direction:column;gap:20px}.custom-header-section{order:1}.custom-image-column{order:2}.custom-content-column{order:3}@media screen and (min-width:750px){.custom-benefits-container{flex-direction:row;align-items:center;gap:40px}.custom-header-section{display:none}.custom-content-column,.custom-image-column{flex:1;order:0}} /* END_SECTION:br-gentle */ /* START_SECTION:br-guarantee (INDEX:9) */ .guarantee-section { --section-background: #ffffff; --overflow-setting: hidden; --padding-top-no-photos-mobile: 15px; --padding-top-no-photos-desktop: 15px; --polaroid-size-mobile: 100px; --polaroid-size-desktop: 180px; --polaroid-z-index: auto; --mobile-photos-margin-top: -8px; --photos-margin-top: 12px; --photos-margin-bottom: -12px; --photos-z-index: 1; --content-padding-mobile: 0px; --content-padding-desktop: 20px; --content-width: 100%; --content-max-width: 300px; --content-max-width-no-photos: 450px; --layout-min-height-desktop: 320px; } .guarantee-section { background: var(--section-background); } .guarantee-section__wrapper { width: 100%; max-width: 100%; font-family: var(--font-body-family-override); font-weight: var(--font-weight-regular); box-sizing: border-box; letter-spacing: var(--letter-spacing-body); padding: 60px 40px; margin-top: var(--margin-top-mobile); margin-bottom: var(--margin-bottom-mobile); overflow: var(--overflow-setting); position: relative; } .guarantee-section__container { max-width: 1200px; margin: 0 auto; padding: 5px; background: linear-gradient(120deg, #5b7394 28%, #c7d9f1 100%); border-radius: 4px; } @media screen and (max-width: 749px) { .guarantee-section .guarantee-section__wrapper { padding: 10px 10px; } } .guarantee-icon-AUWFVKzhndFRTY3YzR__guarantee_icon { display: flex; align-items: center; justify-content: center; width: 90px; height: 90px; margin-bottom: 10px; overflow: visible; color: #ffffff; } .guarantee-icon-AUWFVKzhndFRTY3YzR__guarantee_icon svg { width: 100%; height: 100%; fill: currentColor; overflow: visible; } .guarantee-icon-AUWFVKzhndFRTY3YzR__guarantee_icon img { display: block; width: 100%; height: 100%; object-fit: contain; } .guarantee-heading-AR2lMNTJsOHNQM2J4R__guarantee_heading { margin-bottom: 0px; color: #ffffff; font-size: var(--section-heading-size-mobile); font-weight: var(--section-heading-weight, var(--font-weight-bold)); line-height: 1.3; letter-spacing: var(--letter-spacing-heading); } .guarantee-heading-AR2lMNTJsOHNQM2J4R__guarantee_heading .accent-text { display: inline-block; margin-left: 5px; font-family: var(--font-accent-family); font-style: var(--font-accent-style); font-weight: var(--font-accent-weight); color: #EF4A65; } @media (min-width: 750px) { .guarantee-heading-AR2lMNTJsOHNQM2J4R__guarantee_heading { margin-bottom: 0px; font-size: var(--section-heading-size); } } .guarantee-description-AVXJpSlc1cWJOOVpvS__guarantee_description { margin-bottom: 24px; color: rgba(255,255,255,0.85); font-size: var(--section-subtitle-size-mobile); line-height: 1.5; } @media (min-width: 750px) { .guarantee-description-AVXJpSlc1cWJOOVpvS__guarantee_description { max-width: 500px; margin-bottom: 20px; font-size: var(--section-subtitle-size); letter-spacing: var(--letter-spacing-body); } } .guarantee-button-AeXI4T25MallLTzljT__guarantee_button { gap: 8px; flex-wrap: wrap; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: 100%; max-width: 100%; text-align: center; text-decoration: none; cursor: pointer; transition: all 0.3s ease; padding: 16px 20px; border: none; border-radius: 3px; background-color: #ffffff; color: #111111; font-size: 16px; font-weight: var(--font-weight-semibold); letter-spacing: var(--global-button-letter-spacing, 1px); } .guarantee-button-AeXI4T25MallLTzljT__guarantee_button:is(:hover, :focus-visible) { background-color: #e6e6e6; color: #111111; } .guarantee-benefits-AT3Q4T29vb2ZCaUJua__guarantee_benefits { --guarantee-checkmark-color: #ffffff; display: flex; justify-content: center; width: 100%; margin-top: 8px; color: #ffffff; font-size: 12px; } @media (min-width: 750px) { .guarantee-benefits-AT3Q4T29vb2ZCaUJua__guarantee_benefits { margin-top: 10px; font-size: 14px; } } #shopify-section-template--21692356886685__guarantee h3 {font-weight: 500;} #shopify-section-template--21692356886685__guarantee .elxr-section-header__eyebrow {color: #668aba;} .guarantee-section{width:100%;max-width:100%;font-family:var(--font-body-family-override);font-weight:var(--font-weight-regular);box-sizing:border-box;letter-spacing:var(--letter-spacing-body);background:var(--section-background);padding-top:0;padding-bottom:0;margin-top:var(--margin-top-mobile);margin-bottom:var(--margin-bottom-mobile);overflow:var(--overflow-setting);position:relative;--font-fallback: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"}.guarantee-section__layout{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;max-width:500px;margin:0 auto;padding:25px 15px 30px;position:relative}.guarantee-section__layout.no-photos{padding-top:var(--padding-top-no-photos-mobile)}.guarantee-section__layout.no-photos .guarantee-section__content{max-width:450px;margin:0 auto}.guarantee-section__photos-left,.guarantee-section__photos-right{display:none}.guarantee-section__photos-mobile{display:flex;justify-content:center;position:relative;width:100%;max-width:250px;height:180px;margin-top:var(--mobile-photos-margin-top);margin-bottom:-40px;z-index:1}.guarantee-section__photos-mobile .polaroid-photo{position:absolute;transform-origin:center;box-shadow:0 4px 15px #00000026;width:var(--polaroid-size-mobile);height:calc(var(--polaroid-size-mobile) * 1.2);background:#fff;padding:8px 8px 15px}.guarantee-section__photos-mobile .polaroid-photo-1{transform:rotate(-8deg);left:0;z-index:1;top:0}.guarantee-section__photos-mobile .polaroid-photo-2{transform:rotate(0);left:50%;margin-left:calc(var(--polaroid-size-mobile) / -2);z-index:2;top:10px}.guarantee-section__photos-mobile .polaroid-photo-3{transform:rotate(8deg);right:80px;z-index:1;top:5px}.guarantee-section__photos-mobile .polaroid-photo-4{transform:rotate(8deg);right:0;z-index:1;top:0}.polaroid-photo{background:#fff;box-shadow:0 4px 12px #0000001a;padding:8px 8px 15px;width:var(--polaroid-size-mobile);height:calc(var(--polaroid-size-mobile) * 1.2);display:flex;flex-direction:column;border-radius:3px;overflow:hidden;position:relative;z-index:var(--polaroid-z-index)}.polaroid-photo img{width:calc(100% - 16px);height:calc(100% - 23px);object-fit:cover;border-radius:2px;display:block;position:absolute;top:8px;left:8px}.guarantee-section__content{display:flex;flex-direction:column;align-items:center;text-align:center;width:100%;padding-left:var(--content-padding-mobile);padding-right:var(--content-padding-mobile)}.guarantee-section__content--left{align-items:flex-start;text-align:left}.guarantee-section__content--inline-icon{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center;column-gap:10px;row-gap:10px}.guarantee-section__content--inline-icon.guarantee-section__content--left{justify-content:flex-start}.guarantee-section__content--inline-icon>.guarantee-section__icon{margin-bottom:0}.guarantee-section__content--inline-icon>.guarantee-section__heading{margin-top:0;margin-bottom:0}.guarantee-section__content--inline-icon>*:not(.guarantee-section__icon):not(.guarantee-section__heading){flex:0 0 100%}.benefit{padding:0 5px;display:flex;align-items:center;justify-content:center}.checkmark-icon{margin-right:4px;flex-shrink:0;color:var(--guarantee-checkmark-color)}[dir=rtl] .checkmark-icon{margin-left:4px}@media(min-width:750px){.guarantee-section{margin-top:var(--margin-top);margin-bottom:var(--margin-bottom)}.guarantee-section__photos-mobile{display:none}.guarantee-section__layout{flex-direction:row;justify-content:space-between;align-items:center;max-width:1200px;margin:0 auto;padding:0 30px;min-height:var(--layout-min-height-desktop, 320px);overflow:var(--overflow-setting)}.guarantee-section__layout.no-photos{padding-top:var(--padding-top-no-photos-desktop);padding-bottom:var(--padding-top-no-photos-desktop);justify-content:center}.guarantee-section__layout.no-photos .guarantee-section__content{width:100%;max-width:var(--content-max-width-no-photos);margin:0 auto}.guarantee-section__photos-left,.guarantee-section__photos-right{display:flex;flex-direction:column;gap:40px;width:25%;position:relative;margin-top:var(--photos-margin-top);margin-bottom:var(--photos-margin-bottom);z-index:var(--photos-z-index)}.guarantee-section__photos-left{padding-right:30px;align-items:flex-start}.guarantee-section__photos-right{padding-left:30px;align-items:flex-end}.guarantee-section__photos-left .polaroid-photo-1{transform:rotate(6deg);margin-left:5%}.guarantee-section__photos-left .polaroid-photo-2{transform:rotate(-5deg);margin-left:15%}.guarantee-section__photos-right .polaroid-photo-1{transform:rotate(-10deg);margin-right:15%}.guarantee-section__photos-right .polaroid-photo-2{transform:rotate(-6deg);margin-right:5%}.guarantee-section__photos-right .polaroid-photo-3{transform:rotate(8deg)}.guarantee-section__content{width:var(--content-width);max-width:var(--content-max-width);padding-left:var(--content-padding-desktop);padding-right:var(--content-padding-desktop)}.polaroid-photo{width:var(--polaroid-size-desktop);height:calc(var(--polaroid-size-desktop) * 1.2)}.checkmark-icon{width:14px;height:14px;margin-right:3px}} /* END_SECTION:br-guarantee */ /* START_SECTION:br-home-comparison (INDEX:11) */ #shopify-section-template--21949855957153__home_comparison .comparison-cols {background-color: #ffffff; padding-top: 40px; padding-bottom: 40px; padding-left: 20px; padding-right: 20px; } #shopify-section-template--21949855957153__home_comparison .comparison-cols__container { max-width: 900px; } #shopify-section-template--21949855957153__home_comparison .comparison-cols__grid { column-gap: 12px; padding-top: 0px; } #shopify-section-template--21949855957153__home_comparison .comparison-cols__description { display: block; font-size: 14px; } #shopify-section-template--21949855957153__home_comparison .comparison-cols__divider { display: block; } @media screen and (min-width: 990px) { #shopify-section-template--21949855957153__home_comparison .comparison-cols__description { display: block; font-size: 16px; } #shopify-section-template--21949855957153__home_comparison .comparison-cols__divider { display: block; } #shopify-section-template--21949855957153__home_comparison .comparison-cols__columns-col { max-width: 600px; margin: 0 auto; } #shopify-section-template--21949855957153__home_comparison .comparison-cols__layout { flex-direction: row; align-items: stretch; justify-content: center; gap: 56px; } #shopify-section-template--21949855957153__home_comparison .comparison-cols__text-col { flex: 0 0 45%; max-width: 45%; order: 2; text-align: center; display: flex; flex-direction: column; justify-content: center; } #shopify-section-template--21949855957153__home_comparison .comparison-cols__text-col .comparison-cols__divider, #shopify-section-template--21949855957153__home_comparison .comparison-cols__text-col .comparison-cols__description { margin-left: auto; margin-right: auto; } #shopify-section-template--21949855957153__home_comparison .comparison-cols__columns-col { flex: 1 1 auto; min-width: 0; margin: 0; order: 1; } } #shopify-section-template--21949855957153__home_comparison .comparison-cols__cell { padding: 10px 14px; } #shopify-section-template--21949855957153__home_comparison .comparison-cols__cell--head { padding-top: 20px; padding-bottom: 20px; } #shopify-section-template--21949855957153__home_comparison .comparison-cols__image { margin-bottom: 12px; } #shopify-section-template--21949855957153__home_comparison .comparison-cols__row-inner { gap: 6px; } #shopify-section-template--21949855957153__home_comparison .comparison-cols__icon { width: 20px; height: 20px; }#shopify-section-template--21949855957153__home_comparison .comparison-cols__heading .accent-text { color: #2b6fcd; } #shopify-section-template--21949855957153__home_comparison .comparison-cols__title { font-size: 20px; } #shopify-section-template--21949855957153__home_comparison .comparison-cols__subtitle { font-size: 13px; } #shopify-section-template--21949855957153__home_comparison .comparison-cols__text { font-size: 14px; } #shopify-section-template--21949855957153__home_comparison .comparison-cols__card--1 {background-color: #2b6fcd;border-radius: 8px;} #shopify-section-template--21949855957153__home_comparison .comparison-cols__col-1 { color: #ffffff;border-bottom: 1px solid #f1f5fa;} #shopify-section-template--21949855957153__home_comparison .comparison-cols__col-1.comparison-cols__cell--last { border-bottom: 0; } #shopify-section-template--21949855957153__home_comparison .comparison-cols__col-1 .comparison-cols__title { color: #ffffff; } #shopify-section-template--21949855957153__home_comparison .comparison-cols__col-1 .comparison-cols__subtitle { color: #ffffff; } #shopify-section-template--21949855957153__home_comparison .comparison-cols__col-1 .comparison-cols__icon { color: #ffffff; } #shopify-section-template--21949855957153__home_comparison .comparison-cols__col-1 .comparison-cols__image { height: 50px; } #shopify-section-template--21949855957153__home_comparison .comparison-cols__col-1 .comparison-cols__image > img { max-height: 110px; } #shopify-section-template--21949855957153__home_comparison .comparison-cols__col-1 .comparison-cols__image-placeholder { width: 110px; height: 110px; } @media screen and (max-width: 749px) { #shopify-section-template--21949855957153__home_comparison .comparison-cols__col-1 .comparison-cols__image { height: 30px; } #shopify-section-template--21949855957153__home_comparison .comparison-cols__col-1 .comparison-cols__image > img { max-height: 70px; } #shopify-section-template--21949855957153__home_comparison .comparison-cols__col-1 .comparison-cols__image-placeholder { width: 70px; height: 70px; } } #shopify-section-template--21949855957153__home_comparison .comparison-cols__card--2 {background-color: #f1f5fa;border-radius: 12px;} #shopify-section-template--21949855957153__home_comparison .comparison-cols__col-2 { color: #1a1a1a;border-bottom: 1px solid #ffffff;} #shopify-section-template--21949855957153__home_comparison .comparison-cols__col-2.comparison-cols__cell--last { border-bottom: 0; } #shopify-section-template--21949855957153__home_comparison .comparison-cols__col-2 .comparison-cols__title { color: #1a1a1a; } #shopify-section-template--21949855957153__home_comparison .comparison-cols__col-2 .comparison-cols__subtitle { color: #1a1a1a; } #shopify-section-template--21949855957153__home_comparison .comparison-cols__col-2 .comparison-cols__icon { color: #8a8a8a; } #shopify-section-template--21949855957153__home_comparison .comparison-cols__col-2 .comparison-cols__image { height: 50px; } #shopify-section-template--21949855957153__home_comparison .comparison-cols__col-2 .comparison-cols__image > img { max-height: 90px; } #shopify-section-template--21949855957153__home_comparison .comparison-cols__col-2 .comparison-cols__image-placeholder { width: 90px; height: 90px; } @media screen and (max-width: 749px) { #shopify-section-template--21949855957153__home_comparison .comparison-cols__col-2 .comparison-cols__image { height: 34px; } #shopify-section-template--21949855957153__home_comparison .comparison-cols__col-2 .comparison-cols__image > img { max-height: 60px; } #shopify-section-template--21949855957153__home_comparison .comparison-cols__col-2 .comparison-cols__image-placeholder { width: 60px; height: 60px; } } @media screen and (max-width: 749px) { #shopify-section-template--21949855957153__home_comparison .comparison-cols { padding-top: 32px; padding-bottom: 32px; padding-left: 16px; padding-right: 16px; } #shopify-section-template--21949855957153__home_comparison .comparison-cols__grid { column-gap: 8px; padding-top: 0px; } #shopify-section-template--21949855957153__home_comparison .comparison-cols__cell { padding: 10px 10px; } #shopify-section-template--21949855957153__home_comparison .comparison-cols__cell--head { padding-top: 16px; padding-bottom: 16px; } #shopify-section-template--21949855957153__home_comparison .comparison-cols__image { margin-bottom: 10px; } #shopify-section-template--21949855957153__home_comparison .comparison-cols__icon { width: 18px; height: 18px; } #shopify-section-template--21949855957153__home_comparison .comparison-cols__title { font-size: 17px; } #shopify-section-template--21949855957153__home_comparison .comparison-cols__subtitle { font-size: 11px; } #shopify-section-template--21949855957153__home_comparison .comparison-cols__text { font-size: 12px; } } .comparison-cols{position:relative;z-index:1;font-family:var(--font-body-family-override);letter-spacing:var(--letter-spacing-heading)}.comparison-cols__container{position:relative;z-index:1;margin:0 auto}.comparison-cols__layout{display:flex;flex-direction:column;gap:var(--section-header-spacing, 40px)}@media screen and (max-width:749px){.comparison-cols__layout{gap:var(--section-header-spacing-mobile, 28px)}}.comparison-cols__text-col,.comparison-cols__columns-col{width:100%}.comparison-cols__text-col{text-align:center}.comparison-cols__heading{font-family:var(--font-heading-family);font-style:var(--font-heading-style);font-weight:var(--font-weight-bold);letter-spacing:var(--font-heading-letter-spacing);text-transform:var(--font-heading-text-transform)}.comparison-cols__heading .accent-text{line-height:1}.comparison-cols__subheading{max-width:700px;font-weight:var(--font-weight-regular);letter-spacing:var(--letter-spacing-body)}.comparison-cols__description{max-width:700px;margin:12px auto 0;font-weight:var(--font-weight-regular);letter-spacing:var(--letter-spacing-body);line-height:1.5}.comparison-cols__subheading>p:first-child,.comparison-cols__description>p:first-child{margin-top:0}.comparison-cols__subheading>p:last-child,.comparison-cols__description>p:last-child{margin-bottom:0}.comparison-cols__divider{max-width:700px;margin:18px auto 0;border:0;height:0;background:none}.comparison-cols__divider+.comparison-cols__description{margin-top:18px}.comparison-cols__grid{display:grid;align-items:stretch}.comparison-cols__grid>.comparison-cols__card{display:block;z-index:0;pointer-events:none}.comparison-cols__cell{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.comparison-cols__cell--head{justify-content:flex-end}.comparison-cols__image{position:relative;width:100%}.comparison-cols__image>img,.comparison-cols__image>.comparison-cols__image-placeholder{position:absolute;bottom:0;left:50%;transform:translate(-50%);max-width:100%;object-fit:contain}.comparison-cols__image>img{display:block;height:auto}.comparison-cols__image-placeholder{display:flex;align-items:center;justify-content:center;background:#0000000f;border-radius:4px}.comparison-cols__image-placeholder .placeholder-svg{width:60%;height:60%;fill:#0003}.comparison-cols__title{font-weight:var(--font-weight-bold);line-height:1.2;letter-spacing:var(--letter-spacing-body)}.comparison-cols__subtitle{margin-top:4px;font-weight:var(--font-weight-regular);letter-spacing:var(--letter-spacing-body)}.comparison-cols__subtitle p{margin:0}.comparison-cols__row-inner{display:flex;align-items:center;justify-content:center}.comparison-cols__row-inner--above{flex-direction:column}.comparison-cols__row-inner--inline{flex-direction:row;justify-content:flex-start;text-align:left}.comparison-cols__cell--inline{align-items:stretch}.comparison-cols__icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:1}.comparison-cols__icon svg,.comparison-cols__icon img{display:block;width:100%;height:100%;object-fit:contain}.comparison-cols__text{font-weight:var(--font-weight-regular);line-height:1.35;letter-spacing:var(--letter-spacing-body)} /* END_SECTION:br-home-comparison */ /* START_SECTION:br-home-faq (INDEX:12) */ #shopify-section-template--21949855957153__home_faq .store-faq-section { padding-top: 60px; padding-bottom: 60px; background-color: #ffffff; } #shopify-section-template--21949855957153__home_faq .store-faq-container { width: 100%; max-width: 900px; margin: 0 auto; padding-left: 16px; padding-right: 16px; box-sizing: border-box; } #shopify-section-template--21949855957153__home_faq .store-faq-heading { letter-spacing: var(--letter-spacing-heading); word-wrap: break-word; overflow-wrap: break-word; } #shopify-section-template--21949855957153__home_faq .store-faq-subtitle { font-weight: var(--font-weight-regular); letter-spacing: var(--letter-spacing-body); } #shopify-section-template--21949855957153__home_faq .store-faq-subtitle > *:first-child { margin-top: 0; } #shopify-section-template--21949855957153__home_faq .store-faq-subtitle > *:last-child { margin-bottom: 0; } #shopify-section-template--21949855957153__home_faq .store-faq { width: 100%; box-sizing: border-box; } #shopify-section-template--21949855957153__home_faq .store-faq-items-container { width: 100%; box-sizing: border-box; } #shopify-section-template--21949855957153__home_faq .store-faq-item { width: 100%; box-sizing: border-box; } #shopify-section-template--21949855957153__home_faq .store-faq-style-boxed { border: 1px solid rgba(0,0,0,0); border-radius: 8px; overflow: hidden; } #shopify-section-template--21949855957153__home_faq .store-faq-style-boxed .store-faq-item:not(:last-child) { border-bottom: 1px solid #1a1a1a; } #shopify-section-template--21949855957153__home_faq .store-faq-style-separated { display: flex; flex-direction: column; gap: 10px; } #shopify-section-template--21949855957153__home_faq .store-faq-style-separated .store-faq-item { border: 1px solid rgba(0,0,0,0); border-radius: 8px; overflow: hidden; background: #f1f5fa; } #shopify-section-template--21949855957153__home_faq .store-faq-style-filled { display: flex; flex-direction: column; gap: 10px; } #shopify-section-template--21949855957153__home_faq .store-faq-style-filled .store-faq-item { border-radius: 8px; overflow: hidden; background: #f5f5f5; } #shopify-section-template--21949855957153__home_faq .store-faq-style-filled .store-faq-question, #shopify-section-template--21949855957153__home_faq .store-faq-style-filled .store-faq-answer-wrap > .store-faq-answer { background: transparent; } #shopify-section-template--21949855957153__home_faq .store-faq-style-underline .store-faq-item:not(:last-child) { border-bottom: 1px solid #1a1a1a; } #shopify-section-template--21949855957153__home_faq .store-faq-question { display: flex; align-items: center; gap: 12px; padding: 18px; cursor: pointer; font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-body); font-size: 15px; font-family: inherit; width: 100%; box-sizing: border-box; text-align: left; border: none; color: #1a1a1a; background: #f1f5fa; appearance: none; -webkit-appearance: none; transition: background-color 180ms ease; } #shopify-section-template--21949855957153__home_faq .store-faq-question:hover { background: rgba(0, 0, 0, 0.025); } #shopify-section-template--21949855957153__home_faq .store-faq-question[aria-expanded='true'] { background: #f5f5f5; } #shopify-section-template--21949855957153__home_faq .store-faq-question[aria-expanded='true'] + .store-faq-answer-wrap .store-faq-answer { background: #f5f5f5; } #shopify-section-template--21949855957153__home_faq .store-faq-question:focus-visible { outline: 2px solid #111111; outline-offset: -2px; } #shopify-section-template--21949855957153__home_faq .store-faq-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; line-height: 1; } #shopify-section-template--21949855957153__home_faq .store-faq-icon svg { width: 22px; height: 22px; } #shopify-section-template--21949855957153__home_faq .store-faq-question-text { flex: 1; word-wrap: break-word; overflow-wrap: break-word; word-break: break-word; } #shopify-section-template--21949855957153__home_faq .store-faq-question-text > *, #shopify-section-template--21949855957153__home_faq .store-faq-question-text p { margin: 0; font: inherit; color: inherit; } #shopify-section-template--21949855957153__home_faq .store-faq-toggle { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; transition: transform 240ms ease; } #shopify-section-template--21949855957153__home_faq .store-faq-question[aria-expanded='true'] .store-faq-toggle { transform: rotate(45deg); } #shopify-section-template--21949855957153__home_faq .store-faq-answer-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 280ms ease; } #shopify-section-template--21949855957153__home_faq .store-faq-question[aria-expanded='true'] + .store-faq-answer-wrap { grid-template-rows: 1fr; } #shopify-section-template--21949855957153__home_faq .store-faq-answer-wrap > .store-faq-answer { min-height: 0; overflow: hidden; color: #1a1a1a; background: #f1f5fa; padding: 0 18px; transition: padding 280ms ease; letter-spacing: var(--letter-spacing-body); font-size: 14px; line-height: 1.5; word-wrap: break-word; overflow-wrap: break-word; } #shopify-section-template--21949855957153__home_faq .store-faq-question[aria-expanded='true'] + .store-faq-answer-wrap > .store-faq-answer { padding: 18px; } #shopify-section-template--21949855957153__home_faq .store-faq-answer > *:first-child { margin-top: 0; } #shopify-section-template--21949855957153__home_faq .store-faq-answer > *:last-child { margin-bottom: 0; } @media (prefers-reduced-motion: reduce) { #shopify-section-template--21949855957153__home_faq .store-faq-answer-wrap, #shopify-section-template--21949855957153__home_faq .store-faq-answer-wrap > .store-faq-answer, #shopify-section-template--21949855957153__home_faq .store-faq-toggle, #shopify-section-template--21949855957153__home_faq .store-faq-question { transition: none; } } @media screen and (min-width: 750px) { #shopify-section-template--21949855957153__home_faq .store-faq-container { padding-left: 20px; padding-right: 20px; } #shopify-section-template--21949855957153__home_faq .store-faq-question { font-size: 16px; } #shopify-section-template--21949855957153__home_faq .store-faq-answer-wrap > .store-faq-answer { font-size: 15px; } } /* END_SECTION:br-home-faq */ /* START_SECTION:br-home-guarantee (INDEX:13) */ .guarantee-section { --section-background: #f1f5fa; --overflow-setting: hidden; --padding-top-no-photos-mobile: 15px; --padding-top-no-photos-desktop: 15px; --polaroid-size-mobile: 100px; --polaroid-size-desktop: 180px; --polaroid-z-index: auto; --mobile-photos-margin-top: -8px; --photos-margin-top: 12px; --photos-margin-bottom: -12px; --photos-z-index: 1; --content-padding-mobile: 5px; --content-padding-desktop: 20px; --content-width: 100%; --content-max-width: 300px; --content-max-width-no-photos: 450px; --layout-min-height-desktop: 320px; } .guarantee-section { background: var(--section-background); } .guarantee-section__wrapper { width: 100%; max-width: 100%; font-family: var(--font-body-family-override); font-weight: var(--font-weight-regular); box-sizing: border-box; letter-spacing: var(--letter-spacing-body); padding: 60px 40px; margin-top: var(--margin-top-mobile); margin-bottom: var(--margin-bottom-mobile); overflow: var(--overflow-setting); position: relative; } .guarantee-section__container { } @media screen and (max-width: 749px) { .guarantee-section .guarantee-section__wrapper { padding: 40px 0px; } } .guarantee-icon-AalVFQU81NHpvREk2W__guarantee_icon { display: flex; align-items: center; justify-content: center; width: 90px; height: 90px; margin-bottom: 10px; overflow: visible; color: #000000; } .guarantee-icon-AalVFQU81NHpvREk2W__guarantee_icon svg { width: 100%; height: 100%; fill: currentColor; overflow: visible; } .guarantee-icon-AalVFQU81NHpvREk2W__guarantee_icon img { display: block; width: 100%; height: 100%; object-fit: contain; } .guarantee-heading-AbEV6am5ZakVCQnBkQ__guarantee_heading { margin-bottom: 0px; color: #1a1a1a; font-size: var(--section-heading-size-mobile); font-weight: var(--section-heading-weight, var(--font-weight-bold)); line-height: 1.3; letter-spacing: var(--letter-spacing-heading); } .guarantee-heading-AbEV6am5ZakVCQnBkQ__guarantee_heading .accent-text { display: inline-block; margin-left: 5px; font-family: var(--font-accent-family); font-style: var(--font-accent-style); font-weight: var(--font-accent-weight); color: #EF4A65; } @media (min-width: 750px) { .guarantee-heading-AbEV6am5ZakVCQnBkQ__guarantee_heading { margin-bottom: 0px; font-size: var(--section-heading-size); } } .guarantee-description-AZ3VHbTRGczkzSDUxT__guarantee_description { margin-bottom: 24px; color: #4a4a4a; font-size: var(--section-subtitle-size-mobile); line-height: 1.5; } @media (min-width: 750px) { .guarantee-description-AZ3VHbTRGczkzSDUxT__guarantee_description { max-width: 500px; margin-bottom: 20px; font-size: var(--section-subtitle-size); letter-spacing: var(--letter-spacing-body); } } .guarantee-button-AZEcyM1ZWTHJBMVpKe__guarantee_button { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: 100%; max-width: 100%; text-align: center; text-decoration: none; cursor: pointer; transition: all 0.3s ease; padding: 12px 20px; border: none; border-radius: 8px; background-color: #2b6fcd; color: #ffffff; font-size: 16px; font-weight: var(--font-weight-semibold); letter-spacing: var(--global-button-letter-spacing, 1px); } .guarantee-button-AZEcyM1ZWTHJBMVpKe__guarantee_button:is(:hover, :focus-visible) { background-color: #2258a3; color: #ffffff; } .guarantee-benefits-AMkpsOThuTHEvbk1wN__guarantee_benefits { --guarantee-checkmark-color: #2b6fcd; display: flex; justify-content: center; width: 100%; margin-top: 8px; color: #4a4a4a; font-size: 12px; } @media (min-width: 750px) { .guarantee-benefits-AMkpsOThuTHEvbk1wN__guarantee_benefits { margin-top: 10px; font-size: 14px; } } .guarantee-section{width:100%;max-width:100%;font-family:var(--font-body-family-override);font-weight:var(--font-weight-regular);box-sizing:border-box;letter-spacing:var(--letter-spacing-body);background:var(--section-background);padding-top:0;padding-bottom:0;margin-top:var(--margin-top-mobile);margin-bottom:var(--margin-bottom-mobile);overflow:var(--overflow-setting);position:relative;--font-fallback: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"}.guarantee-section__layout{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;max-width:500px;margin:0 auto;padding:25px 15px 30px;position:relative}.guarantee-section__layout.no-photos{padding-top:var(--padding-top-no-photos-mobile)}.guarantee-section__layout.no-photos .guarantee-section__content{max-width:450px;margin:0 auto}.guarantee-section__photos-left,.guarantee-section__photos-right{display:none}.guarantee-section__photos-mobile{display:flex;justify-content:center;position:relative;width:100%;max-width:250px;height:180px;margin-top:var(--mobile-photos-margin-top);margin-bottom:-40px;z-index:1}.guarantee-section__photos-mobile .polaroid-photo{position:absolute;transform-origin:center;box-shadow:0 4px 15px #00000026;width:var(--polaroid-size-mobile);height:calc(var(--polaroid-size-mobile) * 1.2);background:#fff;padding:8px 8px 15px}.guarantee-section__photos-mobile .polaroid-photo-1{transform:rotate(-8deg);left:0;z-index:1;top:0}.guarantee-section__photos-mobile .polaroid-photo-2{transform:rotate(0);left:50%;margin-left:calc(var(--polaroid-size-mobile) / -2);z-index:2;top:10px}.guarantee-section__photos-mobile .polaroid-photo-3{transform:rotate(8deg);right:80px;z-index:1;top:5px}.guarantee-section__photos-mobile .polaroid-photo-4{transform:rotate(8deg);right:0;z-index:1;top:0}.polaroid-photo{background:#fff;box-shadow:0 4px 12px #0000001a;padding:8px 8px 15px;width:var(--polaroid-size-mobile);height:calc(var(--polaroid-size-mobile) * 1.2);display:flex;flex-direction:column;border-radius:3px;overflow:hidden;position:relative;z-index:var(--polaroid-z-index)}.polaroid-photo img{width:calc(100% - 16px);height:calc(100% - 23px);object-fit:cover;border-radius:2px;display:block;position:absolute;top:8px;left:8px}.guarantee-section__content{display:flex;flex-direction:column;align-items:center;text-align:center;width:100%;padding-left:var(--content-padding-mobile);padding-right:var(--content-padding-mobile)}.guarantee-section__content--left{align-items:flex-start;text-align:left}.guarantee-section__content--inline-icon{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center;column-gap:10px;row-gap:10px}.guarantee-section__content--inline-icon.guarantee-section__content--left{justify-content:flex-start}.guarantee-section__content--inline-icon>.guarantee-section__icon{margin-bottom:0}.guarantee-section__content--inline-icon>.guarantee-section__heading{margin-top:0;margin-bottom:0}.guarantee-section__content--inline-icon>*:not(.guarantee-section__icon):not(.guarantee-section__heading){flex:0 0 100%}.benefit{padding:0 5px;display:flex;align-items:center;justify-content:center}.checkmark-icon{margin-right:4px;flex-shrink:0;color:var(--guarantee-checkmark-color)}[dir=rtl] .checkmark-icon{margin-left:4px}@media(min-width:750px){.guarantee-section{margin-top:var(--margin-top);margin-bottom:var(--margin-bottom)}.guarantee-section__photos-mobile{display:none}.guarantee-section__layout{flex-direction:row;justify-content:space-between;align-items:center;max-width:1200px;margin:0 auto;padding:0 30px;min-height:var(--layout-min-height-desktop, 320px);overflow:var(--overflow-setting)}.guarantee-section__layout.no-photos{padding-top:var(--padding-top-no-photos-desktop);padding-bottom:var(--padding-top-no-photos-desktop);justify-content:center}.guarantee-section__layout.no-photos .guarantee-section__content{width:100%;max-width:var(--content-max-width-no-photos);margin:0 auto}.guarantee-section__photos-left,.guarantee-section__photos-right{display:flex;flex-direction:column;gap:40px;width:25%;position:relative;margin-top:var(--photos-margin-top);margin-bottom:var(--photos-margin-bottom);z-index:var(--photos-z-index)}.guarantee-section__photos-left{padding-right:30px;align-items:flex-start}.guarantee-section__photos-right{padding-left:30px;align-items:flex-end}.guarantee-section__photos-left .polaroid-photo-1{transform:rotate(6deg);margin-left:5%}.guarantee-section__photos-left .polaroid-photo-2{transform:rotate(-5deg);margin-left:15%}.guarantee-section__photos-right .polaroid-photo-1{transform:rotate(-10deg);margin-right:15%}.guarantee-section__photos-right .polaroid-photo-2{transform:rotate(-6deg);margin-right:5%}.guarantee-section__photos-right .polaroid-photo-3{transform:rotate(8deg)}.guarantee-section__content{width:var(--content-width);max-width:var(--content-max-width);padding-left:var(--content-padding-desktop);padding-right:var(--content-padding-desktop)}.polaroid-photo{width:var(--polaroid-size-desktop);height:calc(var(--polaroid-size-desktop) * 1.2)}.checkmark-icon{width:14px;height:14px;margin-right:3px}} /* END_SECTION:br-home-guarantee */ /* START_SECTION:br-home-hero (INDEX:14) */ .custom-hero__rating-text p { margin: 0; } .custom-hero__rating-wrapper[data-block-id="rating_HAXr3R"] { margin-top: 0px; margin-bottom: 0px; display: flex; justify-content: center; } @media screen and (min-width: 750px) { .custom-hero__rating-wrapper[data-block-id="rating_HAXr3R"] { justify-content: flex-start; } } .custom-hero__rating-wrapper[data-block-id="rating_HAXr3R"] .custom-hero__rating-text { color: #1a1a1a; font-size: 14px; } .section-template--21949855957153__home_hero.custom-hero .custom-hero__title[data-block-id="heading_p9CVL9"], .section-template--21949855957153__home_hero.custom-hero .custom-hero__title.section-heading[data-block-id="heading_p9CVL9"], .custom-hero__content-wrapper .custom-hero__title[data-block-id="heading_p9CVL9"] { margin-top: 0px; margin-bottom: 16px;color: #1a1a1a !important; font-size: 54px; line-height: 1; text-align: left; } @media (max-width: 749px) { .section-template--21949855957153__home_hero.custom-hero .custom-hero__title[data-block-id="heading_p9CVL9"], .section-template--21949855957153__home_hero.custom-hero .custom-hero__title.section-heading[data-block-id="heading_p9CVL9"], .custom-hero__content-wrapper .custom-hero__title[data-block-id="heading_p9CVL9"] { font-size: 34px; line-height: 1.2; text-align: center; } } .section-template--21949855957153__home_hero.custom-hero .custom-hero__title[data-block-id="heading_p9CVL9"] .section-accent-text { margin-left: 0px; color: #2b6fcd; } .custom-hero__benefits[data-block-id="benefits_qzQFCD"] { margin-top: 0px; margin-bottom: 4px; padding-right: 0; } @media screen and (max-width: 749px) { .custom-hero__benefits[data-block-id="benefits_qzQFCD"] .custom-hero__benefit-item { font-size: 14px; } } .custom-hero__benefits[data-block-id="benefits_qzQFCD"] .custom-hero__benefit-item { color: #1a1a1a ; font-size: 14px; justify-content: flex-start; } .custom-hero__benefits[data-block-id="benefits_qzQFCD"] .custom-hero__benefit-icon { color: #2b6fcd ; font-size: 20px; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; } .custom-hero__benefits[data-block-id="benefits_qzQFCD"] .custom-hero__benefit-icon svg { width: 20px; height: 20px; fill: #2b6fcd ; } .custom-hero__benefits[data-block-id="benefits_qzQFCD"] .custom-hero__benefit-icon img { width: 20px; height: 20px; max-width: 20px; max-height: 20px; object-fit: contain; display: block; } .custom-hero__button-wrapper[data-block-id="button_pgbiCn"] { margin-top: 0px; margin-bottom: 24px; width: 100%; } .section-template--21949855957153__home_hero.custom-hero .custom-hero__button-wrapper[data-block-id="button_pgbiCn"], .custom-hero__content-wrapper .custom-hero__button-wrapper[data-block-id="button_pgbiCn"] { width: 100%; display: block; overflow: visible; max-width: 100%; } .section-template--21949855957153__home_hero.custom-hero .custom-hero__button-wrapper[data-block-id="button_pgbiCn"] .custom-hero__button, .section-template--21949855957153__home_hero.custom-hero .custom-hero__button-wrapper[data-block-id="button_pgbiCn"] .theme-button, .custom-hero__content-wrapper .custom-hero__button-wrapper[data-block-id="button_pgbiCn"] .custom-hero__button, .custom-hero__content-wrapper .custom-hero__button-wrapper[data-block-id="button_pgbiCn"] .theme-button { width: 100%; display: block; text-align: center; max-width: 100%; box-sizing: border-box; } @media (max-width: 749px) { .section-template--21949855957153__home_hero.custom-hero .custom-hero__button-wrapper[data-block-id="button_pgbiCn"], .custom-hero__content-wrapper .custom-hero__button-wrapper[data-block-id="button_pgbiCn"] { width: 100%; display: block; } .custom-hero .custom-hero__button-wrapper[data-block-id="button_pgbiCn"] .custom-hero__button, .custom-hero .custom-hero__button-wrapper[data-block-id="button_pgbiCn"] .theme-button, .custom-hero__content-wrapper .custom-hero__button-wrapper[data-block-id="button_pgbiCn"] .custom-hero__button, .custom-hero__content-wrapper .custom-hero__button-wrapper[data-block-id="button_pgbiCn"] .theme-button { width: 100%; display: block; text-align: center; max-width: none; } } .custom-hero__guarantee[data-block-id="guarantee_qPTVcT"] { margin-top: -20px; margin-bottom: 0px; text-align: center; justify-content: center ; } @media screen and (max-width: 749px) { .custom-hero__guarantee[data-block-id="guarantee_qPTVcT"] { text-align: center; justify-content: center ; } } .custom-hero__guarantee[data-block-id="guarantee_qPTVcT"] .custom-hero__guarantee-text { color: #1a1a1a; font-size: 12px; font-weight: var(--font-weight-regular); } .custom-hero__guarantee[data-block-id="guarantee_qPTVcT"] .custom-hero__guarantee-icon { color: #2b6fcd; width: 12px; height: 12px; } .custom-hero__guarantee[data-block-id="guarantee_qPTVcT"] .custom-hero__guarantee-icon svg { fill: #2b6fcd; stroke: #2b6fcd; width: 12px; height: 12px; } .custom-hero__guarantee[data-block-id="guarantee_qPTVcT"] .custom-hero__guarantee-icon-image { width: 12px; height: 12px; object-fit: contain; display: block; } @media screen and (min-width: 750px) { .section-template--21949855957153__home_hero.custom-hero { } } .section-template--21949855957153__home_hero.custom-hero { background-color: #ffffff; padding: 0px 0px; width: 100%; display: flex; justify-content: center; align-items: center; } @media screen and (max-width: 749px) { .section-template--21949855957153__home_hero.custom-hero { padding: 15px 15px; } } .custom-hero__container { } @media screen and (max-width: 749px) { .custom-hero__container { } } .custom-hero__flex { align-items: center; gap: 40px; min-height: 500px; } @media screen and (max-width: 749px) { .custom-hero__flex { gap: 20px; min-height: 650px; } } .custom-hero__image { border-radius: 8px; } .section-template--21949855957153__home_hero .custom-hero__svg { width: 100%; overflow: hidden; border-radius: 8px; } .section-template--21949855957153__home_hero .custom-hero__svg svg { display: block; width: 100%; height: auto; } .custom-hero__video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 8px; background-color: transparent; z-index: 2; } .custom-hero__video { -webkit-appearance: none; -moz-appearance: none; appearance: none; } .custom-hero__video::-webkit-media-controls { display: none !important; opacity: 0 !important; visibility: hidden !important; } .custom-hero__video::-webkit-media-controls-panel { display: none !important; opacity: 0 !important; visibility: hidden !important; } .custom-hero__video::-webkit-media-controls-play-button { display: none !important; opacity: 0 !important; visibility: hidden !important; } .custom-hero__video::-webkit-media-controls-start-playback-button { display: none !important; opacity: 0 !important; visibility: hidden !important; } .custom-hero__video::-webkit-media-controls-enclosure { display: none !important; } .custom-hero__video::-webkit-media-controls-timeline { display: none !important; } .custom-hero__video::-webkit-media-controls-current-time-display { display: none !important; } .custom-hero__video::-webkit-media-controls-time-remaining-display { display: none !important; } .custom-hero__video::-webkit-media-controls-mute-button { display: none !important; } .custom-hero__video::-webkit-media-controls-toggle-closed-captions-button { display: none !important; } .custom-hero__video::-webkit-media-controls-volume-slider { display: none !important; } .custom-hero__video::-webkit-media-controls-fullscreen-button { display: none !important; } .custom-hero__video::-moz-media-controls { display: none !important; } .custom-hero__video::-ms-media-controls { display: none !important; } .custom-hero__video[controls] { -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; } .custom-hero__video { opacity: 1; transition: opacity 0.3s ease-in-out; } .custom-hero__video.loaded { opacity: 1; } .custom-hero__video-container { position: relative; width: 100%; background-color: transparent; overflow: hidden; min-height: 300px; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; } @media screen and (min-width: 750px) { .custom-hero__video-container { min-height: 400px; } } @media screen and (max-width: 749px) { .custom-hero__video-container { min-height: 250px; } } .custom-hero__video-container::before { content: ""; position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border: 2px solid rgba(255, 255, 255, 0.2); border-top: 2px solid rgba(255, 255, 255, 0.6); border-radius: 50%; animation: videoLoadingSpin 1s linear infinite; z-index: 1; opacity: 1; transition: opacity 0.3s ease; } .custom-hero__video-container.video-loaded::before, .custom-hero__video-container.video-error::before { opacity: 0; } @keyframes videoLoadingSpin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .custom-hero__video-fallback { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 8px; opacity: 0; transition: opacity 0.3s ease-in-out; z-index: 1; } .custom-hero__video-container.video-error .custom-hero__video-fallback { opacity: 1; } .custom-hero__video-container.video-error .custom-hero__video { opacity: 0; } .custom-hero__content { padding: 30px 50px; text-align: left; display: flex; flex-direction: column; } .custom-hero__content-wrapper { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; flex: 1; width: 500px; max-width: 100%; gap: 0; } .custom-hero__content-wrapper > * { flex-shrink: 0; } .custom-hero__content-wrapper .custom-hero__badge-wrapper, .custom-hero__content-wrapper .custom-hero__rating-wrapper, .custom-hero__content-wrapper .custom-hero__benefits, .custom-hero__content-wrapper .custom-hero__button, .custom-hero__content-wrapper .custom-hero__guarantee { flex-shrink: 0; } .custom-hero__content-wrapper .custom-hero__subtitle p { margin: 0; padding: 0; } @media screen and (max-width: 749px) { .section-template--21949855957153__home_hero .custom-hero__content { padding: 0px 0px; text-align: center; display: flex; flex-direction: column; flex: 1; min-height: 200px; } .section-template--21949855957153__home_hero .custom-hero__content-wrapper { align-items: center; justify-content: flex-start; flex: 1; } .custom-hero__content-wrapper .custom-hero__subtitle p { margin: 0; padding: 0; } } .section-template--21949855957153__home_hero .custom-hero .custom-hero__badge , section.section-template--21949855957153__home_hero .custom-hero .custom-hero__badge , .section-template--21949855957153__home_hero .custom-hero .custom-hero__badge-wrapper .custom-hero__badge { letter-spacing: var(--letter-spacing-body); } .custom-hero .custom-hero__badge-icon svg { width: 100%; height: 100%; display: block; fill: currentColor; } .custom-hero .custom-hero__badge-icon img { width: 100%; height: 100%; object-fit: contain; } .custom-hero .custom-hero__rating-text { display: inline-block; letter-spacing: var(--letter-spacing-body); margin: 0 2px; vertical-align: middle; } .section-template--21949855957153__home_hero.custom-hero .custom-hero__title { font-family: var(--font-heading-family); font-weight: var(--font-weight-bold); font-size: var(--section-heading-size); letter-spacing: var(--letter-spacing-heading); overflow: visible; word-wrap: break-word; overflow-wrap: break-word; } .section-template--21949855957153__home_hero.custom-hero .custom-hero__subtitle, section.section-template--21949855957153__home_hero.custom-hero .custom-hero__subtitle, .custom-hero .custom-hero__content .custom-hero__subtitle, .custom-hero__container .custom-hero__content .custom-hero__subtitle { letter-spacing: var(--letter-spacing-body); word-wrap: break-word; overflow-wrap: break-word; } .custom-hero .custom-hero__subtitle p, section.custom-hero .custom-hero__subtitle p, .custom-hero .custom-hero__content .custom-hero__subtitle p, .custom-hero__container .custom-hero__content .custom-hero__subtitle p { margin: 0; padding: 0; } .section-template--21949855957153__home_hero.custom-hero .section-accent-text { padding-right: 4px; display: inline-block; max-width: 100%; white-space: nowrap; line-height: inherit; font-family: var(--font-accent-family, var(--font-body-family)); font-style: var(--font-accent-style, normal); font-weight: var(--font-accent-weight, 400); letter-spacing: var(--font-accent-letter-spacing, 0px); text-transform: var(--font-accent-text-transform, none); } .custom-hero__benefits { text-align: left; } .custom-hero__benefits[data-block-id="benefits_qzQFCD"] { display: flex; flex-wrap: wrap; gap: 0 5px; justify-content: flex-start; } @media screen and (max-width: 749px) { .custom-hero__benefits[data-block-id="benefits_qzQFCD"] { gap: 0 5px; justify-content: center; } } .custom-hero__button-wrapper[data-block-id="button_pgbiCn"] .custom-hero__button { display: inline-block; width: 100%; padding: var(--global-button-padding-y, 12px) 20px; letter-spacing: var(--global-button-letter-spacing, 1px); cursor: pointer; transition: all 0.3s ease; text-decoration: none; text-align: center; box-shadow: none; background: #2b6fcd; background-image: none; color: #ffffff; border-radius: 50px; font-size: 16px; font-weight: 700; text-transform: none; border: 1px solid #2b6fcd; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #2b6fcd; } @media screen and (max-width: 749px) { .custom-hero__button-wrapper[data-block-id="button_pgbiCn"] .custom-hero__button { font-size: 14px; } } .custom-hero__button-wrapper[data-block-id="button_pgbiCn"] .custom-hero__button:hover { background: #1a1a1a; background-image: none; color: #ffffff; transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); border: 1px solid #2b6fcd; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #2b6fcd; } .custom-hero .custom-hero__guarantee { width: 100%; } @media (max-width: 749px) { .custom-hero__flex { gap: 20px; } .custom-hero__content { order: 1; } .custom-hero__image-wrapper { order: 2; } } @media screen and (max-width: 749px) { .section-template--21949855957153__home_hero.custom-hero .custom-hero__title { font-family: var(--font-heading-family); font-weight: var(--font-weight-bold); font-size: var(--section-heading-size-mobile); overflow: visible; word-wrap: break-word; overflow-wrap: break-word; } } .custom-hero .custom-hero__badge, section.custom-hero .custom-hero__badge, .custom-hero .custom-hero__badge-wrapper .custom-hero__badge { letter-spacing: var(--letter-spacing-body); font-weight: var(--font-weight-bold); } .custom-hero__benefits { text-align: center; padding-right: 0; } .custom-hero .custom-hero__benefit-item { justify-content: center; } } .custom-hero__benefits { text-align: center; } .custom-hero .custom-hero__subtitle p { margin: 0; padding: 0; } .page-fade-in { opacity: 0; transform: translateY(20px); animation: fadeInUp 0.8s ease-out forwards; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .page-fade-in:nth-child(2) { animation-delay: 0.1s; } .page-fade-in:nth-child(3) { animation-delay: 0.2s; } .page-fade-in:nth-child(4) { animation-delay: 0.3s; } #shopify-section-template--21949855957153__home_hero .custom-hero__content {min-height: 200px !important;} .custom-hero__container{max-width:1200px;margin:0 auto;width:100%}.custom-hero__benefits{margin-top:20px;margin-bottom:20px}.custom-hero__flex{display:flex}.custom-hero__flex--image-left{flex-direction:row}.custom-hero__flex--image-right{flex-direction:row-reverse}.custom-hero__image-wrapper{width:50%;position:relative}.custom-hero__image{width:100%;height:auto;display:block}.custom-hero__content{width:50%;max-width:100%;padding:5px 0;overflow:hidden;box-sizing:border-box}.custom-hero__badge-wrapper{margin-bottom:5px;display:block;width:100%}.custom-hero__badge{display:inline-block;font-weight:var(--font-weight-semibold);margin-bottom:0;padding:2px 12px;border-radius:20px;display:block;width:fit-content}.custom-hero__rating-wrapper{display:block;width:100%;margin-bottom:8px}.custom-hero__rating-container{display:flex;align-items:center;margin-bottom:0;margin-top:0;padding:4px 0;border-radius:8px;display:inline-flex;clear:both;width:fit-content}.custom-hero__profile-images{--hero-avatar-overlap: calc(var(--hero-avatar-size, 24px) * -.35);display:flex;align-items:center;flex-shrink:0;margin-right:10px;position:relative;isolation:isolate}.custom-hero__profile-image{position:relative;width:var(--hero-avatar-size, 24px);height:var(--hero-avatar-size, 24px);border-radius:50%;border:2px solid #fff;margin-right:var(--hero-avatar-overlap);object-fit:cover;flex-shrink:0}.custom-hero__profile-image:nth-child(1){z-index:5}.custom-hero__profile-image:nth-child(2){z-index:4}.custom-hero__profile-image:nth-child(3){z-index:3}.custom-hero__profile-image:nth-child(4){z-index:2}.custom-hero__profile-image:nth-child(5){z-index:1}.custom-hero__profile-images.has-checkmark .custom-hero__profile-image:last-of-type{margin-right:0}.custom-hero__profile-check{position:absolute;top:calc(var(--hero-avatar-check-size, 18px) * -.3);right:calc(var(--hero-avatar-check-size, 18px) * -.3);width:var(--hero-avatar-check-size, 18px);height:var(--hero-avatar-check-size, 18px);line-height:0;z-index:6}.custom-hero__profile-check svg{width:100%;height:100%;display:block}.custom-hero__rating-stars{display:flex;margin-right:8px;font-size:15px;letter-spacing:1.5px}.hero-star-icon{margin-right:-4px}.custom-hero__star-half{position:relative;display:inline-block;margin-right:-4px;width:var(--hero-star-size, 16px);height:var(--hero-star-size, 16px)}.custom-hero__star-half .star-bg{position:absolute;top:0;left:0;fill:currentColor;opacity:.3;width:100%;height:100%}.custom-hero__star-half .star-fill{position:absolute;top:0;left:0;z-index:1;width:100%;height:100%}.custom-hero__star-half .hero-star-icon{width:100%;height:100%;margin-right:0;display:block}.custom-hero__rating-text{font-size:14px;font-weight:var(--font-weight-regular);margin-right:4px}.custom-hero__rating-label{font-size:14px;margin-right:5px}.custom-hero__rating-count{font-weight:var(--font-weight-regular);font-size:14px}.custom-hero__title{font-size:3.4rem;line-height:1.2;margin-bottom:2px;margin-top:-10px}.custom-hero__benefits{margin-bottom:20px;padding-right:50px}.custom-hero__benefit-item{display:flex;align-items:center;margin-bottom:5px;font-size:1.4rem;line-height:1.4;letter-spacing:var(--letter-spacing-body)}.custom-hero__benefit-icon{margin-right:4px;font-size:20px;min-width:24px;text-align:center;display:flex;align-items:center;justify-content:center}.custom-hero__benefit-icon svg{width:20px;height:20px;fill:currentColor}.custom-hero__button{display:inline-block;cursor:pointer;text-decoration:none;text-align:center;transition:all .3s ease;margin-bottom:5px}.custom-hero__social-proof{display:flex;align-items:center;margin-top:20px}.custom-hero__rating{display:flex;margin-right:6px}.custom-hero__star{font-size:16px;margin-right:3px}.custom-hero__review-count{font-size:14px}.custom-hero__guarantee{text-align:center;margin-top:1px;margin-bottom:12px}.custom-hero__guarantee-icon{display:inline-flex;vertical-align:middle;margin-right:5px;align-items:center;justify-content:center}.custom-hero__guarantee-icon svg{width:15px;height:15px;fill:currentColor}.custom-hero__guarantee-text{font-size:12px;letter-spacing:var(--letter-spacing-body);font-weight:var(--font-weight-regular);vertical-align:middle}@media(max-width:749px){.custom-hero__flex{flex-direction:column}.custom-hero__image-wrapper,.custom-hero__content{width:100%;padding-left:0;padding-right:0}.custom-hero__title{font-size:3.4rem;line-height:35px}.custom-hero__button,.custom-hero__guarantee{width:100%}.custom-hero__benefits{margin-top:10px;margin-bottom:20px}}@media(max-width:440px){.custom-hero__rating-container{max-width:380px}.custom-hero__rating-stars,.custom-hero__rating-text,.custom-hero__rating-label,.custom-hero__rating-count{font-size:11px}.custom-hero__benefits{margin-top:12px;margin-bottom:20px}} /* END_SECTION:br-home-hero */ /* START_SECTION:br-how-to-apply (INDEX:15) */ #media-template--21692356886685__how_to_apply { --media-grid-padding: 60px 20px 60px 20px; --media-grid-max-width: 1200px; --media-grid-gap: 20px 15px; --image-border-radius: 4px; --list-icon-color: #E41E1E; --list-icon-mark: #FFFFFF; --list-icon-size: 18px; --list-item-gap: 8px; background-color: #ffffff; } #media-template--21692356886685__how_to_apply .media-grid__heading { font-weight: var(--font-weight-bold, 700); letter-spacing: var(--letter-spacing-heading) !important; } #media-template--21692356886685__how_to_apply .media-grid__subtitle { font-weight: var(--font-weight-regular, 400); letter-spacing: var(--letter-spacing-body, 0); } #media-template--21692356886685__how_to_apply .media-grid__accent { padding: 0 4px; margin: 0 -4px; color: #EF4A65 !important; margin-left: 0px; font-family: var(--font-accent-family) !important; font-style: var(--font-accent-style) !important; font-weight: var(--font-accent-weight) !important; } #media-template--21692356886685__how_to_apply .media-item__media { border-radius: 4px !important; border-radius: 4px !important; background-color: #ffffff; } #media-template--21692356886685__how_to_apply .media-item__image, #media-template--21692356886685__how_to_apply .media-item__video { border-radius: 4px !important; border-radius: 4px !important; object-position: center; } #media-template--21692356886685__how_to_apply .media-item__placeholder { background-color: #f5f5f5; border-radius: 4px !important; border-radius: 4px !important; } #media-template--21692356886685__how_to_apply .media-item__placeholder-text { color: #8c8c8c; } #media-template--21692356886685__how_to_apply .media-item__content { margin-top: 14px !important; } #media-template--21692356886685__how_to_apply .media-item__title { color: #2a2a2a !important; font-size: 16px; margin-top: 0px; margin-bottom: 0px; text-align: left; } #media-template--21692356886685__how_to_apply .media-item__problem { margin: 0 0 calc(4px - 8px); color: #8a8a8a; font-size: 15px; line-height: 1.4; text-align: left; } #media-template--21692356886685__how_to_apply .media-item__problem s { text-decoration-line: line-through; text-decoration-color: #d64545; text-decoration-thickness: 1px; } #media-template--21692356886685__how_to_apply .media-item__solution { margin: 0; color: #2a2a2a; font-size: 18px; line-height: 1.45; text-align: left; } #media-template--21692356886685__how_to_apply .media-item__solution strong, #media-template--21692356886685__how_to_apply .media-item__solution b { color: #111111; font-weight: 700; } #media-template--21692356886685__how_to_apply .media-item__solution + .media-item__title, #media-template--21692356886685__how_to_apply .media-item__solution + .media-item__description { margin-top: 6px; } @media screen and (max-width: 749px) { #media-template--21692356886685__how_to_apply .media-item__problem { font-size: 14px; } #media-template--21692356886685__how_to_apply .media-item__solution { font-size: 16px; } } #media-template--21692356886685__how_to_apply .media-item__description { color: #8c8c8c !important; font-size: 14px; margin-top: 0px; margin-bottom: 0px; text-align: left; } #media-template--21692356886685__how_to_apply .media-item { padding-left: 4px; padding-right: 4px; } #media-template--21692356886685__how_to_apply .media-item__number { color: #2a2a2a; } #media-template--21692356886685__how_to_apply .media-item > .media-item__media, #media-template--21692356886685__how_to_apply .media-item > .media-item__compare { width: 100%; justify-self: start; } #media-template--21692356886685__how_to_apply .media-item__media { aspect-ratio: 1 / 1; } #media-template--21692356886685__how_to_apply .media-item--media-bottom { display: flex; flex-direction: column; } #media-template--21692356886685__how_to_apply .media-item--media-bottom .media-item__content { margin-top: 0 !important; margin-bottom: 14px; } #media-template--21692356886685__how_to_apply .media-item--media-bottom > .media-item__media, #media-template--21692356886685__how_to_apply .media-item--media-bottom > .media-item__compare { margin-top: auto; align-self: flex-start; } #media-template--21692356886685__how_to_apply .media-item--media-hidden .media-item__content { margin-top: 0 !important; } #media-template--21692356886685__how_to_apply .media-item__compare { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; } #media-template--21692356886685__how_to_apply .media-item__compare .media-item__media { width: 100%; } #media-template--21692356886685__how_to_apply .media-item__label { position: absolute; left: 8px; bottom: 8px; z-index: 1; padding: 4px 10px; border-radius: 4px; background-color: #000000; color: #FFFFFF; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; line-height: 1.2; text-transform: uppercase; pointer-events: none; } @media (max-width: 1024px) { #media-template--21692356886685__how_to_apply .media-grid__items { grid-template-columns: repeat(2, 1fr) !important; gap: 30px 30px !important; } } @media (max-width: 640px) { #media-template--21692356886685__how_to_apply .media-grid__items { grid-template-columns: repeat(2, 1fr) !important; gap: 15px 15px !important; } } #media-template--21692356886685__how_to_apply .media-grid__dots { display: none; } #shopify-section-template--21692356886685__how_to_apply h3 {font-weight: 500;} #shopify-section-template--21692356886685__how_to_apply .elxr-section-header__eyebrow {color: #668aba;} .media-grid{--media-grid-gap: 30px;--media-grid-padding: 60px 20px;--media-grid-max-width: 1600px;width:100%;padding:var(--media-grid-padding);background-color:#fff}.media-grid__container{max-width:var(--media-grid-max-width);margin:0 auto}.media-grid__items{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--media-grid-gap)}.media-grid__items[data-columns="1"]{grid-template-columns:repeat(1,1fr)}.media-grid__items[data-columns="2"]{grid-template-columns:repeat(2,1fr)}.media-grid__items[data-columns="3"]{grid-template-columns:repeat(3,1fr)}.media-grid__items[data-columns="4"]{grid-template-columns:repeat(4,1fr)}.media-grid__items[data-columns="5"]{grid-template-columns:repeat(5,1fr)}.media-grid__items[data-columns="6"]{grid-template-columns:repeat(6,1fr)}.media-item{display:grid;align-content:start}.media-item__media{position:relative;overflow:hidden;aspect-ratio:1 / 1;background-color:#f5f5f5;border-radius:var(--image-border-radius, 4px)}.media-item__image,.media-item__video{width:100%;height:100%;object-fit:cover;object-position:center;display:block;border-radius:var(--image-border-radius, 4px)}.media-item__placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background-color:#f5f5f5;border-radius:4px}.media-item__placeholder-text{font-size:16px;color:#999}.media-item__content{margin-top:24px;display:flex;flex-direction:column;gap:8px}.media-item__title{font-size:20px;font-weight:var(--font-weight-bold, 700);line-height:1.2;margin:0;color:#181818;letter-spacing:var(--letter-spacing-body, 0)}.media-item__description{font-size:14px;line-height:1.5;margin:0;color:#181818;letter-spacing:var(--letter-spacing-body, 0);font-weight:var(--font-weight-regular, 400)}.media-item__number{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border:1px solid currentColor;border-radius:50%;font-family:var(--font-accent-family);font-style:var(--font-accent-style);font-size:18px;line-height:1}.media-item__lines{list-style:none;margin:6px 0 0;padding:8px 0 0;border-top:1px solid rgba(255,255,255,.6)}.media-item__lines li{padding:7px 0}.media-item__lines li+li{border-top:1px solid rgba(255,255,255,.25)}.media-item__icon-list{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:var(--list-item-gap, 8px)}.media-item__icon-list .media-item__description{display:flex;align-items:flex-start;gap:10px;margin:0!important;text-align:left!important}.media-item__list-icon{flex:0 0 auto;display:inline-flex;width:var(--list-icon-size, 18px);height:var(--list-icon-size, 18px);margin-top:calc((1.5em - var(--list-icon-size, 18px)) / 2);color:var(--list-icon-color, #e41e1e)}.media-item__list-icon svg{width:100%;height:100%;display:block}.media-item__divider{width:50%;height:2px;background-color:#000;margin:12px auto}.media-item--card{background-color:#fff;border:1px solid #e5e7eb;border-radius:4px;padding:20px 18px}.media-item--card .media-item__content{margin-top:20px}@media(max-width:1024px){.media-grid{--media-grid-padding: 60px 30px;--media-grid-gap: 30px}.media-grid__items{grid-template-columns:repeat(2,1fr)}.media-grid__items[data-columns="1"]{grid-template-columns:repeat(1,1fr)}.media-grid__items[data-columns="2"],.media-grid__items[data-columns="3"],.media-grid__items[data-columns="4"],.media-grid__items[data-columns="5"],.media-grid__items[data-columns="6"]{grid-template-columns:repeat(2,1fr)}}@media(max-width:749px){.media-grid{--media-grid-padding: 60px 20px;--media-grid-gap: 30px}.media-grid__items{grid-template-columns:repeat(2,1fr)}.media-item__title{font-size:18px}.media-item__description{font-size:14px}}@media(max-width:480px){.media-grid__items--single-column{grid-template-columns:repeat(1,1fr)}.media-grid__items--single-column .media-item{text-align:center}}.media-item{animation:fadeInUp .6s ease-out forwards;animation-delay:calc(.1s * var(--index, 0))}.media-item[data-index="1"]{--index: 1}.media-item[data-index="2"]{--index: 2}.media-item[data-index="3"]{--index: 3}.media-item[data-index="4"]{--index: 4}.media-item[data-index="5"]{--index: 5}.media-item[data-index="6"]{--index: 6} /* END_SECTION:br-how-to-apply */ /* START_SECTION:br-ingredients (INDEX:16) */ #image-text-section-template--21692356886685__ingredients { width: 100%; max-width: 100%; box-sizing: border-box; overflow: hidden; overflow-x: clip; border-radius: 0px; padding: 30px 20px; } #image-text-section-template--21692356886685__ingredients .image-text-container-wrapper { max-width: 1200px; margin: 0 auto;border-radius: 4px 4px 4px 4px; overflow: hidden; box-sizing: border-box; background: linear-gradient(120deg, #5b7394 28%, #c7d9f1 100%); } @media screen and (min-width: 991px) { } #image-text-section-template--21692356886685__ingredients .image-text-container { overflow: hidden; box-sizing: border-box; } #image-text-section-template--21692356886685__ingredients .image-text-content { margin-top: 20px; margin-bottom: 20px; margin-left: 20px; margin-right: 20px; } @media screen and (min-width: 991px) { #image-text-section-template--21692356886685__ingredients .image-text-content { margin-top: 30px; margin-bottom: 30px; margin-left: 30px; margin-right: 30px; } } #image-text-section-template--21692356886685__ingredients .image-text-container { } @media (max-width: 990px) { #image-text-section-template--21692356886685__ingredients:has(.mobile-media-full-width) .image-text-container { padding: 0 !important; } } #image-text-section-template--21692356886685__ingredients .image-text-content { display: flex; flex-direction: column; gap: 30px; } @media screen and (max-width: 599px) { #image-text-section-template--21692356886685__ingredients .image-text-content { flex-direction: column; gap: 30px; } #image-text-section-template--21692356886685__ingredients .media-column, #image-text-section-template--21692356886685__ingredients .text-column { width: 100%; } } #image-text-section-template--21692356886685__ingredients .mobile-heading-above-image { display: none; width: 100%; order: -1; } @media screen and (max-width: 990px) { } @media screen and (min-width: 991px) { #image-text-section-template--21692356886685__ingredients .mobile-heading-above-image { display: none !important; } #image-text-section-template--21692356886685__ingredients .iwt-lift-desktop { display: contents; } } #image-text-section-template--21692356886685__ingredients .iwt-lift-desktop > div { width: 100%; max-width: 100%; box-sizing: border-box; } #image-text-section-template--21692356886685__ingredients .media-column { width: 100%; padding: 0px; border-radius: 4px; overflow: hidden; } #image-text-section-template--21692356886685__ingredients .media-column.background-image-mode { min-height: 400px; } @media screen and (min-width: 991px) { #image-text-section-template--21692356886685__ingredients .media-column.background-image-mode { min-height: 500px; } } #image-text-section-template--21692356886685__ingredients .main-image, #image-text-section-template--21692356886685__ingredients .main-video { width: 100%; height: auto; border-radius: 4px !important; object-fit: cover; display: block; margin-top: 40px; margin-bottom: 0px; max-width: 800px; }#image-text-section-template--21692356886685__ingredients .main-video { background-color: #000; -webkit-mask-image: -webkit-radial-gradient(white, black); -webkit-backface-visibility: hidden; -webkit-transform: translateZ(0); transform: translateZ(0); } #image-text-section-template--21692356886685__ingredients .media-placeholder { width: 100%; aspect-ratio: 16/9; background-color: #f5f5f5; display: flex; align-items: center; justify-content: center; border-radius: 4px !important; margin-top: 40px; margin-bottom: 0px; max-width: 800px; margin: 0 auto; } #image-text-section-template--21692356886685__ingredients .media-placeholder svg { width: 40%; height: 40%; fill: #d0d0d0; } #image-text-section-template--21692356886685__ingredients .iwt-illustration { width: 100%; overflow: hidden; border-radius: 4px; max-width: 800px; margin: 0 auto; } #image-text-section-template--21692356886685__ingredients .iwt-illustration svg { display: block; width: 100%; height: auto; } #image-text-section-template--21692356886685__ingredients .media-column.media-column--blocks { overflow: visible; border-radius: 0; flex-direction: column; } #image-text-section-template--21692356886685__ingredients .iwt-media-block { width: 100%; max-width: 800px; margin: 0 auto; } #image-text-section-template--21692356886685__ingredients .text-column { display: flex; flex-direction: column; padding: 0px 0px; overflow: visible; box-sizing: border-box; min-width: 0; align-items: flex-start; text-align: left; gap: 15px; } #image-text-section-template--21692356886685__ingredients .image-text-heading { font-weight: var(--section-heading-weight, var(--font-weight-bold)); color: #ffffff !important; margin-bottom: 0; letter-spacing: var(--letter-spacing-heading) !important; word-wrap: break-word; overflow-wrap: break-word; word-break: normal; hyphens: auto; width: 100%; max-width: 100%; box-sizing: border-box; } #image-text-section-template--21692356886685__ingredients .text-column > div { width: 100%; max-width: 100%; box-sizing: border-box; overflow: visible; } #image-text-section-template--21692356886685__ingredients .text-column { overflow: visible !important; max-width: 100%; } #image-text-section-template--21692356886685__ingredients .text-column h2, #image-text-section-template--21692356886685__ingredients .text-column .image-text-heading { display: block !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; overflow: visible !important; overflow-wrap: break-word !important; word-wrap: break-word !important; word-break: break-word !important; white-space: normal !important; hyphens: auto !important; box-sizing: border-box !important; } #image-text-section-template--21692356886685__ingredients .text-column > div:first-child { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } #image-text-section-template--21692356886685__ingredients .image-text-heading .accent-text { display: block; margin-bottom: 0px; } #image-text-section-template--21692356886685__ingredients .accent-text { color: #EF4A65; font-family: , ; font-weight: var(--font-accent-weight); font-style: ; letter-spacing: var(--letter-spacing-heading) !important; } #image-text-section-template--21692356886685__ingredients .accent-text { margin-left: 0px; color: #EF4A65 !important; font-family: var(--font-accent-family, var(--font-body-family)) !important; font-style: var(--font-accent-style, normal) !important; font-weight: var(--font-accent-weight, inherit) !important; letter-spacing: var(--font-accent-letter-spacing, inherit) !important; text-transform: var(--font-accent-text-transform, none) !important; } #image-text-section-template--21692356886685__ingredients .image-text-subtitle { font-weight: var(--font-weight-semibold); margin-top: 0; margin-bottom: 0; letter-spacing: var(--letter-spacing-heading); } #image-text-section-template--21692356886685__ingredients .subtitle-wrapper { max-width: 100% !important; box-sizing: border-box; } #image-text-section-template--21692356886685__ingredients .subtitle-wrapper--content-width { display: flex !important; width: 100% !important; padding: 0 !important; background: transparent !important; border: 0 !important; justify-content: flex-start; } #image-text-section-template--21692356886685__ingredients .subtitle-wrapper--content-width .image-text-subtitle { width: fit-content !important; max-width: 100% !important; flex: 0 1 auto; } #image-text-section-template--21692356886685__ingredients .image-text-divider-wrapper { display: flex !important; align-items: center !important; width: 100% !important; clear: both !important; box-sizing: border-box !important; position: relative !important; z-index: 1 !important; } #image-text-section-template--21692356886685__ingredients .image-text-divider-line { display: block !important; flex-shrink: 0 !important; box-sizing: border-box !important; position: relative !important; min-height: 1px !important; min-width: 20px !important; } #image-text-section-template--21692356886685__ingredients .image-text-divider-line:empty { background-color: #000000 !important; height: 2px !important; width: 50% !important; } #image-text-section-template--21692356886685__ingredients .image-text-body { line-height: 1.6; margin-bottom: 0; letter-spacing: var(--letter-spacing-body); } #image-text-section-template--21692356886685__ingredients .image-text-bullet-list { padding-left: 0; margin: 0; list-style-type: none; } #image-text-section-template--21692356886685__ingredients .image-text-bullet-list.no-bullets { list-style-type: none; padding-left: 0; } #image-text-section-template--21692356886685__ingredients .image-text-bullet-list .list-title { font-weight: var(--font-weight-semibold); margin-bottom: 12px; list-style-type: none; padding-left: 0; } #image-text-section-template--21692356886685__ingredients .image-text-bullet-list .list-item { margin-bottom: 10px; line-height: 1.4; position: relative; display: flex; align-items: flex-start; }#image-text-section-template--21692356886685__ingredients .image-text-bullet-list .item-icon { --item-icon-size: 20px; width: var(--item-icon-size); height: 1.4em; min-height: var(--item-icon-size); flex-shrink: 0; margin-right: 6px; display: flex; align-items: center; justify-content: center; } #image-text-section-template--21692356886685__ingredients .image-text-bullet-list .item-icon svg { width: var(--item-icon-size); height: var(--item-icon-size); fill: currentColor; } #image-text-section-template--21692356886685__ingredients .image-text-bullet-list .item-icon img { width: var(--item-icon-size); height: var(--item-icon-size); object-fit: contain; display: block; } #image-text-section-template--21692356886685__ingredients .image-text-bullet-list .item-text { flex: 1; letter-spacing: var(--letter-spacing-body); } #image-text-section-template--21692356886685__ingredients .image-text-bullet-list .item-text p, #image-text-section-template--21692356886685__ingredients .image-text-bullet-list .item-text ul, #image-text-section-template--21692356886685__ingredients .image-text-bullet-list .item-text ol { margin: 0; } #image-text-section-template--21692356886685__ingredients .image-text-bullet-list .item-text p + p { margin-top: 0.25em; } #image-text-section-template--21692356886685__ingredients .image-text-bullet-list.emoji-bullets .list-item { list-style-type: none; position: relative; padding-left: 25px; } #image-text-section-template--21692356886685__ingredients .image-text-bullet-list.emoji-bullets .list-item:before { content: attr(data-icon); position: absolute; left: 0; top: 0; } #image-text-section-template--21692356886685__ingredients .secondary-image-container { width: 100%; margin-top: 5px; margin-bottom: 5px; } #image-text-section-template--21692356886685__ingredients .secondary-image { max-width: 100%; height: auto; border-radius: 4px; } #image-text-section-template--21692356886685__ingredients .button-container { margin-top: 0; } #image-text-section-template--21692356886685__ingredients .button { display: inline-flex; align-items: center; justify-content: center; padding: 12px 24px; background-color: #ff3b00; color: #ffffff; text-decoration: none; font-weight: var(--font-weight-bold); transition: all 0.3s ease; letter-spacing: var(--letter-spacing-body); text-transform: none; text-align: center; min-width: 120px; } #image-text-section-template--21692356886685__ingredients .button.button-section-specific-sizing { padding: var(--global-button-padding-y) 24px !important; } #image-text-section-template--21692356886685__ingredients .button:hover { opacity: 0.9; } #image-text-section-template--21692356886685__ingredients .image-text-bullet-list.two-columns { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px 2px; } #image-text-section-template--21692356886685__ingredients .image-text-bullet-list.two-columns .list-title { grid-column: 1 / -1; margin-bottom: 15px; } #image-text-section-template--21692356886685__ingredients .image-text-content.text-only .text-column { width: 100% !important; max-width: 720px; min-height: 0 !important; margin: 0 auto; } #image-text-section-template--21692356886685__ingredients .image-text-bullet-list.pill-style { display: flex; flex-wrap: wrap; gap: 8px; } #image-text-section-template--21692356886685__ingredients .image-text-bullet-list.pill-style .list-title { width: 100%; margin-bottom: 12px; } #image-text-section-template--21692356886685__ingredients .image-text-bullet-list.pill-style .list-item.pill-item { display: inline-flex; align-items: center; margin-bottom: 0; cursor: default; } #image-text-section-template--21692356886685__ingredients .image-text-bullet-list.pill-style .list-item.pill-item .item-icon { margin-right: 6px; --item-icon-size: 16px; height: 1.2em; } #image-text-section-template--21692356886685__ingredients .image-text-bullet-list.pill-style .list-item.pill-item .item-icon img { width: var(--item-icon-size); height: var(--item-icon-size); object-fit: contain; display: block; } #image-text-section-template--21692356886685__ingredients .image-text-bullet-list.pill-style .list-item.pill-item .item-text { font-size: inherit; line-height: 1.2; } #image-text-section-template--21692356886685__ingredients .image-text-bullet-list.flex-row { display: flex; flex-wrap: wrap; gap: 8px; } #image-text-section-template--21692356886685__ingredients .image-text-bullet-list.flex-row .list-title { width: 100%; } #image-text-section-template--21692356886685__ingredients .image-text-bullet-list.flex-row .list-item { margin-bottom: 0 !important; } #image-text-section-template--21692356886685__ingredients .image-text-bullet-list.align-center { justify-content: center; } #image-text-section-template--21692356886685__ingredients .image-text-bullet-list.align-center .list-item { justify-content: center; text-align: center; } #image-text-section-template--21692356886685__ingredients .image-text-bullet-list.align-center .item-text { flex: 0 1 auto; } #image-text-section-template--21692356886685__ingredients .image-text-bullet-list.align-center.two-columns { width: 100%; align-self: stretch; } #image-text-section-template--21692356886685__ingredients .image-text-bullet-list.align-stretch { width: 100%; align-self: stretch; } #image-text-section-template--21692356886685__ingredients .image-text-bullet-list.align-stretch .list-item { width: 100%; justify-content: flex-start; text-align: left; } #image-text-section-template--21692356886685__ingredients .image-text-bullet-list.align-stretch .item-text { flex: 1 1 auto; } #image-text-section-template--21692356886685__ingredients .image-text-bullet-list.pill-style.two-columns { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } #image-text-section-template--21692356886685__ingredients .image-text-bullet-list.pill-style.two-columns .list-title { grid-column: 1 / -1; } @media screen and (max-width: 990px) { #image-text-section-template--21692356886685__ingredients .image-text-heading[data-block-id="heading_nNMTYJ"] { font-size: var(--section-heading-size-mobile) !important; line-height: 1.2 !important; } #image-text-section-template--21692356886685__ingredients .accent-text[data-block-id="heading_nNMTYJ"] { font-size: var(--section-heading-size-mobile) !important; line-height: 1.2 !important; } #image-text-section-template--21692356886685__ingredients .image-text-body[data-block-id="paragraph_cygnGQ"] { font-size: 1.3rem !important; } } @media screen and (min-width: 991px) { #image-text-section-template--21692356886685__ingredients { padding: 40px 40px; } #image-text-section-template--21692356886685__ingredients .image-text-container { } #image-text-section-template--21692356886685__ingredients .image-text-content { flex-direction: row; align-items: flex-start; gap: 40px; } #image-text-section-template--21692356886685__ingredients .media-column { width: 50%; flex-shrink: 0; align-self: flex-start; } #image-text-section-template--21692356886685__ingredients .text-column { width: 50%; flex-shrink: 1; min-width: 0; } #image-text-section-template--21692356886685__ingredients .media-column.background-image-mode { min-height: 500px; } #image-text-section-template--21692356886685__ingredients .text-column { flex-grow: 1; min-height: 0; } #image-text-section-template--21692356886685__ingredients .image-text-content.image-right .media-column { order: 2; } #image-text-section-template--21692356886685__ingredients .image-text-content.image-right .text-column { order: 1; padding: 0px 0px 0px 0px; } #image-text-section-template--21692356886685__ingredients .image-text-content.image-left .text-column { padding: 0px 0px 0px 0px; } #image-text-section-template--21692356886685__ingredients .image-text-heading { margin-bottom: 25px; } #image-text-section-template--21692356886685__ingredients .image-text-body { line-height: 1.5; margin-bottom: 25px; } #image-text-section-template--21692356886685__ingredients .text-column { gap: 20px; } #image-text-section-template--21692356886685__ingredients .main-image, #image-text-section-template--21692356886685__ingredients .main-video { margin-top: 0px; margin-bottom: 0px; } #image-text-section-template--21692356886685__ingredients .media-placeholder { margin-top: 0px; margin-bottom: 0px; } #image-text-section-template--21692356886685__ingredients .image-text-heading[data-block-id="heading_nNMTYJ"] { font-size: var(--section-heading-size) !important; line-height: 1.1 !important; } #image-text-section-template--21692356886685__ingredients .accent-text[data-block-id="heading_nNMTYJ"] { font-size: var(--section-heading-size) !important; line-height: 1.1 !important; } #image-text-section-template--21692356886685__ingredients .image-text-body[data-block-id="paragraph_cygnGQ"] { font-size: 1.4rem !important; } } #image-text-section-template--21692356886685__ingredients .image-text-body p { margin-top: 0; margin-bottom: 0.5em; } #image-text-section-template--21692356886685__ingredients .image-text-body p:last-child { margin-bottom: 0; } #image-text-section-template--21692356886685__ingredients .image-text-body strong { font-weight: 600 !important; } #image-text-section-template--21692356886685__ingredients .image-text-body em { font-style: italic !important; } #image-text-section-template--21692356886685__ingredients .image-text-body a { text-decoration: underline; } #image-text-section-template--21692356886685__ingredients .image-text-body ul, #image-text-section-template--21692356886685__ingredients .image-text-body ol { margin: 0.5em 0; padding-left: 1.5em; } #image-text-section-template--21692356886685__ingredients .image-text-body li { margin-bottom: 0.25em; } #image-text-section-template--21692356886685__ingredients .accordion-container { width: 100%; max-width: 100%; box-sizing: border-box; overflow: visible; flex-shrink: 1; min-width: 0; } #image-text-section-template--21692356886685__ingredients .accordion-item { width: 100%; max-width: 100%; box-sizing: border-box; min-width: 0; } #image-text-section-template--21692356886685__ingredients .accordion-title { margin: 0 0 16px 0; font-weight: 600; font-size: var(--accordion-title-size); } #image-text-section-template--21692356886685__ingredients .accordion-items-wrapper { width: 100%; } #image-text-section-template--21692356886685__ingredients .accordion-container--left .accordion-header, #image-text-section-template--21692356886685__ingredients .accordion-container--left .accordion-content-inner { text-align: left; } #image-text-section-template--21692356886685__ingredients .accordion-container--compact .accordion-item.active .accordion-content { padding: 0 !important; } #image-text-section-template--21692356886685__ingredients .accordion-container--compact .accordion-item.active .accordion-content-inner { padding: 0 var(--header-padding-mobile) var(--header-padding-mobile) !important; } #image-text-section-template--21692356886685__ingredients .accordion-container--compact .accordion-content-inner > :first-child { margin-top: 0; } #image-text-section-template--21692356886685__ingredients .accordion-container--compact .accordion-content-inner > :last-child { margin-bottom: 0; } @media (min-width: 600px) and (max-width: 990px) { #image-text-section-template--21692356886685__ingredients .accordion-container--compact .accordion-item.active .accordion-content-inner { padding: 0 calc(var(--header-padding-desktop) * 0.5) calc(var(--header-padding-desktop) * 0.5) !important; } } @media (min-width: 991px) { #image-text-section-template--21692356886685__ingredients .accordion-container--compact .accordion-item.active .accordion-content-inner { padding: 0 var(--header-padding-desktop) var(--header-padding-desktop) !important; } } #image-text-section-template--21692356886685__ingredients .accordion-item { overflow: hidden; transition: all 0.2s ease; } #image-text-section-template--21692356886685__ingredients .accordion-header { display: flex; align-items: center; padding: var(--header-padding-mobile); cursor: pointer; font-weight: 500; position: relative; transition: background-color 0.3s ease; gap: 12px; width: 100%; max-width: 100%; box-sizing: border-box; min-width: 0; } #image-text-section-template--21692356886685__ingredients .accordion-header:hover { opacity: 0.9; }#image-text-section-template--21692356886685__ingredients .accordion-header-icon { flex-shrink: 0; align-self: center; display: flex; align-items: center; justify-content: center; overflow: hidden; line-height: 0; width: var(--accordion-icon-size-mobile); height: var(--accordion-icon-size-mobile); aspect-ratio: 1; } #image-text-section-template--21692356886685__ingredients .accordion-header-icon > * { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } #image-text-section-template--21692356886685__ingredients .accordion-header-icon svg { width: 100%; height: 100%; max-width: 100%; max-height: 100%; display: block; fill: currentColor; } #image-text-section-template--21692356886685__ingredients .accordion-header-text { flex-grow: 1; padding-right: 15px; font-weight: 500; letter-spacing: var(--letter-spacing-body); font-size: var(--accordion-header-size); } #image-text-section-template--21692356886685__ingredients .accordion-toggle { position: absolute; right: var(--header-padding-mobile); font-size: var(--accordion-toggle-size); font-weight: bold; transition: transform 0.3s ease; line-height: 1; } #image-text-section-template--21692356886685__ingredients .accordion-item.active .accordion-toggle { transform: rotate(45deg); } #image-text-section-template--21692356886685__ingredients .accordion-content { padding: 0; max-height: 0; overflow: hidden; transition: max-height 0.3s ease, padding 0.3s ease; } #image-text-section-template--21692356886685__ingredients .accordion-content-inner { padding: var(--content-padding-mobile); opacity: 0; transition: opacity 0.3s ease; line-height: 1.6; font-size: var(--accordion-content-size); } #image-text-section-template--21692356886685__ingredients .accordion-item.active .accordion-content { max-height: 1000px !important; padding: var(--content-outer-padding-mobile) 0 !important; overflow: visible !important; } #image-text-section-template--21692356886685__ingredients .accordion-item.active .accordion-content-inner { opacity: 1 !important; letter-spacing: var(--letter-spacing-body); padding: var(--content-padding-mobile) !important; } #image-text-section-template--21692356886685__ingredients .accordion-item.active .accordion-toggle { transform: rotate(45deg) !important; } @media screen and (min-width: 600px) and (max-width: 990px) { #image-text-section-template--21692356886685__ingredients .media-column { height: fit-content; position: relative; } #image-text-section-template--21692356886685__ingredients .media-column .main-video, #image-text-section-template--21692356886685__ingredients .media-column .main-image { height: auto !important; max-height: none !important; object-fit: cover; } #image-text-section-template--21692356886685__ingredients .text-column { overflow: visible; width: 100% !important; max-width: 100% !important; } #image-text-section-template--21692356886685__ingredients .accordion-container { width: 100% !important; max-width: 100% !important; } #image-text-section-template--21692356886685__ingredients .text-column > *, #image-text-section-template--21692356886685__ingredients .image-text-heading, #image-text-section-template--21692356886685__ingredients .image-text-body { width: 100% !important; max-width: 100% !important; } #image-text-section-template--21692356886685__ingredients .accordion-item.active .accordion-content { max-height: none !important; height: auto !important; } } @media screen and (min-width: 991px) { #image-text-section-template--21692356886685__ingredients .media-column { height: fit-content; position: relative; } #image-text-section-template--21692356886685__ingredients .media-column .main-video, #image-text-section-template--21692356886685__ingredients .media-column .main-image { height: auto !important; max-height: none !important; object-fit: cover; } #image-text-section-template--21692356886685__ingredients .text-column { overflow: visible; } #image-text-section-template--21692356886685__ingredients .accordion-container { width: 100%; max-width: 100%; } #image-text-section-template--21692356886685__ingredients .accordion-item.active .accordion-content { max-height: none !important; height: auto !important; } #image-text-section-template--21692356886685__ingredients .accordion-header-icon { width: var(--accordion-icon-size-desktop); height: var(--accordion-icon-size-desktop); } } #image-text-section-template--21692356886685__ingredients .accordion-item:not(.active) .accordion-content { max-height: 0 !important; padding: 0 !important; overflow: hidden !important; } #image-text-section-template--21692356886685__ingredients .accordion-item:not(.active) .accordion-content-inner { opacity: 0 !important; } #image-text-section-template--21692356886685__ingredients .accordion-content-inner p, #image-text-section-template--21692356886685__ingredients .accordion-content-inner ul, #image-text-section-template--21692356886685__ingredients .accordion-content-inner ol, #image-text-section-template--21692356886685__ingredients .accordion-content-inner li, #image-text-section-template--21692356886685__ingredients .accordion-content-inner strong, #image-text-section-template--21692356886685__ingredients .accordion-content-inner em, #image-text-section-template--21692356886685__ingredients .accordion-content-inner b, #image-text-section-template--21692356886685__ingredients .accordion-content-inner i, #image-text-section-template--21692356886685__ingredients .accordion-content-inner a { color: inherit !important; } #image-text-section-template--21692356886685__ingredients .accordion-content-inner strong, #image-text-section-template--21692356886685__ingredients .accordion-content-inner b { font-weight: bold; } #image-text-section-template--21692356886685__ingredients .accordion-content-inner em, #image-text-section-template--21692356886685__ingredients .accordion-content-inner i { font-style: italic; } #image-text-section-template--21692356886685__ingredients .accordion-content-inner a { color: inherit; text-decoration: underline; } #image-text-section-template--21692356886685__ingredients .accordion-content-inner p { margin-top: 0; margin-bottom: 10px; } #image-text-section-template--21692356886685__ingredients .accordion-content-inner p:last-child { margin-bottom: 0; } #image-text-section-template--21692356886685__ingredients .accordion-content-inner ul, #image-text-section-template--21692356886685__ingredients .accordion-content-inner ol { margin: 10px 0; padding-left: 20px; } #image-text-section-template--21692356886685__ingredients .accordion-content-inner li { margin-bottom: 5px; } @media (max-width: 599px) { #image-text-section-template--21692356886685__ingredients .accordion-container { max-width: 100%; } #image-text-section-template--21692356886685__ingredients .image-text-heading { margin-bottom: 20px !important; } #image-text-section-template--21692356886685__ingredients .accordion-header { padding: var(--header-padding-mobile); gap: 12px; } #image-text-section-template--21692356886685__ingredients .accordion-toggle { right: var(--header-padding-mobile); font-size: var(--accordion-toggle-size-mobile) !important; } #image-text-section-template--21692356886685__ingredients .accordion-content-inner { padding: var(--content-padding-mobile); } #image-text-section-template--21692356886685__ingredients .accordion-title { font-size: var(--accordion-title-size-mobile) !important; } #image-text-section-template--21692356886685__ingredients .accordion-header-text { font-size: var(--accordion-header-size-mobile) !important; } #image-text-section-template--21692356886685__ingredients .accordion-content-inner { font-size: var(--accordion-content-size-mobile) !important; } } @media (min-width: 600px) and (max-width: 990px) { #image-text-section-template--21692356886685__ingredients .accordion-header { padding: calc(var(--header-padding-desktop) * 0.5) !important; } #image-text-section-template--21692356886685__ingredients .accordion-toggle { right: calc(var(--header-padding-desktop) * 0.5) !important; font-size: calc(var(--accordion-toggle-size-desktop) * 0.75) !important; } #image-text-section-template--21692356886685__ingredients .accordion-content-inner { padding: calc(var(--content-padding-desktop) * 0.5) !important; font-size: calc(var(--accordion-content-size-desktop) * 0.8) !important; } #image-text-section-template--21692356886685__ingredients .accordion-item.active .accordion-content { padding: calc(var(--content-outer-padding-desktop) * 0.5) 0 !important; } #image-text-section-template--21692356886685__ingredients .accordion-item.active .accordion-content-inner { padding: calc(var(--content-padding-desktop) * 0.5) !important; } #image-text-section-template--21692356886685__ingredients .accordion-title { font-size: calc(var(--accordion-title-size-desktop) * 0.7) !important; } #image-text-section-template--21692356886685__ingredients .accordion-header-text { font-size: calc(var(--accordion-header-size-desktop) * 0.8) !important; } } @media (min-width: 991px) { #image-text-section-template--21692356886685__ingredients .accordion-header { padding: var(--header-padding-desktop) !important; } #image-text-section-template--21692356886685__ingredients .accordion-toggle { right: var(--header-padding-desktop) !important; font-size: var(--accordion-toggle-size-desktop) !important; } #image-text-section-template--21692356886685__ingredients .accordion-content-inner { padding: var(--content-padding-desktop) !important; font-size: var(--accordion-content-size-desktop) !important; } #image-text-section-template--21692356886685__ingredients .accordion-item.active .accordion-content { padding: var(--content-outer-padding-desktop) 0 !important; } #image-text-section-template--21692356886685__ingredients .accordion-item.active .accordion-content-inner { padding: var(--content-padding-desktop) !important; } #image-text-section-template--21692356886685__ingredients .accordion-title { font-size: var(--accordion-title-size-desktop) !important; } #image-text-section-template--21692356886685__ingredients .accordion-header-text { font-size: var(--accordion-header-size-desktop) !important; } } #image-text-section-template--21692356886685__ingredients .button-container { width: 100%; max-width: 100%; box-sizing: border-box; overflow: visible; flex-shrink: 1; min-width: 0; } #image-text-section-template--21692356886685__ingredients .button-container .button { max-width: 100%; box-sizing: border-box; word-wrap: break-word; min-width: 0; } #image-text-section-template--21692356886685__ingredients .button-container.full-width-mobile { width: 100%; max-width: 100%; box-sizing: border-box; } #image-text-section-template--21692356886685__ingredients .button.full-width-mobile { width: 100% !important; max-width: 100% !important; display: flex !important; justify-content: center !important; align-items: center !important; min-width: unset !important; box-sizing: border-box !important; overflow: hidden !important; } @media (max-width: 990px) { #image-text-section-template--21692356886685__ingredients .image-text-content.mobile-media-full-width { gap: 0px; } #image-text-section-template--21692356886685__ingredients .media-column.mobile-full-width { margin-left: 0; margin-right: 0; padding: 0 !important; width: 100%; max-width: none; } #image-text-section-template--21692356886685__ingredients .media-column.mobile-full-width .main-image, #image-text-section-template--21692356886685__ingredients .media-column.mobile-full-width .main-video, #image-text-section-template--21692356886685__ingredients .media-column.mobile-full-width .media-placeholder { border-radius: 0 !important; max-width: none !important; width: 100% !important; height: auto !important; } #image-text-section-template--21692356886685__ingredients .mobile-media-full-width .text-column { padding-top: 30px; padding-left: 20px; padding-right: 20px; } } @media (max-width: 990px) { #image-text-section-template--21692356886685__ingredients .media-column.mobile-full-width .main-video { object-fit: cover !important; display: block !important; min-height: 200px !important; } #image-text-section-template--21692356886685__ingredients .image-text-content.mobile-media-full-width { overflow: hidden; }#image-text-section-template--21692356886685__ingredients .image-text-container { overflow-x: clip; } } #image-text-section-template--21692356886685__ingredients .image-text-heading { color: #ffffff !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; word-wrap: break-word !important; overflow-wrap: break-word !important; white-space: normal !important; } .icon-block { width: 100%; box-sizing: border-box; } .icon-wrapper { box-sizing: border-box; } .icon-wrapper img { display: block; } .icon-svg svg { width: 100%; height: 100%; display: block; } #shopify-section-template--21692356886685__ingredients h3 {font-weight: 500;} #shopify-section-template--21692356886685__ingredients .elxr-section-header__eyebrow {color: #668aba;} #image-text-section-template--21692356886685__ingredients .media-column .main-image{object-fit:contain;height:auto;aspect-ratio:auto 1600 / 1195} /* END_SECTION:br-ingredients */ /* START_SECTION:br-main-product (INDEX:17) */ #shopify-section-template--21692356886685__main_product .shop-product-section { letter-spacing: var(--letter-spacing-body); background-color: #ffffff; color: #2a2a2a; padding-left: 15px; padding-right: 15px; padding-top: 10px; padding-bottom: 10px; } #shopify-section-template--21692356886685__main_product .shop-product-layout { gap: 4px; --spd-info-width: 50%; } #shopify-section-template--21692356886685__main_product .shop-product-info { gap: 4px; color: #2a2a2a; } #shopify-section-template--21692356886685__main_product .shop-product-info > * { width: 100%; } #shopify-section-template--21692356886685__main_product .spd-offer-media { display: flex; justify-content: center; align-self: center; } #shopify-section-template--21692356886685__main_product .spd-offer-media img { display: block; width: 100%; max-width: 560px; height: auto; border-radius: 0px; } @media (min-width: 750px) { #shopify-section-template--21692356886685__main_product .shop-product-info { flex: 0 0 calc(var(--spd-info-width) - 4px); max-width: calc(var(--spd-info-width) - 4px); } #shopify-section-template--21692356886685__main_product .spd-offer-media { flex: 0 0 calc(100% - var(--spd-info-width)); max-width: calc(100% - var(--spd-info-width)); } #shopify-section-template--21692356886685__main_product .shop-product-layout.spd-media-right { flex-direction: row-reverse; } #shopify-section-template--21692356886685__main_product .spd-offer-media .spd-offer-media__mobile { display: none; } } @media (max-width: 749px) { #shopify-section-template--21692356886685__main_product .shop-product-section { padding-top: 10px; padding-bottom: 10px; } #shopify-section-template--21692356886685__main_product .shop-product-layout { gap: 6px; } #shopify-section-template--21692356886685__main_product .shop-product-info { gap: 6px; padding-top: 0; } #shopify-section-template--21692356886685__main_product .spd-offer-media { width: 100%; margin-bottom: 4px; } #shopify-section-template--21692356886685__main_product .shop-product-layout.spd-media-mobile-below > .spd-offer-media, #shopify-section-template--21692356886685__main_product .shop-product-layout.spd-media-mobile-below > .shop-carousel-container { order: 2; margin-top: 4px; margin-bottom: 0; } #shopify-section-template--21692356886685__main_product .spd-offer-media:has(.spd-offer-media__mobile) .spd-offer-media__desktop { display: none; } } .shop-main-image, .shop-main-image img, .shop-image-zoom-wrapper, .shop-video { border-radius: 0px !important; } .shop-benefits-slot:empty { display: none; } .shop-main-image-wrapper:has(.shop-main-benefits[data-position="left"]) { display: grid; gap: var(--shop-main-image-gap, 8px); align-items: stretch; grid-template-columns: 25% 1fr; } .shop-main-image-wrapper:has(.shop-main-benefits[data-position="right"]) { display: grid; gap: var(--shop-main-image-gap, 8px); align-items: stretch; grid-template-columns: 1fr 25%; } .shop-main-image-wrapper:has(.shop-main-benefits[data-position="left"]) .shop-benefits-slot { grid-column: 1; grid-row: 1; } .shop-main-image-wrapper:has(.shop-main-benefits[data-position="right"]) .shop-benefits-slot { grid-column: 2; grid-row: 1; } .shop-main-image-wrapper:has(.shop-main-benefits[data-position="left"]) .shop-image-container { grid-column: 2; grid-row: 1; } .shop-main-image-wrapper:has(.shop-main-benefits[data-position="right"]) .shop-image-container { grid-column: 1; grid-row: 1; } .pdp-gallery-block:not(:has(.pdp-gallery-nav[data-gallery-nav-style="thumbnails"])) .shop-thumbnails-outer { display: none !important; } .pdp-gallery-block:not(:has(.pdp-gallery-nav[data-gallery-nav-style="navigation_dots"])) .shop-dots-navigation { display: none !important; } .pdp-gallery-block { --desktop-arrow-bg: #FFFFFF; --desktop-arrow-border: rgba(15, 15, 15, 0.12); --desktop-arrow-icon: #0f0f0f; --desktop-arrow-hover-bg: #f1f1f1; --desktop-arrow-hover-border: rgba(15, 15, 15, 0.18); --arrow-border-radius: 50%; --arrow-opacity: 0.9; } .shop-thumbnail .thumb-square { position: relative; } .shop-thumbnail .thumbnail-video-icon { position: absolute; top: 4px; right: 4px; width: 16px; height: 16px; border-radius: 50%; background: rgba(255, 255, 255, 0.9); display: flex; align-items: center; justify-content: center; color: #1a1a1a; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08); z-index: 3; } .shop-thumbnail .thumbnail-video-icon svg { width: 8px; height: 8px; display: block; } .shop-image-container.shop-square-container { aspect-ratio: 1; } @media screen and (min-width: 750px) { .shop-thumbnail .thumb-square { padding-bottom: 100% !important; } .shop-thumbnails-wrapper.left-column-layout .shop-thumbnail { height: auto; aspect-ratio: 1 !important; } .shop-thumbnails-wrapper.left-column-layout .shop-thumbnails.mobile-2x2-grid .shop-thumbnail { height: auto; } } .shop-thumbnail { height: auto; } @media screen and (max-width: 749px) { .shop-thumbnails.mobile-2x2-grid { box-sizing: border-box !important; display: flex !important; position: relative !important; transition-property: transform !important; width: 100% !important; z-index: 1 !important; height: auto !important; justify-content: flex-start !important; align-items: flex-start !important; padding: 0 40px !important; margin: 5px 0px 0px !important; gap: 0 !important; } .shop-product-section[data-show-mobile-arrows="false"] .shop-thumbnails.mobile-2x2-grid { padding: 0 !important; } .shop-product-section[data-full-width-image="true"] .shop-thumbnails.mobile-2x2-grid { margin: 5px 0px 0px !important; } .shop-thumbnails.mobile-2x2-grid .shop-thumbnail { flex: 0 0 calc(25% - 3px) !important; width: calc(25% - 3px) !important; max-width: calc(25% - 3px) !important; box-sizing: border-box !important; padding: 0 !important; margin: 0 !important; height: auto !important; position: relative !important; overflow: hidden !important; } .shop-thumbnails.mobile-2x2-grid .shop-thumbnail:not(:last-child) { margin-right: 4px !important; } .shop-thumbnails.mobile-2x2-grid .thumb-square { width: 100%; height: 0; padding-bottom: 100%; position: relative; box-sizing: border-box; overflow: hidden; background: #f8f8f8; z-index: 2 !important; } .shop-thumbnails.mobile-2x2-grid .thumb-square img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; display: block; } } #shopify-section-template--21692356886685__main_product .shop-product-layout > [id^='shopify-block-']:has(.pdp-gallery-block) { flex: 0 0 55%; max-width: 55%; min-width: 0; align-self: flex-start; } .pdp-gallery-block, .pdp-gallery-block .shop-carousel-container { flex: 1 1 auto; width: 100%; max-width: 100%; } @media (min-width: 750px) { #shopify-section-template--21692356886685__main_product .shop-product-layout > [id^='shopify-block-']:has(.pdp-gallery-block) { flex: 0 0 calc(100% - var(--spd-info-width, 50%)); max-width: calc(100% - var(--spd-info-width, 50%)); position: sticky; top: 20px; } #shopify-section-template--21692356886685__main_product .pdp-gallery-block .shop-carousel-container { position: relative; top: auto; } #shopify-section-template--21692356886685__main_product .pdp-gallery-block .shop-thumbnails-outer:not(:has(.left-column-layout)) { width: 90%; max-width: 90%; margin-left: auto; margin-right: auto; align-self: center; } } @media (max-width: 749px) { #shopify-section-template--21692356886685__main_product .shop-product-layout > [id^='shopify-block-']:has(.pdp-gallery-block) { flex: 1 1 auto; width: 100%; max-width: 100%; align-self: stretch; } } .custom-text-block-container-AaDB1aTNCd3pvd1Y5d__eyebrow { width: 100%; display: block; } .custom-text-block-AaDB1aTNCd3pvd1Y5d__eyebrow { margin-top: 12px; margin-bottom: 0px; text-align: left; width: 100%; } .custom-text-block-AaDB1aTNCd3pvd1Y5d__eyebrow .custom-text-wrapper { width: 100%; } .custom-text-block-AaDB1aTNCd3pvd1Y5d__eyebrow .custom-text-with-divider { display: flex; align-items: center; width: 100%; gap: 12px; } .custom-text-block-AaDB1aTNCd3pvd1Y5d__eyebrow .divider-line { flex: 1; height: 1px; min-height: 1px; min-width: 20px; background-color: #e0e0e0; border: none; margin: 0; display: block; } .custom-text-block-AaDB1aTNCd3pvd1Y5d__eyebrow .custom-text-main { display: flex; align-items: center; gap: 8px; font-size: 12px; line-height: 1.2; font-weight: var(--font-weight-regular); width: 100%; justify-content: flex-start; flex-shrink: 0; } @media screen and (min-width: 750px) { .custom-text-block-AaDB1aTNCd3pvd1Y5d__eyebrow .custom-text-main { font-size: 13px; } } .custom-text-block-AaDB1aTNCd3pvd1Y5d__eyebrow .custom-text-icon { flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #ff3b00; width: 12px; height: 12px; } .custom-text-block-AaDB1aTNCd3pvd1Y5d__eyebrow .custom-text-icon svg { width: 100%; height: 100%; fill: currentColor; stroke: currentColor; } .custom-text-block-AaDB1aTNCd3pvd1Y5d__eyebrow .custom-text-after-icon { flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #0f0f0f; width: 20px; height: 20px; } .custom-text-block-AaDB1aTNCd3pvd1Y5d__eyebrow .custom-text-after-icon svg { width: 100%; height: 100%; fill: currentColor; stroke: currentColor; } .custom-text-block-AaDB1aTNCd3pvd1Y5d__eyebrow .custom-text-content { color: #2a2a2a; margin: 0; width: 100%; } .custom-text-block-AaDB1aTNCd3pvd1Y5d__eyebrow .custom-text-content a, .custom-text-block-AaDB1aTNCd3pvd1Y5d__eyebrow .custom-text-main-text-content a { color: #ff3b00; text-decoration: underline; } .custom-text-block-AaDB1aTNCd3pvd1Y5d__eyebrow .custom-text-content a:hover, .custom-text-block-AaDB1aTNCd3pvd1Y5d__eyebrow .custom-text-main-text-content a:hover { opacity: 0.8; } .custom-text-block-AaDB1aTNCd3pvd1Y5d__eyebrow .custom-text-content strong, .custom-text-block-AaDB1aTNCd3pvd1Y5d__eyebrow .custom-text-content b, .custom-text-block-AaDB1aTNCd3pvd1Y5d__eyebrow .custom-text-main-text-content strong, .custom-text-block-AaDB1aTNCd3pvd1Y5d__eyebrow .custom-text-main-text-content b { font-weight: 700 !important; } .custom-text-block-AaDB1aTNCd3pvd1Y5d__eyebrow .custom-text-main-text-content { text-align: left; width: auto; font-weight: var(--font-weight-regular); } .custom-text-block-AaDB1aTNCd3pvd1Y5d__eyebrow .custom-text-main-text-content p { text-align: inherit; font-weight: inherit; } .custom-text-block-AaDB1aTNCd3pvd1Y5d__eyebrow .custom-text-main-text-content strong, .custom-text-block-AaDB1aTNCd3pvd1Y5d__eyebrow .custom-text-main-text-content b { font-weight: var(--font-weight-semibold); } .custom-text-block-AaDB1aTNCd3pvd1Y5d__eyebrow .custom-text-main-text-content p { margin: 0; padding: 0; } .custom-text-block-AaDB1aTNCd3pvd1Y5d__eyebrow .custom-text-main-text-content > :is(p, ul, ol) + :is(p, ul, ol) { margin-top: 1em; } .custom-text-block-AaDB1aTNCd3pvd1Y5d__eyebrow .custom-text-main-text-content strong, .custom-text-block-AaDB1aTNCd3pvd1Y5d__eyebrow .custom-text-main-text-content b { font-weight: 700 !important; } .custom-text-block-AaDB1aTNCd3pvd1Y5d__eyebrow *:not(strong):not(b) { font-weight: inherit; } .custom-text-block-AaDB1aTNCd3pvd1Y5d__eyebrow span:not(strong):not(b), .custom-text-block-AaDB1aTNCd3pvd1Y5d__eyebrow div:not(.custom-text-icon):not(strong):not(b), .custom-text-block-AaDB1aTNCd3pvd1Y5d__eyebrow p:not(strong):not(b), .custom-text-block-AaDB1aTNCd3pvd1Y5d__eyebrow h1:not(strong):not(b), .custom-text-block-AaDB1aTNCd3pvd1Y5d__eyebrow h2:not(strong):not(b), .custom-text-block-AaDB1aTNCd3pvd1Y5d__eyebrow h3:not(strong):not(b), .custom-text-block-AaDB1aTNCd3pvd1Y5d__eyebrow h4:not(strong):not(b), .custom-text-block-AaDB1aTNCd3pvd1Y5d__eyebrow h5:not(strong):not(b), .custom-text-block-AaDB1aTNCd3pvd1Y5d__eyebrow h6:not(strong):not(b) { font-weight: var(--font-weight-regular); } .product-title-AMnlJaGhYZ0ZhZW9zY__title { font-size: 40px !important; line-height: 1; width: 100%; display: block; } @media (max-width: 749px) { .product-title-AMnlJaGhYZ0ZhZW9zY__title { font-size: 32px !important; line-height: 1; } } .product-title-AMnlJaGhYZ0ZhZW9zY__title strong, .product-title-AMnlJaGhYZ0ZhZW9zY__title b { color: #2a2a2a; -webkit-text-fill-color: #2a2a2a; font-family: var(--font-accent-family); font-style: var(--font-accent-style); } .elxr-rating-text-AZWl3aUxVNVE3NEtrR__rating_text { color: #2a2a2a; font-size: 13px; font-weight: var(--font-weight-medium, 500); line-height: 1; letter-spacing: var(--letter-spacing-body, -0.3px); display: inline-flex; align-items: center; flex-wrap: wrap; gap: 3px; } .elxr-rating-text-AZWl3aUxVNVE3NEtrR__rating_text p { margin: 0; display: inline; } .elxr-rating-text-AZWl3aUxVNVE3NEtrR__rating_text * { display: inline; margin: 0; padding: 0; } .elxr-rating-text-AZWl3aUxVNVE3NEtrR__rating_text strong, .elxr-rating-text-AZWl3aUxVNVE3NEtrR__rating_text b { font-weight: var(--font-weight-semibold, 600); } .elxr-rating-text-AZWl3aUxVNVE3NEtrR__rating_text em { font-style: normal; color: #777777; } .elxr-rating-text-AZWl3aUxVNVE3NEtrR__rating_text .elxr-rating-text__decorated { position: relative; display: inline; } .elxr-rating-text-AZWl3aUxVNVE3NEtrR__rating_text .elxr-rating-text__content { position: relative; z-index: 1; } .elxr-rating-text-AZWl3aUxVNVE3NEtrR__rating_text .elxr-rating-text__underline { position: absolute; left: -2px; right: -2px; bottom: -4px; height: auto; display: block; pointer-events: none; z-index: 0; } .elxr-rating-text-AZWl3aUxVNVE3NEtrR__rating_text .elxr-rating-text__underline svg { display: block; width: 100%; height: auto; } .elxr-rating-text-AZWl3aUxVNVE3NEtrR__rating_text .elxr-rating-text__line-solid { display: block; height: 2px; background: #333333; border-radius: 2px; } .elxr-rating-text-AZWl3aUxVNVE3NEtrR__rating_text .elxr-rating-text__line-highlight { display: block; height: 6px; background: #333333; opacity: 0.2; border-radius: 2px; } @media screen and (max-width: 749px) { .elxr-rating-text-AZWl3aUxVNVE3NEtrR__rating_text { font-size: 12px; } } .elxr-rating-AMDM5eGtBOVVnOUxnO__rating .elxr-blocks-wrapper { display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: 8px; width: 100%; line-height: 0; } .elxr-rating-AMDM5eGtBOVVnOUxnO__rating .elxr-blocks-wrapper > * { display: flex; align-items: center; } .elxr-rating-AMDM5eGtBOVVnOUxnO__rating { margin-top: 0px; margin-bottom: 0px; text-decoration: none; cursor: pointer; font-family: var(--font-body-family-override, var(--font-body-family)); font-weight: var(--font-body-weight); letter-spacing: var(--letter-spacing-body); } .cart-drawer-trustpilot-rating .elxr-rating-AMDM5eGtBOVVnOUxnO__rating { justify-content: center; } .custom-text-block-container-AUTk5TE90MEM2NDNXW__pitch { width: 100%; display: block; } .custom-text-block-AUTk5TE90MEM2NDNXW__pitch { margin-top: 8px; margin-bottom: 0px; text-align: left; width: 100%; } .custom-text-block-AUTk5TE90MEM2NDNXW__pitch .custom-text-wrapper { width: 100%; } .custom-text-block-AUTk5TE90MEM2NDNXW__pitch .custom-text-with-divider { display: flex; align-items: center; width: 100%; gap: 12px; } .custom-text-block-AUTk5TE90MEM2NDNXW__pitch .divider-line { flex: 1; height: 1px; min-height: 1px; min-width: 20px; background-color: #e0e0e0; border: none; margin: 0; display: block; } .custom-text-block-AUTk5TE90MEM2NDNXW__pitch .custom-text-main { display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 1.5; font-weight: var(--font-weight-regular); width: 100%; justify-content: flex-start; flex-shrink: 0; } @media screen and (min-width: 750px) { .custom-text-block-AUTk5TE90MEM2NDNXW__pitch .custom-text-main { font-size: 15px; } } .custom-text-block-AUTk5TE90MEM2NDNXW__pitch .custom-text-icon { flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #ff3b00; width: 20px; height: 20px; } .custom-text-block-AUTk5TE90MEM2NDNXW__pitch .custom-text-icon svg { width: 100%; height: 100%; fill: currentColor; stroke: currentColor; } .custom-text-block-AUTk5TE90MEM2NDNXW__pitch .custom-text-after-icon { flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #0f0f0f; width: 20px; height: 20px; } .custom-text-block-AUTk5TE90MEM2NDNXW__pitch .custom-text-after-icon svg { width: 100%; height: 100%; fill: currentColor; stroke: currentColor; } .custom-text-block-AUTk5TE90MEM2NDNXW__pitch .custom-text-content { color: #2a2a2a; margin: 0; width: 100%; } .custom-text-block-AUTk5TE90MEM2NDNXW__pitch .custom-text-content a, .custom-text-block-AUTk5TE90MEM2NDNXW__pitch .custom-text-main-text-content a { color: #ff3b00; text-decoration: underline; } .custom-text-block-AUTk5TE90MEM2NDNXW__pitch .custom-text-content a:hover, .custom-text-block-AUTk5TE90MEM2NDNXW__pitch .custom-text-main-text-content a:hover { opacity: 0.8; } .custom-text-block-AUTk5TE90MEM2NDNXW__pitch .custom-text-content strong, .custom-text-block-AUTk5TE90MEM2NDNXW__pitch .custom-text-content b, .custom-text-block-AUTk5TE90MEM2NDNXW__pitch .custom-text-main-text-content strong, .custom-text-block-AUTk5TE90MEM2NDNXW__pitch .custom-text-main-text-content b { font-weight: 700 !important; } .custom-text-block-AUTk5TE90MEM2NDNXW__pitch .custom-text-main-text-content { text-align: left; width: auto; font-weight: var(--font-weight-regular); } .custom-text-block-AUTk5TE90MEM2NDNXW__pitch .custom-text-main-text-content p { text-align: inherit; font-weight: inherit; } .custom-text-block-AUTk5TE90MEM2NDNXW__pitch .custom-text-main-text-content strong, .custom-text-block-AUTk5TE90MEM2NDNXW__pitch .custom-text-main-text-content b { font-weight: var(--font-weight-semibold); } .custom-text-block-AUTk5TE90MEM2NDNXW__pitch .custom-text-main-text-content p { margin: 0; padding: 0; } .custom-text-block-AUTk5TE90MEM2NDNXW__pitch .custom-text-main-text-content > :is(p, ul, ol) + :is(p, ul, ol) { margin-top: 1em; } .custom-text-block-AUTk5TE90MEM2NDNXW__pitch .custom-text-main-text-content strong, .custom-text-block-AUTk5TE90MEM2NDNXW__pitch .custom-text-main-text-content b { font-weight: 700 !important; } .custom-text-block-AUTk5TE90MEM2NDNXW__pitch *:not(strong):not(b) { font-weight: inherit; } .custom-text-block-AUTk5TE90MEM2NDNXW__pitch span:not(strong):not(b), .custom-text-block-AUTk5TE90MEM2NDNXW__pitch div:not(.custom-text-icon):not(strong):not(b), .custom-text-block-AUTk5TE90MEM2NDNXW__pitch p:not(strong):not(b), .custom-text-block-AUTk5TE90MEM2NDNXW__pitch h1:not(strong):not(b), .custom-text-block-AUTk5TE90MEM2NDNXW__pitch h2:not(strong):not(b), .custom-text-block-AUTk5TE90MEM2NDNXW__pitch h3:not(strong):not(b), .custom-text-block-AUTk5TE90MEM2NDNXW__pitch h4:not(strong):not(b), .custom-text-block-AUTk5TE90MEM2NDNXW__pitch h5:not(strong):not(b), .custom-text-block-AUTk5TE90MEM2NDNXW__pitch h6:not(strong):not(b) { font-weight: var(--font-weight-regular); } #bg-benefits-grid-AekJkZjZoMTVHVExPb__checks { display: grid; grid-template-columns: repeat(2, 1fr); max-width: 450px; gap: 15px; margin-top: 10px; margin-bottom: 0px; padding: 0; } #bg-benefits-grid-AekJkZjZoMTVHVExPb__checks .bg-benefit-item { display: flex; align-items: center; gap: 11px; } #bg-benefits-grid-AekJkZjZoMTVHVExPb__checks .bg-benefit-subtext { display: block; font-size: 14px; font-weight: 400; color: #555555; margin-top: 2px; } #bg-benefits-grid-AekJkZjZoMTVHVExPb__checks .bg-benefit-icon { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; border: 1px dashed #668aba; background-color: rgba(0,0,0,0); color: #668aba; display: flex; align-items: center; justify-content: center; } #bg-benefits-grid-AekJkZjZoMTVHVExPb__checks .bg-benefit-icon svg, #bg-benefits-grid-AekJkZjZoMTVHVExPb__checks .bg-benefit-icon img { width: 16px; height: 16px; flex-shrink: 0; } #bg-benefits-grid-AekJkZjZoMTVHVExPb__checks .bg-benefit-text { font-size: 15px; font-weight: var(--font-weight-medium); color: #2a2a2a; font-family: var(--font-body-family-override); line-height: 1.3; } #bg-benefits-grid-AekJkZjZoMTVHVExPb__checks .bg-benefit-value { flex: 0 1 auto; margin-left: auto; padding-left: 12px; text-align: right; font-size: 15px; line-height: 1.3; color: #555555; font-family: var(--font-body-family-override); } #bg-benefits-grid-AekJkZjZoMTVHVExPb__checks .bg-benefit-value :is(strong, b) { font-weight: 700; white-space: nowrap; } @media (max-width: 749px) { #bg-benefits-grid-AekJkZjZoMTVHVExPb__checks { gap: 12px; display: grid; grid-template-columns: repeat(2, 1fr); max-width: 450px; flex-direction: unset; flex-wrap: unset; } #bg-benefits-grid-AekJkZjZoMTVHVExPb__checks .bg-benefit-text { font-size: 13px; } #bg-benefits-grid-AekJkZjZoMTVHVExPb__checks .bg-benefit-value { font-size: 14px; } } #elxr-container-ATkJHdlc5eWZiZ3I3T__callout { display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px 14px 16px; margin-top: 30px; margin-bottom: 16px; background-color: #f3f7fc; border-radius: 4px; border: 1px dashed #668aba; width: 100%; box-sizing: border-box; } #elxr-container-ATkJHdlc5eWZiZ3I3T__callout > *, #elxr-container-ATkJHdlc5eWZiZ3I3T__callout > .elxr-blocks-wrapper > * { width: auto; min-width: 0; } @media (max-width: 749px) { } #elxr-container-ATkJHdlc5eWZiZ3I3T__callout > .elxr-blocks-wrapper { display: contents; } #elxr-container-ATkJHdlc5eWZiZ3I3T__callout > .elxr-empty-state { grid-column: 1 / -1; } .custom-text-block-container-AQm1PR3lWK2UzcU5DK__callout_text { width: 100%; display: block; } .custom-text-block-AQm1PR3lWK2UzcU5DK__callout_text { margin-top: 0px; margin-bottom: 0px; text-align: left; width: 100%; } .custom-text-block-AQm1PR3lWK2UzcU5DK__callout_text .custom-text-wrapper { width: 100%; } .custom-text-block-AQm1PR3lWK2UzcU5DK__callout_text .custom-text-with-divider { display: flex; align-items: center; width: 100%; gap: 12px; } .custom-text-block-AQm1PR3lWK2UzcU5DK__callout_text .divider-line { flex: 1; height: 1px; min-height: 1px; min-width: 20px; background-color: #e0e0e0; border: none; margin: 0; display: block; } .custom-text-block-AQm1PR3lWK2UzcU5DK__callout_text .custom-text-main { display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 1.4; font-weight: var(--font-weight-regular); width: 100%; justify-content: flex-start; flex-shrink: 0; } @media screen and (min-width: 750px) { .custom-text-block-AQm1PR3lWK2UzcU5DK__callout_text .custom-text-main { font-size: 16px; } } .custom-text-block-AQm1PR3lWK2UzcU5DK__callout_text .custom-text-icon { flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #ff3b00; width: 20px; height: 20px; } .custom-text-block-AQm1PR3lWK2UzcU5DK__callout_text .custom-text-icon svg { width: 100%; height: 100%; fill: currentColor; stroke: currentColor; } .custom-text-block-AQm1PR3lWK2UzcU5DK__callout_text .custom-text-after-icon { flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #0f0f0f; width: 20px; height: 20px; } .custom-text-block-AQm1PR3lWK2UzcU5DK__callout_text .custom-text-after-icon svg { width: 100%; height: 100%; fill: currentColor; stroke: currentColor; } .custom-text-block-AQm1PR3lWK2UzcU5DK__callout_text .custom-text-content { color: #2a2a2a; margin: 0; width: 100%; } .custom-text-block-AQm1PR3lWK2UzcU5DK__callout_text .custom-text-content a, .custom-text-block-AQm1PR3lWK2UzcU5DK__callout_text .custom-text-main-text-content a { color: #ff3b00; text-decoration: underline; } .custom-text-block-AQm1PR3lWK2UzcU5DK__callout_text .custom-text-content a:hover, .custom-text-block-AQm1PR3lWK2UzcU5DK__callout_text .custom-text-main-text-content a:hover { opacity: 0.8; } .custom-text-block-AQm1PR3lWK2UzcU5DK__callout_text .custom-text-content strong, .custom-text-block-AQm1PR3lWK2UzcU5DK__callout_text .custom-text-content b, .custom-text-block-AQm1PR3lWK2UzcU5DK__callout_text .custom-text-main-text-content strong, .custom-text-block-AQm1PR3lWK2UzcU5DK__callout_text .custom-text-main-text-content b { font-weight: 700 !important; } .custom-text-block-AQm1PR3lWK2UzcU5DK__callout_text .custom-text-main-text-content { text-align: left; width: auto; font-weight: var(--font-weight-regular); } .custom-text-block-AQm1PR3lWK2UzcU5DK__callout_text .custom-text-main-text-content p { text-align: inherit; font-weight: inherit; } .custom-text-block-AQm1PR3lWK2UzcU5DK__callout_text .custom-text-main-text-content strong, .custom-text-block-AQm1PR3lWK2UzcU5DK__callout_text .custom-text-main-text-content b { font-weight: var(--font-weight-semibold); } .custom-text-block-AQm1PR3lWK2UzcU5DK__callout_text .custom-text-main-text-content p { margin: 0; padding: 0; } .custom-text-block-AQm1PR3lWK2UzcU5DK__callout_text .custom-text-main-text-content > :is(p, ul, ol) + :is(p, ul, ol) { margin-top: 1em; } .custom-text-block-AQm1PR3lWK2UzcU5DK__callout_text .custom-text-main-text-content strong, .custom-text-block-AQm1PR3lWK2UzcU5DK__callout_text .custom-text-main-text-content b { font-weight: 700 !important; } .custom-text-block-AQm1PR3lWK2UzcU5DK__callout_text *:not(strong):not(b) { font-weight: inherit; } .custom-text-block-AQm1PR3lWK2UzcU5DK__callout_text span:not(strong):not(b), .custom-text-block-AQm1PR3lWK2UzcU5DK__callout_text div:not(.custom-text-icon):not(strong):not(b), .custom-text-block-AQm1PR3lWK2UzcU5DK__callout_text p:not(strong):not(b), .custom-text-block-AQm1PR3lWK2UzcU5DK__callout_text h1:not(strong):not(b), .custom-text-block-AQm1PR3lWK2UzcU5DK__callout_text h2:not(strong):not(b), .custom-text-block-AQm1PR3lWK2UzcU5DK__callout_text h3:not(strong):not(b), .custom-text-block-AQm1PR3lWK2UzcU5DK__callout_text h4:not(strong):not(b), .custom-text-block-AQm1PR3lWK2UzcU5DK__callout_text h5:not(strong):not(b), .custom-text-block-AQm1PR3lWK2UzcU5DK__callout_text h6:not(strong):not(b) { font-weight: var(--font-weight-regular); } .custom-image-AY0lmN3BFSldxREFaW__callout_img { margin-top: -40px !important; margin-bottom: -14px !important; } @media screen and (min-width: 750px) { .custom-image-AY0lmN3BFSldxREFaW__callout_img { margin-top: -40px !important; margin-bottom: -14px !important; } } .elxr-blocks-wrapper > :has(> .custom-image-AY0lmN3BFSldxREFaW__callout_img) { flex-shrink: 0; max-width: 100%; } .custom-image-AY0lmN3BFSldxREFaW__callout_img img { vertical-align: bottom; } .custom-image-AY0lmN3BFSldxREFaW__callout_img .custom-image-placeholder-svg { height: 100%; width: auto; max-width: 100%; } #shopify-block-AMmhJbVJrU1g5YzFSV__offers { width: 100%; } #qb-AMmhJbVJrU1g5YzFSV__offers { margin-top: var(--qb-mt); margin-bottom: var(--qb-mb); width: 100%; font-family: var(--font-body-family, sans-serif); box-sizing: border-box; } #qb-AMmhJbVJrU1g5YzFSV__offers *, #qb-AMmhJbVJrU1g5YzFSV__offers *::before, #qb-AMmhJbVJrU1g5YzFSV__offers *::after { box-sizing: border-box; } #qb-AMmhJbVJrU1g5YzFSV__offers .qb-form { display: flex; flex-direction: column; gap: var(--qb-gap); width: 100%; } #qb-AMmhJbVJrU1g5YzFSV__offers .quantity-break-option-container { position: relative; width: 100%; } #qb-AMmhJbVJrU1g5YzFSV__offers .quantity-break-option { display: flex; flex-direction: column; width: 100%; border: var(--qb-sbw) var(--qb-ubs) var(--qb-ubc); border-radius: var(--qb-r); padding: var(--qb-pv) var(--qb-ph); background-color: var(--qb-ubg); cursor: pointer; transition: border-color 0.2s, background-color 0.2s, transform 0.2s, box-shadow 0.2s; position: relative; margin: 0; overflow: visible; text-align: left; } #qb-AMmhJbVJrU1g5YzFSV__offers .quantity-break-option:hover { border-color: var(--qb-hbc); background-color: var(--qb-hbg); } #qb-AMmhJbVJrU1g5YzFSV__offers .quantity-break-option:has(> input.quantity-break-input:checked) { border-color: var(--qb-sbc) !important; border-style: var(--qb-sbs) !important; background-color: var(--qb-sbg) !important; } #qb-AMmhJbVJrU1g5YzFSV__offers .quantity-break-option.selected { border-color: var(--qb-sbc) !important; border-style: var(--qb-sbs) !important; background-color: var(--qb-sbg) !important; } #qb-AMmhJbVJrU1g5YzFSV__offers .quantity-break-input { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; margin: 0; } #qb-AMmhJbVJrU1g5YzFSV__offers .quantity-break-radio-container { flex-shrink: 0; display: none; align-items: center; justify-content: center; } #qb-AMmhJbVJrU1g5YzFSV__offers .quantity-break-radio-circle { display: block; width: 18px; height: 18px; color: var(--qb-rabc); overflow: visible; transition: color 0.2s; flex-shrink: 0; } #qb-AMmhJbVJrU1g5YzFSV__offers .quantity-break-radio-dot { opacity: 0; transform: scale(0.5); transform-box: fill-box; transform-origin: center; transition: opacity 0.2s, transform 0.2s; } #qb-AMmhJbVJrU1g5YzFSV__offers .quantity-break-option input.quantity-break-input:checked ~ .quantity-break-main-content .quantity-break-radio-circle { color: var(--qb-raac); } #qb-AMmhJbVJrU1g5YzFSV__offers .quantity-break-option input.quantity-break-input:checked ~ .quantity-break-main-content .quantity-break-radio-dot { opacity: 1; transform: scale(1); } #qb-AMmhJbVJrU1g5YzFSV__offers .quantity-break-option.selected .quantity-break-radio-circle { color: var(--qb-raac); } #qb-AMmhJbVJrU1g5YzFSV__offers .quantity-break-option.selected .quantity-break-radio-dot { opacity: 1; transform: scale(1); } #qb-AMmhJbVJrU1g5YzFSV__offers .quantity-break-main-content { display: flex; flex-direction: row; align-items: center; width: 100%; gap: var(--qb-cg); justify-content: space-between; } #qb-AMmhJbVJrU1g5YzFSV__offers .quantity-break-content-wrapper { display: flex; flex-direction: row; align-items: center; justify-content: space-between; flex: 1; min-width: 0; gap: var(--qb-cg); } #qb-AMmhJbVJrU1g5YzFSV__offers .quantity-break-image-details-group { display: flex; flex-direction: row; align-items: center; gap: var(--qb-cg); flex: 1; min-width: 0; } #qb-AMmhJbVJrU1g5YzFSV__offers .quantity-break-image { width: var(--qb-img); height: var(--qb-img); border-radius: 4px; flex-shrink: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; } #qb-AMmhJbVJrU1g5YzFSV__offers .quantity-break-image img { width: 100%; height: 100%; object-fit: cover; display: block; } #qb-AMmhJbVJrU1g5YzFSV__offers .quantity-break-details { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; } #qb-AMmhJbVJrU1g5YzFSV__offers .quantity-break-title-container { display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 2px 6px; } #qb-AMmhJbVJrU1g5YzFSV__offers .quantity-break-title { font-weight: var(--qb-tw) !important; font-size: var(--qb-ts) !important; color: var(--qb-tc) !important; line-height: 1.2; word-break: break-word; flex: 0 0 auto; max-width: 100%; min-width: 0; margin: 0; padding: 0; } #qb-AMmhJbVJrU1g5YzFSV__offers .quantity-break-title-hl { color: var(--qb-thc) !important; } #qb-AMmhJbVJrU1g5YzFSV__offers .quantity-break-savings { font-size: var(--qb-saves); color: var(--qb-savec); line-height: 1.2; margin: 0; } #qb-AMmhJbVJrU1g5YzFSV__offers .qb-sub-lock { display: inline-grid; width: fit-content; margin-top: 6px; font-size: 12px; line-height: 1.2; letter-spacing: var(--letter-spacing-body, normal); } #qb-AMmhJbVJrU1g5YzFSV__offers .qb-sub-lock__state { grid-area: 1 / 1; justify-self: start; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px 4px 8px; border-radius: 999px; transition: opacity 0.2s ease, visibility 0s linear 0s; } #qb-AMmhJbVJrU1g5YzFSV__offers .qb-sub-lock__state--locked { background: var(--qb-lock-bg); color: var(--qb-lock-text); --qb-em: var(--qb-lock-em, var(--qb-lock-text)); } #qb-AMmhJbVJrU1g5YzFSV__offers .qb-sub-lock__state--unlocked { background: var(--qb-unlock-bg); color: var(--qb-unlock-text); --qb-em: var(--qb-unlock-em, var(--qb-unlock-text)); } #qb-AMmhJbVJrU1g5YzFSV__offers .quantity-break-option:not(.qb-option--locked) .qb-sub-lock__state--locked, #qb-AMmhJbVJrU1g5YzFSV__offers .qb-option--locked .qb-sub-lock__state--unlocked { opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0s linear 0.2s; } #qb-AMmhJbVJrU1g5YzFSV__offers .qb-sub-lock__icon { width: 13px; height: 13px; flex-shrink: 0; } #qb-AMmhJbVJrU1g5YzFSV__offers .qb-sub-lock__text { font-weight: 500; color: color-mix(in srgb, currentColor 82%, transparent); } #qb-AMmhJbVJrU1g5YzFSV__offers .qb-sub-lock__em { font-weight: 700; color: var(--qb-em); } #qb-AMmhJbVJrU1g5YzFSV__offers .quantity-break-image, #qb-AMmhJbVJrU1g5YzFSV__offers .quantity-break-price-container { transition: opacity 0.2s ease; } #qb-AMmhJbVJrU1g5YzFSV__offers .qb-option--locked .quantity-break-image, #qb-AMmhJbVJrU1g5YzFSV__offers .qb-option--locked .quantity-break-price-container { opacity: 0.55; } @media (prefers-reduced-motion: reduce) { #qb-AMmhJbVJrU1g5YzFSV__offers .qb-sub-lock__state, #qb-AMmhJbVJrU1g5YzFSV__offers .quantity-break-image, #qb-AMmhJbVJrU1g5YzFSV__offers .quantity-break-price-container { transition: none !important; } } #qb-AMmhJbVJrU1g5YzFSV__offers .quantity-break-save-badge { display: inline-flex; align-items: center; flex-shrink: 0; width: fit-content; background-color: var(--qb-sbbg); color: var(--qb-sbtc); font-size: 11px; line-height: 1; padding: 2px 7px; border-radius: var(--qb-sbr); font-weight: 700 !important; text-transform: uppercase; white-space: nowrap; overflow: hidden; position: relative; } #qb-AMmhJbVJrU1g5YzFSV__offers .quantity-break-save-badge { display: none !important; } #qb-AMmhJbVJrU1g5YzFSV__offers .quantity-break-badge { position: absolute; top: -9px; right: 10px; padding: 0 8px; height: 18px; border-radius: 4px; font-size: 11px; font-weight: 700 !important; white-space: nowrap; display: flex; align-items: center; z-index: 2; line-height: 1; } #qb-AMmhJbVJrU1g5YzFSV__offers .quantity-break-price-container { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; min-width: 55px; text-align: right; gap: 1px; } #qb-AMmhJbVJrU1g5YzFSV__offers .quantity-break-price { color: var(--qb-pc) !important; font-weight: 700 !important; font-size: var(--qb-ps) !important; margin: 0; } #qb-AMmhJbVJrU1g5YzFSV__offers .quantity-break-original-price { font-size: var(--qb-cs) !important; color: var(--qb-cc) !important; text-decoration: line-through; margin: 0; } #qb-AMmhJbVJrU1g5YzFSV__offers .quantity-break-variant-container { display: none; width: 100%; } #qb-AMmhJbVJrU1g5YzFSV__offers[data-enable-vs="true"] .quantity-break-variant-container { display: grid; grid-template-rows: 0fr; } #qb-AMmhJbVJrU1g5YzFSV__offers.qb-anim-ready[data-enable-vs="true"] .quantity-break-variant-container { transition: grid-template-rows 0.28s cubic-bezier(0.33, 1, 0.68, 1); } #qb-AMmhJbVJrU1g5YzFSV__offers .quantity-break-variant-selection { display: flex; flex-direction: column; gap: 8px; overflow: hidden; min-height: 0; opacity: 0; padding-top: 0; } #qb-AMmhJbVJrU1g5YzFSV__offers.qb-anim-ready .quantity-break-variant-selection { transition: opacity 0.28s cubic-bezier(0.33, 1, 0.68, 1), padding-top 0.28s cubic-bezier(0.33, 1, 0.68, 1); } #qb-AMmhJbVJrU1g5YzFSV__offers .quantity-break-option.selected .quantity-break-variant-container { grid-template-rows: 1fr; } #qb-AMmhJbVJrU1g5YzFSV__offers.qb-anim-ready .quantity-break-option.selected .quantity-break-variant-container { transition-duration: 0.32s; } #qb-AMmhJbVJrU1g5YzFSV__offers .quantity-break-option.selected .quantity-break-variant-selection { opacity: 1; padding-top: 16px; } #qb-AMmhJbVJrU1g5YzFSV__offers.qb-anim-ready .quantity-break-option.selected .quantity-break-variant-selection { transition-duration: 0.32s; } #qb-AMmhJbVJrU1g5YzFSV__offers .quantity-break-variant-selection:has(.qb-imgdd-list:not([hidden])) { overflow: visible; } #qb-AMmhJbVJrU1g5YzFSV__offers .quantity-break-option-container:has(.qb-imgdd-list:not([hidden])) { z-index: 5; } #qb-AMmhJbVJrU1g5YzFSV__offers .quantity-break-variant-selectors { display: flex; flex-direction: column; flex-wrap: wrap; align-items: flex-start; gap: 8px; background-color: transparent; } #qb-AMmhJbVJrU1g5YzFSV__offers .quantity-break-variant-left { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; min-width: 0; } #qb-AMmhJbVJrU1g5YzFSV__offers .quantity-break-variant-right { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; } #qb-AMmhJbVJrU1g5YzFSV__offers .quantity-break-variant-label { font-size: var(--qb-vls); font-weight: 600 !important; color: var(--qb-vlc); display: flex; align-items: center; flex-wrap: wrap; gap: 4px; min-width: 0; max-width: 100%; } #qb-AMmhJbVJrU1g5YzFSV__offers .qb-variant-product-title { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #qb-AMmhJbVJrU1g5YzFSV__offers .quantity-break-variant-label .quantity-number { display: inline-flex; align-items: center; justify-content: center; width: var(--qb-qcs); height: var(--qb-qcs); border-radius: 50%; background-color: var(--qb-qcbg); color: var(--qb-qctc); font-size: var(--qb-qcfs); font-weight: 600 !important; flex-shrink: 0; } #qb-AMmhJbVJrU1g5YzFSV__offers .quantity-break-variant-label .quantity-number { display: none; } #qb-AMmhJbVJrU1g5YzFSV__offers .quantity-break-variant-option { position: relative; display: flex; align-items: center; flex-shrink: 0; } #qb-AMmhJbVJrU1g5YzFSV__offers .qb-imgdd { position: relative; } #qb-AMmhJbVJrU1g5YzFSV__offers .qb-imgdd-select { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; } #qb-AMmhJbVJrU1g5YzFSV__offers .qb-imgdd-btn { display: inline-flex; align-items: center; gap: 6px; min-width: 90px; max-width: 180px; --qb-dd-radius: 8px; --qb-dd-inset: 3px; height: calc(var(--qb-ddts) + 2 * var(--qb-dd-inset) + 2px); padding: var(--qb-dd-inset) 8px; border: 1px solid #e2e2e2; border-radius: var(--qb-dd-radius); background-color: #fff; color: #333; font-family: inherit; font-size: 13px; cursor: pointer; transition: border-color 0.15s; } #qb-AMmhJbVJrU1g5YzFSV__offers:not([data-layout="text"]) .quantity-break-variant-option:not(.qb-opt-text) .qb-imgdd-btn { padding-left: var(--qb-dd-inset); } #qb-AMmhJbVJrU1g5YzFSV__offers .qb-imgdd-btn .qb-imgdd-thumb { border-radius: max(2px, calc(var(--qb-dd-radius) - var(--qb-dd-inset) - 1px)); } #qb-AMmhJbVJrU1g5YzFSV__offers .qb-imgdd-btn:hover, #qb-AMmhJbVJrU1g5YzFSV__offers .qb-imgdd-btn[aria-expanded="true"] { border-color: #b5b5b5; } #qb-AMmhJbVJrU1g5YzFSV__offers .qb-imgdd-thumb { width: var(--qb-ddts); height: var(--qb-ddts); flex-shrink: 0; border-radius: 4px; overflow: hidden; display: flex; align-items: center; justify-content: center; background-color: #f3f3f3; } #qb-AMmhJbVJrU1g5YzFSV__offers .qb-imgdd-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } #qb-AMmhJbVJrU1g5YzFSV__offers .qb-imgdd-thumb-fallback { font-size: 9px; font-weight: 600; line-height: 1; text-transform: uppercase; color: #888; } #qb-AMmhJbVJrU1g5YzFSV__offers .qb-imgdd-current { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } #qb-AMmhJbVJrU1g5YzFSV__offers .qb-imgdd-caret { width: 12px; height: 12px; margin-left: auto; flex-shrink: 0; transition: transform 0.2s; } #qb-AMmhJbVJrU1g5YzFSV__offers .qb-imgdd-btn[aria-expanded="true"] .qb-imgdd-caret { transform: rotate(180deg); } #qb-AMmhJbVJrU1g5YzFSV__offers .qb-imgdd-list { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; min-width: 100%; max-height: var(--qb-ddmh); overflow-y: auto; margin: 0; padding: 4px; list-style: none; background-color: #fff; border: 1px solid #e2e2e2; border-radius: 8px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12); } #qb-AMmhJbVJrU1g5YzFSV__offers .qb-imgdd-list[hidden] { display: none; } #qb-AMmhJbVJrU1g5YzFSV__offers .qb-imgdd-opt { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; cursor: pointer; font-size: 13px; color: #333; } #qb-AMmhJbVJrU1g5YzFSV__offers .qb-imgdd-opt:hover, #qb-AMmhJbVJrU1g5YzFSV__offers .qb-imgdd-opt.qb-imgdd-active { background-color: #f4f4f4; } #qb-AMmhJbVJrU1g5YzFSV__offers .qb-imgdd-opt[aria-selected="true"] { font-weight: 600; } #qb-AMmhJbVJrU1g5YzFSV__offers .qb-imgdd-opt[aria-disabled="true"] { opacity: 0.4; cursor: not-allowed; text-decoration: line-through; } #qb-AMmhJbVJrU1g5YzFSV__offers .qb-imgdd-name { white-space: nowrap; } #qb-AMmhJbVJrU1g5YzFSV__offers .qb-opt-text .qb-imgdd-thumb { display: none !important; } #qb-AMmhJbVJrU1g5YzFSV__offers[data-layout="text"] .qb-imgdd-thumb { display: none !important; } #qb-AMmhJbVJrU1g5YzFSV__offers .qb-swatches { display: none; flex-wrap: wrap; gap: 6px; align-items: center; padding: 4px; } #qb-AMmhJbVJrU1g5YzFSV__offers[data-layout="swatches"] .qb-opt-visual .qb-swatches { display: flex; } #qb-AMmhJbVJrU1g5YzFSV__offers[data-layout="swatches"] .qb-opt-visual .qb-imgdd-btn, #qb-AMmhJbVJrU1g5YzFSV__offers[data-layout="swatches"] .qb-opt-visual .qb-imgdd-list { display: none !important; } #qb-AMmhJbVJrU1g5YzFSV__offers .qb-swatch { position: relative; flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; border: none; background-size: cover; background-position: center; background-color: #e5e5e5; cursor: pointer; overflow: hidden; box-shadow: 0 0 0 1px rgba(0,0,0,0.12); transition: box-shadow 0.15s; display: flex; align-items: center; justify-content: center; padding: 0; } #qb-AMmhJbVJrU1g5YzFSV__offers .qb-swatch:hover { box-shadow: 0 0 0 1px rgba(0,0,0,0.25); } #qb-AMmhJbVJrU1g5YzFSV__offers .qb-swatch[aria-selected="true"] { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--qb-sbc); } #qb-AMmhJbVJrU1g5YzFSV__offers .qb-swatch[aria-disabled="true"] { opacity: 0.35; cursor: not-allowed; } #qb-AMmhJbVJrU1g5YzFSV__offers .qb-swatch-init { font-size: 9px; font-weight: 700; line-height: 1; text-transform: uppercase; color: #666; pointer-events: none; } #qb-AMmhJbVJrU1g5YzFSV__offers .qb-bars-container { overflow: hidden; border-bottom-left-radius: calc(var(--qb-r) - var(--qb-sbw)); border-bottom-right-radius: calc(var(--qb-r) - var(--qb-sbw)); margin-left: calc(var(--qb-ph) * -1); margin-right: calc(var(--qb-ph) * -1); margin-bottom: calc(var(--qb-pv) * -1); margin-top: 8px; } #qb-AMmhJbVJrU1g5YzFSV__offers .qb-bar { display: flex; align-items: center; gap: 8px; padding: 8px var(--qb-ph); font-size: 13px; line-height: 1.3; border-top: 1px solid rgba(0, 0, 0, 0.08); background-color: var(--qb-bar-bg, transparent); color: var(--qb-bar-text, inherit); transition: background-color 0.25s ease, color 0.25s ease; } #qb-AMmhJbVJrU1g5YzFSV__offers .quantity-break-option.selected .qb-bar, #qb-AMmhJbVJrU1g5YzFSV__offers .quantity-break-option:has(> input.quantity-break-input:checked) .qb-bar { background-color: var(--qb-bar-bg-sel, var(--qb-bar-bg, transparent)); color: var(--qb-bar-text-sel, var(--qb-bar-text, inherit)); } #qb-AMmhJbVJrU1g5YzFSV__offers .qb-bar:first-child { margin-top: 8px; } #qb-AMmhJbVJrU1g5YzFSV__offers .qb-bar-icon { flex-shrink: 0; } #qb-AMmhJbVJrU1g5YzFSV__offers .qb-bar-icon img { display: block; object-fit: contain; } #qb-AMmhJbVJrU1g5YzFSV__offers .qb-bar-content { flex: 1 1 0; min-width: 0; } #qb-AMmhJbVJrU1g5YzFSV__offers .qb-bar-cd-label { margin-right: 4px; } #qb-AMmhJbVJrU1g5YzFSV__offers .qb-bar-gift-img { display: block; width: 34px; height: 34px; border-radius: 4px; object-fit: cover; background: #fff; } #qb-AMmhJbVJrU1g5YzFSV__offers .qb-gift-variant-select { font-family: inherit; font-size: 13px; line-height: 1.2; min-height: 34px; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 6px; padding: 7px 10px; background: #ffffff; color: #111111; cursor: pointer; margin-left: auto; flex-shrink: 0; } .shop-add-to-cart-button .qb-compare-price, .product-form__submit .qb-compare-price { text-decoration: line-through; opacity: 0.65; margin-left: 4px; font-size: inherit; } @media screen and (max-width: 749px) { #qb-AMmhJbVJrU1g5YzFSV__offers .quantity-break-variant-label { font-size: var(--qb-vlsm); } #qb-AMmhJbVJrU1g5YzFSV__offers .quantity-break-variant-label .quantity-number { width: var(--qb-qcsm); height: var(--qb-qcsm); font-size: var(--qb-qcfsm); } } @media screen and (max-width: 380px) { #qb-AMmhJbVJrU1g5YzFSV__offers .quantity-break-option { padding: calc(var(--qb-pv) * 0.75) calc(var(--qb-ph) * 0.75); } #qb-AMmhJbVJrU1g5YzFSV__offers .qb-bars-container { margin-left: calc(var(--qb-ph) * -0.75); margin-right: calc(var(--qb-ph) * -0.75); margin-bottom: calc(var(--qb-pv) * -0.75); } #qb-AMmhJbVJrU1g5YzFSV__offers .qb-bar { padding-left: calc(var(--qb-ph) * 0.75); padding-right: calc(var(--qb-ph) * 0.75); } #qb-AMmhJbVJrU1g5YzFSV__offers .quantity-break-radio-circle { width: 14px; height: 14px; } #qb-AMmhJbVJrU1g5YzFSV__offers .quantity-break-image { width: calc(var(--qb-img) * 0.8); height: calc(var(--qb-img) * 0.8); } #qb-AMmhJbVJrU1g5YzFSV__offers .quantity-break-title { font-size: calc(var(--qb-ts) - 2px) !important; } #qb-AMmhJbVJrU1g5YzFSV__offers .quantity-break-price { font-size: calc(var(--qb-ps) - 2px) !important; } #qb-AMmhJbVJrU1g5YzFSV__offers .quantity-break-original-price { font-size: calc(var(--qb-cs) - 1px) !important; } } #qb-AMmhJbVJrU1g5YzFSV__offers.is-variant-soldout { opacity: 0.5; pointer-events: none; } .subscribe-save-wrapper { margin-top: 0px; margin-bottom: 12px; width: 100% !important; margin-left: auto; margin-right: auto; --subscribe-border-color: #668aba; --subscribe-border-color-selected: #668aba; --subscribe-border-width-unselected: 2px; --subscribe-border-radius: 12px; --subscribe-bg-unselected: #ffffff; --subscribe-bg-selected: #ffffff; --subscribe-hover-bg: #ffffff; --subscribe-heading-color: #668aba; --subscribe-heading-size: 16px; --subscribe-title-color: #668aba; --subscribe-title-size: 18px; --subscribe-subtitle-color: #111111; --subscribe-subtitle-size: 15px; --subscribe-price-color-unselected: #0f0f0f; --subscribe-price-color-selected: #0f0f0f; --subscribe-price-size: 18px; --subscribe-compare-price-color-unselected: #999999; --subscribe-compare-price-color-selected: #999999; --subscribe-compare-price-size: 14px; --subscribe-per-serving-size: 12px; --subscribe-benefits-color: #666666; --subscribe-benefits-size: 13px; --subscribe-toggle-bg-unselected: #cccccc; --subscribe-toggle-bg-selected: #b4e1ed; --subscribe-toggle-circle: #ffffff; --subscribe-checkbox-size: 28px; --subscribe-checkbox-border-color: #668aba; --subscribe-checkbox-checked-border-color: #668aba; --subscribe-checkbox-checked-bg: #668aba; --subscribe-checkbox-check-color: #ffffff; --subscribe-checkbox-border-radius: 2px; --subscribe-checkbox-border-width: 2px; --subscribe-checkbox-border-style: solid; --subscribe-checkbox-checked-border-width: 2px; --subscribe-checkbox-checked-border-style: solid; --subscribe-badge-size: 11px; --subscribe-badge-radius: 4px; --subscribe-badge-padding-v: 4px; --subscribe-badge-padding-h: 8px; --subscribe-save-badge-bg: #668aba; --subscribe-save-badge-color: #FFFFFF; --subscribe-save-badge-size: 11px; --subscribe-save-badge-radius: 4px; --subscribe-gift-image-size: 60px; --subscribe-gift-text-color-unselected: #333333; --subscribe-gift-text-color-selected: #333333; --subscribe-gift-text-size: 12px; --subscribe-gift-text-size-mobile: 12px; --subscribe-gift-text-weight: var(--font-weight-semibold); --subscribe-gift-qty-bg: #668aba; --subscribe-gift-qty-color: #FFFFFF; --subscribe-gift-qty-size: 11px; --subscribe-gift-container-radius: 8px; --subscribe-gift-bg-unselected: #f9f9f9; --subscribe-gift-border-unselected: #cccccc; --subscribe-gift-bg-selected: #fff5f5; --subscribe-gift-border-selected: #668aba; --subscribe-bonus-text-color: #333333; --subscribe-bonus-size: 13px; --subscribe-bonus-icon-size: 16px; --subscribe-bonus-icon-color: #333333; --subscribe-padding-top: 18px; --subscribe-padding-bottom: 18px; --subscribe-padding-left: 18px; --subscribe-padding-right: 18px; --subscribe-gap: 12px; --subscribe-top-row-border-color: #e0e0e0; --subscribe-top-row-border-width: 1px; --subscribe-divider-gap: 10px; --subscribe-tab-bg: #333333; --subscribe-tab-text-color: #FFFFFF; --subscribe-tab-font-size: 11px; --subscribe-frequency-label-color: #666666; --subscribe-frequency-label-size: 12px; --subscribe-frequency-dropdown-bg: #ffffff; --subscribe-frequency-dropdown-border: #cccccc; --subscribe-frequency-dropdown-text: #333333; --subscribe-frequency-dropdown-size: 13px; --subscribe-frequency-wrapper-bg: #f9f9f9; --subscribe-frequency-wrapper-padding: 10px; --subscribe-frequency-wrapper-radius: 6px; } .subscribe-save-wrapper, .subscribe-save-wrapper * { letter-spacing: var(--letter-spacing-body) !important; font-family: var(--font-body-family) !important; } .subscribe-save-heading { font-size: var(--subscribe-heading-size) !important; font-weight: 700; margin-bottom: 10px; color: var(--subscribe-heading-color); } .subscribe-save-heading p { margin: 0; } .subscribe-save-heading strong, .subscribe-save-heading b { font-weight: 700 !important; } .subscribe-save-container { border: var(--subscribe-border-width-unselected) dashed var(--subscribe-border-color); border-radius: var(--subscribe-border-radius); padding: var(--subscribe-padding-top) var(--subscribe-padding-right) var(--subscribe-padding-bottom) var(--subscribe-padding-left); position: relative; background: var(--subscribe-bg-unselected); transition: all 0.3s ease; cursor: pointer; user-select: none; } .subscribe-save-container:has(input:checked) { border-color: var(--subscribe-border-color-selected); border-style: dashed; background-color: var(--subscribe-bg-selected); } .subscribe-active-tab { position: absolute; top: -24px; background-color: var(--subscribe-tab-bg); color: var(--subscribe-tab-text-color); font-size: var(--subscribe-tab-font-size) !important; padding: 6px 16px; border-radius: 8px 8px 0 0; font-weight: 700; text-transform: uppercase; opacity: 0; transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); z-index: -1; white-space: nowrap; line-height: 1; pointer-events: none; } .subscribe-active-tab--center { left: 50%; transform: translateX(-50%) translateY(10px); } .subscribe-active-tab--left { left: 20px; transform: translateY(10px); } .subscribe-active-tab--right { right: 20px; left: auto; transform: translateY(10px); } .subscribe-save-container:has(input:checked) .subscribe-active-tab--center { opacity: 1; transform: translateX(-50%) translateY(0); } .subscribe-save-container:has(input:checked) .subscribe-active-tab--left { opacity: 1; transform: translateY(0); } .subscribe-save-container:has(input:checked) .subscribe-active-tab--right { opacity: 1; transform: translateY(0); } .subscribe-top-row { width: 100%; transition: border-color 0.3s ease; } .subscribe-row-content { display: flex; justify-content: space-between; align-items: center; gap: 15px; width: 100%; margin-bottom: 0px; } .subscribe-top-left { display: flex; align-items: center; gap: 12px; } .subscribe-toggle-switch { position: relative; display: inline-block; width: 52px; height: 28px; flex-shrink: 0; } .subscribe-toggle-header { display: flex; flex-direction: column; align-items: flex-start; gap: 0px; min-width: 0; } .subscribe-title-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .subscribe-toggle-option { font-size: var(--subscribe-title-size) !important; font-weight: 700; color: var(--subscribe-title-color); user-select: none; } .subscribe-title-subtitle { font-size: var(--subscribe-subtitle-size) !important; color: var(--subscribe-subtitle-color); line-height: 1.4; font-weight: 400; } .subscribe-title-subtitle p { margin: 0; color: inherit !important; } .subscribe-title-subtitle span, .subscribe-title-subtitle strong, .subscribe-title-subtitle b { color: inherit !important; } .subscribe-title-subtitle strong, .subscribe-title-subtitle b { font-weight: 700 !important; } .subscribe-billed-subtitle { font-size: var(--subscribe-subtitle-size) !important; color: var(--subscribe-subtitle-color); line-height: 1.4; font-weight: 400; } .subscribe-billed-subtitle p { margin: 0; color: inherit !important; } .subscribe-per-serving { font-size: var(--subscribe-per-serving-size) !important; color: var(--subscribe-compare-price-color-unselected); line-height: 1.2; text-transform: uppercase; white-space: nowrap; } .subscribe-frequency-wrapper { display: flex; flex-direction: column; align-items: stretch; gap: 6px; margin-top: 0px; width: 100%; max-height: 0; opacity: 0; overflow: hidden; margin-bottom: 0; padding: 0 var(--subscribe-frequency-wrapper-padding); background-color: var(--subscribe-frequency-wrapper-bg); border-radius: var(--subscribe-frequency-wrapper-radius); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .subscribe-save-container:has(input:checked) .subscribe-frequency-wrapper { max-height: 80px; opacity: 1; margin-top: 12px; padding: 10px; } .subscribe-frequency-label { font-size: var(--subscribe-frequency-label-size) !important; color: var(--subscribe-frequency-label-color); font-weight: 500; white-space: nowrap; } .subscribe-frequency-dropdown { font-size: var(--subscribe-frequency-dropdown-size) !important; color: var(--subscribe-frequency-dropdown-text); background-color: var(--subscribe-frequency-dropdown-bg); border: 1px solid var(--subscribe-frequency-dropdown-border); border-radius: 4px; padding: 8px 12px; cursor: pointer; width: 100%; box-sizing: border-box; font-family: var(--font-body-family) !important; letter-spacing: var(--letter-spacing-body) !important; transition: border-color 0.3s ease; } .subscribe-frequency-dropdown:hover { border-color: var(--subscribe-border-color-selected); } .subscribe-frequency-dropdown:focus { outline: none; border-color: var(--subscribe-border-color-selected); } .subscribe-toggle-switch input { opacity: 0; width: 0; height: 0; } .subscribe-toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--subscribe-toggle-bg-unselected); transition: 0.3s; border-radius: 28px; } .subscribe-toggle-slider:before { position: absolute; content: ""; height: 20px; width: 20px; left: 4px; bottom: 4px; background-color: var(--subscribe-toggle-circle); transition: 0.3s; border-radius: 50%; } .subscribe-toggle-switch input:checked + .subscribe-toggle-slider { background-color: var(--subscribe-toggle-bg-selected); } .subscribe-toggle-switch input:checked + .subscribe-toggle-slider:before { transform: translateX(24px); } .subscribe-checkbox-switch { position: relative; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; } .subscribe-checkbox-switch input { opacity: 0; width: 0; height: 0; position: absolute; } .subscribe-checkbox-box { display: flex; align-items: center; justify-content: center; width: var(--subscribe-checkbox-size); height: var(--subscribe-checkbox-size); border: var(--subscribe-checkbox-border-width) var(--subscribe-checkbox-border-style) var(--subscribe-checkbox-border-color); border-radius: var(--subscribe-checkbox-border-radius); background: #ffffff; transition: border-color 0.2s ease, background-color 0.2s ease; cursor: pointer; } .subscribe-checkbox-check { width: 60%; height: 60%; color: var(--subscribe-checkbox-check-color); opacity: 0; transform: scale(0.5); transition: opacity 0.2s ease, transform 0.2s ease; } .subscribe-checkbox-switch input:checked + .subscribe-checkbox-box { border-color: var(--subscribe-checkbox-checked-border-color); border-width: var(--subscribe-checkbox-checked-border-width); border-style: var(--subscribe-checkbox-checked-border-style); background-color: var(--subscribe-checkbox-checked-bg); } .subscribe-checkbox-switch input:checked + .subscribe-checkbox-box .subscribe-checkbox-check { opacity: 1; transform: scale(1); } .subscribe-badges { position: absolute; top: -12px; right: 20px; display: flex; pointer-events: none; } .subscribe-badge { padding: var(--subscribe-badge-padding-v) var(--subscribe-badge-padding-h); border-radius: var(--subscribe-badge-radius); font-size: var(--subscribe-badge-size) !important; font-weight: 800; text-transform: uppercase; line-height: 1; } .subscribe-save-badge { display: inline-flex; align-items: center; justify-content: center; background-color: var(--subscribe-save-badge-bg); color: var(--subscribe-save-badge-color); font-size: var(--subscribe-save-badge-size) !important; padding: 4px 8px; border-radius: var(--subscribe-save-badge-radius); font-weight: 700 !important; text-transform: uppercase; white-space: nowrap; line-height: 1; } .subscribe-main-content { padding-top: 0; } .subscribe-price-row { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; width: auto !important; min-width: max-content; max-width: 100%; flex-shrink: 0; margin-left: auto; } .subscribe-price-current { font-weight: 700; font-size: var(--subscribe-price-size) !important; color: var(--subscribe-price-color-unselected); line-height: 1.2; white-space: nowrap; transition: color 0.3s ease; } .subscribe-price-compare { font-size: var(--subscribe-compare-price-size) !important; text-decoration: line-through; color: var(--subscribe-compare-price-color-unselected); line-height: 1.2; white-space: nowrap; align-self: flex-end; transition: color 0.3s ease; } .subscribe-save-container:has(input:checked) .subscribe-price-current { color: var(--subscribe-price-color-selected) !important; } .subscribe-save-container:has(input:checked) .subscribe-price-compare { color: var(--subscribe-compare-price-color-selected) !important; } .subscribe-benefits-wrapper { margin-top: 0px; transition: opacity 0.3s ease; opacity: 0.4; } .subscribe-save-container:has(input:checked) .subscribe-benefits-wrapper { opacity: 1; } .subscribe-benefits { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid #eee; font-size: var(--subscribe-benefits-size) !important; line-height: 1.6; color: var(--subscribe-benefits-color); } .subscribe-benefits p { margin: 0 0 5px; display: flex; align-items: center; gap: 5px; } .subscribe-benefits:last-child { border-bottom: none; } .subscribe-benefits-two_column { display: flex !important; flex-wrap: wrap !important; gap: 5px 10px !important; } .subscribe-benefits-two_column p, .subscribe-benefits-two_column li { width: calc(50% - 5px) !important; display: inline-flex !important; margin: 0 !important; box-sizing: border-box !important; } .subscribe-benefits-flex_row { display: flex !important; flex-wrap: wrap !important; gap: 10px 15px !important; } .subscribe-benefits-flex_row p, .subscribe-benefits-flex_row li { width: auto !important; margin: 0 !important; flex-shrink: 0 !important; display: inline-flex !important; } .bonus-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; margin-bottom: 0; } .bonus-item { display: inline-flex; align-items: center; gap: 8px; font-size: var(--subscribe-bonus-size) !important; color: var(--subscribe-bonus-text-color); width: fit-content; } .bonus-icon { flex-shrink: 0; width: var(--subscribe-bonus-icon-size); height: var(--subscribe-bonus-icon-size); object-fit: contain; color: var(--subscribe-bonus-icon-color); } .bonus-icon svg { width: 100%; height: 100%; display: block; } .bonus-text { display: inline; } .bonus-text p { display: inline; margin: 0; padding: 0; } .bonus-text strong, .bonus-text b { font-weight: 700 !important; } .bonus-list.bonus-list-two_column { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; gap: 5px 10px !important; } .bonus-list.bonus-list-two_column .bonus-item { width: calc(50% - 5px) !important; display: inline-flex !important; margin: 0 !important; box-sizing: border-box !important; flex: 0 0 auto !important; } .bonus-list.bonus-list-flex_row { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; gap: 10px 15px !important; } .bonus-list.bonus-list-flex_row .bonus-item { width: auto !important; margin: 0 !important; flex-shrink: 0 !important; display: inline-flex !important; flex: 0 0 auto !important; } .free-gift-container { display: flex; align-items: center; justify-content: space-between; background: var(--subscribe-gift-bg-unselected); border: 1px dashed var(--subscribe-gift-border-unselected); border-radius: var(--subscribe-gift-container-radius); padding: 8px 8px; margin-top: 5px; opacity: 0.6; transition: background-color 0.3s ease, border-color 0.3s ease, opacity 0.3s ease; } .subscribe-save-container:has(input:checked) .free-gift-container { background: var(--subscribe-gift-bg-selected); border-color: var(--subscribe-gift-border-selected); opacity: 1; } .gift-content-left { display: flex; align-items: center; gap: 8px; flex: 1; } .gift-image { width: calc(var(--subscribe-gift-image-size) * 0.53); height: calc(var(--subscribe-gift-image-size) * 0.53); object-fit: contain; border-radius: 4px; flex-shrink: 0; } .gift-qty-inline { background: var(--subscribe-gift-qty-bg); color: var(--subscribe-gift-qty-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: var(--subscribe-gift-qty-size) !important; font-weight: 700; flex-shrink: 0; width: 17px; height: 17px; min-width: 17px; padding: 0; } .gift-qty-inline span { line-height: 1; } .gift-text { font-size: var(--subscribe-gift-text-size) !important; font-weight: var(--subscribe-gift-text-weight); color: var(--subscribe-gift-text-color-unselected); flex: 1; transition: color 0.3s ease; } .subscribe-save-container:has(input:checked) .gift-text { color: var(--subscribe-gift-text-color-selected); } .gift-price-right { display: flex; align-items: center; margin-left: 10px; flex-shrink: 0; gap: 6px; } .gift-price-locked-wrapper { position: relative; overflow: hidden; display: flex; align-items: center; border-radius: 4px; } .gift-price { font-weight: 700; font-size: var(--subscribe-gift-text-size) !important; color: var(--subscribe-gift-text-color-unselected); opacity: 0; transform: translateX(-10px); transition: opacity 0.4s ease, transform 0.4s ease, color 0.3s ease; display: inline-block; } .subscribe-save-container:has(input:checked) .gift-price { color: var(--subscribe-gift-text-color-selected); } .gift-price-lock { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--subscribe-gift-bg-unselected); display: flex; align-items: center; justify-content: center; z-index: 2; color: #999; opacity: 1; transform: translateX(0); transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease; } .subscribe-save-container:has(input:checked) .gift-price-lock { transform: translateX(100%); opacity: 0; transition-delay: calc(var(--gift-index) * 0.15s); } .subscribe-save-container:has(input:checked) .gift-price { opacity: 1; transform: translateX(0); transition-delay: calc(var(--gift-index) * 0.15s); } .gift-compare-price { text-decoration: line-through; color: #999; font-size: calc(var(--subscribe-gift-text-size) * 0.9) !important; } @media (max-width: 749px) { .subscribe-save-wrapper { --subscribe-gift-text-size: var(--subscribe-gift-text-size-mobile); } } @media (max-width: 480px) { .subscribe-row-content { flex-direction: row; align-items: flex-start; gap: 10px; } .subscribe-top-left { width: 100%; } .subscribe-price-row { width: 100%; justify-content: flex-start; } .subscribe-toggle-option { font-size: 14px; } .subscribe-save-badge { font-size: 9px; padding: 4px 8px; } .subscribe-badge { font-size: 9px; padding: 2px 6px; } .subscribe-frequency-wrapper { flex-direction: column; align-items: stretch; } .subscribe-frequency-dropdown { width: 100%; font-size: 12px !important; } .subscribe-benefits-two_column, .subscribe-benefits-flex_row, .bonus-list-two_column, .bonus-list-flex_row { flex-direction: column; } .subscribe-benefits-two_column p, .bonus-list-two_column .bonus-item { width: 100% !important; } } #guarantee-badges-AY3A4elh1WFhzQm4yK__delivery { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; margin-top: 4px; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; font-size: 13px; letter-spacing: var(--letter-spacing-body); width: 100%; } #guarantee-badges-AY3A4elh1WFhzQm4yK__delivery > * { width: auto; flex-shrink: 0; } #elxr-container-AcG1UekVkcjhUR2hLY__stock { display: flex; flex-direction: column; justify-content: space-between; align-items: stretch; gap: 0px; padding: 0px 0px 0px 0px; margin-top: 0px; margin-bottom: 10px; background-color: rgba(47,158,91,0.10); border-radius: 30px; width: 100%; box-sizing: border-box; } #elxr-container-AcG1UekVkcjhUR2hLY__stock > *, #elxr-container-AcG1UekVkcjhUR2hLY__stock > .elxr-blocks-wrapper > * { width: 100%; min-width: 0; } @media (max-width: 749px) { } #elxr-container-AcG1UekVkcjhUR2hLY__stock > .elxr-blocks-wrapper { display: contents; } #elxr-container-AcG1UekVkcjhUR2hLY__stock > .elxr-empty-state { grid-column: 1 / -1; } #guarantee-badges-AbE55S3dobEIxUllse__pdp_guarantee_badges_block_yRyFcC { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; margin-top: 4px; margin-bottom: 4px; margin-left: 0px; margin-right: 0px; font-size: 15px; letter-spacing: var(--letter-spacing-body); width: 100%; } #guarantee-badges-AbE55S3dobEIxUllse__pdp_guarantee_badges_block_yRyFcC > * { width: auto; flex-shrink: 0; } #block-AalBRbG5SQWpId0NnR__pdp_guarantee_badge_6nTEWb.guarantee-item { display: flex; align-items: center; gap: 4px; flex-shrink: 0; min-width: 0; } #block-AalBRbG5SQWpId0NnR__pdp_guarantee_badge_6nTEWb .guarantee-icon { width: 12px; height: 12px; display: block; flex-shrink: 0; stroke: #111111 !important; color: #111111 !important; margin-bottom: 1px; } #block-AalBRbG5SQWpId0NnR__pdp_guarantee_badge_6nTEWb .guarantee-icon svg { width: 100%; height: 100%; display: block; } #block-AalBRbG5SQWpId0NnR__pdp_guarantee_badge_6nTEWb .guarantee-icon--full-color { stroke: none !important; } #block-AalBRbG5SQWpId0NnR__pdp_guarantee_badge_6nTEWb .guarantee-icon--fill { stroke: none !important; fill: currentColor; } #block-AalBRbG5SQWpId0NnR__pdp_guarantee_badge_6nTEWb .guarantee-icon--full-color img { width: 100%; height: 100%; display: block; object-fit: contain; } #block-AalBRbG5SQWpId0NnR__pdp_guarantee_badge_6nTEWb .guarantee-custom-icon { width: 12px; height: 12px; margin-bottom: 1px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } #block-AalBRbG5SQWpId0NnR__pdp_guarantee_badge_6nTEWb .guarantee-custom-icon svg { width: 100% !important; height: 100% !important; max-width: 12px !important; max-height: 12px !important; fill: #111111 !important; stroke: #111111 !important; } #block-AalBRbG5SQWpId0NnR__pdp_guarantee_badge_6nTEWb .guarantee-custom-icon img { width: 100% !important; height: 100% !important; max-width: 12px !important; max-height: 12px !important; object-fit: contain !important; } #block-AalBRbG5SQWpId0NnR__pdp_guarantee_badge_6nTEWb .guarantee-blinking-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; vertical-align: middle; position: relative; flex-shrink: 0; margin-bottom: 1px; background-color: #2f9e5b; animation: guarantee-blink-AalBRbG5SQWpId0NnR__pdp_guarantee_badge_6nTEWb 1s infinite linear; } #block-AalBRbG5SQWpId0NnR__pdp_guarantee_badge_6nTEWb .guarantee-blinking-dot::after { content: ""; width: 8px; height: 8px; background-color: #2f9e5b; border-radius: 50%; position: absolute; top: 0; left: 0; z-index: -1; animation: guarantee-pulse-AalBRbG5SQWpId0NnR__pdp_guarantee_badge_6nTEWb 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); } @keyframes guarantee-blink-AalBRbG5SQWpId0NnR__pdp_guarantee_badge_6nTEWb { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } } @keyframes guarantee-pulse-AalBRbG5SQWpId0NnR__pdp_guarantee_badge_6nTEWb { 0% { transform: scale(1); opacity: 0.5; } 100% { transform: scale(2.2); opacity: 0; } } #block-AalBRbG5SQWpId0NnR__pdp_guarantee_badge_6nTEWb .guarantee-text { font-weight: var(--font-weight-medium); letter-spacing: var(--letter-spacing-body); word-wrap: break-word; hyphens: auto; color: #111111 !important; } #shopify-block-ANmd6SGVpRHREU001c__add_to_cart .shop-add-to-cart-button { padding: 20px 20px !important; font-size: 18px !important; border-radius: 3px !important; letter-spacing: var(--global-button-letter-spacing, 1px); font-weight: var(--global-button-font-weight, 700); font-family: var(--font-body-family) !important; background-color: var(--button-bg-color) !important; color: var(--button-text-color) !important; } #shopify-block-ANmd6SGVpRHREU001c__add_to_cart .shop-add-to-cart-button:hover { background-color: var(--button-hover-color) !important; } .shop-add-to-cart-button { transition: background-color 0.22s ease, background 0.22s ease, opacity 0.22s ease !important; position: relative; } .shop-add-to-cart-button.sold-out, .shop-add-to-cart-button[disabled] { opacity: 0.6; cursor: not-allowed !important; } .shop-add-to-cart-button.sold-out:not(.loading):is(:hover, :focus, :focus-visible), .shop-add-to-cart-button[disabled]:not(.loading):is(:hover, :focus, :focus-visible) { transform: none !important; background: var(--button-bg-color, var(--global-button-bg-color, inherit)) !important; background-color: var(--button-bg-color, var(--global-button-bg-color, inherit)) !important; box-shadow: none !important; } #shopify-block-ANmd6SGVpRHREU001c__add_to_cart .shop-add-to-cart-button .button-text { text-transform: none !important; font-size: inherit !important; } #shopify-block-ANmd6SGVpRHREU001c__add_to_cart .shop-add-to-cart-button .button-icon { color: var(--button-text-color, inherit) !important; } .shop-add-to-cart-button .current-price { font-size: 0.92em; line-height: 1; } .shop-add-to-cart-button .compare-price { font-size: 0.88em; line-height: 1; } .shop-add-to-cart-button .current-price, .shop-add-to-cart-button .compare-price, .shop-add-to-cart-button .atc-price-pill { white-space: nowrap; } .shop-add-to-cart-button .atc-price-pill { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; padding: 0.28em 0.7em; border-radius: 999px; background: rgba(0, 0, 0, 0.14); font-size: 0.84em; line-height: 1; vertical-align: middle; } .shop-add-to-cart-button .atc-price-pill .current-price, .shop-add-to-cart-button .atc-price-pill .compare-price { font-size: inherit; line-height: 1; margin-left: 0; } .shop-add-to-cart-button .atc-price-pill .compare-price { opacity: 0.6; } .shop-add-to-cart-button .atc-text-track { position: relative; overflow: hidden; align-self: center; min-width: 0; max-width: 100%; } .shop-add-to-cart-button .atc-main-row { display: flex; align-items: center; justify-content: center; gap: 6px; } .shop-add-to-cart-button .atc-text-main { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; column-gap: 0.3em; row-gap: 2px; min-width: 0; text-align: center; line-height: 1.2; transition: transform 0.34s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.26s ease; will-change: transform, opacity; } #shopify-block-ANmd6SGVpRHREU001c__add_to_cart .shop-add-to-cart-button .atc-subtext { display: inline-flex; align-items: center; justify-content: center; gap: 4px; font-size: 12px; font-weight: 400; line-height: 1.2; letter-spacing: normal; text-transform: none; white-space: nowrap; color: var(--button-text-color, inherit); opacity: var(--muted-text-opacity, 0.85); } #shopify-block-ANmd6SGVpRHREU001c__add_to_cart .shop-add-to-cart-button .atc-subtext strong, #shopify-block-ANmd6SGVpRHREU001c__add_to_cart .shop-add-to-cart-button .atc-subtext b { font-weight: 700; } #shopify-block-ANmd6SGVpRHREU001c__add_to_cart .shop-add-to-cart-button .atc-subtext-icon, #shopify-block-ANmd6SGVpRHREU001c__add_to_cart .shop-add-to-cart-button .atc-subtext-icon svg { width: 1em; height: 1em; display: block; flex-shrink: 0; } #shopify-block-ANmd6SGVpRHREU001c__add_to_cart .shop-add-to-cart-button .atc-subtext-icon svg:not([fill]) { fill: currentColor; } #shopify-block-ANmd6SGVpRHREU001c__add_to_cart .shop-add-to-cart-button .atc-subtext-icon img { width: 1em; height: 1em; display: block; object-fit: contain; } .shop-add-to-cart-button .atc-text-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; white-space: nowrap; will-change: transform, opacity; transition: transform 0.34s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.26s ease; transform: translateY(100%); opacity: 0; } .shop-add-to-cart-button .atc-spinner { display: none; align-items: center; justify-content: center; width: 20px; height: 20px; flex-shrink: 0; } .shop-add-to-cart-button .atc-spinner:not(.hidden) { display: flex; } @keyframes atc-ring-spin { from { transform: rotate(-90deg); } to { transform: rotate(270deg); } } .shop-add-to-cart-button .atc-spinner-arc { transform-origin: center; transform: rotate(-90deg); animation: atc-ring-spin 0.72s linear infinite; } .shop-add-to-cart-button.loading .atc-spinner:not(.hidden) { visibility: visible; } .shop-add-to-cart-button[data-loading-mode="text"].loading .atc-text-track, .shop-add-to-cart-button[data-loading-mode="text"].loading .atc-text-main, .shop-add-to-cart-button[data-loading-mode="text"].loading .atc-text-loading { visibility: visible; } #product-form-template--21692356886685__main_product, .form { width: 100% !important; } product-form.product-form { display: block; width: 100%; } #shopify-block-ANmd6SGVpRHREU001c__add_to_cart { width: 100% !important; } .pdp-atc-block-root { width: 100%; --buttons-border-width: 0px; --border-offset: 0px; } #shopify-block-ANmd6SGVpRHREU001c__add_to_cart .product-buy-form-pdp { display: flex; flex-direction: column; gap: 10px; } #shopify-block-ANmd6SGVpRHREU001c__add_to_cart .shopify-payment-button { width: 100%; } #shopify-block-ANmd6SGVpRHREU001c__add_to_cart .shopify-payment-button__button, #shopify-block-ANmd6SGVpRHREU001c__add_to_cart .shopify-payment-button__button--unbranded, #shopify-block-ANmd6SGVpRHREU001c__add_to_cart .shopify-payment-button__button--branded { min-width: 0 !important; min-height: 0 !important; height: auto !important; width: 100% !important; padding: 20px 20px !important; font-size: 18px !important; border-radius: 3px !important; letter-spacing: var(--global-button-letter-spacing, 1px) !important; font-weight: var(--global-button-font-weight, 700) !important; font-family: var(--font-body-family) !important; } #AtcSubscription-ANmd6SGVpRHREU001c__add_to_cart { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 12px; text-align: center; } #AtcSubscription-ANmd6SGVpRHREU001c__add_to_cart:not(.is-subscribed) .atc-subscription__perks, #AtcSubscription-ANmd6SGVpRHREU001c__add_to_cart:not(.is-subscribed) .atc-subscription__onetime { display: none; } #AtcSubscription-ANmd6SGVpRHREU001c__add_to_cart .atc-subscription__perks { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 0; margin: 0; padding: 0; list-style: none; color: #3a3a3a; font-size: 15px; line-height: 1.3; } #AtcSubscription-ANmd6SGVpRHREU001c__add_to_cart .atc-subscription__perk { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 0 12px; } #AtcSubscription-ANmd6SGVpRHREU001c__add_to_cart .atc-subscription__perk + .atc-subscription__perk { border-left: 1.5px solid currentColor; } #AtcSubscription-ANmd6SGVpRHREU001c__add_to_cart .atc-subscription__perk .atc-mini-icon { flex-shrink: 0; color: #3a3a3a; } #AtcSubscription-ANmd6SGVpRHREU001c__add_to_cart .atc-subscription__onetime { appearance: none; background: none; border: 0; padding: 2px 4px; margin: 0; cursor: pointer; font: inherit; font-size: 15px; line-height: 1.4; color: #3a3a3a; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: opacity 0.2s ease; } #AtcSubscription-ANmd6SGVpRHREU001c__add_to_cart .atc-subscription__onetime:hover { opacity: 0.7; } #AtcSubscription-ANmd6SGVpRHREU001c__add_to_cart .atc-subscription__onetime[aria-busy="true"] { opacity: 0.5; pointer-events: none; } @media screen and (max-width: 749px) { #AtcSubscription-ANmd6SGVpRHREU001c__add_to_cart .atc-subscription__perks { font-size: 14px; } #AtcSubscription-ANmd6SGVpRHREU001c__add_to_cart .atc-subscription__perk { padding: 0 8px; } #AtcSubscription-ANmd6SGVpRHREU001c__add_to_cart .atc-subscription__onetime { font-size: 14px; } } #shopify-block-ANmd6SGVpRHREU001c__add_to_cart .shopify-payment-button__button--unbranded::after, #shopify-block-ANmd6SGVpRHREU001c__add_to_cart .shopify-payment-button__button--unbranded::before, #shopify-block-ANmd6SGVpRHREU001c__add_to_cart .shopify-payment-button__button--branded::after, #shopify-block-ANmd6SGVpRHREU001c__add_to_cart .shopify-payment-button__button--branded::before { content: none !important; } #payment-icons-AWElyM3dTMktMMTN1e__payment_icons.payment-icons-container { width: 100%; margin-left: 0; margin-right: 0; padding: 0; } #payment-icons-AWElyM3dTMktMMTN1e__payment_icons .payment-icons-list { margin: 0 auto; gap: 6px !important; } #payment-icons-AWElyM3dTMktMMTN1e__payment_icons .payment-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; height: 20px !important; } #payment-icons-AWElyM3dTMktMMTN1e__payment_icons .payment-icon svg { max-height: 100%; width: auto; min-width: 30px; display: block; height: 20px !important; } @media screen and (max-width: 749px) { #payment-icons-AWElyM3dTMktMMTN1e__payment_icons .payment-icons-list { gap: 3px !important; } #payment-icons-AWElyM3dTMktMMTN1e__payment_icons .payment-icon { height: 16.0px !important; } #payment-icons-AWElyM3dTMktMMTN1e__payment_icons .payment-icon svg { height: 16.0px !important; } } .custom-money-back-guarantee-AOFVjY0tUQmI5Y1Bub__money_back { border-radius: 4px; padding: 16px 16px 16px 16px; margin: 0px 0 10px 0; max-height: none; position: relative; border: 1px solid #e9e9e9; overflow: hidden; letter-spacing: var(--letter-spacing-heading); width: 100%; } .custom-money-back-guarantee-AOFVjY0tUQmI5Y1Bub__money_back::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: transparent; z-index: 0; pointer-events: none; border-radius: 5px; } .custom-money-back-guarantee-AOFVjY0tUQmI5Y1Bub__money_back .custom-guarantee-content { display: flex; align-items: center; gap: 6px; position: relative; z-index: 1; } .custom-money-back-guarantee-AOFVjY0tUQmI5Y1Bub__money_back .custom-badge-circle { display: flex; align-items: center; justify-content: center; align-self: flex-start; margin-top: 3px; flex-shrink: 0; } .custom-money-back-guarantee-AOFVjY0tUQmI5Y1Bub__money_back .custom-badge-circle.has-circle { box-sizing: border-box; } .custom-money-back-guarantee-AOFVjY0tUQmI5Y1Bub__money_back .custom-badge-container { min-width: 35px; display: flex; align-items: center; justify-content: center; } .custom-money-back-guarantee-AOFVjY0tUQmI5Y1Bub__money_back .custom-badge-image { width: 100%; height: 100%; object-fit: contain; } .custom-money-back-guarantee-AOFVjY0tUQmI5Y1Bub__money_back .custom-badge-svg { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; } .custom-money-back-guarantee-AOFVjY0tUQmI5Y1Bub__money_back .custom-badge-svg svg { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; } .custom-money-back-guarantee-AOFVjY0tUQmI5Y1Bub__money_back .custom-guarantee-text { flex: 1; letter-spacing: var(--letter-spacing-body); } .custom-money-back-guarantee-AOFVjY0tUQmI5Y1Bub__money_back .custom-guarantee-text h3 { font-size: 16px; font-weight: 400; margin: 0 0 2px 0; line-height: 1.2; letter-spacing: var(--letter-spacing-body); } .custom-money-back-guarantee-AOFVjY0tUQmI5Y1Bub__money_back .custom-guarantee-title-icon { display: inline-flex; width: 20px; height: 20px; margin-right: 8px; vertical-align: -0.15em; color: #2a2a2a; } .custom-money-back-guarantee-AOFVjY0tUQmI5Y1Bub__money_back .custom-guarantee-title-icon svg { width: 100%; height: 100%; } .custom-money-back-guarantee-AOFVjY0tUQmI5Y1Bub__money_back .custom-guarantee-text p { font-size: 13px; line-height: 1.3; margin: 0; letter-spacing: var(--letter-spacing-body); } .custom-money-back-guarantee-AOFVjY0tUQmI5Y1Bub__money_back .custom-guarantee-text strong, .custom-money-back-guarantee-AOFVjY0tUQmI5Y1Bub__money_back .custom-guarantee-text b { font-weight: 700; } @media screen and (max-width: 450px) { .custom-money-back-guarantee-AOFVjY0tUQmI5Y1Bub__money_back .custom-badge-container { width: 60px; height: 60px; min-width: 32px; } .custom-money-back-guarantee-AOFVjY0tUQmI5Y1Bub__money_back .custom-guarantee-text h3 { font-size: 14.4px; letter-spacing: var(--letter-spacing-body); } .custom-money-back-guarantee-AOFVjY0tUQmI5Y1Bub__money_back .custom-guarantee-text p { font-size: 11.7px; letter-spacing: var(--letter-spacing-body); } } @media screen and (min-width: 750px) { .custom-money-back-guarantee-AOFVjY0tUQmI5Y1Bub__money_back { width: 100%; max-width: none; } } #elxr-container-AckVUeUxPMWI5NnBMV__clinician { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; gap: 6px; padding: 16px 20px 16px 20px; margin-top: 0px; margin-bottom: 14px; background-color: #f3f7fc; border-radius: 4px; border: 1px solid #668aba; width: 100%; box-sizing: border-box; } #elxr-container-AckVUeUxPMWI5NnBMV__clinician > *, #elxr-container-AckVUeUxPMWI5NnBMV__clinician > .elxr-blocks-wrapper > * { width: 100%; min-width: 0; } @media (max-width: 749px) { #elxr-container-AckVUeUxPMWI5NnBMV__clinician { padding: 14px 16px; } } #elxr-container-AckVUeUxPMWI5NnBMV__clinician > .elxr-blocks-wrapper { display: contents; } #elxr-container-AckVUeUxPMWI5NnBMV__clinician > .elxr-empty-state { grid-column: 1 / -1; } .authority-block-container-AZnJWNmRZSjVoUEM0e__clin_title { width: 100%; display: block; } .authority-block-AZnJWNmRZSjVoUEM0e__clin_title { margin-top: 0px; margin-bottom: 0px; padding-top: 0px; padding-bottom: 0px; } .authority-block-AZnJWNmRZSjVoUEM0e__clin_title .authority-content { display: flex; align-items: center; text-align: center; justify-content: center; } .authority-block-AZnJWNmRZSjVoUEM0e__clin_title .authority-icon { flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .authority-block-AZnJWNmRZSjVoUEM0e__clin_title .authority-icon-before { width: 30px; height: 30px; color: #668aba; margin-right: 10px; } .authority-block-AZnJWNmRZSjVoUEM0e__clin_title .authority-icon-before svg { width: 100%; height: 100%; fill: #668aba; } .authority-block-AZnJWNmRZSjVoUEM0e__clin_title .authority-icon-after { width: 30px; height: 30px; color: #668aba; margin-left: 10px; } .authority-block-AZnJWNmRZSjVoUEM0e__clin_title .authority-icon-after svg { width: 100%; height: 100%; fill: #668aba; } .authority-block-AZnJWNmRZSjVoUEM0e__clin_title .authority-text { color: #2a2a2a; font-size: 22px; line-height: 1.4; } .authority-block-AZnJWNmRZSjVoUEM0e__clin_title .authority-text p { margin: 0; } .authority-block-AZnJWNmRZSjVoUEM0e__clin_title .authority-text a { color: #0f0f0f; text-decoration: underline; } .authority-block-AZnJWNmRZSjVoUEM0e__clin_title .authority-text a:hover { opacity: 0.8; } .authority-block-AZnJWNmRZSjVoUEM0e__clin_title .authority-text strong, .authority-block-AZnJWNmRZSjVoUEM0e__clin_title .authority-text b { font-weight: 700; } .custom-text-block-container-ASUNKRlpiWHNTdmZyM__clin_text { width: 100%; display: block; } .custom-text-block-ASUNKRlpiWHNTdmZyM__clin_text { margin-top: 0px; margin-bottom: 0px; text-align: center; width: 100%; } .custom-text-block-ASUNKRlpiWHNTdmZyM__clin_text .custom-text-wrapper { width: 100%; } .custom-text-block-ASUNKRlpiWHNTdmZyM__clin_text .custom-text-with-divider { display: flex; align-items: center; width: 100%; gap: 12px; } .custom-text-block-ASUNKRlpiWHNTdmZyM__clin_text .divider-line { flex: 1; height: 1px; min-height: 1px; min-width: 20px; background-color: #e0e0e0; border: none; margin: 0; display: block; } .custom-text-block-ASUNKRlpiWHNTdmZyM__clin_text .custom-text-main { display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 1.4; font-weight: var(--font-weight-regular); width: 100%; justify-content: center; flex-shrink: 0; } @media screen and (min-width: 750px) { .custom-text-block-ASUNKRlpiWHNTdmZyM__clin_text .custom-text-main { font-size: 14px; } } .custom-text-block-ASUNKRlpiWHNTdmZyM__clin_text .custom-text-icon { flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #ff3b00; width: 20px; height: 20px; } .custom-text-block-ASUNKRlpiWHNTdmZyM__clin_text .custom-text-icon svg { width: 100%; height: 100%; fill: currentColor; stroke: currentColor; } .custom-text-block-ASUNKRlpiWHNTdmZyM__clin_text .custom-text-after-icon { flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #0f0f0f; width: 20px; height: 20px; } .custom-text-block-ASUNKRlpiWHNTdmZyM__clin_text .custom-text-after-icon svg { width: 100%; height: 100%; fill: currentColor; stroke: currentColor; } .custom-text-block-ASUNKRlpiWHNTdmZyM__clin_text .custom-text-content { color: #6b6b6b; margin: 0; width: 100%; } .custom-text-block-ASUNKRlpiWHNTdmZyM__clin_text .custom-text-content a, .custom-text-block-ASUNKRlpiWHNTdmZyM__clin_text .custom-text-main-text-content a { color: #668aba; text-decoration: underline; } .custom-text-block-ASUNKRlpiWHNTdmZyM__clin_text .custom-text-content a:hover, .custom-text-block-ASUNKRlpiWHNTdmZyM__clin_text .custom-text-main-text-content a:hover { opacity: 0.8; } .custom-text-block-ASUNKRlpiWHNTdmZyM__clin_text .custom-text-content strong, .custom-text-block-ASUNKRlpiWHNTdmZyM__clin_text .custom-text-content b, .custom-text-block-ASUNKRlpiWHNTdmZyM__clin_text .custom-text-main-text-content strong, .custom-text-block-ASUNKRlpiWHNTdmZyM__clin_text .custom-text-main-text-content b { font-weight: 700 !important; } .custom-text-block-ASUNKRlpiWHNTdmZyM__clin_text .custom-text-main-text-content { text-align: center; font-weight: var(--font-weight-regular); } .custom-text-block-ASUNKRlpiWHNTdmZyM__clin_text .custom-text-main-text-content p { text-align: inherit; font-weight: inherit; } .custom-text-block-ASUNKRlpiWHNTdmZyM__clin_text .custom-text-main-text-content strong, .custom-text-block-ASUNKRlpiWHNTdmZyM__clin_text .custom-text-main-text-content b { font-weight: var(--font-weight-semibold); } .custom-text-block-ASUNKRlpiWHNTdmZyM__clin_text .custom-text-main-text-content p { margin: 0; padding: 0; } .custom-text-block-ASUNKRlpiWHNTdmZyM__clin_text .custom-text-main-text-content > :is(p, ul, ol) + :is(p, ul, ol) { margin-top: 1em; } .custom-text-block-ASUNKRlpiWHNTdmZyM__clin_text .custom-text-main-text-content strong, .custom-text-block-ASUNKRlpiWHNTdmZyM__clin_text .custom-text-main-text-content b { font-weight: 700 !important; } .custom-text-block-ASUNKRlpiWHNTdmZyM__clin_text *:not(strong):not(b) { font-weight: inherit; } .custom-text-block-ASUNKRlpiWHNTdmZyM__clin_text span:not(strong):not(b), .custom-text-block-ASUNKRlpiWHNTdmZyM__clin_text div:not(.custom-text-icon):not(strong):not(b), .custom-text-block-ASUNKRlpiWHNTdmZyM__clin_text p:not(strong):not(b), .custom-text-block-ASUNKRlpiWHNTdmZyM__clin_text h1:not(strong):not(b), .custom-text-block-ASUNKRlpiWHNTdmZyM__clin_text h2:not(strong):not(b), .custom-text-block-ASUNKRlpiWHNTdmZyM__clin_text h3:not(strong):not(b), .custom-text-block-ASUNKRlpiWHNTdmZyM__clin_text h4:not(strong):not(b), .custom-text-block-ASUNKRlpiWHNTdmZyM__clin_text h5:not(strong):not(b), .custom-text-block-ASUNKRlpiWHNTdmZyM__clin_text h6:not(strong):not(b) { font-weight: var(--font-weight-regular); } .elxr-rating-avatars-AV0VzR0FLUFo0V3pZd__clin_avatars { display: inline-flex; align-items: center; flex-shrink: 0; line-height: 0; isolation: isolate; } .elxr-rating-avatars-AV0VzR0FLUFo0V3pZd__clin_avatars .elxr-rating-avatar { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid #fff; margin-right: calc(-26px * 0.35); overflow: hidden; flex-shrink: 0; } .elxr-rating-avatars-AV0VzR0FLUFo0V3pZd__clin_avatars .elxr-rating-avatar:nth-child(1) { z-index: 5; } .elxr-rating-avatars-AV0VzR0FLUFo0V3pZd__clin_avatars .elxr-rating-avatar:nth-child(2) { z-index: 4; } .elxr-rating-avatars-AV0VzR0FLUFo0V3pZd__clin_avatars .elxr-rating-avatar:nth-child(3) { z-index: 3; } .elxr-rating-avatars-AV0VzR0FLUFo0V3pZd__clin_avatars .elxr-rating-avatar:nth-child(4) { z-index: 2; } .elxr-rating-avatars-AV0VzR0FLUFo0V3pZd__clin_avatars .elxr-rating-avatar:nth-child(5) { z-index: 1; } .elxr-rating-avatars-AV0VzR0FLUFo0V3pZd__clin_avatars .elxr-rating-avatar:last-child { margin-right: 0; } .elxr-rating-avatars-AV0VzR0FLUFo0V3pZd__clin_avatars > .shopify-block { display: inline-flex; position: relative; line-height: 0; flex-shrink: 0; } .elxr-rating-avatars-AV0VzR0FLUFo0V3pZd__clin_avatars > .shopify-block + .shopify-block { margin-left: calc(-26px * 0.35); } .elxr-rating-avatars-AV0VzR0FLUFo0V3pZd__clin_avatars > .shopify-block .elxr-rating-avatar { margin-right: 0; } .elxr-rating-avatars-AV0VzR0FLUFo0V3pZd__clin_avatars > .shopify-block:nth-child(1) { z-index: 10; } .elxr-rating-avatars-AV0VzR0FLUFo0V3pZd__clin_avatars > .shopify-block:nth-child(2) { z-index: 9; } .elxr-rating-avatars-AV0VzR0FLUFo0V3pZd__clin_avatars > .shopify-block:nth-child(3) { z-index: 8; } .elxr-rating-avatars-AV0VzR0FLUFo0V3pZd__clin_avatars > .shopify-block:nth-child(4) { z-index: 7; } .elxr-rating-avatars-AV0VzR0FLUFo0V3pZd__clin_avatars > .shopify-block:nth-child(5) { z-index: 6; } .elxr-rating-avatars-AV0VzR0FLUFo0V3pZd__clin_avatars > .shopify-block:nth-child(6) { z-index: 5; } .elxr-rating-avatars-AV0VzR0FLUFo0V3pZd__clin_avatars > .shopify-block:nth-child(7) { z-index: 4; } .elxr-rating-avatars-AV0VzR0FLUFo0V3pZd__clin_avatars > .shopify-block:nth-child(8) { z-index: 3; } .elxr-rating-avatars-AV0VzR0FLUFo0V3pZd__clin_avatars > .shopify-block:nth-child(9) { z-index: 2; } .elxr-rating-avatars-AV0VzR0FLUFo0V3pZd__clin_avatars > .shopify-block:nth-child(10) { z-index: 1; } .elxr-rating-avatars-AV0VzR0FLUFo0V3pZd__clin_avatars .elxr-rating-avatar img, .elxr-rating-avatars-AV0VzR0FLUFo0V3pZd__clin_avatars .elxr-rating-avatar svg { width: 100%; height: 100%; object-fit: cover; display: block; } @media screen and (max-width: 749px) { .elxr-rating-avatars-AV0VzR0FLUFo0V3pZd__clin_avatars .elxr-rating-avatar { width: calc(26px * 0.85); height: calc(26px * 0.85); border-width: 1px; margin-right: calc(-26px * 0.35 * 0.85); } .elxr-rating-avatars-AV0VzR0FLUFo0V3pZd__clin_avatars > .shopify-block + .shopify-block { margin-left: calc(-26px * 0.35 * 0.85); } .elxr-rating-avatars-AV0VzR0FLUFo0V3pZd__clin_avatars > .shopify-block .elxr-rating-avatar { margin-right: 0; } } #pdp-faq-Aak1TSTBHemFEWFpEd--details { --faq-q-color: #2a2a2a; --faq-q-bg: #f5f5f5; --faq-a-color: #6b6b6b; --faq-a-bg: #f5f5f5; --faq-hover-bg: rgba(0, 0, 0, 0.025); --faq-border: #f5f5f5; --faq-radius: 2px; --faq-q-padding: 16px; --faq-a-padding: 0px; --faq-q-size: 14px; --faq-a-size: 13px; --faq-icon-size: 28px; --faq-toggle-size: 14px; --faq-block-bg: #ffffff; --faq-block-padding: 0px; --faq-open-bg: #f5f5f5; --faq-fill-bg: #f5f5f5; --faq-a-pad-top: 4px; --faq-pad-x: 16px; width: 100%; box-sizing: border-box; background: var(--faq-block-bg); padding: var(--faq-block-padding); border-radius: var(--faq-radius); overflow: hidden; margin-top: 0px; margin-bottom: 0px; } #pdp-faq-Aak1TSTBHemFEWFpEd--details.pdp-faq--boxed { border: 1px solid var(--faq-border); } #pdp-faq-Aak1TSTBHemFEWFpEd--details.pdp-faq--boxed .faq-item { border-radius: 0; } #pdp-faq-Aak1TSTBHemFEWFpEd--details.pdp-faq--boxed .faq-question { border-radius: 0; } #pdp-faq-Aak1TSTBHemFEWFpEd--details.pdp-faq--boxed > *:not(:last-child) .faq-item { border-bottom: 1px solid var(--faq-border); } #pdp-faq-Aak1TSTBHemFEWFpEd--details.pdp-faq--boxed > div:first-of-type .faq-question { border-top-left-radius: var(--faq-radius); border-top-right-radius: var(--faq-radius); } #pdp-faq-Aak1TSTBHemFEWFpEd--details.pdp-faq--boxed > div:last-of-type .faq-question:not([aria-expanded='true']) { border-bottom-left-radius: var(--faq-radius); border-bottom-right-radius: var(--faq-radius); } #pdp-faq-Aak1TSTBHemFEWFpEd--details.pdp-faq--boxed > div:last-of-type .faq-answer { border-bottom-left-radius: var(--faq-radius); border-bottom-right-radius: var(--faq-radius); overflow: hidden; } #pdp-faq-Aak1TSTBHemFEWFpEd--details.pdp-faq--separated { display: flex; flex-direction: column; gap: 8px; border-radius: 0; overflow: visible; background: transparent; padding: 0; } #pdp-faq-Aak1TSTBHemFEWFpEd--details.pdp-faq--separated .faq-item { border: 1px solid var(--faq-border); border-radius: var(--faq-radius); overflow: hidden; background: var(--faq-q-bg); } #pdp-faq-Aak1TSTBHemFEWFpEd--details.pdp-faq--separated .faq-item:has(.faq-question[aria-expanded='true']) { overflow: visible; } #pdp-faq-Aak1TSTBHemFEWFpEd--details.pdp-faq--separated .faq-question { border-top-left-radius: var(--faq-radius); border-top-right-radius: var(--faq-radius); border-bottom-left-radius: 0; border-bottom-right-radius: 0; } #pdp-faq-Aak1TSTBHemFEWFpEd--details.pdp-faq--separated .faq-answer { border-bottom-left-radius: var(--faq-radius); border-bottom-right-radius: var(--faq-radius); overflow: hidden; } #pdp-faq-Aak1TSTBHemFEWFpEd--details.pdp-faq--filled { display: flex; flex-direction: column; gap: 8px; border-radius: 0; overflow: visible; background: transparent; padding: 0; } #pdp-faq-Aak1TSTBHemFEWFpEd--details.pdp-faq--filled .faq-item { border-radius: var(--faq-radius); overflow: hidden; background: var(--faq-fill-bg); } #pdp-faq-Aak1TSTBHemFEWFpEd--details.pdp-faq--filled .faq-item:has(.faq-question[aria-expanded='true']) { overflow: visible; } #pdp-faq-Aak1TSTBHemFEWFpEd--details.pdp-faq--filled .faq-question { border-top-left-radius: var(--faq-radius); border-top-right-radius: var(--faq-radius); border-bottom-left-radius: 0; border-bottom-right-radius: 0; } #pdp-faq-Aak1TSTBHemFEWFpEd--details.pdp-faq--filled .faq-answer { border-bottom-left-radius: var(--faq-radius); border-bottom-right-radius: var(--faq-radius); overflow: hidden; } #pdp-faq-Aak1TSTBHemFEWFpEd--details.pdp-faq--filled .faq-question, #pdp-faq-Aak1TSTBHemFEWFpEd--details.pdp-faq--filled .faq-answer { background: transparent; } #pdp-faq-Aak1TSTBHemFEWFpEd--details.pdp-faq--underline { --faq-pad-x: 0px; border-radius: 0; overflow: visible; background: transparent; padding: 0; } #pdp-faq-Aak1TSTBHemFEWFpEd--details.pdp-faq--underline > *:not(:last-child) .faq-item { border-bottom: 1px solid var(--faq-border); } #pdp-faq-Aak1TSTBHemFEWFpEd--details.pdp-faq--underline .faq-question:hover, #pdp-faq-Aak1TSTBHemFEWFpEd--details.pdp-faq--underline .faq-question[aria-expanded='true'], #pdp-faq-Aak1TSTBHemFEWFpEd--details.pdp-faq--underline .faq-question[aria-expanded='true'] + .faq-answer { background: transparent; } #pdp-faq-Aak1TSTBHemFEWFpEd--details.pdp-faq--plain { --faq-pad-x: 0px; border-radius: 0; overflow: visible; background: transparent; padding: 0; } #pdp-faq-Aak1TSTBHemFEWFpEd--details.pdp-faq--plain .faq-question:hover, #pdp-faq-Aak1TSTBHemFEWFpEd--details.pdp-faq--plain .faq-question[aria-expanded='true'], #pdp-faq-Aak1TSTBHemFEWFpEd--details.pdp-faq--plain .faq-question[aria-expanded='true'] + .faq-answer { background: transparent; } #pdp-faq-Aak1TSTBHemFEWFpEd--details .faq-item { contain: layout style; } #pdp-faq-Aak1TSTBHemFEWFpEd--details .faq-question { display: flex; align-items: center; gap: 10px; width: 100%; padding: var(--faq-q-padding) var(--faq-pad-x); margin: 0; cursor: pointer; font: inherit; font-size: var(--faq-q-size); font-weight: 500; line-height: 1.35; color: var(--faq-q-color); background: var(--faq-q-bg); border: 0; text-align: left; appearance: none; -webkit-appearance: none; transition: background-color 180ms ease; } #pdp-faq-Aak1TSTBHemFEWFpEd--details .faq-question:hover { background: var(--faq-hover-bg); } #pdp-faq-Aak1TSTBHemFEWFpEd--details .faq-question[aria-expanded='true'] { background: var(--faq-open-bg); } #pdp-faq-Aak1TSTBHemFEWFpEd--details .faq-question[aria-expanded='true'] + .faq-answer { background: var(--faq-open-bg); } #pdp-faq-Aak1TSTBHemFEWFpEd--details .faq-question:focus-visible { outline: 2px solid currentColor; outline-offset: -3px; } #pdp-faq-Aak1TSTBHemFEWFpEd--details .faq-question-media { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: var(--faq-icon-size); height: var(--faq-icon-size); border-radius: 8px; overflow: hidden; color: var(--faq-q-color); } #pdp-faq-Aak1TSTBHemFEWFpEd--details .faq-question-media img, #pdp-faq-Aak1TSTBHemFEWFpEd--details .faq-question-media svg { width: 100%; height: 100%; object-fit: cover; display: block; } #pdp-faq-Aak1TSTBHemFEWFpEd--details .faq-question-icon svg { object-fit: contain; } #pdp-faq-Aak1TSTBHemFEWFpEd--details .faq-question-emoji { font-size: var(--faq-icon-size); line-height: 1; } #pdp-faq-Aak1TSTBHemFEWFpEd--details .faq-toggle-icon--custom { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: inherit; } #pdp-faq-Aak1TSTBHemFEWFpEd--details .faq-toggle-icon--custom svg { width: 100%; height: 100%; display: block; } #pdp-faq-Aak1TSTBHemFEWFpEd--details .faq-question-text { flex: 1; min-width: 0; word-wrap: break-word; overflow-wrap: break-word; } #pdp-faq-Aak1TSTBHemFEWFpEd--details .faq-question-text > *, #pdp-faq-Aak1TSTBHemFEWFpEd--details .faq-question-text p { margin: 0; font: inherit; color: inherit; } #pdp-faq-Aak1TSTBHemFEWFpEd--details .faq-toggle { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: var(--faq-toggle-size); height: var(--faq-toggle-size); color: var(--faq-q-color); opacity: 0.7; transition: transform 220ms ease, opacity 180ms ease; } #pdp-faq-Aak1TSTBHemFEWFpEd--details .faq-toggle svg { width: 100%; height: 100%; display: block; } #pdp-faq-Aak1TSTBHemFEWFpEd--details .faq-question:hover .faq-toggle { opacity: 1; } #pdp-faq-Aak1TSTBHemFEWFpEd--details .faq-toggle .faq-toggle-icon { display: none; } #pdp-faq-Aak1TSTBHemFEWFpEd--details[data-toggle-icon="plus"] .faq-toggle .faq-toggle-icon--plus, #pdp-faq-Aak1TSTBHemFEWFpEd--details[data-toggle-icon="chevron"] .faq-toggle .faq-toggle-icon--chevron, #pdp-faq-Aak1TSTBHemFEWFpEd--details[data-toggle-icon="arrow"] .faq-toggle .faq-toggle-icon--arrow, #pdp-faq-Aak1TSTBHemFEWFpEd--details[data-toggle-icon="caret"] .faq-toggle .faq-toggle-icon--caret, #pdp-faq-Aak1TSTBHemFEWFpEd--details[data-toggle-icon="custom"] .faq-toggle .faq-toggle-icon--custom { display: block; } #pdp-faq-Aak1TSTBHemFEWFpEd--details[data-toggle-animation="rotate"] .faq-question[aria-expanded='true'] .faq-toggle { opacity: 1; } #pdp-faq-Aak1TSTBHemFEWFpEd--details[data-toggle-animation="rotate"][data-toggle-icon="plus"] .faq-question[aria-expanded='true'] .faq-toggle { transform: rotate(45deg); } #pdp-faq-Aak1TSTBHemFEWFpEd--details[data-toggle-animation="rotate"][data-toggle-icon="chevron"] .faq-question[aria-expanded='true'] .faq-toggle, #pdp-faq-Aak1TSTBHemFEWFpEd--details[data-toggle-animation="rotate"][data-toggle-icon="arrow"] .faq-question[aria-expanded='true'] .faq-toggle, #pdp-faq-Aak1TSTBHemFEWFpEd--details[data-toggle-animation="rotate"][data-toggle-icon="caret"] .faq-question[aria-expanded='true'] .faq-toggle, #pdp-faq-Aak1TSTBHemFEWFpEd--details[data-toggle-animation="rotate"][data-toggle-icon="custom"] .faq-question[aria-expanded='true'] .faq-toggle { transform: rotate(180deg); } #pdp-faq-Aak1TSTBHemFEWFpEd--details[data-toggle-animation="none"] .faq-toggle { transition: opacity 180ms ease; } #pdp-faq-Aak1TSTBHemFEWFpEd--details[data-toggle-animation="none"] .faq-question[aria-expanded='true'] .faq-toggle { opacity: 1; } #pdp-faq-Aak1TSTBHemFEWFpEd--details .faq-answer { display: grid; grid-template-rows: 0fr; background: var(--faq-a-bg); color: var(--faq-a-color); transition: grid-template-rows 240ms ease; } #pdp-faq-Aak1TSTBHemFEWFpEd--details .faq-question[aria-expanded='true'] + .faq-answer { grid-template-rows: 1fr; } #pdp-faq-Aak1TSTBHemFEWFpEd--details .faq-answer-inner { min-height: 0; overflow: hidden; padding: 0 var(--faq-pad-x); font-size: var(--faq-a-size); line-height: 1.55; letter-spacing: var(--letter-spacing-body); transition: padding 240ms ease; } #pdp-faq-Aak1TSTBHemFEWFpEd--details .faq-question[aria-expanded='true'] + .faq-answer .faq-answer-inner { padding: var(--faq-a-pad-top) var(--faq-pad-x) var(--faq-a-padding); } #pdp-faq-Aak1TSTBHemFEWFpEd--details .faq-answer-inner > *:first-child { margin-top: 0; } #pdp-faq-Aak1TSTBHemFEWFpEd--details .faq-answer-inner > *:last-child { margin-bottom: 0; } #pdp-faq-Aak1TSTBHemFEWFpEd--details .faq-answer-inner img { max-width: 100%; height: auto; border-radius: 8px; margin: 0.5em 0; } @media (prefers-reduced-motion: reduce) { #pdp-faq-Aak1TSTBHemFEWFpEd--details .faq-answer, #pdp-faq-Aak1TSTBHemFEWFpEd--details .faq-answer-inner, #pdp-faq-Aak1TSTBHemFEWFpEd--details .faq-toggle, #pdp-faq-Aak1TSTBHemFEWFpEd--details .faq-question { transition: none; } } #shopify-section-template--21692356886685__main_product h3 {font-weight: 500;} #shopify-section-template--21692356886685__main_product .elxr-section-header__eyebrow {color: #668aba;} .shop-thumbnail.visually-hidden{position:absolute!important;width:0!important;height:0!important;margin:0!important;padding:0!important;opacity:0!important;pointer-events:none!important;overflow:hidden!important}.shop-add-to-cart-button{display:flex;justify-content:center;align-items:center;width:100%!important;font-size:16px;padding:20px 10px;border-radius:var(--button-border-radius, 10px);border:none;font-weight:600;cursor:pointer;transition:background-color .3s ease;font-family:var(--font-body-family-override);position:relative;gap:10px;--button-text-color: inherit;--button-price-color: var(--button-text-color, inherit)}.rating-component{font-family:var(--font-body-family-override);letter-spacing:var(--letter-spacing-body)}.image_review-star{width:15px;height:15px;margin-right:-2px}.review-star-half,.review-star{width:20px;height:20px;margin-right:-3px}[dir=rtl] .review-star-half{direction:ltr}.shop-product-price{font-size:1.8rem;font-weight:var(--font-weight-semibold);letter-spacing:var(--letter-spacing-body)}.shop-product-price.on-sale{color:#ef4a65!important}.shop-compare-price{text-decoration:line-through!important;font-size:1.6rem;letter-spacing:var(--letter-spacing-body)}.shop-product-price-block{letter-spacing:var(--letter-spacing-body);line-height:1.2!important}.shop-save-price{font-weight:var(--font-weight-semibold);padding:.5rem .8rem!important;border-radius:50px!important;letter-spacing:var(--letter-spacing-body);display:inline-flex!important;align-items:center!important;line-height:1!important}.shop-save-price .tag-icon{margin-right:4px;transform:rotate(90deg);position:relative;top:-.5px}.shop-product-description{margin:1rem 0;line-height:1.6;letter-spacing:var(--letter-spacing-body)}.shop-read-more,.shop-read-less{display:inline-block;margin-left:.5rem;text-decoration:none;font-weight:var(--font-weight-regular);letter-spacing:var(--letter-spacing-body)}.shop-custom-content{margin-top:1rem;padding-top:1rem;letter-spacing:var(--letter-spacing-body)}.shop-indicator-dot{width:8px;height:8px;border-radius:50%;cursor:pointer}[data-dot-style=pill] .shop-indicator-dot{border-radius:4px;transition:width .3s ease}[data-dot-style=pill] .shop-indicator-dot.active{width:20px}.shop-thumbnails img{object-fit:cover;border-radius:0;cursor:pointer;opacity:.7;transition:all .3s ease}.shop-product-title{font-size:var(--title-font-size, 28px)!important;margin-top:0;margin-bottom:0;line-height:1.3;font-weight:var(--section-heading-weight, var(--font-weight-bold));letter-spacing:var(--letter-spacing-heading);overflow:visible;word-wrap:break-word;max-width:100%}.shop-award-badge{padding:3px 12px;display:inline-flex;align-items:center;letter-spacing:var(--letter-spacing-body);line-height:1.4;width:fit-content;white-space:nowrap;align-self:flex-start}.shop-product-price-container{margin:1rem 0;position:relative;font-family:var(--font-body-family-override);display:flex!important;align-items:center!important;flex-wrap:wrap!important;row-gap:.2rem;column-gap:.6rem;width:100%!important}.shop-carousel-container{flex:0 0 50%;max-width:50%;position:relative;align-self:flex-start}.shop-image-container img.shop-main-image{width:100%;height:100%;object-fit:contain;position:absolute;top:0;left:0}.shop-thumbnails img:hover{opacity:.9}.warning-title{font-weight:700!important;margin-bottom:1px;letter-spacing:var(--letter-spacing-body)}.shop-thumbnails img.active{opacity:1;border-color:#000}.shop-main-image{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain;display:block;opacity:0;background-color:#fff0;transition:opacity .35s cubic-bezier(.4,0,.2,1);pointer-events:none;border-radius:var(--product-image-border-radius)!important}.shop-main-image.active{opacity:1;pointer-events:auto}.shop-main-image img{transition:opacity .3s ease}.shop-add-to-cart-button .button-icon{line-height:0;display:flex;align-items:center}.shop-add-to-cart-button .button-text{color:var(--button-text-color, inherit)}.shop-add-to-cart-button:hover{background-color:var(--button-hover-color)!important}.shop-add-to-cart-wrapper{width:100%!important;display:block;border-radius:var(--button-border-radius, 10px)}.loading__spinner{position:absolute;width:1.8rem;display:flex;align-items:center;justify-content:center}.shop-add-to-cart-button.loading span{visibility:hidden}.shop-add-to-cart-button .spinner{animation:rotator 1.4s linear infinite}.limited-stock-component{font-family:var(--font-body-family);letter-spacing:var(--letter-spacing-body);display:inline-flex;align-items:center;width:auto;max-width:100%}.stock-icon{margin-right:8px;display:flex;align-items:center;position:relative;width:14px;height:14px}.clock-face,.hour-hand,.minute-hand{width:14px;height:14px}.hour-hand,.minute-hand{position:absolute;top:0;left:0}.minute-hand{transform-origin:center;animation:rotate 8s linear infinite}.hourglass{animation:flip 2s infinite;transform-origin:center}.limited-stock-text{font-weight:var(--font-weight-regular);margin-right:4px}.stock-available{font-weight:var(--font-weight-regular)}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes flip{0%{transform:rotate(0)}50%{transform:rotate(180deg)}to{transform:rotate(0)}}@media(max-width:749px){.limited-stock-component{flex-wrap:wrap}.product-faq{font-size:90%;width:100%}.product-faq .faq-question-image{margin-right:8px}.product-faq .faq-item.active .faq-answer{max-height:350px}}.shop-add-to-cart-button .path{stroke-dasharray:280;stroke-dashoffset:0;transform-origin:center;animation:dash 1.4s ease-in-out infinite}.shop-stock-indicator{display:flex;align-items:center;border-radius:50px;width:fit-content}.shop-stock-dot-container{position:relative;margin-right:12px}.shop-stock-dot{display:block;border-radius:50%}.shop-stock-dot.static-dot{position:relative;z-index:2}.shop-stock-dot.animated-dot{position:absolute;top:0;left:0}.shop-product-details{max-width:1200px;margin:0 auto!important;padding:0;letter-spacing:var(--letter-spacing-body);font-family:var(--font-body-family-override)}.shop-add-to-cart-button .button-content{display:flex;align-items:center;justify-content:center;gap:.5rem;position:relative}.shop-add-to-cart-button .current-price{font-size:14px;font-weight:var(--font-weight-regular);letter-spacing:var(--letter-spacing-body);color:var(--button-price-color, var(--button-text-color, inherit))}.shop-add-to-cart-button .compare-price{font-size:inherit;font-weight:var(--font-weight-regular);text-decoration:line-through;opacity:.6;letter-spacing:var(--letter-spacing-body);margin-left:0;color:var(--button-price-color, var(--button-text-color, inherit))}.shop-add-to-cart-button .price-separator{color:var(--button-price-color, var(--button-text-color, inherit));margin:0 2px}.shop-product-section{box-sizing:border-box;width:100%;padding:10px 20px;font-family:inherit}[id^=shopify-section].shop-product-section{padding-left:0;padding-right:0}.shop-product-inner-container{max-width:1200px;margin:0 auto;width:100%}.shop-product-layout{display:flex;flex-wrap:wrap;align-items:flex-start;gap:20px;position:relative}.shop-carousel-container{flex:0 0 55%;max-width:55%;position:relative;align-self:flex-start}.shop-product-info{flex:0 0 calc(45% - 20px);max-width:calc(45% - 20px);display:flex;flex-direction:column;width:100%;overflow:visible;text-align:left;align-items:flex-start}.shop-carousel-container *,.shop-carousel-container *:before,.shop-carousel-container *:after{box-sizing:border-box}.shop-video{width:100%;height:100%}.shop-product-carousel{width:90%;display:block;position:relative;padding:0}.shop-main-image-wrapper{width:100%;position:relative;overflow:hidden;border-radius:var(--product-image-border-radius)!important;margin-bottom:0}.shop-image-container{position:relative;width:100%;border-radius:var(--product-image-border-radius)!important;overflow:hidden;background-color:#fff0}@media(max-width:749px){.shop-product-section[data-full-width-image=true],.shop-product-section[data-full-width-image=true] .shop-product-carousel,.pdp-gallery-block[data-full-width-image=true] .shop-product-carousel{padding:0!important}.shop-product-section[data-full-width-image=true] .shop-main-image-wrapper,.pdp-gallery-block[data-full-width-image=true] .shop-main-image-wrapper{margin:0!important;border-radius:0!important}.shop-product-section[data-full-width-image=true] .shop-image-container,.pdp-gallery-block[data-full-width-image=true] .shop-image-container{height:auto!important;border-radius:0!important}.shop-product-section[data-full-width-image=true] .shop-main-image,.pdp-gallery-block[data-full-width-image=true] .shop-main-image{opacity:0;transition:opacity .35s cubic-bezier(.4,0,.2,1);pointer-events:none}.shop-product-section[data-full-width-image=true] .shop-main-image.active,.pdp-gallery-block[data-full-width-image=true] .shop-main-image.active{position:static!important;height:auto!important;width:100%!important;object-fit:contain!important;display:block!important;opacity:1!important;pointer-events:auto!important}.shop-product-section[data-full-width-image=true] .shop-main-image:not(.active),.pdp-gallery-block[data-full-width-image=true] .shop-main-image:not(.active){opacity:0!important;pointer-events:none!important}.shop-product-section[data-full-width-image=true] .shop-mobile-arrows,.pdp-gallery-block[data-full-width-image=true] .shop-mobile-arrows{position:absolute;top:0;left:0;right:0;bottom:auto;height:100%}.shop-product-section[data-full-width-image=true] .shop-mobile-arrows-below,.pdp-gallery-block[data-full-width-image=true] .shop-mobile-arrows-below{position:static!important;top:auto!important;left:auto!important;right:auto!important;bottom:auto!important;height:auto!important}.shop-product-section[data-full-width-image=true] .shop-desktop-arrows.shop-desktop-arrows-overlaid,.pdp-gallery-block[data-full-width-image=true] .shop-desktop-arrows.shop-desktop-arrows-overlaid{position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:auto!important;height:100%!important}.shop-product-section[data-full-width-image=true] .shop-desktop-arrows.shop-desktop-arrows-below,.pdp-gallery-block[data-full-width-image=true] .shop-desktop-arrows.shop-desktop-arrows-below{position:static!important;top:auto!important;left:auto!important;right:auto!important;bottom:auto!important;height:auto!important}}@media(max-width:749px){.shop-product-section[data-full-width-image=true] .shop-main-image-wrapper,.pdp-gallery-block[data-full-width-image=true] .shop-main-image-wrapper{height:auto}.shop-product-section[data-full-width-image=true] .shop-thumbnails-outer,.pdp-gallery-block[data-full-width-image=true] .shop-thumbnails-outer{margin-top:0}}.shop-product-section[data-hide-thumbnails=true] .shop-thumbnails-outer,.pdp-gallery-block[data-hide-thumbnails=true] .shop-thumbnails-outer{display:none!important}@media(min-width:750px){.shop-product-section[data-hide-thumbnails=true] .shop-thumbnails-outer,.pdp-gallery-block[data-hide-thumbnails=true] .shop-thumbnails-outer{display:none!important}}@media(max-width:749px){.shop-product-section[data-hide-thumbnails=true] .shop-thumbnails-outer,.pdp-gallery-block[data-hide-thumbnails=true] .shop-thumbnails-outer{display:none!important}}.shop-dots-navigation{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:15px;padding:10px 0;flex-wrap:wrap;max-width:100%}.shop-dot{width:var(--dot-size, 8px);height:var(--dot-size, 8px);border-radius:50%;background-color:var(--dot-color, #cccccc);cursor:pointer;transition:background-color .2s ease;display:block}.shop-dot:hover{background-color:var(--dot-active-color, #000000);opacity:.7}.shop-dot:focus{outline:2px solid var(--dot-active-color, #000000);outline-offset:2px}.shop-dot.active{background-color:var(--dot-active-color, #000000)}[data-dot-style=pill] .shop-dot{border-radius:calc(var(--dot-size, 8px) / 2);transition:width .3s ease,background-color .2s ease}[data-dot-style=pill] .shop-dot.active{width:calc(var(--dot-size, 8px) * 2.5)}@media(max-width:749px){.shop-dots-navigation{margin-top:12px;gap:6px;padding:8px 0}}@media(max-width:480px){.shop-dots-navigation{gap:5px;margin-top:10px}.shop-product-section[data-full-width-image=true] .shop-image-container,.pdp-gallery-block[data-full-width-image=true] .shop-image-container{max-width:none;margin:0;aspect-ratio:auto}}.shop-desktop-arrows{display:none}@media(min-width:750px){.shop-desktop-arrows{display:flex;justify-content:center;align-items:center;gap:20px;margin-top:20px;padding:10px 0}.shop-dots-navigation+.shop-desktop-arrows{margin-top:10px}.shop-desktop-arrow{width:44px;height:44px;border-radius:var(--arrow-border-radius, 50%)!important;background-color:var(--desktop-arrow-bg, #ffffff);border:1px solid var(--desktop-arrow-border, #e0e0e0);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 8px #0000001a}.shop-desktop-arrow:hover{background-color:var(--desktop-arrow-hover-bg, #f5f5f5);border-color:var(--desktop-arrow-hover-border, #d0d0d0);transform:translateY(-1px);box-shadow:0 4px 12px #00000026}.shop-desktop-arrow:active{transform:translateY(0);box-shadow:0 2px 8px #0000001a}.shop-desktop-arrow:focus{outline:none;border-color:var(--desktop-arrow-icon, #000000)}.shop-desktop-arrow svg{width:18px;height:18px;transition:all .2s ease}.shop-desktop-arrow svg path{stroke:var(--desktop-arrow-icon, #000000)}.shop-desktop-arrow:disabled{opacity:.4;cursor:not-allowed;transform:none}.shop-desktop-arrow:disabled:hover{background-color:var(--desktop-arrow-bg, #ffffff);border-color:var(--desktop-arrow-border, #e0e0e0);transform:none;box-shadow:0 2px 8px #0000001a}}@media(min-width:1200px){.shop-desktop-arrows{margin-top:25px;gap:30px}.shop-desktop-arrow{width:48px;height:48px;border-radius:var(--arrow-border-radius, 50%)!important}.shop-desktop-arrow svg{width:20px;height:20px}.shop-desktop-arrow svg path{stroke:var(--desktop-arrow-icon, #000000)}}.shop-desktop-arrows.shop-desktop-arrows-overlaid{display:none!important;position:static;margin:0;padding:0;gap:0}@media(min-width:750px){.shop-desktop-arrows.shop-desktop-arrows-overlaid{position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:0!important;display:flex!important;justify-content:space-between;align-items:center;padding:0 15px!important;pointer-events:none;z-index:2;margin:0!important;gap:0!important}.shop-desktop-arrows.shop-desktop-arrows-overlaid .shop-desktop-arrow{width:44px;height:44px;border-radius:var(--arrow-border-radius, 50%)!important;background-color:var(--desktop-arrow-bg, #ffffff);border:1px solid var(--desktop-arrow-border, #e0e0e0);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;opacity:var(--arrow-opacity, .9);box-shadow:0 2px 8px #0000001a;pointer-events:auto}.shop-desktop-arrows.shop-desktop-arrows-overlaid .shop-desktop-arrow:hover{background-color:var(--desktop-arrow-hover-bg, #f5f5f5);border-color:var(--desktop-arrow-hover-border, #d0d0d0);transform:translateY(-1px);box-shadow:0 4px 12px #00000026}.shop-desktop-arrows.shop-desktop-arrows-overlaid .shop-desktop-arrow:active{transform:translateY(0);box-shadow:0 2px 8px #0000001a;border-color:var(--desktop-arrow-icon, #000000)}.shop-desktop-arrows.shop-desktop-arrows-overlaid .shop-desktop-arrow:focus{outline:none;border-color:var(--desktop-arrow-icon, #000000)}.shop-desktop-arrows.shop-desktop-arrows-overlaid .shop-desktop-arrow svg{width:18px;height:18px;transition:all .2s ease}.shop-desktop-arrows.shop-desktop-arrows-overlaid .shop-desktop-arrow svg path{stroke:var(--desktop-arrow-icon, #000000)}.shop-desktop-arrow-prev{margin-left:0}.shop-desktop-arrow-next{margin-right:0}}@media(min-width:1200px){.shop-desktop-arrows.shop-desktop-arrows-overlaid{padding:0 20px!important}.shop-desktop-arrows.shop-desktop-arrows-overlaid .shop-desktop-arrow{width:50px;height:50px}.shop-desktop-arrows.shop-desktop-arrows-overlaid .shop-desktop-arrow svg{width:20px;height:20px}}.shop-desktop-arrows.shop-desktop-arrows-below{display:none}@media(min-width:750px){.shop-desktop-arrows.shop-desktop-arrows-below{display:flex;justify-content:center;align-items:center;gap:20px;margin-top:0;padding:10px 0}.shop-desktop-arrows.shop-desktop-arrows-below .shop-desktop-arrow{width:40px;height:40px;border-radius:var(--arrow-border-radius, 50%)!important;background-color:var(--desktop-arrow-bg, #ffffff);border:1px solid var(--desktop-arrow-border, #e0e0e0);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 8px #0000001a}.shop-desktop-arrows.shop-desktop-arrows-below .shop-desktop-arrow:hover{background-color:var(--desktop-arrow-hover-bg, #f5f5f5);border-color:var(--desktop-arrow-hover-border, #d0d0d0);transform:translateY(-1px);box-shadow:0 4px 12px #00000026}.shop-desktop-arrows.shop-desktop-arrows-below .shop-desktop-arrow:active{transform:translateY(0);box-shadow:0 2px 8px #0000001a;border-color:var(--desktop-arrow-icon, #000000)}.shop-desktop-arrows.shop-desktop-arrows-below .shop-desktop-arrow:focus{outline:none;border-color:var(--desktop-arrow-icon, #000000)}.shop-desktop-arrows.shop-desktop-arrows-below .shop-desktop-arrow svg{width:18px;height:18px;transition:all .2s ease}.shop-desktop-arrows.shop-desktop-arrows-below .shop-desktop-arrow svg path{stroke:var(--desktop-arrow-icon, #000000)}.shop-desktop-arrows.shop-desktop-arrows-below .shop-desktop-arrow:disabled{opacity:.4;cursor:not-allowed;transform:none}.shop-desktop-arrows.shop-desktop-arrows-below .shop-desktop-arrow:disabled:hover{background-color:var(--desktop-arrow-bg, #ffffff);border-color:var(--desktop-arrow-border, #e0e0e0);transform:none;box-shadow:0 2px 8px #0000001a}}@media(min-width:1200px){.shop-desktop-arrows.shop-desktop-arrows-below{margin-top:25px;gap:30px}.shop-desktop-arrows.shop-desktop-arrows-below .shop-desktop-arrow{width:48px;height:48px}.shop-desktop-arrows.shop-desktop-arrows-below .shop-desktop-arrow svg{width:20px;height:20px}}.shop-mobile-arrows{display:none}@media(max-width:749px){.shop-mobile-arrows{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;justify-content:space-between;align-items:center;padding:0 10px;pointer-events:none;z-index:2;animation:fadeInMobileArrows .3s ease-in-out}@keyframes fadeInMobileArrows{0%{opacity:0}to{opacity:1}}.shop-mobile-arrow{width:40px;height:40px;border-radius:var(--arrow-border-radius, 50%)!important;background-color:var(--desktop-arrow-bg, #ffffff);border:1px solid var(--desktop-arrow-border, #e0e0e0);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;opacity:var(--arrow-opacity, .9);box-shadow:0 2px 8px #00000026;pointer-events:auto;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}.shop-mobile-arrow:active{transform:scale(.95);opacity:1;border-color:var(--desktop-arrow-icon, #000000)}.shop-mobile-arrow:focus{outline:none;border-color:var(--desktop-arrow-icon, #000000)}.shop-mobile-arrow svg{width:16px;height:16px;transition:all .2s ease}.shop-mobile-arrow svg path{stroke:var(--desktop-arrow-icon, #000000)}.shop-mobile-prev-arrow{margin-left:0}.shop-mobile-next-arrow{margin-right:0}}@media(max-width:480px){.shop-mobile-arrows{padding:0 8px}.shop-mobile-arrow{width:36px;height:36px}.shop-mobile-arrow svg{width:14px;height:14px}}.shop-mobile-arrow-in-thumbnails{display:none}@media(max-width:749px){.shop-thumbnails-wrapper{display:flex!important;align-items:center;gap:10px}.shop-mobile-arrow-in-thumbnails{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:var(--arrow-border-radius, 50%)!important;background-color:var(--desktop-arrow-bg, #ffffff);border:1px solid var(--desktop-arrow-border, #e0e0e0);cursor:pointer;transition:all .2s ease;opacity:var(--arrow-opacity, .9);box-shadow:0 2px 6px #0000001a;pointer-events:auto;flex-shrink:0}.shop-mobile-arrow-in-thumbnails:hover{background-color:var(--desktop-arrow-hover-bg, #f5f5f5);border-color:var(--desktop-arrow-hover-border, #d0d0d0);opacity:1}.shop-mobile-arrow-in-thumbnails:active{transform:scale(.95);opacity:1;border-color:var(--desktop-arrow-icon, #000000)}.shop-mobile-arrow-in-thumbnails:focus{outline:none;border-color:var(--desktop-arrow-icon, #000000)}.shop-mobile-arrow-in-thumbnails svg{width:19px;height:19px;transition:all .2s ease}.shop-mobile-arrow-in-thumbnails svg path{stroke:var(--desktop-arrow-icon, #000000)}.shop-thumbnails{display:flex;flex:1;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.shop-thumbnails::-webkit-scrollbar{display:none}.shop-thumbnail{width:50px!important;height:50px!important}.shop-thumbnails{gap:8px!important}.shop-thumbnails-wrapper:has(.shop-mobile-arrow-in-thumbnails) .shop-thumbnail,.shop-thumbnails-wrapper.has-mobile-arrows .shop-thumbnail{width:45px!important;height:45px!important}.shop-thumbnails-wrapper:has(.shop-mobile-arrow-in-thumbnails) .shop-thumbnails,.shop-thumbnails-wrapper.has-mobile-arrows .shop-thumbnails{gap:6px!important}}@media(max-width:480px){.shop-mobile-arrow-in-thumbnails{width:28px;height:28px}.shop-mobile-arrow-in-thumbnails svg{width:17px;height:17px}.shop-thumbnails-wrapper{gap:8px}.shop-thumbnail{width:45px!important;height:45px!important}.shop-thumbnails{gap:6px!important}.shop-thumbnails-wrapper:has(.shop-mobile-arrow-in-thumbnails) .shop-thumbnail,.shop-thumbnails-wrapper.has-mobile-arrows .shop-thumbnail{width:40px!important;height:40px!important}.shop-thumbnails-wrapper:has(.shop-mobile-arrow-in-thumbnails) .shop-thumbnails,.shop-thumbnails-wrapper.has-mobile-arrows .shop-thumbnails{gap:4px!important}}.shop-mobile-arrows-below{display:none}@media(max-width:749px){.shop-mobile-arrows-below{position:static!important;top:auto!important;left:auto!important;right:auto!important;bottom:auto!important;display:flex;justify-content:center;align-items:center;gap:20px;margin-top:15px;padding:10px 0;pointer-events:auto!important;z-index:auto!important;animation:none!important}.shop-mobile-arrows-below .shop-mobile-arrow{width:40px;height:40px;border-radius:var(--arrow-border-radius, 50%)!important;background-color:var(--desktop-arrow-bg, #ffffff);border:1px solid var(--desktop-arrow-border, #e0e0e0);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;opacity:var(--arrow-opacity, .9);box-shadow:0 2px 8px #00000026;pointer-events:auto;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}.shop-mobile-arrows-below .shop-mobile-arrow:active{transform:scale(.95);opacity:1;border-color:var(--desktop-arrow-icon, #000000)}.shop-mobile-arrows-below .shop-mobile-arrow:focus{outline:none;border-color:var(--desktop-arrow-icon, #000000)}.shop-mobile-arrows-below .shop-mobile-arrow svg{width:16px;height:16px;transition:all .2s ease}.shop-mobile-arrows-below .shop-mobile-arrow svg path{stroke:var(--desktop-arrow-icon, #000000)}}@media(max-width:480px){.shop-mobile-arrows-below{gap:15px;margin-top:12px;padding:8px 0}.shop-mobile-arrows-below .shop-mobile-arrow{width:36px;height:36px}.shop-mobile-arrows-below .shop-mobile-arrow svg{width:14px;height:14px}}.shop-thumbnails-outer{position:relative;width:100%;margin-top:0;display:flex;justify-content:center}.shop-thumbnails-wrapper{position:relative;width:100%;display:flex;align-items:center;gap:10px;padding:0 5px;max-width:100%;margin:0 auto}.shop-thumbnails{display:flex;gap:10px;width:100%;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;padding:5px 0;flex-wrap:nowrap;align-items:center}.shop-thumbnails::-webkit-scrollbar{display:none}@media(min-width:750px){.shop-thumbnails,.shop-thumbnails-wrapper.left-column-layout,.shop-main-image-wrapper.shop-image-thumbnails-row .shop-thumbnails-outer{cursor:grab;-webkit-user-select:none;user-select:none}.shop-thumbnails img,.shop-thumbnails-wrapper.left-column-layout img{-webkit-user-drag:none;user-drag:none}.shop-thumbnails[data-dragging="1"],.shop-thumbnails-wrapper.left-column-layout[data-dragging="1"],.shop-thumbnails-outer[data-dragging="1"]{cursor:grabbing;scroll-behavior:auto}}.shop-thumbnail{flex:0 0 auto;width:70px;height:70px;cursor:pointer;border-radius:4px;overflow:hidden;transition:opacity .2s ease,border-color .2s ease;padding:0;margin:0;background-color:#f8f8f8}.thumb-square{width:100%;height:100%;position:relative;display:block;overflow:hidden;padding:0;margin:0}.thumb-square img{width:100%;height:100%;object-fit:contain;display:block;position:absolute;top:0;left:0;right:0;bottom:0}.thumb-square .video-icon{position:absolute;transform:translate(-50%,-50%)}.shop-thumbnail-indicators{display:none;justify-content:center;gap:5px;margin-top:10px}.shop-square-container{position:relative;aspect-ratio:1 / 1;width:100%;overflow:hidden}.shop-match-image-width{width:100%;max-width:100%;padding:0}@media(min-width:750px){.shop-thumbnail{width:64px;height:64px}.shop-thumbnails{gap:4px}.shop-product-{padding:0 7px}.shop-main-image-wrapper{margin-bottom:0}.shop-thumbnails-outer{margin:14px 0 0}.shop-image-thumbnails-row .shop-thumbnails-outer{margin-top:0}}@media(min-width:750px){.shop-carousel-container::-webkit-scrollbar{display:none}.shop-main-image-wrapper,.shop-image-container{align-self:flex-start;margin-left:0;margin-right:auto}.shop-thumbnails-wrapper{max-width:100%;width:100%;justify-content:center}.shop-thumbnails{max-width:100%;justify-content:flex-start;margin:0 auto}.shop-match-image-width{max-width:100%;width:100%;padding:0}.shop-square-container{width:100%}.shop-product-layout{display:flex;gap:20px;align-items:flex-start}.shop-carousel-container{flex:0 0 50%;max-width:50%;position:sticky;top:20px;height:fit-content;max-height:calc(100vh - 40px);overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none;display:flex;flex-direction:column;align-items:center}.shop-product-info{flex:0 0 calc(50% - 20px);max-width:calc(50% - 20px)}}@media screen and (min-width:750px){.shop-add-to-cart-button .current-price{font-size:16px}.shop-add-to-cart-button .compare-price{font-size:inherit}}@media(max-width:749px){.shop-product-layout{flex-direction:column;gap:0}.shop-carousel-container{margin-bottom:0;display:flex;flex-direction:column;align-items:center}.shop-thumbnails-wrapper{max-width:600px;margin:0 auto}.shop-product-info{padding-top:10px;align-items:flex-start;text-align:left}.shop-carousel-container,.shop-product-info{flex:0 0 100%;max-width:100%;position:static;max-height:none}.shop-carousel-container{display:flex;flex-direction:column;align-items:center;margin-bottom:20px}.shop-image-container{max-width:600px;margin:0 auto}.shop-thumbnails-outer{max-width:600px;width:100%;margin:0 auto}.shop-product-title{font-size:var(--title-mobile-font-size, 26px)!important;padding-right:0;width:100%}.shop-thumbnail-indicators{display:flex}.shop-image-container,.shop-thumbnails-outer{width:100%!important;max-width:100%!important;margin:0!important}.shop-thumbnails-wrapper{width:100%!important;max-width:100%!important;margin-left:0!important;margin-right:0!important}.shop-product-carousel{width:100%!important}.shop-carousel-container{padding:0!important;width:100%!important}.shop-thumbnail{width:60px;height:60px}.shop-thumbnails{gap:8px;padding:5px 6px;justify-content:center}.shop-main-image{object-fit:contain}.shop-main-image:hover img{transform:scale(1.03)}.shop-square-container,.shop-match-image-width{margin:0 auto;max-width:600px}.shop-square-container{aspect-ratio:4 / 3}}@media(max-width:749px){.shop-image-container,.shop-thumbnails-outer,.shop-thumbnails-wrapper{max-width:500px}.shop-award-badge{white-space:normal;padding:3px 12px}.rating-component{flex-wrap:wrap}.rating-satisfaction{margin-left:0;letter-spacing:var(--letter-spacing-body);margin-top:0}.shop-product-info{align-items:flex-start;text-align:left}.shop-image-container,.shop-thumbnails-outer{width:100%!important;max-width:100%!important;margin:0!important}.shop-thumbnails-wrapper{width:100%!important;max-width:100%!important;margin-left:0!important;margin-right:0!important}.shop-product-carousel{width:100%!important}.shop-carousel-container{padding:0!important;width:100%!important}.shop-image-container{margin:0 auto;max-width:500px}.shop-main-image{object-fit:contain}.shop-main-image:hover img{transform:scale(1.03)}.shop-square-container,.shop-match-image-width{max-width:500px}.shop-square-container{aspect-ratio:5 / 4}.shop-add-to-cart-button,.shop-add-to-cart-wrapper{width:100%!important;max-width:100%!important;margin-left:0!important;margin-right:0!important}.shop-carousel-container,.shop-product-carousel,.shop-image-container,.shop-thumbnails-outer,.shop-thumbnails-wrapper{width:100%!important;max-width:100%!important;margin-left:0!important;margin-right:0!important;margin-bottom:0}.shop-product-info{padding-top:0}.shop-product-title{font-size:var(--title-mobile-font-size, 26px)!important;padding-right:0;width:100%}.shop-thumbnail-indicators{display:flex}.shop-thumbnail{width:60px;height:60px}.shop-thumbnails{gap:8px;padding:5px 6px;justify-content:flex-start;width:100%!important}}@media(max-width:480px){.shop-image-container,.shop-thumbnails-wrapper{max-width:100%}.shop-thumbnail{width:50px;height:50px;border-radius:3px!important}.shop-square-container,.shop-match-image-width{max-width:100%}.shop-thumbnails{gap:6px;padding:5px 4px}.shop-image-container,.shop-thumbnails-outer,.shop-thumbnails-wrapper{width:100%;max-width:100%;margin:0}.shop-thumbnails-outer{margin-top:0}}@media(max-width:749px){.shop-thumbnail{width:60px;height:60px}}@media(max-width:480px){.shop-thumbnail{width:50px;height:50px;border-radius:3px!important}}.shop-product-layout.no-gallery{display:block}.shop-product-layout.no-gallery .shop-product-info{flex:1 1 100%;max-width:100%;width:100%}.shop-product-layout.no-gallery .shop-carousel-container{display:none}@media(min-width:750px){.shop-product-layout.no-gallery .shop-product-info{max-width:800px;margin:0 auto}}@media(max-width:749px){.shop-product-layout.no-gallery .shop-product-info{padding-top:0}}@media(max-width:767px){.shop-product-title{font-size:var(--title-mobile-font-size, 26px)!important}}.shop-carousel-container{max-height:100%!important}.shop-add-to-cart-button:hover{opacity:.85} .variant-selector-container{width:100%;--card-gap: 8px;--card-padding: 12px;--border-radius: 8px;--card-background: white;--title-font-size: 14px;--description-font-size: 11px;--current-price-font-size: 16px;--original-price-font-size: 11px;letter-spacing:var(--letter-spacing-body)}.variant-products-container{display:flex;gap:var(--card-gap, 8px);width:100%;overflow:visible}.variant-layout-horizontal{flex-direction:row;width:100%}.variant-layout-vertical{flex-direction:column;width:100%;gap:var(--card-gap, 8px)}.variant-layout-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--card-gap, 8px);width:100%}.variant-products-container[data-variants-count="4"]{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--card-gap, 8px)}.variant-products-container[data-variants-count="3"]{display:flex;flex-direction:row;gap:var(--card-gap, 8px)}@media(max-width:749px){.variant-products-container[data-variants-count="3"]{display:flex;flex-direction:row;gap:var(--card-gap, 8px)}}.variant-product-card{display:flex;flex-direction:column;gap:0;background:var(--card-background);border:var(--card-border-width, 2px) solid var(--variant-border-color);border-radius:var(--border-radius);padding:0;flex:1 1 0%;position:relative;min-width:0;transition:all .3s ease;cursor:pointer;overflow:visible}.variant-products-container[data-image-padding-style=with_padding] .variant-product-card{padding:var(--card-padding);gap:4px}.variant-products-container[data-show-images=false] .variant-product-image{display:none}.variant-products-container[data-image-padding-style=with_padding] .variant-product-image{width:100%;border-radius:8px;margin-bottom:8px}.variant-products-container[data-image-padding-style=with_padding] .variant-product-content{padding:0}.variant-product-card:hover:not(.selected){border-color:#3b82f6}.variant-product-card.selected{border-color:#3b82f6!important;background:#eff6ff}.variant-best-value-badge{position:absolute;top:var(--badge-offset-top, -10px);left:50%;transform:translate(-50%);background:var(--variant-badge-bg-color, #3b82f6);color:var(--variant-badge-text-color, white);padding:var(--badge-padding-y, 4px) var(--badge-padding-x, 8px);border-radius:var(--badge-radius, 4px);transition:all .3s ease;font-size:var(--badge-font-size, 10px);font-weight:var(--font-weight-bold)!important;text-transform:uppercase;letter-spacing:var(--letter-spacing-body);z-index:2;white-space:nowrap;box-shadow:0 2px 4px #0000001a;border:var(--badge-border-width, 0) solid var(--badge-border-color, transparent)}.variant-product-image{width:100%;display:flex;justify-content:center;align-items:center;aspect-ratio:1;border-radius:var(--border-radius) var(--border-radius) 0 0;overflow:hidden;position:relative}.variant-product-content{padding:var(--card-padding);display:flex;flex-direction:column;gap:4px;flex-grow:1}.variant-products-container[data-image-width-desktop=auto] .variant-product-card{flex:1 1 0%}.variant-selector-container[style*=--variant-image-width-desktop] .variant-product-card{flex:0 0 auto;width:calc(var(--variant-image-width-desktop) + 4px)}.variant-selector-container[style*=--variant-image-width-desktop] .variant-products-container[data-image-padding-style=with_padding] .variant-product-card{width:calc(var(--variant-image-width-desktop) + (var(--card-padding) * 2) + 4px)}@media(max-width:749px){.variant-products-container[data-image-width-mobile=auto] .variant-product-card{flex:1 1 0!important;width:auto!important;min-width:auto!important}.variant-selector-container[style*=--variant-image-width-mobile] .variant-product-card{flex:0 0 auto!important;width:calc(var(--variant-image-width-mobile) + 4px)!important}.variant-selector-container[style*=--variant-image-width-mobile] .variant-products-container[data-image-padding-style=with_padding] .variant-product-card{width:calc(var(--variant-image-width-mobile) + (var(--card-padding) * 2) + 4px)!important}}.variant-product-visual{width:100%;height:100%;background:linear-gradient(135deg,#f3f4f6,#e5e7eb);border-radius:6px;position:relative;background-size:cover;background-position:center;background-repeat:no-repeat}.variant-product-card .variant-product-content .variant-product-title,.variant-product-card h3.variant-product-title{font-size:var(--title-font-size)!important;font-weight:var(--font-weight-bold)!important;letter-spacing:var(--letter-spacing-body)!important;color:var(--variant-title-color, #1f2937)!important;text-align:center!important;margin-top:4px!important;font-family:inherit!important}.variant-product-description{font-size:var(--description-font-size);color:var(--variant-description-color);text-align:center;margin:0}.variant-pricing{display:flex;align-items:center;justify-content:center;gap:4px;transition:all .3s ease}.variant-original-price{font-size:var(--original-price-font-size);color:var(--variant-original-price-color);text-decoration:line-through}.variant-current-price{font-size:var(--current-price-font-size);font-weight:var(--font-weight-bold);color:var(--variant-current-price-color);transition:all .3s ease}.variant-sold-out{margin-top:8px;color:#ef4444;font-size:12px;font-weight:var(--font-weight-bold);letter-spacing:var(--letter-spacing-body)}.variant-product-card[data-variant-available=false]{opacity:.6;pointer-events:auto;position:relative}.variant-product-card[data-variant-available=false]:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:#fffc;border-radius:inherit}.variant-selector-container{--variant-border-color: #e5e7eb;--variant-hover-border-color: #3b82f6;--variant-selected-border-color: #3b82f6;--variant-selected-bg-color: #eff6ff;--variant-badge-bg-color: #3b82f6;--variant-badge-text-color: white;--variant-title-color: #1f2937;--variant-description-color: var(--color-muted-text, #6b7280);--variant-original-price-color: #9ca3af;--variant-current-price-color: #3b82f6}.variant-product-card{border-color:var(--variant-border-color)}.variant-product-card:hover:not(.selected){border-color:var(--variant-hover-border-color);transform:translateY(-1px);box-shadow:0 2px 8px #00000014}.variant-product-card.selected{border-color:var(--variant-selected-border-color)!important;background:var(--variant-selected-bg-color);box-shadow:0 1px 4px #0000000f}.variant-product-card:active{transform:scale(.98);transition-duration:.15s}.variant-product-card:focus-visible{outline:2px solid var(--variant-selected-border-color, #3b82f6);outline-offset:2px}@media(prefers-reduced-motion:reduce){.variant-selector-container,.variant-selector-container *{transition:none!important}}.variant-product-description{color:var(--variant-description-color)}.variant-original-price{color:var(--variant-original-price-color)}.variant-current-price{color:var(--variant-current-price-color)}@media(max-width:480px){.variant-products-container{gap:6px;padding:0}.variant-product-content,.variant-products-container[data-image-padding-style=with_padding] .variant-product-card{padding:calc(var(--card-padding) - 4px)}.variant-products-container[data-image-padding-style=with_padding] .variant-product-content{padding:0}.variant-product-card .variant-product-content .variant-product-title,.variant-product-card h3.variant-product-title{font-size:calc(var(--title-font-size) - 2px)!important}.variant-product-description{font-size:calc(var(--description-font-size) - 1px)}.variant-current-price{font-size:calc(var(--current-price-font-size) - 2px)}.variant-original-price{font-size:calc(var(--original-price-font-size) - 1px)}.variant-best-value-badge{font-size:calc(var(--badge-font-size, 10px) * .8);padding:calc(var(--badge-padding-y, 4px) * .5) calc(var(--badge-padding-x, 8px) * .75)}} /* END_SECTION:br-main-product */ /* START_SECTION:br-mechanism (INDEX:18) */ #image-text-section-template--21692356886685__mechanism { width: 100%; max-width: 100%; box-sizing: border-box; overflow: hidden; overflow-x: clip; border-radius: 0px; padding: 30px 20px; } #image-text-section-template--21692356886685__mechanism .image-text-container-wrapper { max-width: 1200px; margin: 0 auto;border-radius: 4px 4px 4px 4px; overflow: hidden; box-sizing: border-box; background: linear-gradient(120deg, #5b7394 28%, #c7d9f1 100%); } @media screen and (min-width: 991px) { } #image-text-section-template--21692356886685__mechanism .image-text-container { overflow: hidden; box-sizing: border-box; } #image-text-section-template--21692356886685__mechanism .image-text-content { margin-top: 20px; margin-bottom: 20px; margin-left: 20px; margin-right: 20px; } @media screen and (min-width: 991px) { #image-text-section-template--21692356886685__mechanism .image-text-content { margin-top: 30px; margin-bottom: 30px; margin-left: 30px; margin-right: 30px; } } #image-text-section-template--21692356886685__mechanism .image-text-container { } @media (max-width: 990px) { #image-text-section-template--21692356886685__mechanism:has(.mobile-media-full-width) .image-text-container { padding: 0 !important; } } #image-text-section-template--21692356886685__mechanism .image-text-content { display: flex; flex-direction: column-reverse; gap: 20px; } @media screen and (max-width: 599px) { #image-text-section-template--21692356886685__mechanism .image-text-content { flex-direction: column-reverse; gap: 20px; } #image-text-section-template--21692356886685__mechanism .media-column, #image-text-section-template--21692356886685__mechanism .text-column { width: 100%; } } #image-text-section-template--21692356886685__mechanism .mobile-heading-above-image { display: none; width: 100%; order: -1; } @media screen and (max-width: 990px) { } @media screen and (min-width: 991px) { #image-text-section-template--21692356886685__mechanism .mobile-heading-above-image { display: none !important; } #image-text-section-template--21692356886685__mechanism .iwt-lift-desktop { display: contents; } } #image-text-section-template--21692356886685__mechanism .iwt-lift-desktop > div { width: 100%; max-width: 100%; box-sizing: border-box; } #image-text-section-template--21692356886685__mechanism .media-column { width: 100%; padding: 0px; border-radius: 4px; overflow: hidden; } #image-text-section-template--21692356886685__mechanism .media-column.background-image-mode { min-height: 400px; } @media screen and (min-width: 991px) { #image-text-section-template--21692356886685__mechanism .media-column.background-image-mode { min-height: 500px; } } #image-text-section-template--21692356886685__mechanism .main-image, #image-text-section-template--21692356886685__mechanism .main-video { width: 100%; height: auto; border-radius: 4px !important; object-fit: cover; display: block; margin-top: 0px; margin-bottom: 0px; max-width: 450px; }#image-text-section-template--21692356886685__mechanism .main-video { background-color: #000; -webkit-mask-image: -webkit-radial-gradient(white, black); -webkit-backface-visibility: hidden; -webkit-transform: translateZ(0); transform: translateZ(0); } #image-text-section-template--21692356886685__mechanism .media-placeholder { width: 100%; aspect-ratio: 16/9; background-color: #f5f5f5; display: flex; align-items: center; justify-content: center; border-radius: 4px !important; margin-top: 0px; margin-bottom: 0px; max-width: 450px; margin: 0 auto; } #image-text-section-template--21692356886685__mechanism .media-placeholder svg { width: 40%; height: 40%; fill: #d0d0d0; } #image-text-section-template--21692356886685__mechanism .iwt-illustration { width: 100%; overflow: hidden; border-radius: 4px; max-width: 450px; margin: 0 auto; } #image-text-section-template--21692356886685__mechanism .iwt-illustration svg { display: block; width: 100%; height: auto; } #image-text-section-template--21692356886685__mechanism .media-column.media-column--blocks { overflow: visible; border-radius: 0; flex-direction: column; } #image-text-section-template--21692356886685__mechanism .iwt-media-block { width: 100%; max-width: 450px; margin: 0 auto; } #image-text-section-template--21692356886685__mechanism .text-column { display: flex; flex-direction: column; padding: 0px 0px; overflow: visible; box-sizing: border-box; min-width: 0; align-items: flex-start; text-align: left; gap: 10px; justify-content: center; } #image-text-section-template--21692356886685__mechanism .image-text-heading { font-weight: var(--section-heading-weight, var(--font-weight-bold)); color: #ffffff !important; margin-bottom: 0; letter-spacing: var(--letter-spacing-heading) !important; word-wrap: break-word; overflow-wrap: break-word; word-break: normal; hyphens: auto; width: 100%; max-width: 100%; box-sizing: border-box; } #image-text-section-template--21692356886685__mechanism .text-column > div { width: 100%; max-width: 100%; box-sizing: border-box; overflow: visible; } #image-text-section-template--21692356886685__mechanism .text-column { overflow: visible !important; max-width: 100%; } #image-text-section-template--21692356886685__mechanism .text-column h2, #image-text-section-template--21692356886685__mechanism .text-column .image-text-heading { display: block !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; overflow: visible !important; overflow-wrap: break-word !important; word-wrap: break-word !important; word-break: break-word !important; white-space: normal !important; hyphens: auto !important; box-sizing: border-box !important; } #image-text-section-template--21692356886685__mechanism .text-column > div:first-child { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } #image-text-section-template--21692356886685__mechanism .image-text-heading .accent-text { display: block; margin-bottom: 0px; } #image-text-section-template--21692356886685__mechanism .accent-text { color: #EF4A65; font-family: , ; font-weight: var(--font-accent-weight); font-style: ; letter-spacing: var(--letter-spacing-heading) !important; } #image-text-section-template--21692356886685__mechanism .accent-text { margin-left: 0px; color: #EF4A65 !important; font-family: var(--font-accent-family, var(--font-body-family)) !important; font-style: var(--font-accent-style, normal) !important; font-weight: var(--font-accent-weight, inherit) !important; letter-spacing: var(--font-accent-letter-spacing, inherit) !important; text-transform: var(--font-accent-text-transform, none) !important; } #image-text-section-template--21692356886685__mechanism .image-text-subtitle { font-weight: var(--font-weight-semibold); margin-top: 0; margin-bottom: 0; letter-spacing: var(--letter-spacing-heading); } #image-text-section-template--21692356886685__mechanism .subtitle-wrapper { max-width: 100% !important; box-sizing: border-box; } #image-text-section-template--21692356886685__mechanism .subtitle-wrapper--content-width { display: flex !important; width: 100% !important; padding: 0 !important; background: transparent !important; border: 0 !important; justify-content: flex-start; } #image-text-section-template--21692356886685__mechanism .subtitle-wrapper--content-width .image-text-subtitle { width: fit-content !important; max-width: 100% !important; flex: 0 1 auto; } #image-text-section-template--21692356886685__mechanism .image-text-divider-wrapper { display: flex !important; align-items: center !important; width: 100% !important; clear: both !important; box-sizing: border-box !important; position: relative !important; z-index: 1 !important; } #image-text-section-template--21692356886685__mechanism .image-text-divider-line { display: block !important; flex-shrink: 0 !important; box-sizing: border-box !important; position: relative !important; min-height: 1px !important; min-width: 20px !important; } #image-text-section-template--21692356886685__mechanism .image-text-divider-line:empty { background-color: #000000 !important; height: 2px !important; width: 50% !important; } #image-text-section-template--21692356886685__mechanism .image-text-body { line-height: 1.6; margin-bottom: 0; letter-spacing: var(--letter-spacing-body); } #image-text-section-template--21692356886685__mechanism .image-text-bullet-list { padding-left: 0; margin: 0; list-style-type: none; } #image-text-section-template--21692356886685__mechanism .image-text-bullet-list.no-bullets { list-style-type: none; padding-left: 0; } #image-text-section-template--21692356886685__mechanism .image-text-bullet-list .list-title { font-weight: var(--font-weight-semibold); margin-bottom: 12px; list-style-type: none; padding-left: 0; } #image-text-section-template--21692356886685__mechanism .image-text-bullet-list .list-item { margin-bottom: 10px; line-height: 1.4; position: relative; display: flex; align-items: flex-start; }#image-text-section-template--21692356886685__mechanism .image-text-bullet-list .item-icon { --item-icon-size: 20px; width: var(--item-icon-size); height: 1.4em; min-height: var(--item-icon-size); flex-shrink: 0; margin-right: 6px; display: flex; align-items: center; justify-content: center; } #image-text-section-template--21692356886685__mechanism .image-text-bullet-list .item-icon svg { width: var(--item-icon-size); height: var(--item-icon-size); fill: currentColor; } #image-text-section-template--21692356886685__mechanism .image-text-bullet-list .item-icon img { width: var(--item-icon-size); height: var(--item-icon-size); object-fit: contain; display: block; } #image-text-section-template--21692356886685__mechanism .image-text-bullet-list[data-block-id="usp_list"] .item-icon { --item-icon-size: 18px !important; } #image-text-section-template--21692356886685__mechanism .image-text-bullet-list[data-block-id="usp_list"] .list-item { margin-bottom: 10px; } #image-text-section-template--21692356886685__mechanism .image-text-bullet-list[data-block-id="usp_list"] .list-item:last-child { margin-bottom: 0; } #image-text-section-template--21692356886685__mechanism .image-text-bullet-list .item-text { flex: 1; letter-spacing: var(--letter-spacing-body); } #image-text-section-template--21692356886685__mechanism .image-text-bullet-list .item-text p, #image-text-section-template--21692356886685__mechanism .image-text-bullet-list .item-text ul, #image-text-section-template--21692356886685__mechanism .image-text-bullet-list .item-text ol { margin: 0; } #image-text-section-template--21692356886685__mechanism .image-text-bullet-list .item-text p + p { margin-top: 0.25em; } #image-text-section-template--21692356886685__mechanism .image-text-bullet-list.emoji-bullets .list-item { list-style-type: none; position: relative; padding-left: 25px; } #image-text-section-template--21692356886685__mechanism .image-text-bullet-list.emoji-bullets .list-item:before { content: attr(data-icon); position: absolute; left: 0; top: 0; } #image-text-section-template--21692356886685__mechanism .secondary-image-container { width: 100%; margin-top: 5px; margin-bottom: 5px; } #image-text-section-template--21692356886685__mechanism .secondary-image { max-width: 100%; height: auto; border-radius: 4px; } #image-text-section-template--21692356886685__mechanism .button-container { margin-top: 0; } #image-text-section-template--21692356886685__mechanism .button { display: inline-flex; align-items: center; justify-content: center; padding: 12px 24px; background-color: #2a2a2a; color: #ffffff; text-decoration: none; font-weight: var(--font-weight-bold); transition: all 0.3s ease; letter-spacing: var(--letter-spacing-body); text-transform: none; text-align: center; min-width: 120px; } #image-text-section-template--21692356886685__mechanism .button.button-section-specific-sizing { padding: var(--global-button-padding-y) 24px !important; } #image-text-section-template--21692356886685__mechanism .button:hover { opacity: 0.9; } #image-text-section-template--21692356886685__mechanism .image-text-bullet-list.two-columns { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px 2px; } #image-text-section-template--21692356886685__mechanism .image-text-bullet-list.two-columns .list-title { grid-column: 1 / -1; margin-bottom: 15px; } #image-text-section-template--21692356886685__mechanism .image-text-content.text-only .text-column { width: 100% !important; max-width: 720px; min-height: 0 !important; margin: 0 auto; } #image-text-section-template--21692356886685__mechanism .image-text-bullet-list.pill-style { display: flex; flex-wrap: wrap; gap: 8px; } #image-text-section-template--21692356886685__mechanism .image-text-bullet-list.pill-style .list-title { width: 100%; margin-bottom: 12px; } #image-text-section-template--21692356886685__mechanism .image-text-bullet-list.pill-style .list-item.pill-item { display: inline-flex; align-items: center; margin-bottom: 0; cursor: default; } #image-text-section-template--21692356886685__mechanism .image-text-bullet-list.pill-style .list-item.pill-item .item-icon { margin-right: 6px; --item-icon-size: 16px; height: 1.2em; } #image-text-section-template--21692356886685__mechanism .image-text-bullet-list.pill-style .list-item.pill-item .item-icon img { width: var(--item-icon-size); height: var(--item-icon-size); object-fit: contain; display: block; } #image-text-section-template--21692356886685__mechanism .image-text-bullet-list.pill-style .list-item.pill-item .item-text { font-size: inherit; line-height: 1.2; } #image-text-section-template--21692356886685__mechanism .image-text-bullet-list.flex-row { display: flex; flex-wrap: wrap; gap: 8px; } #image-text-section-template--21692356886685__mechanism .image-text-bullet-list.flex-row .list-title { width: 100%; } #image-text-section-template--21692356886685__mechanism .image-text-bullet-list.flex-row .list-item { margin-bottom: 0 !important; } #image-text-section-template--21692356886685__mechanism .image-text-bullet-list.align-center { justify-content: center; } #image-text-section-template--21692356886685__mechanism .image-text-bullet-list.align-center .list-item { justify-content: center; text-align: center; } #image-text-section-template--21692356886685__mechanism .image-text-bullet-list.align-center .item-text { flex: 0 1 auto; } #image-text-section-template--21692356886685__mechanism .image-text-bullet-list.align-center.two-columns { width: 100%; align-self: stretch; } #image-text-section-template--21692356886685__mechanism .image-text-bullet-list.align-stretch { width: 100%; align-self: stretch; } #image-text-section-template--21692356886685__mechanism .image-text-bullet-list.align-stretch .list-item { width: 100%; justify-content: flex-start; text-align: left; } #image-text-section-template--21692356886685__mechanism .image-text-bullet-list.align-stretch .item-text { flex: 1 1 auto; } #image-text-section-template--21692356886685__mechanism .image-text-bullet-list.pill-style.two-columns { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } #image-text-section-template--21692356886685__mechanism .image-text-bullet-list.pill-style.two-columns .list-title { grid-column: 1 / -1; } @media screen and (max-width: 990px) { #image-text-section-template--21692356886685__mechanism .image-text-heading[data-block-id="heading"] { font-size: var(--section-heading-size-mobile) !important; line-height: 1.2 !important; } #image-text-section-template--21692356886685__mechanism .accent-text[data-block-id="heading"] { font-size: var(--section-heading-size-mobile) !important; line-height: 1.2 !important; } #image-text-section-template--21692356886685__mechanism .image-text-body[data-block-id="paragraph"] { font-size: 1.3rem !important; } #image-text-section-template--21692356886685__mechanism .image-text-bullet-list[data-block-id="usp_list"] { font-size: 1.3rem !important; } } @media screen and (min-width: 991px) { #image-text-section-template--21692356886685__mechanism { padding: 40px 65px; } #image-text-section-template--21692356886685__mechanism .image-text-container { } #image-text-section-template--21692356886685__mechanism .image-text-content { flex-direction: row; align-items: stretch; gap: 50px; } #image-text-section-template--21692356886685__mechanism .media-column { width: 45%; flex-shrink: 0; align-self: stretch; display: flex; align-items: center; } #image-text-section-template--21692356886685__mechanism .text-column { width: 55%; flex-shrink: 1; min-width: 0; } #image-text-section-template--21692356886685__mechanism .media-column.background-image-mode { min-height: 500px; } #image-text-section-template--21692356886685__mechanism .text-column { flex-grow: 1; min-height: 400px; justify-content: center; } #image-text-section-template--21692356886685__mechanism .image-text-content.image-right .media-column { order: 2; } #image-text-section-template--21692356886685__mechanism .image-text-content.image-right .text-column { order: 1; padding: 0px 0px 0px 0px; } #image-text-section-template--21692356886685__mechanism .image-text-content.image-left .text-column { padding: 0px 0px 0px 0px; } #image-text-section-template--21692356886685__mechanism .image-text-heading { margin-bottom: 10px; } #image-text-section-template--21692356886685__mechanism .image-text-body { line-height: 1.5; margin-bottom: 20px; } #image-text-section-template--21692356886685__mechanism .text-column { gap: 15px; } #image-text-section-template--21692356886685__mechanism .main-image, #image-text-section-template--21692356886685__mechanism .main-video { margin-top: 0px; margin-bottom: 0px; } #image-text-section-template--21692356886685__mechanism .media-placeholder { margin-top: 0px; margin-bottom: 0px; } #image-text-section-template--21692356886685__mechanism .image-text-heading[data-block-id="heading"] { font-size: var(--section-heading-size) !important; line-height: 1.1 !important; } #image-text-section-template--21692356886685__mechanism .accent-text[data-block-id="heading"] { font-size: var(--section-heading-size) !important; line-height: 1.1 !important; } #image-text-section-template--21692356886685__mechanism .image-text-body[data-block-id="paragraph"] { font-size: 1.4rem !important; } #image-text-section-template--21692356886685__mechanism .image-text-bullet-list[data-block-id="usp_list"] { font-size: 1.4rem !important; } } #image-text-section-template--21692356886685__mechanism .image-text-body p { margin-top: 0; margin-bottom: 0.5em; } #image-text-section-template--21692356886685__mechanism .image-text-body p:last-child { margin-bottom: 0; } #image-text-section-template--21692356886685__mechanism .image-text-body strong { font-weight: 600 !important; } #image-text-section-template--21692356886685__mechanism .image-text-body em { font-style: italic !important; } #image-text-section-template--21692356886685__mechanism .image-text-body a { text-decoration: underline; } #image-text-section-template--21692356886685__mechanism .image-text-body ul, #image-text-section-template--21692356886685__mechanism .image-text-body ol { margin: 0.5em 0; padding-left: 1.5em; } #image-text-section-template--21692356886685__mechanism .image-text-body li { margin-bottom: 0.25em; } #image-text-section-template--21692356886685__mechanism .accordion-container { width: 100%; max-width: 100%; box-sizing: border-box; overflow: visible; flex-shrink: 1; min-width: 0; } #image-text-section-template--21692356886685__mechanism .accordion-item { width: 100%; max-width: 100%; box-sizing: border-box; min-width: 0; } #image-text-section-template--21692356886685__mechanism .accordion-title { margin: 0 0 16px 0; font-weight: 600; font-size: var(--accordion-title-size); } #image-text-section-template--21692356886685__mechanism .accordion-items-wrapper { width: 100%; } #image-text-section-template--21692356886685__mechanism .accordion-container--left .accordion-header, #image-text-section-template--21692356886685__mechanism .accordion-container--left .accordion-content-inner { text-align: left; } #image-text-section-template--21692356886685__mechanism .accordion-container--compact .accordion-item.active .accordion-content { padding: 0 !important; } #image-text-section-template--21692356886685__mechanism .accordion-container--compact .accordion-item.active .accordion-content-inner { padding: 0 var(--header-padding-mobile) var(--header-padding-mobile) !important; } #image-text-section-template--21692356886685__mechanism .accordion-container--compact .accordion-content-inner > :first-child { margin-top: 0; } #image-text-section-template--21692356886685__mechanism .accordion-container--compact .accordion-content-inner > :last-child { margin-bottom: 0; } @media (min-width: 600px) and (max-width: 990px) { #image-text-section-template--21692356886685__mechanism .accordion-container--compact .accordion-item.active .accordion-content-inner { padding: 0 calc(var(--header-padding-desktop) * 0.5) calc(var(--header-padding-desktop) * 0.5) !important; } } @media (min-width: 991px) { #image-text-section-template--21692356886685__mechanism .accordion-container--compact .accordion-item.active .accordion-content-inner { padding: 0 var(--header-padding-desktop) var(--header-padding-desktop) !important; } } #image-text-section-template--21692356886685__mechanism .accordion-item { overflow: hidden; transition: all 0.2s ease; } #image-text-section-template--21692356886685__mechanism .accordion-header { display: flex; align-items: center; padding: var(--header-padding-mobile); cursor: pointer; font-weight: 500; position: relative; transition: background-color 0.3s ease; gap: 12px; width: 100%; max-width: 100%; box-sizing: border-box; min-width: 0; } #image-text-section-template--21692356886685__mechanism .accordion-header:hover { opacity: 0.9; }#image-text-section-template--21692356886685__mechanism .accordion-header-icon { flex-shrink: 0; align-self: center; display: flex; align-items: center; justify-content: center; overflow: hidden; line-height: 0; width: var(--accordion-icon-size-mobile); height: var(--accordion-icon-size-mobile); aspect-ratio: 1; } #image-text-section-template--21692356886685__mechanism .accordion-header-icon > * { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } #image-text-section-template--21692356886685__mechanism .accordion-header-icon svg { width: 100%; height: 100%; max-width: 100%; max-height: 100%; display: block; fill: currentColor; } #image-text-section-template--21692356886685__mechanism .accordion-header-text { flex-grow: 1; padding-right: 15px; font-weight: 500; letter-spacing: var(--letter-spacing-body); font-size: var(--accordion-header-size); } #image-text-section-template--21692356886685__mechanism .accordion-toggle { position: absolute; right: var(--header-padding-mobile); font-size: var(--accordion-toggle-size); font-weight: bold; transition: transform 0.3s ease; line-height: 1; } #image-text-section-template--21692356886685__mechanism .accordion-item.active .accordion-toggle { transform: rotate(45deg); } #image-text-section-template--21692356886685__mechanism .accordion-content { padding: 0; max-height: 0; overflow: hidden; transition: max-height 0.3s ease, padding 0.3s ease; } #image-text-section-template--21692356886685__mechanism .accordion-content-inner { padding: var(--content-padding-mobile); opacity: 0; transition: opacity 0.3s ease; line-height: 1.6; font-size: var(--accordion-content-size); } #image-text-section-template--21692356886685__mechanism .accordion-item.active .accordion-content { max-height: 1000px !important; padding: var(--content-outer-padding-mobile) 0 !important; overflow: visible !important; } #image-text-section-template--21692356886685__mechanism .accordion-item.active .accordion-content-inner { opacity: 1 !important; letter-spacing: var(--letter-spacing-body); padding: var(--content-padding-mobile) !important; } #image-text-section-template--21692356886685__mechanism .accordion-item.active .accordion-toggle { transform: rotate(45deg) !important; } @media screen and (min-width: 600px) and (max-width: 990px) { #image-text-section-template--21692356886685__mechanism .media-column { position: relative; } #image-text-section-template--21692356886685__mechanism .media-column .main-video, #image-text-section-template--21692356886685__mechanism .media-column .main-image { height: auto !important; max-height: none !important; object-fit: cover; width: 100%; flex-shrink: 0; } #image-text-section-template--21692356886685__mechanism .text-column { overflow: visible; width: 100% !important; max-width: 100% !important; } #image-text-section-template--21692356886685__mechanism .accordion-container { width: 100% !important; max-width: 100% !important; } #image-text-section-template--21692356886685__mechanism .text-column > *, #image-text-section-template--21692356886685__mechanism .image-text-heading, #image-text-section-template--21692356886685__mechanism .image-text-body { width: 100% !important; max-width: 100% !important; } #image-text-section-template--21692356886685__mechanism .accordion-item.active .accordion-content { max-height: none !important; height: auto !important; } } @media screen and (min-width: 991px) { #image-text-section-template--21692356886685__mechanism .media-column { height: fit-content; align-self: center; position: relative; } #image-text-section-template--21692356886685__mechanism .media-column .main-video, #image-text-section-template--21692356886685__mechanism .media-column .main-image { height: auto !important; max-height: none !important; object-fit: cover; width: 100%; flex-shrink: 0; } #image-text-section-template--21692356886685__mechanism .text-column { overflow: visible; } #image-text-section-template--21692356886685__mechanism .accordion-container { width: 100%; max-width: 100%; } #image-text-section-template--21692356886685__mechanism .accordion-item.active .accordion-content { max-height: none !important; height: auto !important; } #image-text-section-template--21692356886685__mechanism .accordion-header-icon { width: var(--accordion-icon-size-desktop); height: var(--accordion-icon-size-desktop); } } #image-text-section-template--21692356886685__mechanism .accordion-item:not(.active) .accordion-content { max-height: 0 !important; padding: 0 !important; overflow: hidden !important; } #image-text-section-template--21692356886685__mechanism .accordion-item:not(.active) .accordion-content-inner { opacity: 0 !important; } #image-text-section-template--21692356886685__mechanism .accordion-content-inner p, #image-text-section-template--21692356886685__mechanism .accordion-content-inner ul, #image-text-section-template--21692356886685__mechanism .accordion-content-inner ol, #image-text-section-template--21692356886685__mechanism .accordion-content-inner li, #image-text-section-template--21692356886685__mechanism .accordion-content-inner strong, #image-text-section-template--21692356886685__mechanism .accordion-content-inner em, #image-text-section-template--21692356886685__mechanism .accordion-content-inner b, #image-text-section-template--21692356886685__mechanism .accordion-content-inner i, #image-text-section-template--21692356886685__mechanism .accordion-content-inner a { color: inherit !important; } #image-text-section-template--21692356886685__mechanism .accordion-content-inner strong, #image-text-section-template--21692356886685__mechanism .accordion-content-inner b { font-weight: bold; } #image-text-section-template--21692356886685__mechanism .accordion-content-inner em, #image-text-section-template--21692356886685__mechanism .accordion-content-inner i { font-style: italic; } #image-text-section-template--21692356886685__mechanism .accordion-content-inner a { color: inherit; text-decoration: underline; } #image-text-section-template--21692356886685__mechanism .accordion-content-inner p { margin-top: 0; margin-bottom: 10px; } #image-text-section-template--21692356886685__mechanism .accordion-content-inner p:last-child { margin-bottom: 0; } #image-text-section-template--21692356886685__mechanism .accordion-content-inner ul, #image-text-section-template--21692356886685__mechanism .accordion-content-inner ol { margin: 10px 0; padding-left: 20px; } #image-text-section-template--21692356886685__mechanism .accordion-content-inner li { margin-bottom: 5px; } @media (max-width: 599px) { #image-text-section-template--21692356886685__mechanism .accordion-container { max-width: 100%; } #image-text-section-template--21692356886685__mechanism .image-text-heading { margin-bottom: 10px !important; } #image-text-section-template--21692356886685__mechanism .accordion-header { padding: var(--header-padding-mobile); gap: 12px; } #image-text-section-template--21692356886685__mechanism .accordion-toggle { right: var(--header-padding-mobile); font-size: var(--accordion-toggle-size-mobile) !important; } #image-text-section-template--21692356886685__mechanism .accordion-content-inner { padding: var(--content-padding-mobile); } #image-text-section-template--21692356886685__mechanism .accordion-title { font-size: var(--accordion-title-size-mobile) !important; } #image-text-section-template--21692356886685__mechanism .accordion-header-text { font-size: var(--accordion-header-size-mobile) !important; } #image-text-section-template--21692356886685__mechanism .accordion-content-inner { font-size: var(--accordion-content-size-mobile) !important; } } @media (min-width: 600px) and (max-width: 990px) { #image-text-section-template--21692356886685__mechanism .accordion-header { padding: calc(var(--header-padding-desktop) * 0.5) !important; } #image-text-section-template--21692356886685__mechanism .accordion-toggle { right: calc(var(--header-padding-desktop) * 0.5) !important; font-size: calc(var(--accordion-toggle-size-desktop) * 0.75) !important; } #image-text-section-template--21692356886685__mechanism .accordion-content-inner { padding: calc(var(--content-padding-desktop) * 0.5) !important; font-size: calc(var(--accordion-content-size-desktop) * 0.8) !important; } #image-text-section-template--21692356886685__mechanism .accordion-item.active .accordion-content { padding: calc(var(--content-outer-padding-desktop) * 0.5) 0 !important; } #image-text-section-template--21692356886685__mechanism .accordion-item.active .accordion-content-inner { padding: calc(var(--content-padding-desktop) * 0.5) !important; } #image-text-section-template--21692356886685__mechanism .accordion-title { font-size: calc(var(--accordion-title-size-desktop) * 0.7) !important; } #image-text-section-template--21692356886685__mechanism .accordion-header-text { font-size: calc(var(--accordion-header-size-desktop) * 0.8) !important; } } @media (min-width: 991px) { #image-text-section-template--21692356886685__mechanism .accordion-header { padding: var(--header-padding-desktop) !important; } #image-text-section-template--21692356886685__mechanism .accordion-toggle { right: var(--header-padding-desktop) !important; font-size: var(--accordion-toggle-size-desktop) !important; } #image-text-section-template--21692356886685__mechanism .accordion-content-inner { padding: var(--content-padding-desktop) !important; font-size: var(--accordion-content-size-desktop) !important; } #image-text-section-template--21692356886685__mechanism .accordion-item.active .accordion-content { padding: var(--content-outer-padding-desktop) 0 !important; } #image-text-section-template--21692356886685__mechanism .accordion-item.active .accordion-content-inner { padding: var(--content-padding-desktop) !important; } #image-text-section-template--21692356886685__mechanism .accordion-title { font-size: var(--accordion-title-size-desktop) !important; } #image-text-section-template--21692356886685__mechanism .accordion-header-text { font-size: var(--accordion-header-size-desktop) !important; } } #image-text-section-template--21692356886685__mechanism .button-container { width: 100%; max-width: 100%; box-sizing: border-box; overflow: visible; flex-shrink: 1; min-width: 0; } #image-text-section-template--21692356886685__mechanism .button-container .button { max-width: 100%; box-sizing: border-box; word-wrap: break-word; min-width: 0; } #image-text-section-template--21692356886685__mechanism .button-container.full-width-mobile { width: 100%; max-width: 100%; box-sizing: border-box; } #image-text-section-template--21692356886685__mechanism .button.full-width-mobile { width: 100% !important; max-width: 100% !important; display: flex !important; justify-content: center !important; align-items: center !important; min-width: unset !important; box-sizing: border-box !important; overflow: hidden !important; } @media (max-width: 990px) { #image-text-section-template--21692356886685__mechanism .image-text-content.mobile-media-full-width { gap: 0px; } #image-text-section-template--21692356886685__mechanism .media-column.mobile-full-width { margin-left: 0; margin-right: 0; padding: 0 !important; width: 100%; max-width: none; } #image-text-section-template--21692356886685__mechanism .media-column.mobile-full-width .main-image, #image-text-section-template--21692356886685__mechanism .media-column.mobile-full-width .main-video, #image-text-section-template--21692356886685__mechanism .media-column.mobile-full-width .media-placeholder { border-radius: 0 !important; max-width: none !important; width: 100% !important; height: auto !important; } #image-text-section-template--21692356886685__mechanism .mobile-media-full-width .text-column { padding-top: 20px; padding-left: 15px; padding-right: 15px; } } @media (max-width: 990px) { #image-text-section-template--21692356886685__mechanism .media-column.mobile-full-width .main-video { object-fit: cover !important; display: block !important; min-height: 200px !important; } #image-text-section-template--21692356886685__mechanism .image-text-content.mobile-media-full-width { overflow: hidden; }#image-text-section-template--21692356886685__mechanism .image-text-container { overflow-x: clip; } } #image-text-section-template--21692356886685__mechanism .image-text-heading { color: #ffffff !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; word-wrap: break-word !important; overflow-wrap: break-word !important; white-space: normal !important; } .icon-block { width: 100%; box-sizing: border-box; } .icon-wrapper { box-sizing: border-box; } .icon-wrapper img { display: block; } .icon-svg svg { width: 100%; height: 100%; display: block; } #shopify-section-template--21692356886685__mechanism h3 {font-weight: 500;} #shopify-section-template--21692356886685__mechanism .elxr-section-header__eyebrow {color: #668aba;} #image-text-section-template--21692356886685__mechanism .media-column .main-image{object-fit:contain;height:auto;aspect-ratio:auto 1600 / 1195} /* END_SECTION:br-mechanism */ /* START_SECTION:br-page-branding (INDEX:19) */ @font-face { font-family: "DM Sans"; font-weight: 500; font-style: normal; font-display: swap; src: url("e077a9b73-dmsans_n5.8a0f1984c77eb7186ceb87c4da2173ff65eb012e.woff2") format("woff2"), url("460c1b964-dmsans_n5.9ad2e755a89e15b3d6c53259daad5fc9609888e6.woff") format("woff"); } @font-face { font-family: "DM Sans"; font-weight: 700; font-style: normal; font-display: swap; src: url("870c19b4c-dmsans_n7.97e21d81502002291ea1de8aefb79170c6946ce5.woff2") format("woff2"), url("6c4a39c6f-dmsans_n7.af5c214f5116410ca1d53a2090665620e78e2e1b.woff") format("woff"); } @font-face { font-family: "DM Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("548499db2-dmsans_n4.ec80bd4dd7e1a334c969c265873491ae56018d72.woff2") format("woff2"), url("55c6aa400-dmsans_n4.87bdd914d8a61247b911147ae68e754d695c58a6.woff") format("woff"); } @font-face { font-family: "DM Sans"; font-weight: 700; font-style: normal; font-display: swap; src: url("870c19b4c-dmsans_n7.97e21d81502002291ea1de8aefb79170c6946ce5.woff2") format("woff2"), url("6c4a39c6f-dmsans_n7.af5c214f5116410ca1d53a2090665620e78e2e1b.woff") format("woff"); } @font-face { font-family: "DM Sans"; font-weight: 400; font-style: italic; font-display: swap; src: url("8e6f7f38c-dmsans_i4.b8fe05e69ee95d5a53155c346957d8cbf5081c1a.woff2") format("woff2"), url("e4bb3af5c-dmsans_i4.403fe28ee2ea63e142575c0aa47684d65f8c23a0.woff") format("woff"); } @font-face { font-family: "Instrument Serif"; font-weight: 400; font-style: italic; font-display: swap; src: url("2f3a49ba7-instrumentserif_i4.5f74867220db936d30d7d208253fb8f2d3ef5a7c.woff2") format("woff2"), url("505c3cbeb-instrumentserif_i4.659537f426cac059f95efd6b1bd59c465d629984.woff") format("woff"); } :root {--page-branding-accent-color: #668aba; --page-branding-accent-background: none;--font-heading-family: "DM Sans", sans-serif; --font-heading-style: normal; --font-heading-weight: 500; --page-branding-heading-family: "DM Sans", sans-serif;--section-heading-weight: var(--font-heading-weight);--font-body-family: "DM Sans", sans-serif; --font-body-style: normal; --font-body-weight: 400; --page-branding-body-family: "DM Sans", sans-serif;--font-accent-family: "Instrument Serif", serif; --font-accent-style: italic; --font-accent-weight: 400; --font-accent-letter-spacing: 0px; --font-accent-text-transform: none;} .elxr-hul { position: relative; } .elxr-hul .pdp-ul__content { position: relative; z-index: 1; font-weight: inherit; } .elxr-hul .pdp-ul__mark svg { display: block; width: 100%; height: auto; } .elxr-hul--wrapped { line-height: calc(0.9775em + 7.1px); } :root { --elxr-cover-ink: calc(0.9775em + 7.1px); } .elxr-hul .pdp-ul__mark { position: absolute; display: block; pointer-events: none; z-index: 0; left: -2px; right: -2px;top: auto; bottom: -4px; transform: none;}.elxr-hul .pdp-ul__line-solid { display: block; height: 3px; background: rgba(0,0,0,0); border-radius: 3px; }:root { --elxr-marker-color: rgba(0,0,0,0); } .elxr-hul .pdp-ul__mark svg path, .elxr-hul .pdp-ul__mark svg ellipse { stroke: rgba(0,0,0,0) !important; } .elxr-hul .pdp-ul__line-solid, .elxr-hul .pdp-ul__line-highlight { background: rgba(0,0,0,0) !important; }#shopify-section-reviews, #shopify-section-template--21692356886685__reviews { --page-branding-accent-color: #c7d9f1; --page-branding-accent-background: none; --elxr-marker-color: rgba(0,0,0,0); } #shopify-section-reviews .elxr-hul .pdp-ul__mark svg path, #shopify-section-reviews .elxr-hul .pdp-ul__mark svg ellipse, #shopify-section-template--21692356886685__reviews .elxr-hul .pdp-ul__mark svg path, #shopify-section-template--21692356886685__reviews .elxr-hul .pdp-ul__mark svg ellipse { stroke: rgba(0,0,0,0) !important; } #shopify-section-reviews .elxr-hul .pdp-ul__line-solid, #shopify-section-reviews .elxr-hul .pdp-ul__line-highlight, #shopify-section-template--21692356886685__reviews .elxr-hul .pdp-ul__line-solid, #shopify-section-template--21692356886685__reviews .elxr-hul .pdp-ul__line-highlight { background: rgba(0,0,0,0) !important; }#shopify-section-mechanism, #shopify-section-template--21692356886685__mechanism { --page-branding-accent-color: #ffffff; --page-branding-accent-background: none; --elxr-marker-color: rgba(0,0,0,0); } #shopify-section-mechanism .elxr-hul .pdp-ul__mark svg path, #shopify-section-mechanism .elxr-hul .pdp-ul__mark svg ellipse, #shopify-section-template--21692356886685__mechanism .elxr-hul .pdp-ul__mark svg path, #shopify-section-template--21692356886685__mechanism .elxr-hul .pdp-ul__mark svg ellipse { stroke: rgba(0,0,0,0) !important; } #shopify-section-mechanism .elxr-hul .pdp-ul__line-solid, #shopify-section-mechanism .elxr-hul .pdp-ul__line-highlight, #shopify-section-template--21692356886685__mechanism .elxr-hul .pdp-ul__line-solid, #shopify-section-template--21692356886685__mechanism .elxr-hul .pdp-ul__line-highlight { background: rgba(0,0,0,0) !important; }#shopify-section-ingredients, #shopify-section-template--21692356886685__ingredients { --page-branding-accent-color: #ffffff; --page-branding-accent-background: none; --elxr-marker-color: rgba(0,0,0,0); } #shopify-section-ingredients .elxr-hul .pdp-ul__mark svg path, #shopify-section-ingredients .elxr-hul .pdp-ul__mark svg ellipse, #shopify-section-template--21692356886685__ingredients .elxr-hul .pdp-ul__mark svg path, #shopify-section-template--21692356886685__ingredients .elxr-hul .pdp-ul__mark svg ellipse { stroke: rgba(0,0,0,0) !important; } #shopify-section-ingredients .elxr-hul .pdp-ul__line-solid, #shopify-section-ingredients .elxr-hul .pdp-ul__line-highlight, #shopify-section-template--21692356886685__ingredients .elxr-hul .pdp-ul__line-solid, #shopify-section-template--21692356886685__ingredients .elxr-hul .pdp-ul__line-highlight { background: rgba(0,0,0,0) !important; }#shopify-section-week_by_week, #shopify-section-template--21692356886685__week_by_week { --page-branding-accent-color: #ffffff; --page-branding-accent-background: none; --elxr-marker-color: rgba(0,0,0,0); } #shopify-section-week_by_week .elxr-hul .pdp-ul__mark svg path, #shopify-section-week_by_week .elxr-hul .pdp-ul__mark svg ellipse, #shopify-section-template--21692356886685__week_by_week .elxr-hul .pdp-ul__mark svg path, #shopify-section-template--21692356886685__week_by_week .elxr-hul .pdp-ul__mark svg ellipse { stroke: rgba(0,0,0,0) !important; } #shopify-section-week_by_week .elxr-hul .pdp-ul__line-solid, #shopify-section-week_by_week .elxr-hul .pdp-ul__line-highlight, #shopify-section-template--21692356886685__week_by_week .elxr-hul .pdp-ul__line-solid, #shopify-section-template--21692356886685__week_by_week .elxr-hul .pdp-ul__line-highlight { background: rgba(0,0,0,0) !important; }#shopify-section-gentle, #shopify-section-template--21692356886685__gentle { --page-branding-accent-color: #c7d9f1; --page-branding-accent-background: none; --elxr-marker-color: rgba(0,0,0,0); } #shopify-section-gentle .elxr-hul .pdp-ul__mark svg path, #shopify-section-gentle .elxr-hul .pdp-ul__mark svg ellipse, #shopify-section-template--21692356886685__gentle .elxr-hul .pdp-ul__mark svg path, #shopify-section-template--21692356886685__gentle .elxr-hul .pdp-ul__mark svg ellipse { stroke: rgba(0,0,0,0) !important; } #shopify-section-gentle .elxr-hul .pdp-ul__line-solid, #shopify-section-gentle .elxr-hul .pdp-ul__line-highlight, #shopify-section-template--21692356886685__gentle .elxr-hul .pdp-ul__line-solid, #shopify-section-template--21692356886685__gentle .elxr-hul .pdp-ul__line-highlight { background: rgba(0,0,0,0) !important; }#shopify-section-guarantee, #shopify-section-template--21692356886685__guarantee { --page-branding-accent-color: #ffffff; --page-branding-accent-background: none; --elxr-marker-color: rgba(0,0,0,0); } #shopify-section-guarantee .elxr-hul .pdp-ul__mark svg path, #shopify-section-guarantee .elxr-hul .pdp-ul__mark svg ellipse, #shopify-section-template--21692356886685__guarantee .elxr-hul .pdp-ul__mark svg path, #shopify-section-template--21692356886685__guarantee .elxr-hul .pdp-ul__mark svg ellipse { stroke: rgba(0,0,0,0) !important; } #shopify-section-guarantee .elxr-hul .pdp-ul__line-solid, #shopify-section-guarantee .elxr-hul .pdp-ul__line-highlight, #shopify-section-template--21692356886685__guarantee .elxr-hul .pdp-ul__line-solid, #shopify-section-template--21692356886685__guarantee .elxr-hul .pdp-ul__line-highlight { background: rgba(0,0,0,0) !important; } /* END_SECTION:br-page-branding */ /* START_SECTION:br-results (INDEX:20) */ .stats-grid-section { text-align: center; padding: 60px 20px 60px 20px; background-color: #ffffff; } .stats-grid-section .page-width { padding-left: 0 !important; padding-right: 0 !important; } .stats-grid-section__container { margin: 0 auto; width: 100%; max-width: 1200px; display: flex; flex-direction: column; align-items: center; } .stats-grid-section .stats-grid-section-header { width: 100%; } .stats-grid-section-title { font-weight: var(--font-weight-bold); letter-spacing: var(--letter-spacing-heading) !important; } .stats-grid-section .stats-grid-section-subheading { max-width: 600px; letter-spacing: var(--letter-spacing-body); } .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; gap: 20px 8px; margin-top: 0px; width: 100%; max-width: 100%; margin-left: auto; margin-right: auto; box-sizing: border-box; place-items: center; justify-content: center; } .stats-grid-item { width: 100%; max-width: 280px; margin: 0 auto; display: flex; justify-content: center; align-items: center; min-width: 0; } .stats-grid-card { background-color: #f5f5f5; border-radius: 4px; padding: clamp(12px, 2.5vw, 17.5px) clamp(8px, 2vw, 15px); box-shadow: 0 2px 10px rgba(0,0,0,0.08); width: 100%; height: 100%; aspect-ratio: unset; min-height: 150px; margin: 0 auto; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; box-sizing: border-box; min-width: 0; } .stats-grid-card.no-card-bg { background-color: transparent !important; box-shadow: none !important; padding: 0 !important; } .stats-grid-percentage-only { font-weight: var(--font-weight-bold) !important; margin-bottom: 10px; font-size: 44px; line-height: 1; text-align: left; } @media screen and (max-width: 749px) { .stats-grid-percentage-only { font-size: 36px; margin-bottom: 0px; } } .stats-grid-circle-container { margin-bottom: 5px; width: 50%; display: flex; justify-content: center; align-items: center; } .stats-grid-circle { position: relative; width: 100%; height: 0; padding-bottom: 100%; } .stats-grid-circle-svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: rotate(-90deg); } .stats-grid-circle-bg { fill: none; stroke-width: 8; } .stats-grid-circle-progress { fill: none; stroke: var(--circle-stroke); stroke-width: 8; stroke-dasharray: 314; stroke-dashoffset: 314; transition: stroke-dashoffset 1s ease-in-out; } .stats-grid-percentage-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 22px; font-weight: var(--font-weight-semibold) !important; } .stats-grid-title { font-size: 17px; font-weight: bold; margin-bottom: 6px; letter-spacing: var(--letter-spacing-body); color: inherit !important; text-align: left; word-wrap: break-word; hyphens: auto; } .stats-grid-description { font-size: 13px; line-height: 1.4; letter-spacing: var(--letter-spacing-body); color: inherit !important; text-align: left; word-wrap: break-word; hyphens: auto; } .stats-grid-content { width: 100%; text-align: left; flex-grow: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; min-width: 0; } @media screen and (max-width: 989px) and (min-width: 750px) { .stats-grid { max-width: 600px; grid-auto-rows: 1fr; grid-template-columns: repeat(2, 1fr); margin-left: auto; margin-right: auto; } .stats-grid-item { max-width: 280px; } .stats-grid-circle-container { width: 55%; } } @media screen and (max-width: 749px) { .stats-grid-section { padding: 40px 20px 40px 20px !important; } .stats-grid-section .stats-grid-section-header { --sh-align: left !important; --sh-items: flex-start !important; } .stats-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1fr; gap: 20px 8px; max-width: 500px; margin-left: auto; margin-right: auto; justify-content: center; } .stats-grid-item { width: 100%; display: flex; max-width: 220px; margin: 0 auto; justify-content: center; } .stats-grid-card { max-width: none; max-height: none; padding: 14.5px 8px; margin: 0 auto; width: 100%; align-items: flex-start; min-height: 130px; } .stats-grid-content { text-align: left; align-items: flex-start; } .stats-grid-percentage-only { text-align: left; } .stats-grid-circle-container { width: 60%; margin-bottom: 0px; } .stats-grid-percentage-text { font-size: 18px; } .stats-grid-title { font-size: 16px; margin-bottom: 4px; margin-top: 8px; text-align: left; } .stats-grid-description { font-size: 14px; line-height: 1.3; text-align: left; } } .stats-grid-section .global-accent-text { color: #EF4A65 !important; font-family: var(--font-accent-family, var(--font-body-family)) !important; font-style: var(--font-accent-style, normal) !important; font-weight: var(--font-accent-weight, inherit) !important; letter-spacing: var(--font-accent-letter-spacing, inherit) !important; text-transform: var(--font-accent-text-transform, none) !important; line-height: 1; } #shopify-section-template--21692356886685__results h3 {font-weight: 500;} #shopify-section-template--21692356886685__results .elxr-section-header__eyebrow {color: #668aba;} .statistics-section{text-align:center;padding:var(--padding-top) 0 var(--padding-bottom);background:var(--section-bg-color)}.statistics-section-header{margin-bottom:40px}.statistics-section-title{margin-bottom:15px;letter-spacing:var(--letter-spacing-heading)!important;font-size:var(--heading-font-size);font-weight:var(--font-weight-bold)}.statistics-section-title span:first-child{color:var(--heading-color)}.statistics-section-title span:last-child{color:var(--heading-accent-color);margin-left:2px}.statistics-section-subheading{max-width:600px;margin:0 auto;color:var(--subtitle-color)!important;font-size:var(--text-font-size);letter-spacing:var(--letter-spacing-body)}.statistics-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr;gap:8px;margin-top:30px;max-width:900px;margin-left:auto;margin-right:auto;width:100%;justify-content:center}.statistic-item{aspect-ratio:1/1.15;margin:0;height:100px;display:flex;justify-content:center}.statistic-card{background-color:var(--card-bg-color);border-radius:10px;padding:17.5px 15px;box-shadow:0 2px 10px #00000014;width:100%;height:100%;aspect-ratio:1/1.15;max-width:100%;max-height:none;margin:0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box}.statistic-circle-container{margin-bottom:5px;width:50%;max-width:100px}.statistic-circle{position:relative;width:100%;height:0;padding-bottom:100%}.circle-svg{position:absolute;top:0;left:0;width:100%;height:100%;transform:rotate(-90deg)}.circle-bg{fill:none;stroke:var(--circle-bg-color, #e6e6e6);stroke-width:8;stroke-linecap:round}.circle-progress{fill:none;stroke:var(--accent-color, #ef4a65);stroke-width:8;stroke-dasharray:314.159;stroke-dashoffset:314.159;stroke-linecap:round;transition:stroke-dashoffset 1s ease-in-out}.percentage-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:22px;font-weight:var(--font-weight-semibold)!important;color:var(--accent-color)}.statistic-content{width:100%;text-align:center;flex-grow:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start}.statistic-title{font-size:18px;font-weight:700;margin-bottom:6px;letter-spacing:var(--letter-spacing-body);color:var(--statistic-title-color)!important}.statistic-description{font-size:14px;line-height:1.4;color:var(--statistic-description-color)!important}@media screen and (max-width:989px)and (min-width:750px){.statistics-grid{max-width:500px;grid-auto-rows:1fr;grid-template-columns:repeat(2,1fr);margin-left:auto;margin-right:auto}.statistic-circle-container{width:55%}.percentage-text{font-size:22px}.statistic-title{font-size:17px}.statistic-description{font-size:13px}.statistic-item,.statistic-card{aspect-ratio:1/1.15}}@media screen and (max-width:749px)and (min-width:500px){.statistics-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:1fr;gap:8px;max-width:500px;margin-left:auto;margin-right:auto;justify-content:center}.statistic-item{margin:0;width:100%;display:flex;height:100px;justify-content:center}.statistic-card{max-width:none;max-height:none;padding:14.5px 8px;margin:0;width:100%}.statistic-circle-container{width:60%;margin-bottom:0}.percentage-text{font-size:20px}.statistic-title{font-size:16px;margin-bottom:4px}.statistic-description{font-size:14px;line-height:1.3}.statistic-item,.statistic-card{aspect-ratio:1/1.15}}@media screen and (max-width:499px){.statistics-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:1fr;gap:8px;max-width:95%;margin-left:auto;margin-right:auto;justify-content:center}.statistic-item{margin:0;width:100%;height:100px;display:flex;justify-content:center}.statistic-card{width:100%;margin:0 auto}.statistic-circle-container{width:65%}.percentage-text{font-size:24px}.statistic-title{font-size:16px}.statistic-description{font-size:14px}}@media screen and (max-width:380px){.percentage-text{font-size:18px}} /* END_SECTION:br-results */ /* START_SECTION:br-review-wall (INDEX:21) */ #shopify-section-template--21692356886685__review_wall { background-color: #ffffff; } #shopify-section-template--21692356886685__review_wall .elixir-customer-reviews { position: relative; width: 100%; overflow-x: clip; padding-top: 60px; padding-bottom: 60px; } #shopify-section-template--21692356886685__review_wall .elixir-customer-reviews__container { margin: 0 auto; width: 100%; box-sizing: border-box; padding-inline: 20px; max-width: 1200px; } @media screen and (max-width: 749px) { #shopify-section-template--21692356886685__review_wall .elixir-customer-reviews__container { padding-inline: 15px; } } #shopify-section-template--21692356886685__review_wall .elixir-customer-reviews__header .elxr-section-header__eyebrow { color: #668aba; } #shopify-section-template--21692356886685__review_wall .elixir-customer-reviews__header .elxr-section-header__subtitle { max-width: 62ch; } @media screen and (max-width: 749px) { #shopify-section-template--21692356886685__review_wall .elixir-customer-reviews { padding-top: 40px; padding-bottom: 40px; } } #shopify-section-template--21692356886685__review_wall .elixir-customer-reviews, .block-template--21692356886685__review_wall { --ecr-space-2xs: 4px; --ecr-space-xs: 8px; --ecr-space-sm: 12px; --ecr-space-md: 16px; --ecr-space-lg: 24px; --ecr-space-xl: 32px; } .block-template--21692356886685__review_wall { width: 100%; margin: 0 auto; --cr-heading-color: #2a2a2a; --cr-star-color: #668aba; --cr-star-empty-color: #e9e9e9; --cr-verified-color: #668aba; --cr-border-color: #e9e9e9; --cr-muted-color: #8c8c8c; --cr-title-size: 16px; --cr-title-weight: 700; --cr-title-color: #2a2a2a; --cr-title-lh: 1.4; --cr-title-ls: 0px; --cr-body-size: 15px; --cr-body-color: #6b6b6b; --cr-body-lh: 1.5; --cr-body-ls: 0px; --cr-author-size: 13px; --cr-author-color: #2a2a2a; --cr-author-lh: 1.4; --cr-author-ls: 0px; --cr-location-size: 13px; --cr-location-color: #8c8c8c; --cr-location-ls: 0px; --cr-verified-display: inline-flex; --cr-verified-size: 13px; --cr-verified-ls: 0px; --cr-date-display: block; --cr-date-size: 13px; --cr-date-color: #8c8c8c; --cr-img-width: 80px; --cr-img-gap: 10px; --cr-helpful-display: inline; --cr-helpful-size: 13px; --cr-helpful-weight: 300; --cr-helpful-color: #8c8c8c; --cr-helpful-ls: 0px; --cr-thumb-icon-size: 17px; --cr-thumb-font-size: 13px; --cr-share-display: flex; --cr-share-size: 13px; --cr-share-color: #8c8c8c; --cr-share-ls: 0px; } .block-template--21692356886685__review_wall .cr-summary-section { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ecr-space-lg); padding-bottom: 30px; } @media screen and (min-width: 750px) { .block-template--21692356886685__review_wall .cr-summary-section { grid-template-columns: minmax(0, 1fr) auto; } } .block-template--21692356886685__review_wall .cr-summary-left-content { display: flex; flex-direction: column; flex-wrap: wrap; gap: 30px; align-items: center; } .block-template--21692356886685__review_wall .cr-summary-section:has(.cr-summary-right-content:empty) .cr-summary-left-content { justify-content: center; } @media screen and (min-width: 750px) { .block-template--21692356886685__review_wall .cr-summary-left-content { flex-direction: row; } } .block-template--21692356886685__review_wall .cr-summary-right-content:not(:empty) { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--ecr-space-2xs); width: 100%; max-width: 390px; } @media screen and (min-width: 750px) { .block-template--21692356886685__review_wall .cr-summary-right-content { direction: rtl; } } .block-template--21692356886685__review_wall .cr-summary-right-content img { width: 100%; height: auto; aspect-ratio: 1; overflow: hidden; border-radius: var(--ecr-space-md); cursor: pointer; } .block-template--21692356886685__review_wall .cr-summary-left { display: flex; flex-direction: column; align-items: center; gap: var(--ecr-space-xs); min-width: 150px; } .block-template--21692356886685__review_wall .cr-score-big { font-size: 40px; font-weight: 800; line-height: 1; color: #2a2a2a; } .block-template--21692356886685__review_wall .cr-count-text { font-size: 13px; color: #8c8c8c; letter-spacing: 0px; } @media screen and (min-width: 750px) { .block-template--21692356886685__review_wall .cr-score-big { font-size: 48px; } .block-template--21692356886685__review_wall .cr-count-text { font-size: 14px; } } .block-template--21692356886685__review_wall .cr-summary-bars { flex: 1; max-width: 250px; width: 100%; display: flex; flex-direction: column; gap: var(--ecr-space-xs); } .block-template--21692356886685__review_wall .cr-bar-row { display: flex; align-items: center; gap: var(--ecr-space-sm); font-size: 12px; color: #8c8c8c; } .block-template--21692356886685__review_wall .cr-bar-stars { display: flex; justify-content: flex-end; flex-shrink: 0; } .block-template--21692356886685__review_wall .cr-bar-track { flex: 1; height: 10px; background-color: #f5f5f5; border-radius: 5.0px; overflow: hidden; } .block-template--21692356886685__review_wall .cr-bar-fill { height: 100%; background-color: #668aba; display: block; } .block-template--21692356886685__review_wall .cr-bar-count { width: 50px; text-align: left; } .block-template--21692356886685__review_wall .cr-topic-filters { display: flex; flex-wrap: wrap; gap: var(--ecr-space-xs); margin-bottom: var(--ecr-space-lg); } .block-template--21692356886685__review_wall .cr-topic { display: inline-flex; align-items: center; gap: var(--ecr-space-2xs); padding: 5px 10px; font: inherit; font-size: 13px; line-height: 1.1; color: #2a2a2a; background: transparent; border: 1px solid #e9e9e9; border-radius: 999px; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .block-template--21692356886685__review_wall .cr-topic:hover { border-color: #668aba; } .block-template--21692356886685__review_wall .cr-topic.is-active { color: #ffffff; background: #668aba; border-color: #668aba; } .block-template--21692356886685__review_wall .cr-topic__count { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 1.6em; height: 1.6em; padding: 0 0.25em; border-radius: 50%; font-size: 0.85em; line-height: 1; color: inherit; background: #f5f5f5; } .block-template--21692356886685__review_wall .cr-topic.is-active .cr-topic__count { background: rgba(255, 255, 255, 0.25); } .block-template--21692356886685__review_wall .cr-filter-tabs { display: flex; justify-content: space-between; align-items: center; gap: var(--ecr-space-md); border-bottom: 2px solid #e9e9e9; margin-bottom: 0px; } .block-template--21692356886685__review_wall .cr-sort { position: relative; display: inline-flex; align-items: center; gap: var(--ecr-space-sm); margin-left: auto; margin-bottom: var(--ecr-space-2xs); font-size: 13px; color: #8c8c8c; } .block-template--21692356886685__review_wall .cr-sort-dropdown { appearance: none; -webkit-appearance: none; font: inherit; font-size: inherit; line-height: 1.2; color: #2a2a2a; background: transparent; border: 1px solid #e9e9e9; border-radius: 4px; padding: 6px 32px 6px 12px; cursor: pointer; } .block-template--21692356886685__review_wall .cr-sort::after { content: ''; position: absolute; top: 50%; right: 13px; width: 7px; height: 7px; border-right: 1.5px solid #2a2a2a; border-bottom: 1.5px solid #2a2a2a; transform: translateY(-70%) rotate(45deg); pointer-events: none; } @media screen and (min-width: 750px) { .block-template--21692356886685__review_wall .cr-sort { font-size: 14px; } } @media screen and (max-width: 480px) { .block-template--21692356886685__review_wall .cr-sort__label { display: none; } } .block-template--21692356886685__review_wall .cr-tab { padding: var(--ecr-space-sm) 0; font-weight: 600; font-size: 13px; color: #2a2a2a; letter-spacing: 0px; border-bottom: 2px solid #2a2a2a; margin-bottom: -2px; } @media screen and (min-width: 750px) { .block-template--21692356886685__review_wall .cr-tab { font-size: 14px; } } .block-template--21692356886685__review_wall .cr-reviews-list { display: flex; flex-direction: column; gap: 20px; } .block-template--21692356886685__review_wall .cr-reviews-list > .shopify-block { width: 100%; } .block-template--21692356886685__review_wall .cr-reviews-list > [hidden] { display: none; } @media screen and (max-width: 749px) { .block-template--21692356886685__review_wall { --cr-title-size: 15px; --cr-body-size: 14px; --cr-author-size: 12px; --cr-location-size: 12px; --cr-verified-size: 12px; --cr-date-size: 12px; --cr-helpful-size: 12px; --cr-share-size: 12px; --cr-thumb-icon-size: 16px; --cr-thumb-font-size: 12px; } } .global-nav-button:hover { background: var(--nav-btn-bg-hover) !important; color: var(--nav-btn-color-hover) !important; border-color: var(--nav-btn-border-color-hover) !important; opacity: var(--nav-btn-opacity-hover) !important; } .global-nav-button[data-enable-hover-transform="true"]:hover { transform: translateY(-2px); } .global-nav-button svg { pointer-events: none; flex-shrink: 0; stroke-width: var(--nav-btn-stroke-width); } .global-nav-button:hover { background: var(--nav-btn-bg-hover) !important; color: var(--nav-btn-color-hover) !important; border-color: var(--nav-btn-border-color-hover) !important; opacity: var(--nav-btn-opacity-hover) !important; } .global-nav-button[data-enable-hover-transform="true"]:hover { transform: translateY(-2px); } .global-nav-button svg { pointer-events: none; flex-shrink: 0; stroke-width: var(--nav-btn-stroke-width); } #shopify-section-template--21692356886685__review_wall h3 {font-weight: 500;} #shopify-section-template--21692356886685__review_wall .elxr-section-header__eyebrow {color: #668aba;} [class*="block-bodyreviva_customer_review_"] { padding: 20px 0; border-bottom: 1px solid var(--cr-border-color, #eee); width:100%; } [class*="block-bodyreviva_customer_review_"]:last-child { border-bottom: none; } [class*="block-bodyreviva_customer_review_"] .review-header { display: flex; align-items: center; margin-bottom: 15px; } [class*="block-bodyreviva_customer_review_"] .review-avatar { width: 45px; height: 45px; background-color: #f0f0f0; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-weight: 700; color: #555; margin-right: 15px; position: relative; } [class*="block-bodyreviva_customer_review_"] .icon-svg { width: 14px; height: 14px; display: inline-block; vertical-align: middle; } [class*="block-bodyreviva_customer_review_"] .review-verified-badge { position: absolute; bottom: -2px; right: -2px; background: #fff; border-radius: 50%; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; } [class*="block-bodyreviva_customer_review_"] .icon-verified { width: 16px; height: 16px; color: var(--cr-verified-color, #23cba5); } [class*="block-bodyreviva_customer_review_"] .review-meta { flex: 1; display: flex; flex-direction: column; } [class*="block-bodyreviva_customer_review_"] .review-author-row { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; } [class*="block-bodyreviva_customer_review_"] .review-author-name { font-weight: 700; font-size: var(--cr-author-size, 14px); color: var(--cr-author-color, var(--cr-heading-color)); line-height: var(--cr-author-lh, 1.4); letter-spacing: var(--cr-author-ls, 0px); } [class*="block-bodyreviva_customer_review_"] .review-verified-text { font-weight: 700; font-size: var(--cr-verified-size, 12px); color: var(--cr-verified-color, #23cba5); letter-spacing: var(--cr-verified-ls, 0px); display: var(--cr-verified-display, inline-flex); align-items: center; } [class*="block-bodyreviva_customer_review_"] .review-location-row { font-size: var(--cr-location-size, 12px); color: var(--cr-location-color, #777); letter-spacing: var(--cr-location-ls, 0px); display: flex; align-items: center; gap: 5px; } [class*="block-bodyreviva_customer_review_"] .review-flag-icon { color: inherit; display: flex; } [class*="block-bodyreviva_customer_review_"] .review-date { font-size: var(--cr-date-size, 12px); color: var(--cr-date-color, #777); display: var(--cr-date-display, block); margin-left: auto; } [class*="block-bodyreviva_customer_review_"] .review-main { display: flex; flex-direction: column; gap: 5px; margin-bottom: 15px; } [class*="block-bodyreviva_customer_review_"] .review-stars { display: flex; } [class*="block-bodyreviva_customer_review_"] .review-title { font-size: var(--cr-title-size); font-weight: var(--cr-title-weight); color: var(--cr-title-color); line-height: var(--cr-title-lh); letter-spacing: var(--cr-title-ls); margin: 0 ; } [class*="block-bodyreviva_customer_review_"] .review-body { font-size: var(--cr-body-size); color: var(--cr-body-color); line-height: var(--cr-body-lh); letter-spacing: var(--cr-body-ls); } [class*="block-bodyreviva_customer_review_"] .review-images { display: flex; gap: var(--cr-img-gap, 10px); } [class*="block-bodyreviva_customer_review_"] .review-img { width: var(--cr-img-width, 80px); height: var(--cr-img-width, 80px); object-fit: cover; border-radius: 6px; cursor: pointer; } [class*="block-bodyreviva_customer_review_"] .review-img-placeholder { background-color: #f0f0f0; display: flex; align-items: center; justify-content: center; overflow: hidden; } [class*="block-bodyreviva_customer_review_"] .review-placeholder-svg { width: 40px; height: 40px; fill: #ccc; } [class*="block-bodyreviva_customer_review_"] .review-footer { display: flex; justify-content: space-between; align-items: center; } [class*="block-bodyreviva_customer_review_"] .review-action-btn { cursor: pointer; display: flex; align-items: center; gap: 6px; background: none; border: none; color: inherit; font-family: inherit; padding: 0; font-size: inherit; } [class*="block-bodyreviva_customer_review_"] .share-btn { display: var(--cr-share-display, flex); font-size: var(--cr-share-size, 12px); color: var(--cr-share-color, #888); letter-spacing: var(--cr-share-ls, 0px); } [class*="block-bodyreviva_customer_review_"] .helpful-wrapper { display: flex; font-size: var(--cr-helpful-size, 12px); font-weight: var(--cr-helpful-weight, 400); color: var(--cr-helpful-color, #888); letter-spacing: var(--cr-helpful-ls, 0px); margin-left: auto; } [class*="block-bodyreviva_customer_review_"] .helpful-text { display: var(--cr-helpful-display, inline); } [class*="block-bodyreviva_customer_review_"] .thumbs-group { display: flex; gap: 12px; align-items: center; margin-left: 8px; } [class*="block-bodyreviva_customer_review_"] .thumb-btn { display: flex; align-items: center; gap: 4px; background: none; border: none; cursor: pointer; color: inherit; padding: 0; font-family: inherit; font-size: var(--cr-thumb-font-size, 12px); transition: color 0.2s; } [class*="block-bodyreviva_customer_review_"] .thumb-btn svg { width: var(--cr-thumb-icon-size, 16px); height: var(--cr-thumb-icon-size, 16px); } [class*="block-bodyreviva_customer_review_"] .icon-thumb-down { margin-top: 2px; } [class*="block-bodyreviva_customer_review_"] .thumb-btn.active-like { color: var(--cr-verified-color, #23cba5); font-weight: bold; } [class*="block-bodyreviva_customer_review_"] .thumb-btn.active-dislike { color: #e74c3c; font-weight: bold; } [id$="__review_wall"] .cr-review-pagination{display:flex;align-items:center;gap:16px;margin-top:24px;color:#1b1f3b} [id$="__review_wall"] .cr-review-pagination[hidden],[id$="__review_wall"] [data-popup-navigation][hidden]{display:none!important} [id$="__review_wall"] .cr-page-button{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;min-width:44px;padding:0;border:1px solid #c7d9f1;border-radius:50%!important;background:#fff;color:#1b1f3b;cursor:pointer} [id$="__review_wall"] .cr-page-button svg{width:22px;height:22px;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round} [id$="__review_wall"] .cr-page-button:hover:not(:disabled){background:#edf3fb;border-color:#668aba} [id$="__review_wall"] .cr-page-button:disabled{opacity:.35;cursor:default} [id$="__review_wall"] .cr-page-button:focus-visible{outline:2px solid #668aba;outline-offset:3px} [id$="__review_wall"] .cr-page-status{font-size:16px;line-height:1.5;min-width:86px;text-align:center} [id$="__review_wall"] .cr-reviews-list{scroll-margin-top:24px} #customer-reviews .br-review-photo-layout { min-width: 0; } #customer-reviews .br-review-photo-layout:has(.br-review-photo) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 34%); align-items: start; gap: 24px; } #customer-reviews .br-review-photo { margin: 0; min-width: 0; } #customer-reviews .br-review-photo__frame { display: block; position: relative; overflow: hidden; border-radius: 8px; } #customer-reviews .br-review-photo__image { display: block; width: 100%; height: auto; max-width: 100%; } #customer-reviews .br-review-photo__frame--crop { aspect-ratio: 1678 / 937; } #customer-reviews .br-review-photo__frame--crop .br-review-photo__image { position: absolute; top: 0; left: 0; width: 200%; height: auto; max-width: none; } #customer-reviews .br-review-photo__frame--top_right .br-review-photo__image { transform: translateX(-50%); } #customer-reviews .br-review-photo__frame--bottom_left .br-review-photo__image { transform: translateY(-50%); } #customer-reviews .br-review-photo__frame--bottom_right .br-review-photo__image { transform: translate(-50%, -50%); } @media (max-width: 749px) { #customer-reviews .br-review-photo-layout:has(.br-review-photo) { grid-template-columns: minmax(0, 1fr); gap: 16px; } #customer-reviews .br-review-photo { max-width: 440px; } } #customer-reviews .br-review-more { display: flex; justify-content: center; margin-top: 24px; } #customer-reviews .br-review-more:has([hidden]) { display: none; } #customer-reviews .br-review-more__button { min-height: 48px; padding: 12px 32px; border: 1px solid #668aba; border-radius: 8px; background: #668aba; color: #fff; font: inherit; font-weight: 600; cursor: pointer; } #customer-reviews .br-review-more__button:hover { background: #52749f; } #customer-reviews .br-review-more__button:focus-visible { outline: 2px solid #1b1f3b; outline-offset: 3px; } #customer-reviews .br-review-more__button[hidden] { display: none; } /* END_SECTION:br-review-wall */ /* START_SECTION:br-reviews (INDEX:22) */ .section-template--21692356886685__reviews.reviews-transformation-section { --section-max-width: 1200px; background-color: #111111 !important; } .section-template--21692356886685__reviews.reviews-transformation-section .reviews-subtitle { font-weight: var(--font-weight-bold) !important; } .section-template--21692356886685__reviews.reviews-transformation-section .global-accent-text, .section-template--21692356886685__reviews.reviews-transformation-section .reviews-subtitle .global-accent-text { margin-left: 0px !important; letter-spacing: var(--letter-spacing-heading) !important; color: #EF4A65 !important; font-family: var(--font-accent-family, var(--font-body-family)) !important; font-style: var(--font-accent-style, normal) !important; font-weight: var(--font-accent-weight, inherit) !important; letter-spacing: var(--font-accent-letter-spacing, inherit) !important; text-transform: var(--font-accent-text-transform, none) !important; } .section-template--21692356886685__reviews.reviews-transformation-section .carousel-review-star.star-filled { color: #c7d9f1 !important; opacity: 1 !important; filter: none !important; } .section-template--21692356886685__reviews.reviews-transformation-section .carousel-review-star.star-empty { color: rgba(255,255,255,0.14) !important; opacity: 1 !important; filter: none !important; } .section-template--21692356886685__reviews.reviews-transformation-section .carousel-review-star { width: 16px !important; height: 16px !important; } .section-template--21692356886685__reviews.reviews-transformation-section .review-stars .carousel-review-star, .section-template--21692356886685__reviews.reviews-transformation-section .carousel-review-header .carousel-review-star { width: 16px !important; height: 16px !important; } .section-template--21692356886685__reviews.reviews-transformation-section .review-card { width: 390px; border-radius: 4px; border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.06) !important; margin: 0px 0px 0px 0px; } .section-template--21692356886685__reviews.reviews-transformation-section .review-image-container { border-top-left-radius: 4px; border-top-right-radius: 4px; } .section-template--21692356886685__reviews.reviews-transformation-section .empty-image { background-color: #f0f0f0 !important; } .section-template--21692356886685__reviews.reviews-transformation-section .review-text { color: rgba(255,255,255,0.7) !important; font-size: 14px !important; } .section-template--21692356886685__reviews.reviews-transformation-section .reviewer-info { color: #ffffff !important; background-color: rgba(0,0,0,0) !important; font-size: 11px !important; } .section-template--21692356886685__reviews.reviews-transformation-section .carousel-reviewer-name, .section-template--21692356886685__reviews.reviews-transformation-section .reviewer-age { font-size: 11px !important; } @media screen and (min-width: 750px) { .section-template--21692356886685__reviews.reviews-transformation-section .reviewer-info, .section-template--21692356886685__reviews.reviews-transformation-section .carousel-reviewer-name, .section-template--21692356886685__reviews.reviews-transformation-section .reviewer-age { font-size: 12px !important; } } .section-template--21692356886685__reviews.reviews-transformation-section .verified-badge { color: #c7d9f1 !important; font-size: 9px !important; } .section-template--21692356886685__reviews.reviews-transformation-section .verified-icon { width: 10.8px !important; height: 10.8px !important; margin-right: 0px !important; vertical-align: middle !important; color: #c7d9f1 !important; } @media screen and (min-width: 750px) { .section-template--21692356886685__reviews.reviews-transformation-section .verified-badge { font-size: 10px !important; } .section-template--21692356886685__reviews.reviews-transformation-section .verified-icon { width: 12.0px !important; height: 12.0px !important; } } .section-template--21692356886685__reviews.reviews-transformation-section .product-purchased { border-width: 1px !important; border-style: solid !important; border-color: rgba(255,255,255,0.14) !important; background-color: rgba(255,255,255,0.06) !important; } .section-template--21692356886685__reviews.reviews-transformation-section .product-info { flex: 1 !important; overflow: visible !important; display: flex !important; flex-direction: column !important; height: auto !important; min-height: 60px !important; justify-content: center !important; } .section-template--21692356886685__reviews.reviews-transformation-section .product-label { display: none !important; letter-spacing: 0.08em !important; } .section-template--21692356886685__reviews.reviews-transformation-section .product-purchased-container { width: 100% !important; overflow: visible !important; } .section-template--21692356886685__reviews.reviews-transformation-section .review-product-title { color: #ffffff !important; font-size: 12px !important; word-wrap: break-word !important; overflow-wrap: break-word !important; white-space: normal !important; line-height: 1.3 !important; display: block !important; visibility: visible !important; -webkit-line-clamp: unset !important; line-clamp: unset !important; -webkit-box-orient: unset !important; overflow: visible !important; } .section-template--21692356886685__reviews.reviews-transformation-section .product-price { color: #ffffff !important; font-size: 12px !important; letter-spacing: var(--letter-spacing-body); } .section-template--21692356886685__reviews.reviews-transformation-section .product-compare-price { color: rgba(255,255,255,0.5) !important; font-size: 10px !important; letter-spacing: var(--letter-spacing-body); } .section-template--21692356886685__reviews.reviews-transformation-section .product-purchase-date { color: rgba(255,255,255,0.85) !important; font-size: 10px !important; } .section-template--21692356886685__reviews.reviews-transformation-section .purchase-date-icon { stroke: rgba(255,255,255,0.85) !important; } @media (max-width: 749px) { .section-template--21692356886685__reviews.reviews-transformation-section .review-card { width: 300px; } .section-template--21692356886685__reviews.reviews-transformation-section .carousel-review-header { display: flex; align-items: center; justify-content: flex-start; } .section-template--21692356886685__reviews.reviews-transformation-section .review-stars .stars { display: flex; align-items: center; } .section-template--21692356886685__reviews.reviews-transformation-section .review-text { font-size: 14px !important; } } @media (max-width: 480px) { .section-template--21692356886685__reviews.reviews-transformation-section .review-card { width: 280px; } .section-template--21692356886685__reviews.reviews-transformation-section .review-text { font-size: 13px !important; } } .section-template--21692356886685__reviews.reviews-transformation-section .image-wrapped { height: auto; } .section-template--21692356886685__reviews.reviews-transformation-section .reviews-navigation-container { position: relative; z-index: 1; } .section-template--21692356886685__reviews.reviews-transformation-section .reviews-navigation { display: flex; gap: 10px; justify-content: center; position: relative; z-index: 10; } .section-template--21692356886685__reviews.reviews-transformation-section .global-nav-button, .section-template--21692356886685__reviews.reviews-transformation-section .nav-button { pointer-events: auto !important; cursor: pointer !important; position: relative; z-index: 11; } .reviews-transformation-section .reviews-carousel-splide.splide { overflow: hidden; transition: opacity 0.15s ease-out; } .reviews-transformation-section .reviews-carousel-splide--pending { opacity: 0; pointer-events: none; } .reviews-transformation-section .reviews-carousel-splide .splide__slide { width: auto; flex-shrink: 0; box-sizing: border-box; } .section-template--21692356886685__reviews.reviews-transformation-section .review-image-container:has(.empty-image) { display: none !important; } .section-template--21692356886685__reviews.reviews-transformation-section .reviews-carousel-splide .splide__list { align-items: flex-start; } .section-template--21692356886685__reviews.reviews-transformation-section .reviews-carousel-splide .splide__slide { height: auto; display: flex; } .section-template--21692356886685__reviews.reviews-transformation-section .review-card { height: auto; } .section-template--21692356886685__reviews.reviews-transformation-section .review-content { flex: 1 1 auto; } .section-template--21692356886685__reviews.reviews-transformation-section .product-purchased-container { margin-top: auto; } .section-template--21692356886685__reviews.reviews-transformation-section.reviews-fits .reviews-carousel-splide { display: flex; justify-content: center; } .section-template--21692356886685__reviews.reviews-transformation-section.reviews-fits .reviews-carousel-splide .splide__list { transform: none !important; width: auto !important; margin: 0 auto; } .section-template--21692356886685__reviews.reviews-transformation-section.reviews-fits .reviews-navigation-container { display: none; } .global-nav-button:hover { background: var(--nav-btn-bg-hover) !important; color: var(--nav-btn-color-hover) !important; border-color: var(--nav-btn-border-color-hover) !important; opacity: var(--nav-btn-opacity-hover) !important; } .global-nav-button[data-enable-hover-transform="true"]:hover { transform: translateY(-2px); } .global-nav-button svg { pointer-events: none; flex-shrink: 0; stroke-width: var(--nav-btn-stroke-width); } .global-nav-button:hover { background: var(--nav-btn-bg-hover) !important; color: var(--nav-btn-color-hover) !important; border-color: var(--nav-btn-border-color-hover) !important; opacity: var(--nav-btn-opacity-hover) !important; } .global-nav-button[data-enable-hover-transform="true"]:hover { transform: translateY(-2px); } .global-nav-button svg { pointer-events: none; flex-shrink: 0; stroke-width: var(--nav-btn-stroke-width); } #shopify-section-template--21692356886685__reviews h3 {font-weight: 500;} #shopify-section-template--21692356886685__reviews .elxr-section-header__eyebrow {color: #668aba;} .reviews-transformation-section{width:100%;display:flex;flex-direction:column;align-items:center;padding:60px 20px;font-family:var(--font-body-family-override)}.reviews-transformation-section *{letter-spacing:var(--letter-spacing-body)}.reviews-subtitle{letter-spacing:var(--letter-spacing-heading)!important;font-family:var(--font-heading-family-override)!important}.reviews-description{font-weight:var(--font-weight-regular);max-width:800px}.reviews-navigation-container{display:flex;justify-content:center;margin-top:20px}.reviews-navigation{display:flex;gap:10px;position:relative;z-index:1}.nav-button{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s ease;border:1px solid;pointer-events:auto!important;position:relative;z-index:1}.nav-button:hover{transform:translateY(-2px);box-shadow:0 2px 5px #0000001a}.reviews-container{display:flex;overflow-x:auto;padding:0;scroll-behavior:smooth;-ms-overflow-style:none;scrollbar-width:none;align-items:flex-start;justify-content:flex-start;box-sizing:border-box}.reviews-container::-webkit-scrollbar{display:none}.review-card{flex:0 0 auto;overflow:hidden;box-shadow:none;display:flex;flex-direction:column;height:auto}.review-image-container{width:100%;height:300px;overflow:hidden;background-color:#f5f5f5}.review-image-container.image-wrapped,.review-image-container.image-wrapped.carousel-review-image,.review-image-container.image-wrapped.carousel-review-image img{height:auto}.carousel-review-image{width:100%;height:100%;position:relative}.carousel-review-image img{width:100%;height:100%;object-fit:cover;display:block}.empty-image{width:100%;height:100%}.review-content{padding:20px;display:flex;flex-direction:column;gap:8px;text-align:left}.carousel-review-header{display:flex;flex-direction:row;align-items:center;margin:0;flex-wrap:wrap;gap:10px}.review-stars{display:flex;align-items:center;font-size:16px;line-height:1}.stars{display:flex;gap:3px;font-size:0;align-items:center}.star{width:20px;height:20px;display:block;margin:0;align-content:center;margin-right:0!important;opacity:1!important}.review-text{line-height:1.6;margin-bottom:15px;font-weight:var(--font-weight-regular);letter-spacing:var(--letter-spacing-body)}.reviewer-info-container{display:flex}.reviewer-info{display:inline-flex;align-items:center;font-size:12px;border-radius:50px;padding:3px 8px;letter-spacing:var(--letter-spacing-body)!important;width:auto;max-width:fit-content}.carousel-reviewer-name{font-weight:var(--font-weight-bold);margin-right:0;display:inline-flex;align-items:center}.reviewer-age{margin-right:4px;margin-left:1px;display:inline-flex;align-items:center}.verified-badge{font-weight:var(--font-weight-bold);display:inline-flex;align-items:center;gap:3px;margin-left:0;font-size:11px}.verified-icon{width:12px;height:12px;vertical-align:middle;display:inline-flex;align-items:center;justify-content:center}.product-purchased-container{margin-top:6px;width:100%}.product-purchased{border-radius:8px;padding:10px;width:100%}.product-label{font-size:12px;margin:0 0 5px;font-weight:var(--font-weight-semibold)}.product-details{display:flex;min-height:55px;align-items:center;gap:12px}.review-product-image{min-width:55px;width:auto;height:100%;aspect-ratio:1/1;border-radius:4px;overflow:hidden;flex-shrink:0}.review-product-image img{width:100%;height:100%;object-fit:cover}.product-info{flex-grow:1;min-height:60px;height:auto;display:flex;flex-direction:column;justify-content:center;min-width:0;overflow:visible}.review-product-title{font-size:14px;font-weight:var(--font-weight-semibold)!important;margin:0;letter-spacing:var(--letter-spacing-body);line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word;overflow-wrap:break-word;max-width:100%}.product-price{font-size:16px;margin:3px 0 0;font-weight:var(--font-weight-semibold)!important;line-height:1.2}.product-compare-price{text-decoration:line-through;opacity:.85;font-size:13px;font-weight:var(--font-weight-regular);margin-left:2px;color:#888}.product-purchase-date{font-size:11px;margin:3px 0 0;font-weight:var(--font-weight-regular);display:inline-flex;align-items:center;max-width:fit-content}.purchase-date-icon{margin-right:5px;position:relative;top:0}.summary-star{width:13px;height:13px;margin-right:-1px!important}.reviews-container-wrapper{width:100%;max-width:var(--section-max-width, 1200px);margin:0 auto}.reviews-section-header,.reviews-navigation-container{width:100%;max-width:var(--section-max-width, 1200px);margin-left:auto;margin-right:auto}.reviews-container{width:100%;max-width:100%;margin-left:auto;margin-right:auto}@media(min-width:1200px){.reviews-transformation-section{overflow-x:hidden}}@media(max-width:749px){.reviews-navigation{position:static;margin-top:15px}.review-image-container{height:200px}.reviews-container{align-items:flex-start}.product-purchased-container{margin-top:6px}.product-purchased{padding:8px}.product-details{width:100%;overflow:visible;min-height:50px;height:auto}.review-product-image{width:auto;height:100%;aspect-ratio:1/1}.product-info{min-height:50px;height:auto;min-width:0;flex:1;overflow:visible}.review-product-title{font-size:12px;word-break:break-word;overflow-wrap:break-word;max-width:100%}.product-price{font-size:14px;margin:2px 0 0}.product-compare-price{font-size:12px}.product-purchase-date{font-size:10px;margin:2px 0 0}}@media(max-width:480px){.reviews-transformation-section{padding:40px 15px}.reviews-container{padding:0;margin:0}.nav-button{width:32px;height:32px}.review-image-container{height:200px}.review-content{padding:12px}.carousel-review-header{flex-direction:row;align-items:flex-start;gap:8px}.review-stars{margin-bottom:0}.reviewer-info-container{justify-content:flex-start;margin-bottom:2px}.reviewer-info{font-size:9px;padding:2px 6px}.verified-icon{width:10px;height:10px;margin-bottom:1px}.verified-badge{font-size:9px;gap:2px}.product-purchased-container{margin-top:10px}.product-purchased{padding:7px;border-radius:6px}.product-details{gap:8px;width:100%;overflow:visible;min-height:40px;height:auto}.review-product-image{width:auto;height:100%;aspect-ratio:1/1}.product-info{min-height:40px;height:auto;min-width:0;flex:1;overflow:visible}.review-product-title{font-size:10px;-webkit-line-clamp:1;line-clamp:1;word-break:break-word;overflow-wrap:break-word;max-width:100%}.product-price{font-size:12px;margin:1px 0 0}.product-compare-price{font-size:9px;margin-left:3px}.product-purchase-date{font-size:8px;margin:1px 0 0}.purchase-date-icon{width:9px;height:9px;margin-right:3px}.star{width:17px;height:17px;margin-right:-3px!important}.summary-star{width:14px;height:14px}} /* END_SECTION:br-reviews */ /* START_SECTION:br-signs (INDEX:23) */ #media-template--21692356886685__signs { --media-grid-padding: 60px 20px 60px 20px; --media-grid-max-width: 1200px; --media-grid-gap: 20px 15px; --image-border-radius: 4px; --list-icon-color: #E41E1E; --list-icon-mark: #FFFFFF; --list-icon-size: 18px; --list-item-gap: 8px; background-color: #ffffff; } #media-template--21692356886685__signs .media-grid__heading { font-weight: var(--font-weight-bold, 700); letter-spacing: var(--letter-spacing-heading) !important; } #media-template--21692356886685__signs .media-grid__subtitle { font-weight: var(--font-weight-regular, 400); letter-spacing: var(--letter-spacing-body, 0); } #media-template--21692356886685__signs .media-grid__accent { padding: 0 4px; margin: 0 -4px; color: #EF4A65 !important; margin-left: 0px; font-family: var(--font-accent-family) !important; font-style: var(--font-accent-style) !important; font-weight: var(--font-accent-weight) !important; } #media-template--21692356886685__signs .media-item__media { border-radius: 4px !important; border-radius: 4px !important; background-color: #ffffff; } #media-template--21692356886685__signs .media-item__image, #media-template--21692356886685__signs .media-item__video { border-radius: 4px !important; border-radius: 4px !important; object-position: center; } #media-template--21692356886685__signs .media-item__placeholder { background-color: #f5f5f5; border-radius: 4px !important; border-radius: 4px !important; } #media-template--21692356886685__signs .media-item__placeholder-text { color: #8c8c8c; } #media-template--21692356886685__signs .media-item__content { margin-top: 14px !important; } #media-template--21692356886685__signs .media-item__title { color: #2a2a2a !important; font-size: 16px; margin-top: 0px; margin-bottom: 0px; text-align: left; } #media-template--21692356886685__signs .media-item__problem { margin: 0 0 calc(4px - 8px); color: #8a8a8a; font-size: 15px; line-height: 1.4; text-align: left; } #media-template--21692356886685__signs .media-item__problem s { text-decoration-line: line-through; text-decoration-color: #d64545; text-decoration-thickness: 1px; } #media-template--21692356886685__signs .media-item__solution { margin: 0; color: #2a2a2a; font-size: 18px; line-height: 1.45; text-align: left; } #media-template--21692356886685__signs .media-item__solution strong, #media-template--21692356886685__signs .media-item__solution b { color: #111111; font-weight: 700; } #media-template--21692356886685__signs .media-item__solution + .media-item__title, #media-template--21692356886685__signs .media-item__solution + .media-item__description { margin-top: 6px; } @media screen and (max-width: 749px) { #media-template--21692356886685__signs .media-item__problem { font-size: 14px; } #media-template--21692356886685__signs .media-item__solution { font-size: 16px; } } #media-template--21692356886685__signs .media-item__description { color: #8c8c8c !important; font-size: 14px; margin-top: 0px; margin-bottom: 0px; text-align: left; } #media-template--21692356886685__signs .media-item { padding-left: 4px; padding-right: 4px; } #media-template--21692356886685__signs .media-item__number { color: #2a2a2a; } #media-template--21692356886685__signs .media-item > .media-item__media, #media-template--21692356886685__signs .media-item > .media-item__compare { width: 100%; justify-self: start; } #media-template--21692356886685__signs .media-item__media { aspect-ratio: 1 / 1; } #media-template--21692356886685__signs .media-item--media-bottom { display: flex; flex-direction: column; } #media-template--21692356886685__signs .media-item--media-bottom .media-item__content { margin-top: 0 !important; margin-bottom: 14px; } #media-template--21692356886685__signs .media-item--media-bottom > .media-item__media, #media-template--21692356886685__signs .media-item--media-bottom > .media-item__compare { margin-top: auto; align-self: flex-start; } #media-template--21692356886685__signs .media-item--media-hidden .media-item__content { margin-top: 0 !important; } #media-template--21692356886685__signs .media-item__compare { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; } #media-template--21692356886685__signs .media-item__compare .media-item__media { width: 100%; } #media-template--21692356886685__signs .media-item__label { position: absolute; left: 8px; bottom: 8px; z-index: 1; padding: 4px 10px; border-radius: 4px; background-color: #000000; color: #FFFFFF; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; line-height: 1.2; text-transform: uppercase; pointer-events: none; } @media (max-width: 1024px) { #media-template--21692356886685__signs .media-grid__items { grid-template-columns: repeat(2, 1fr) !important; gap: 30px 30px !important; } } @media (max-width: 640px) { #media-template--21692356886685__signs .media-grid__items { grid-template-columns: repeat(2, 1fr) !important; gap: 15px 15px !important; } } #media-template--21692356886685__signs .media-grid__dots { display: none; } #shopify-section-template--21692356886685__signs h3 {font-weight: 500;} #shopify-section-template--21692356886685__signs .elxr-section-header__eyebrow {color: #668aba;} #media-template--21692356886685__signs .media-item__media{aspect-ratio:75 / 56;background:#c7d9f1} #media-template--21692356886685__signs .media-item__image{object-fit:contain;width:100%;height:100%} @media(max-width:640px){#media-template--21692356886685__signs .media-grid__items{grid-template-columns:minmax(0,1fr)!important;gap:32px!important}} .media-grid{--media-grid-gap: 30px;--media-grid-padding: 60px 20px;--media-grid-max-width: 1600px;width:100%;padding:var(--media-grid-padding);background-color:#fff}.media-grid__container{max-width:var(--media-grid-max-width);margin:0 auto}.media-grid__items{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--media-grid-gap)}.media-grid__items[data-columns="1"]{grid-template-columns:repeat(1,1fr)}.media-grid__items[data-columns="2"]{grid-template-columns:repeat(2,1fr)}.media-grid__items[data-columns="3"]{grid-template-columns:repeat(3,1fr)}.media-grid__items[data-columns="4"]{grid-template-columns:repeat(4,1fr)}.media-grid__items[data-columns="5"]{grid-template-columns:repeat(5,1fr)}.media-grid__items[data-columns="6"]{grid-template-columns:repeat(6,1fr)}.media-item{display:grid;align-content:start}.media-item__media{position:relative;overflow:hidden;aspect-ratio:1 / 1;background-color:#f5f5f5;border-radius:var(--image-border-radius, 4px)}.media-item__image,.media-item__video{width:100%;height:100%;object-fit:cover;object-position:center;display:block;border-radius:var(--image-border-radius, 4px)}.media-item__placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background-color:#f5f5f5;border-radius:4px}.media-item__placeholder-text{font-size:16px;color:#999}.media-item__content{margin-top:24px;display:flex;flex-direction:column;gap:8px}.media-item__title{font-size:20px;font-weight:var(--font-weight-bold, 700);line-height:1.2;margin:0;color:#181818;letter-spacing:var(--letter-spacing-body, 0)}.media-item__description{font-size:14px;line-height:1.5;margin:0;color:#181818;letter-spacing:var(--letter-spacing-body, 0);font-weight:var(--font-weight-regular, 400)}.media-item__number{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border:1px solid currentColor;border-radius:50%;font-family:var(--font-accent-family);font-style:var(--font-accent-style);font-size:18px;line-height:1}.media-item__lines{list-style:none;margin:6px 0 0;padding:8px 0 0;border-top:1px solid rgba(255,255,255,.6)}.media-item__lines li{padding:7px 0}.media-item__lines li+li{border-top:1px solid rgba(255,255,255,.25)}.media-item__icon-list{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:var(--list-item-gap, 8px)}.media-item__icon-list .media-item__description{display:flex;align-items:flex-start;gap:10px;margin:0!important;text-align:left!important}.media-item__list-icon{flex:0 0 auto;display:inline-flex;width:var(--list-icon-size, 18px);height:var(--list-icon-size, 18px);margin-top:calc((1.5em - var(--list-icon-size, 18px)) / 2);color:var(--list-icon-color, #e41e1e)}.media-item__list-icon svg{width:100%;height:100%;display:block}.media-item__divider{width:50%;height:2px;background-color:#000;margin:12px auto}.media-item--card{background-color:#fff;border:1px solid #e5e7eb;border-radius:4px;padding:20px 18px}.media-item--card .media-item__content{margin-top:20px}@media(max-width:1024px){.media-grid{--media-grid-padding: 60px 30px;--media-grid-gap: 30px}.media-grid__items{grid-template-columns:repeat(2,1fr)}.media-grid__items[data-columns="1"]{grid-template-columns:repeat(1,1fr)}.media-grid__items[data-columns="2"],.media-grid__items[data-columns="3"],.media-grid__items[data-columns="4"],.media-grid__items[data-columns="5"],.media-grid__items[data-columns="6"]{grid-template-columns:repeat(2,1fr)}}@media(max-width:749px){.media-grid{--media-grid-padding: 60px 20px;--media-grid-gap: 30px}.media-grid__items{grid-template-columns:repeat(2,1fr)}.media-item__title{font-size:18px}.media-item__description{font-size:14px}}@media(max-width:480px){.media-grid__items--single-column{grid-template-columns:repeat(1,1fr)}.media-grid__items--single-column .media-item{text-align:center}}.media-item{animation:fadeInUp .6s ease-out forwards;animation-delay:calc(.1s * var(--index, 0))}.media-item[data-index="1"]{--index: 1}.media-item[data-index="2"]{--index: 2}.media-item[data-index="3"]{--index: 3}.media-item[data-index="4"]{--index: 4}.media-item[data-index="5"]{--index: 5}.media-item[data-index="6"]{--index: 6} /* END_SECTION:br-signs */ /* START_SECTION:br-trust-ticker (INDEX:26) */ @keyframes marquee-horizontal-left { 0% { transform: translateX(0); } 100% { transform: translateX(-25%); } } @keyframes marquee-horizontal-right { 0% { transform: translateX(-25%); } 100% { transform: translateX(0); } } .section-template--21692356886685__trust_ticker { --vertical-padding: 12px; --item-gap: 60px; --mobile-item-gap: 30px; --font-size: 13px; --mobile-font-size: 12px; --letter-spacing: 2px !important; --text-transform: uppercase; --icon-size: 16px; --mobile-icon-size: 14px; --icon-spacing: 8px; --text-color: #ffffff; --icon-color: #c7d9f1; --background-color: #111111; } .section-template--21692356886685__trust_ticker .features-track { animation: marquee-horizontal-left 14000ms linear infinite; } #shopify-section-template--21692356886685__trust_ticker h3 {font-weight: 500;} #shopify-section-template--21692356886685__trust_ticker .elxr-section-header__eyebrow {color: #668aba;} .scrolling-features-bar{padding:var(--vertical-padding) 0;width:100%;overflow:hidden;position:relative;font-family:var(--font-body-family-override);background-color:var(--background-color);color:var(--text-color)}.scrolling-features-bar .features-track-container{width:100%;overflow:hidden;position:relative}.scrolling-features-bar .features-track{display:flex;white-space:nowrap;position:relative}.scrolling-features-bar .feature-items{display:flex;align-items:center;gap:0;flex-shrink:0}.scrolling-features-bar .feature-item{display:flex;align-items:center;white-space:nowrap;font-size:var(--font-size);margin:0;font-weight:var(--font-weight-bold)!important;letter-spacing:var(--letter-spacing-body);padding:0 calc(var(--item-gap) / 2);text-transform:var(--text-transform);color:var(--text-color)}.scrolling-features-bar .feature-icon{display:flex;justify-content:center;align-items:center;margin-right:var(--icon-spacing);flex-shrink:0}.scrolling-features-bar .feature-icon svg{width:var(--icon-size);height:var(--icon-size);fill:var(--icon-color);stroke:none!important;display:block}.scrolling-features-bar .feature-icon img.icon-image{width:var(--icon-size);height:var(--icon-size);object-fit:contain;display:block}.scrolling-features-bar .feature-item-separator{width:6px;height:6px;border-radius:50%;background-color:currentColor;opacity:.5;margin:0 calc(var(--item-gap) / 2);flex-shrink:0}.scrolling-features-bar.pause-on-hover .features-track:hover{animation-play-state:paused}@media(max-width:749px){.scrolling-features-bar .feature-item{font-size:var(--mobile-font-size);padding:0 calc(var(--mobile-item-gap) / 2)}.scrolling-features-bar .feature-icon svg{width:var(--mobile-icon-size)!important;height:var(--mobile-icon-size)!important}.scrolling-features-bar .feature-icon img.icon-image{width:var(--mobile-icon-size)!important;height:var(--mobile-icon-size)!important}.scrolling-features-bar .feature-item-separator{width:4px;height:4px;margin:0 calc(var(--mobile-item-gap) / 2)}} /* END_SECTION:br-trust-ticker */ /* START_SECTION:br-week-by-week (INDEX:27) */ #ctb-template--21692356886685__week_by_week { --ctb-accent: #668aba; --ctb-heading-accent: #EF4A65; --ctb-heading: #ffffff; --ctb-subheading: rgba(255,255,255,0.85); --ctb-title: #2a2a2a; --ctb-text: #6b6b6b; --ctb-border: #ffffff; --ctb-panel-bg: #ffffff; --ctb-tab-bg: rgba(255,255,255,0.16); --ctb-tab-text: #ffffff; --ctb-tab-active-bg: #ffffff; --ctb-tab-active-text: #5b7394; --ctb-tab-size: 15px; --ctb-tab-size-mobile: 14px; --ctb-tab-radius: 6px; --ctb-tab-gap: 8px; --ctb-panel-radius: 8px; --ctb-panel-padding: 32px; --ctb-panel-padding-mobile: 20px; --ctb-num: #668aba; --ctb-num-text: #ffffff; --ctb-num-size: 36px; --ctb-num-font: 15px; --ctb-autoplay: 0ms; background: linear-gradient(120deg, #5b7394 28%, #c7d9f1 100%); color: var(--ctb-text); padding: 60px 20px 60px; font-family: var(--font-body-family); letter-spacing: var(--letter-spacing-body); } #ctb-template--21692356886685__week_by_week .ctb__inner { display: block; max-width: 900px; margin: 0 auto; } #ctb-template--21692356886685__week_by_week .ctb__header { text-align: center; margin-bottom: 32px; } #ctb-template--21692356886685__week_by_week .ctb__heading { margin: 0; font-family: var(--font-heading-family); font-weight: var(--font-weight-bold); letter-spacing: var(--letter-spacing-heading); font-size: var(--section-heading-size); line-height: 1.2; color: var(--ctb-heading); } #ctb-template--21692356886685__week_by_week .ctb__heading .global-accent-text { color: var(--ctb-heading-accent); } #ctb-template--21692356886685__week_by_week .ctb__subheading { margin-top: 10px; font-size: var(--section-subtitle-size); color: var(--ctb-subheading); } #ctb-template--21692356886685__week_by_week .ctb__subheading p { margin: 0; font-size: inherit; color: inherit; } #ctb-template--21692356886685__week_by_week .ctb__eyebrow { margin: 0 0 10px; font-size: 13px; font-weight: var(--font-weight-bold, 600); letter-spacing: 0.04em; text-transform: uppercase; color: #668aba; } #ctb-template--21692356886685__week_by_week .ctb__nav { display: flex; flex-wrap: wrap; gap: var(--ctb-tab-gap); } #ctb-template--21692356886685__week_by_week .ctb__nav--equal .ctb__tab { flex: 1 1 0; min-width: 0; } #ctb-template--21692356886685__week_by_week .ctb__nav--left { justify-content: flex-start; } #ctb-template--21692356886685__week_by_week .ctb__nav--center { justify-content: center; } @media screen and (min-width: 750px) { #ctb-template--21692356886685__week_by_week .ctb__nav--grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } } #ctb-template--21692356886685__week_by_week .ctb__tab { appearance: none; -webkit-appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; margin: 0; padding: 10px 20px; font-family: inherit; font-size: var(--ctb-tab-size); font-weight: var(--font-weight-medium, 500); letter-spacing: inherit; line-height: 1.2; text-transform: none; text-align: center; color: var(--ctb-tab-text); background: var(--ctb-tab-bg); border: 0; box-shadow: none; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; } #ctb-template--21692356886685__week_by_week .ctb__tab:focus-visible { outline: 2px solid var(--ctb-accent); outline-offset: 2px; } #ctb-template--21692356886685__week_by_week .ctb__tab-icon { display: inline-flex; width: var(--ctb-tab-icon-size); height: var(--ctb-tab-icon-size); flex-shrink: 0; } #ctb-template--21692356886685__week_by_week .ctb__tab-icon svg { width: 100%; height: 100%; display: block; } #ctb-template--21692356886685__week_by_week .ctb__panels { background: var(--ctb-panel-bg); padding: var(--ctb-panel-padding); } #ctb-template--21692356886685__week_by_week.ctb--folder .ctb__nav { align-items: flex-end; } #ctb-template--21692356886685__week_by_week.ctb--folder .ctb__tab { border-radius: var(--ctb-tab-radius) var(--ctb-tab-radius) 0 0; } #ctb-template--21692356886685__week_by_week.ctb--folder .ctb__tab.is-active { background: var(--ctb-panel-bg); color: var(--ctb-tab-active-text); } #ctb-template--21692356886685__week_by_week.ctb--folder .ctb__panels { border-radius: 0 0 var(--ctb-panel-radius) var(--ctb-panel-radius); } #ctb-template--21692356886685__week_by_week.ctb--pills .ctb__nav { margin-bottom: 20px; } #ctb-template--21692356886685__week_by_week.ctb--pills .ctb__tab { border: 1px solid var(--ctb-border); border-radius: var(--ctb-tab-radius); } #ctb-template--21692356886685__week_by_week.ctb--pills .ctb__tab.is-active { background: var(--ctb-tab-active-bg); border-color: var(--ctb-tab-active-bg); color: var(--ctb-tab-active-text); } #ctb-template--21692356886685__week_by_week.ctb--pills .ctb__panels { border-radius: var(--ctb-panel-radius); } #ctb-template--21692356886685__week_by_week.ctb--underline .ctb__nav { border-bottom: 1px solid var(--ctb-border); margin-bottom: 20px; } #ctb-template--21692356886685__week_by_week.ctb--underline .ctb__tab { background: transparent; border-bottom: 2px solid transparent; margin-bottom: -1px; border-radius: 0; } #ctb-template--21692356886685__week_by_week.ctb--underline .ctb__tab.is-active { color: var(--ctb-tab-active-text); border-bottom-color: var(--ctb-accent); } #ctb-template--21692356886685__week_by_week.ctb--underline .ctb__panels { border-radius: var(--ctb-panel-radius); } #ctb-template--21692356886685__week_by_week .ctb__panel { display: none; grid-template-columns: repeat(var(--ctb-cols, 1), minmax(0, 1fr)); column-gap: var(--ctb-col-gap, 32px); row-gap: var(--ctb-row-gap, 24px); } #ctb-template--21692356886685__week_by_week .ctb__panel.is-active, #ctb-template--21692356886685__week_by_week content-tabs-blocks:not(.is-ready) .ctb__panels > .ctb__panel:first-of-type { display: grid; } #ctb-template--21692356886685__week_by_week .ctb__panel.is-active { animation: ctb-fade-template--21692356886685__week_by_week 0.25s ease; } @keyframes ctb-fade-template--21692356886685__week_by_week { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } #ctb-template--21692356886685__week_by_week .ctb__panel > * { min-width: 0; } @media screen and (min-width: 750px) { #ctb-template--21692356886685__week_by_week .ctb__panel--split:has(> .ctb-image) { grid-template-columns: minmax(0, var(--ctb-split-image)) minmax(0, var(--ctb-split-text)); grid-template-rows: var(--ctb-split-lead) repeat(12, auto) var(--ctb-split-trail); row-gap: 0; } #ctb-template--21692356886685__week_by_week .ctb__panel--split:has(> .ctb-image)::before { content: ''; grid-column: 2; grid-row: 1; } #ctb-template--21692356886685__week_by_week .ctb__panel--split:has(> .ctb-image) > * { grid-column: 2; margin-bottom: var(--ctb-row-gap, 24px); } #ctb-template--21692356886685__week_by_week .ctb__panel--split:has(> .ctb-image) > :last-child { margin-bottom: 0; } #ctb-template--21692356886685__week_by_week .ctb__panel--split > .ctb-image:not(.ctb-image ~ .ctb-image) { grid-column: 1; grid-row: 1 / -1; margin-bottom: 0; } #ctb-template--21692356886685__week_by_week .ctb__panel--image-right:has(> .ctb-image) { grid-template-columns: minmax(0, var(--ctb-split-text)) minmax(0, var(--ctb-split-image)); } #ctb-template--21692356886685__week_by_week .ctb__panel--image-right:has(> .ctb-image)::before, #ctb-template--21692356886685__week_by_week .ctb__panel--image-right:has(> .ctb-image) > * { grid-column: 1; } #ctb-template--21692356886685__week_by_week .ctb__panel--image-right > .ctb-image:not(.ctb-image ~ .ctb-image) { grid-column: 2; } } #ctb-template--21692356886685__week_by_week .ctb-column { display: flex; flex-direction: column; gap: var(--ctb-column-gap, 12px); min-width: 0; } #ctb-template--21692356886685__week_by_week .ctb-heading { display: flex; align-items: center; justify-content: var(--ctb-justify, flex-start); gap: 10px; margin: 0; font-family: var(--font-body-family); font-size: var(--ctb-h-size); font-weight: var(--ctb-h-weight); letter-spacing: var(--letter-spacing-body); line-height: 1.3; color: var(--ctb-h-color, var(--ctb-title)); } #ctb-template--21692356886685__week_by_week .ctb-heading__icon { display: inline-flex; width: var(--ctb-h-icon-size); height: var(--ctb-h-icon-size); flex-shrink: 0; color: var(--ctb-h-accent, var(--ctb-accent)); } #ctb-template--21692356886685__week_by_week .ctb-heading__icon svg { width: 100%; height: 100%; display: block; } #ctb-template--21692356886685__week_by_week .ctb-heading--icon-above { flex-direction: column; align-items: flex-start; gap: 12px; } #ctb-template--21692356886685__week_by_week .ctb-heading__label { color: var(--ctb-h-accent, var(--ctb-accent)); } #ctb-template--21692356886685__week_by_week .ctb-heading--label-upper .ctb-heading__label { text-transform: uppercase; letter-spacing: 0.02em; } #ctb-template--21692356886685__week_by_week .ctb-text { font-size: var(--ctb-text-size); line-height: 1.6; color: var(--ctb-text-color, var(--ctb-text)); } #ctb-template--21692356886685__week_by_week .ctb-text p { margin: 0 0 0.75em; font-size: inherit; color: inherit; } #ctb-template--21692356886685__week_by_week .ctb-text > :last-child { margin-bottom: 0; } #ctb-template--21692356886685__week_by_week .ctb-icon-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--ctb-list-item-gap); font-size: var(--ctb-list-size); line-height: 1.5; color: var(--ctb-list-color, var(--ctb-text)); text-align: left; } #ctb-template--21692356886685__week_by_week .ctb-icon-list__item { display: flex; align-items: flex-start; gap: var(--ctb-list-icon-gap); margin: 0; } #ctb-template--21692356886685__week_by_week .ctb-icon-list__item::before { content: ''; flex: 0 0 var(--ctb-list-icon-size); width: var(--ctb-list-icon-size); height: var(--ctb-list-icon-size); margin-top: calc((1.5em - var(--ctb-list-icon-size)) / 2); background: var(--ctb-list-icon-color, var(--ctb-accent)); -webkit-mask: var(--ctb-list-marker) center / contain no-repeat; mask: var(--ctb-list-marker) center / contain no-repeat; } #ctb-template--21692356886685__week_by_week .ctb-icon-list--dot .ctb-icon-list__item::before { border-radius: 50%; -webkit-mask: none; mask: none; } #ctb-template--21692356886685__week_by_week .ctb-icon-list--none .ctb-icon-list__item::before, #ctb-template--21692356886685__week_by_week .ctb-icon-list__item.has-own-icon::before { display: none; } #ctb-template--21692356886685__week_by_week .ctb-icon-list__icon { --own-size: max(var(--ctb-list-icon-size), 1.15em); flex: 0 0 var(--own-size); width: var(--own-size); height: var(--own-size); margin-top: calc((1.5em - var(--own-size)) / 2); color: var(--ctb-list-icon-color, var(--ctb-accent)); } #ctb-template--21692356886685__week_by_week .ctb-icon-list__icon svg, #ctb-template--21692356886685__week_by_week .ctb-icon-list__icon img { width: 100%; height: 100%; display: block; object-fit: contain; } #ctb-template--21692356886685__week_by_week .ctb-icon-list--image .ctb-icon-list__item::before { background: var(--ctb-list-image, none) center / contain no-repeat; -webkit-mask: none; mask: none; } #ctb-template--21692356886685__week_by_week .ctb-icon-list--dividers .ctb-icon-list__item + .ctb-icon-list__item { border-top: 1px solid var(--ctb-border); padding-top: var(--ctb-list-item-gap); } #ctb-template--21692356886685__week_by_week .ctb-image { width: 100%; overflow: hidden; } #ctb-template--21692356886685__week_by_week .ctb-image img, #ctb-template--21692356886685__week_by_week .ctb-image svg { display: block; width: 100%; height: auto; } #ctb-template--21692356886685__week_by_week .ctb-image--cropped img, #ctb-template--21692356886685__week_by_week .ctb-image--cropped svg { height: 100%; object-fit: cover; } #ctb-template--21692356886685__week_by_week .ctb-image__placeholder { background: rgba(0, 0, 0, 0.06); } #ctb-template--21692356886685__week_by_week .ctb-button { display: inline-flex; align-items: center; justify-content: center; padding: 12px 24px; border-radius: var(--button-border-radius, 8px); font-size: 15px; font-weight: var(--font-weight-bold, 600); line-height: 1.2; text-decoration: none; border: 1.5px solid var(--ctb-btn-bg, var(--ctb-accent)); background: var(--ctb-btn-bg, var(--ctb-accent)); color: var(--ctb-btn-text, #ffffff); transition: opacity 0.2s ease; } #ctb-template--21692356886685__week_by_week .ctb-button:hover { opacity: 0.88; } #ctb-template--21692356886685__week_by_week .ctb-button--outline { background: transparent; color: var(--ctb-btn-bg, var(--ctb-accent)); } #ctb-template--21692356886685__week_by_week .ctb-button--link { background: none; border: 0; padding: 0; color: var(--ctb-btn-bg, var(--ctb-accent)); text-decoration: underline; text-underline-offset: 3px; } #ctb-template--21692356886685__week_by_week .ctb-button--full { display: flex; width: 100%; } @media screen and (max-width: 749px) { #ctb-template--21692356886685__week_by_week { padding: 40px 16px 40px; } #ctb-template--21692356886685__week_by_week .ctb__heading { font-size: var(--section-heading-size-mobile); } #ctb-template--21692356886685__week_by_week .ctb__subheading { font-size: var(--section-subtitle-size-mobile); } #ctb-template--21692356886685__week_by_week .ctb__tab { font-size: var(--ctb-tab-size-mobile); padding: 10px 12px; } #ctb-template--21692356886685__week_by_week .ctb__nav--m-equal { flex-wrap: nowrap; } #ctb-template--21692356886685__week_by_week .ctb__nav--m-equal .ctb__tab { flex: 1 1 0; min-width: 0; } #ctb-template--21692356886685__week_by_week .ctb__nav--m-scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } #ctb-template--21692356886685__week_by_week .ctb__nav--m-scroll::-webkit-scrollbar { display: none; } #ctb-template--21692356886685__week_by_week .ctb__nav--m-scroll .ctb__tab { flex: 0 0 auto; white-space: nowrap; } #ctb-template--21692356886685__week_by_week .ctb__nav--m-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } #ctb-template--21692356886685__week_by_week .ctb__nav--m-stack { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; } #ctb-template--21692356886685__week_by_week .ctb__nav--m-wrap { flex-wrap: wrap; justify-content: flex-start; } #ctb-template--21692356886685__week_by_week .ctb__nav--m-wrap .ctb__tab { flex: 0 0 auto; } #ctb-template--21692356886685__week_by_week .ctb__panels { padding: var(--ctb-panel-padding-mobile); } #ctb-template--21692356886685__week_by_week .ctb__panel { grid-template-columns: repeat(var(--ctb-cols-mobile, 1), minmax(0, 1fr)); column-gap: var(--ctb-col-gap-mobile, 24px); row-gap: var(--ctb-col-gap-mobile, 24px); } #ctb-template--21692356886685__week_by_week .ctb-heading { font-size: var(--ctb-h-size-mobile); } #ctb-template--21692356886685__week_by_week .ctb-text { font-size: var(--ctb-text-size-mobile); } #ctb-template--21692356886685__week_by_week .ctb-icon-list { font-size: var(--ctb-list-size-mobile); } } #shopify-section-template--21692356886685__week_by_week h3 {font-weight: 500;} #shopify-section-template--21692356886685__week_by_week .elxr-section-header__eyebrow {color: #668aba;} /* END_SECTION:br-week-by-week */ /* START_SECTION:collection-links (INDEX:30) */ collection-links-component { --alignment: flex-start; display: grid; align-items: center; grid-gap: var(--gap-3xl); &:has([ratio='portrait']) { --template-column-ratio: 0.8fr; } &:has([ratio='square']) { --template-column-ratio: 1fr; } &:has([ratio='landscape']) { --template-column-ratio: 1.4fr; } &[alignment='center'] { --alignment: center; .text-block { text-align: center; } } &[alignment='right'] { --alignment: flex-end; .text-block { text-align: end; } } &[layout='spotlight'] { position: relative; grid-template-columns: 1fr var(--template-column-ratio); grid-template-areas: 'text image'; @media screen and (min-width: 750px) { &[reverse] { grid-template-areas: 'image text'; grid-template-columns: var(--template-column-ratio) 1fr; } } .collection-links__container { align-items: var(--alignment); } @media screen and (max-width: 749px) { grid-template-columns: 1fr; grid-template-areas: 'text' 'image'; grid-gap: var(--gap-2xl); .collection-links__container { gap: clamp(var(--gap-xs), 1vw, var(--gap-xl)) var(--gap-2xl); justify-content: var(--alignment); } } } &[layout='text'] { grid-gap: 0; grid-template-areas: 'text'; .collection-links__container { gap: clamp(var(--gap-xs), 1vw, var(--gap-xl)) var(--gap-2xl); flex-wrap: wrap; flex-direction: row; justify-content: var(--alignment); } } } .collection-links__container { display: flex; gap: var(--gap-md); flex-direction: column; } .collection-links__images { overflow: hidden; grid-area: image; @media screen and (max-width: 749px) { image-block { max-width: 100%; } } } /* END_SECTION:collection-links */ /* START_SECTION:featured-product (INDEX:36) */ .featured-product-section .section-content-wrapper { grid-template-columns: 1fr; display: grid; overflow: hidden; @media screen and (min-width: 750px) { grid-template-columns: 1fr 1fr; } } .featured-product-section { --viewport-offset: 400px; --constrained-min-height: var(--visual-preview--height, 80dvh); --constrained-height: max(var(--constrained-min-height), calc(100vh - var(--viewport-offset))); @media screen and (min-width: 750px) { --viewport-offset: 300px; } } .featured-product-section .product-grid__card { --padding-block: 20px; --padding-inline: 20px; @media screen and (min-width: 750px) { --padding-block: 40px; --padding-inline: 40px; } } @media screen and (max-width: 749px) { .featured-product-section .media-block { order: -1; } } @media screen and (min-width: 750px) { .featured-product-section .product-card__content { --hugged-width: calc(var(--constrained-height) * var(--gallery-aspect-ratio, var(--media-preview-ratio))); width: min(100%, var(--hugged-width)); margin-inline: auto; } } /* END_SECTION:featured-product */ /* START_SECTION:footer-utilities (INDEX:37) */ .utilities { width: 100%; display: flex; flex-direction: column; align-items: center; gap: var(--gap); text-wrap: nowrap; border-top: var(--border-width) solid var(--divider-color, var(--color-border)); color: var(--color-foreground-muted); @media screen and (min-width: 750px) { display: grid; grid-template-columns: 1fr auto 1fr; justify-content: center; gap: var(--gap); align-items: center; text-align: start; } } .utilities a, .utilities button { color: var(--color-utilities, var(--color-foreground-muted)); } .utilities > * { text-align: center; @media screen and (min-width: 750px) { text-align: start; justify-self: start; } } /* Dynamic positioning based on number of blocks */ @media screen and (min-width: 750px) { /* 1 block: Single column, left aligned */ .utilities--blocks-1 { grid-template-columns: 1fr; justify-content: start; } .utilities--blocks-1 > * { justify-self: start; text-align: start; } /* 2 blocks: Two equal columns, start and end aligned */ .utilities--blocks-2 { grid-template-columns: 1fr 1fr; } .utilities--blocks-2 > *:nth-child(2) { justify-self: end; text-align: end; } /* 3 blocks: Three columns (1fr auto 1fr), start/center/end aligned */ .utilities--blocks-3 { grid-template-columns: 1fr auto 1fr; } .utilities--blocks-3 > *:nth-child(2) { justify-self: center; text-align: center; } .utilities--blocks-3 > *:nth-child(3) { justify-self: end; text-align: end; } } /* END_SECTION:footer-utilities */ /* START_SECTION:footer (INDEX:38) */ .footer-content { contain: content; content-visibility: auto; display: grid; grid-template-columns: 1fr; gap: var(--footer-gap); align-items: start; } .footer-content .menu__heading__default { font-weight: var(--font-heading--weight); } @media screen and (min-width: 750px) and (max-width: 989px) { .footer-content { grid-template-columns: repeat(min(var(--grid-columns), 3), 1fr); grid-auto-flow: row; } .footer-content[style*='--grid-columns: 4'] { grid-template-columns: repeat(2, 1fr); } .footer-content--isolated-grid-item-tablet > :last-child { grid-column: 1 / -1; } } @media screen and (min-width: 990px) { .footer-content { grid-template-columns: repeat(var(--grid-columns), 1fr); } /* Single item centered */ .footer-content[style*='--grid-columns: 1'] { justify-items: center; } .footer-content--isolated-grid-item-desktop > :last-child { grid-column: 1 / -1; } } /* END_SECTION:footer */ /* START_SECTION:header-announcements (INDEX:39) */ .announcement-bar { border-block-end: var(--border-bottom-width) solid var(--color-border); } .announcement-bar__slider { display: flex; flex-direction: row; align-items: center; position: relative; @media screen and (max-width: 749px) { grid-column: 1 / -1; } } .announcement-bar__slides { display: grid; grid: [stack] auto / [stack] auto; width: calc(100% - var(--button-size) * 2); max-width: 680px; margin-inline: auto; } .announcement-bar__slides > * { grid-area: stack; } .announcement-bar__slide { transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out; content-visibility: visible; &[aria-hidden='true'] { opacity: 0; visibility: hidden; } } .announcement-bar__slider slideshow-arrows { padding: 0; mix-blend-mode: normal; } .announcement-bar__slider slideshow-arrows .slideshow-control { color: var(--color-foreground); } .announcement-bar__slider .slideshow-control { display: flex; padding: 0; width: var(--button-size); height: var(--button-size); align-items: center; justify-content: center; opacity: 1; animation: none; @media screen and (min-width: 750px) { --slideshow-control-offset: calc((var(--button-size) - var(--icon-size-xs)) / 2); .section--page-width &.slideshow-control--previous { transform: translateX(var(--slideshow-control-offset)); } } } .announcement-bar__slider .slideshow-control .svg-wrapper { width: var(--icon-size-xs); height: var(--icon-size-xs); } .announcement-bar__slide { place-content: center; } .announcement-bar__text:first-child { margin: 0; } .announcement-bar__link { position: absolute; inset: 0; } /* END_SECTION:header-announcements */ /* START_SECTION:header (INDEX:40) */ body { --header-height: 60px; --header-group-height: var(--header-height); --transparent-header-offset-boolean: 0; /* stylelint-disable-line declaration-property-value-disallowed-list */ } .header { /* Set header paddings based on height setting */ --header-padding: var(--padding-sm); --font-paragraph--line-height: 1; --header-content-transition-timing: 0s; display: block; contain: layout style; background: transparent; a, .button, .button-secondary, .header-actions__action { /* reset style from base.css */ transition: color var(--header-content-transition-timing), border-color var(--header-content-transition-timing); } } #header-component :is(.header-menu, .dropdown-localization) { display: none; } @media screen and (min-width: 750px) { #header-component[data-menu-style='menu'] :is(.header-menu, .dropdown-localization) { display: flex; } } #header-component[data-menu-style='drawer'] .header__column { display: contents; } @media screen and (min-width: 750px) { #header-component[data-menu-style='menu'] .header__navigation-bar-row { display: none; } } .header[transparent] { --language-button-background-color: transparent; --language-button-border-color: transparent; --header-content-transition-timing: calc(var(--submenu-animation-speed) - var(--animation-speed-fast)) var(--animation-speed-fast) var(--ease-out-cubic); --closed-underlay-height: 0px; /* used to display the appropriate logo based on transparency state */ --header-logo-display: none; --header-logo-inverse-display: block; position: absolute; top: 0; inset-inline: 0; z-index: var(--layer-overlay); &[transparent='not-sticky'][data-sticky-state='active'], &:has(.menu-list__list-item > .menu-list__link:not([aria-haspopup]):hover) { --header-logo-display: unset; --header-logo-inverse-display: unset; --color-foreground: inherit; --color-foreground-rgb: inherit; --color-background: inherit; --color-background-rgb: inherit; --color-border: inherit; --color-border-rgb: inherit; --closed-underlay-height: 100%; } /** For transparent header, apply transparent text color to rows when menu is not hovered */ &:not([data-sticky-state='active']):not(:has(.menu-list__link:hover)):not(:has(header-menu[aria-expanded='true'])) .header__row { --color-foreground: var(--color-transparent-text); --color-foreground-rgb: var(--color-transparent-text-rgb); --color-border: var(--color-transparent-text); --color-border-rgb: var(--color-transparent-text-rgb); --color-primary-button-background: var(--color-transparent-text); --color-primary-button-text: var(--color-transparent-text-contrast); } /* Swap the cart bubble in transparent state only when using the default style. Custom bubble colors apply unchanged across header states. */ &[data-bubble-style='default']:not([data-sticky-state='active']):not(:has(.menu-list__link:hover)):not( :has(header-menu[aria-expanded='true']) ) .header__row { --cart-bubble-background: var(--color-transparent-text, var(--cart-bubble-background-fallback)); --cart-bubble-text: var(--color-transparent-text-contrast, var(--cart-bubble-text-fallback)); } /* Multiple selectors for performance: each simple :has() check is faster than one complex selector with multiple conditions */ &:has(.mega-menu__list:hover), &:has(.menu-list__link:hover), &:has(header-menu[aria-expanded='true']) { --header-logo-display: unset; --header-logo-inverse-display: unset; --color-foreground: inherit; --color-foreground-rgb: inherit; --color-background: inherit; --color-background-rgb: inherit; --color-border: inherit; --color-border-rgb: inherit; --header-content-transition-timing: var(--submenu-animation-speed) var(--ease-out-cubic); } } /* When top row has transparent background, make it inherit colors from header component */ [data-transparent-background='top']:hover .header__row--top, [data-transparent-background='top']:focus-within .header__row--top, [data-transparent-background='both']:hover .header__row--top, [data-transparent-background='both']:focus-within .header__row--top { --color-foreground: inherit; --color-foreground-rgb: inherit; --color-border: inherit; --color-border-rgb: inherit; --color-primary-button-background: inherit; --color-primary-button-text: inherit; } /* When bottom row has transparent background, make it inherit colors from header component */ [data-transparent-background='bottom']:hover .header__row--bottom, [data-transparent-background='bottom']:focus-within .header__row--bottom, [data-transparent-background='both']:hover .header__row--bottom, [data-transparent-background='both']:focus-within .header__row--bottom { --color-foreground: inherit; --color-foreground-rgb: inherit; --color-border: inherit; --color-border-rgb: inherit; --color-primary-button-background: inherit; --color-primary-button-text: inherit; } .header-section { position: relative; z-index: var(--layer-menu-drawer); } /* need default values for non-flash transitions on first overflow menu open */ #header-component { --submenu-height: 0px; --full-open-header-height: 0px; } #header-group:has(#header-component[sticky]) { display: contents; } .header-section:has(> #header-component[sticky='always']), .header-section:has(> #header-component[sticky='scroll-up'][data-sticky-state='active']) { position: sticky; /* Use -1 instead of 0 so intersection observer can track sticky state */ top: -1px; z-index: var(--layer-menu-drawer); } .header[data-sticky-state] { transition: opacity var(--animation-speed) var(--animation-easing); opacity: 1; } .header[data-sticky-state='active'] { view-transition-name: sticky-header; } :active-view-transition-type(empty-cart-drawer) { .header[data-sticky-state='active'] { view-transition-name: none; } } /* A view-transition-name makes the header a backdrop root, so the menu drawer's backdrop-filter would dim only the header instead of the page. */ .header[data-sticky-state='active']:has(.menu-drawer-container[open]) { view-transition-name: none; } .header[data-sticky-state='idle'] { opacity: 0; } /* ================================ * Underlays * ================================ */ .header__underlay { position: absolute; inset: 0; } .header__underlay-closed { height: var(--closed-underlay-height, 100%); z-index: var(--layer-lowest); background: linear-gradient( var(--color-background-top-row) 0 var(--top-row-height), var(--color-background-bottom-row) var(--top-row-height) var(--header-height) ); transition: height var(--animation-speed-slow) var(--ease-out-cubic); } .header__underlay-open { height: var(--full-open-header-height); background: linear-gradient( var(--color-background-top-row) 0 var(--top-row-height), var(--color-background-bottom-row) var(--top-row-height) var(--header-height), var(--color-submenu) var(--header-height) 100% ); /* header-height is updated via js, the transition works automagically */ transition: height var(--submenu-animation-speed) var(--ease-out-cubic); } .header__underlay-open::after { content: ''; position: absolute; inset: 0; box-shadow: var(--shadow-popover); clip-path: inset(var(--header-height) 0 -100px 0); /* stylelint-disable-line */ transition: height var(--submenu-animation-speed) var(--ease-out-cubic); } /* When top row has transparent background, swap underlay to merchant's chosen color at full opacity */ [data-transparent-background='top']:hover, [data-transparent-background='top']:focus-within, [data-transparent-background='both']:hover, [data-transparent-background='both']:focus-within { :is(.header__underlay-open, .header__underlay-closed) { --color-background-top-row: var(--color-background); } } /* When bottom row has transparent background, swap underlay to merchant's chosen color at full opacity */ [data-transparent-background='bottom']:hover, [data-transparent-background='bottom']:focus-within, [data-transparent-background='both']:hover, [data-transparent-background='both']:focus-within { :is(.header__underlay-open, .header__underlay-closed) { --color-background-bottom-row: var(--color-background); } } [data-submenu-overlap-bottom-row] { .header__underlay-open { background: linear-gradient( var(--color-background-top-row) 0 var(--top-row-height), var(--color-submenu) var(--top-row-height) 100% ); } .header__row--bottom { z-index: var(--layer-lowest); } } [data-header-rows='single'] .header__underlay-closed { background: var(--color-background-top-row); } [data-header-rows='single'] .header__underlay-open { background: linear-gradient( var(--color-background-top-row) 0 var(--top-row-height), var(--color-submenu) var(--top-row-height) 100% ); } /* End Underlays ================ */ .header__row { /* The account component uses a different background color, but we need to override it to inherit the color of the header row */ --color-account-icon: var(--color-foreground); position: relative; /* Overwrite color from section settings, background is controlled by the underlays */ /* stylelint-disable-next-line declaration-no-important */ background-color: transparent !important; &:has(.mega-menu__list:hover), &:has(.menu-list__submenu:not([inert])) { /* Only elevate the row when the submenu is open to avoid overlapping other elevated content */ z-index: var(--layer-heightened); } } .header__row--top:not(.divider--page-width), .header__row--top.divider--page-width .header__columns, .header__row--bottom { border-bottom: var(--border-bottom-width) solid var(--border-bottom-color, var(--color-border)); } @media screen and (max-width: 749px) { .header__row--top:not(.divider--page-width), .header__row--top.divider--page-width .header__columns { border-bottom-width: var(--border-bottom-width-mobile); border-bottom-color: var(--border-bottom-color-mobile); } } #header-component[data-menu-style='drawer'] .header__row--top:not(.divider--page-width), #header-component[data-menu-style='drawer'] .header__row--top.divider--page-width .header__columns { border-bottom-width: var(--border-bottom-width-mobile); border-bottom-color: var(--border-bottom-color-mobile); } .header__row.divider--page-width:not(.section--page-width) .header__columns { @media screen and (min-width: 750px) { padding-inline-start: 0; padding-inline-end: 0; margin-inline-start: var(--page-margin); margin-inline-end: var(--page-margin); } } .header__column { display: flex; align-items: center; /* on mobile, header__column nodes are ignored to create a new grid-template-area based on all visible content */ @media screen and (max-width: 749px) { display: contents; } } .header__column--left, .header__column--center { gap: var(--gap-xl); grid-area: left; } .header__column--center { justify-content: center; grid-area: center; header-menu:only-child .overflow-menu::part(list) { justify-content: center; } } .header__column--right { gap: var(--gap-xl); justify-content: flex-end; grid-area: right; .overflow-menu::part(list) { justify-content: flex-end; } } .header__columns { /* Three column layout */ --header-left: 1fr; --header-center: auto; --header-right: 1fr; --header-template-columns: var(--header-left) var(--header-center) var(--header-right); /* Mobile layout */ --header-mobile-bookend: 44px; display: grid; grid-template-areas: 'left center right'; grid-gap: var(--gap-xl); grid-template-columns: var(--header-template-columns); /* If menu is in center column */ &:has(.header__column--center header-menu) { --header-center: auto; --header-left: minmax(max-content, 1fr); --header-right: minmax(max-content, 1fr); } /* If there is no center column, make the column the menu is in grow eagerly */ &:where(:not(:has(.header__column--center))) { @media screen and (min-width: 750px) { --header-template-columns: var(--header-left) var(--header-right); grid-template-areas: 'left right'; } /* If the header-menu is in the right column */ &:has(.header__column--right header-menu) { --header-right: auto; --header-left: minmax(max-content, 1fr); } /* If the header-menu is in the left column */ &:has(.header__column--left header-menu) { --header-left: auto; --header-right: minmax(max-content, 1fr); } } @media screen and (max-width: 749px) { --header-template-columns: var(--header-mobile-bookend) var(--header-mobile-bookend) 1fr var(--header-mobile-bookend) var(--header-mobile-bookend); grid-template-areas: 'leftA leftB center rightA rightB'; grid-column: span 3; column-gap: 0; align-items: center; padding-block: 0; /* Match the page gutter so edge icons visually align with in-flow content. --page-margin already includes the larger safe-area inset at this breakpoint. */ padding-inline: var(--page-margin); .header-logo { grid-area: center; } &:not(:has(header-actions)) .search-action { grid-area: leftB; } &:not(:has(shopify-account)) .search-action { grid-area: rightA; } .search-action { grid-area: leftB; } .header__icon--menu { justify-content: flex-start; padding-inline: 0; } header-actions { grid-area: rightB; justify-content: flex-end; } } } /* not ideal but we need to duplicate these styles for when touch comes into play We could avoid the duplication using js to set the data-menu-style attribute on small screens instead of using @media queries */ #header-component[data-menu-style='drawer'] .header__columns { --header-template-columns: var(--header-mobile-bookend) var(--header-mobile-bookend) 1fr var(--header-mobile-bookend) var(--header-mobile-bookend); grid-template-areas: 'leftA leftB center rightA rightB'; grid-column: span 3; column-gap: 0; align-items: center; padding-block: 0; /* Match the page gutter so edge icons visually align with in-flow content. --page-margin already includes the larger safe-area inset at this breakpoint. */ padding-inline: var(--page-margin); .header-logo { grid-area: center; } &:not(:has(header-actions)) .search-action { grid-area: leftB; } &:not(:has(shopify-account)) .search-action { grid-area: rightA; } .search-action { grid-area: leftB; } /* Pin glyphs to the content edge of the 44px bookend; keep the full tap target */ .header__icon--menu { justify-content: flex-start; padding-inline: 0; } header-actions { grid-area: rightB; justify-content: flex-end; } } /* Single column layout if there are no columns within */ .header__columns:not(:has(.header__column)) { grid-template-columns: 1fr; } /* Check for hover support to avoid unnecessary expensive recalculations when tapping on mobile */ @media (hover: hover) { /* Column-specific dimming effect when any interactive element is hovered Multiple selectors for performance: each simple :has() check is faster than one complex selector with multiple conditions */ .header__column:has(header-menu:hover), .header__column:has(.header-actions__action:hover), .header__column:has(.header__icon--menu:hover) { header-menu:not(:hover), .header-actions__action:not(:hover), .header__icon--menu:not(:hover) { opacity: var(--opacity-subdued-text); transition: opacity var(--animation-speed) var(--animation-easing); } } } /* Ensure smooth transitions for all interactive elements */ header-menu, .header-actions__action, .header__icon--menu { transition: opacity var(--animation-speed) var(--animation-easing); } /* Header action button styles */ .header-actions__action { --button-color: var(--color-foreground); color: var(--button-color); cursor: pointer; display: flex; justify-content: center; &:hover { --button-color: var(--color-foreground); } } .header-actions__action:not(.account-button) .svg-wrapper { height: var(--button-size); width: var(--button-size); } .header-actions__action:not(.account-button) svg { width: var(--icon-size-md); height: var(--icon-size-md); } .header:has(#Details-menu-drawer-container[open]) { contain: style; } .header.header--compact { --header-padding: var(--padding-2xs); } .header__columns { --padding-block-start: var(--header-padding); --padding-block-end: var(--header-padding); } .header:not(.header--compact) .header__row--bottom { --header-padding: var(--padding-xs); } .header--collapse-row-paddings { .header__row--top .header__columns { --padding-block-end: 0px; } .header__row--bottom .header__columns { --padding-block-start: 0px; } } /* Transparent header layout. Keep this in sync with snippets/section.liquid's first-section height compensation. Header-dependent page rules use #header-group as the :has() subject and reach the page with `~`. With body as the subject, every [open] or [aria-expanded] change in the header restyles the whole page. */ #header-group:has(> .header-section > #header-component[transparent]) ~ .content-for-layout > .shopify-section:first-child { margin-top: calc(var(--header-group-height) * -1); } #header-group:has(> .header-section > #header-component[transparent]) > .header-section { z-index: var(--layer-menu-drawer); } /* All other header group content should be beneath the floating header, but above the rest of the page content. Keep a class at the end of this selector: a `*` there gives the browser nothing to filter on, and it then recalculates the styles of every element below. */ #header-group:has(> .header-section > #header-component[transparent]) > .shopify-section:not(.header-section) { z-index: calc(var(--layer-menu-drawer) - 1); } /* When the header is transparent, add a margin to a potential header-section below it */ .header-section:has(.header[transparent]) + .shopify-section { margin-top: var(--header-height); } /* Optimize layout performance for hidden menus */ .header-menu .menu-list__submenu { content-visibility: auto; contain-intrinsic-size: 0px 500px; } /* Force visibility when open/animating and in overflow submenu to prevent layout issues */ .header-menu details[open] .menu-list__submenu, .header-menu .menu-list__submenu[data-active], .header-menu .menu-list__list-item[slot='overflow'] .menu-list__submenu { content-visibility: visible; } /* Dropdown Localization Styles */ .dropdown-localization__button { display: flex; position: relative; align-items: center; gap: 4px; font-family: var(--menu-localization-font); font-size: var(--menu-localization-font-size); font-weight: var(--menu-top-level-font-weight); padding-inline: var(--padding-2xs); margin-inline: calc(-1 * var(--padding-2xs)); } .dropdown-localization__button .svg-wrapper.icon-caret { height: var(--icon-size-xs); width: var(--icon-size-xs); inset-inline-end: var(--margin-xs); top: calc(50% - var(--padding-2xs)); flex-shrink: 0; transition: transform var(--animation-speed) var(--animation-easing); } .dropdown-localization__button .icon-flag { width: var(--menu-localization-font-size, var(--icon-size-sm)); height: var(--menu-localization-font-size, var(--icon-size-sm)); clip-path: circle(50%); /* stylelint-disable-line */ background-position: center; background-size: cover; margin-inline-end: 4px; position: relative; } .dropdown-localization__button .icon-flag::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 var(--size-shadow) var(--color-shadow); border-radius: 50%; } .dropdown-localization__button[aria-expanded='true'] .icon-caret svg { transform: rotate(180deg); } .dropdown-localization__button, .dropdown-localization__button:hover { box-shadow: none; background-color: transparent; border-color: transparent; border-radius: 0; } dropdown-localization-component .localization-form__list { max-height: 20.5rem; } .localization-wrapper { position: fixed; z-index: var(--layer-raised); border-radius: var(--style-border-radius-popover); transition-property: display, opacity, translate; transition-duration: 0.3s; transition-timing-function: var(--ease-out-quad); transition-behavior: allow-discrete; translate: 0 20px; opacity: 0; } .localization-wrapper:not([hidden]) { translate: 0 0; opacity: 1; } @starting-style { .localization-wrapper:not([hidden]) { translate: 0 20px; opacity: 0; } } dropdown-localization-component { position: relative; background-color: transparent; } dropdown-localization-component .country-filter { position: relative; padding: 8px; } dropdown-localization-component .country-filter__input { border: none; } dropdown-localization-component .localization-form__list-item { margin-inline: 8px; } dropdown-localization-component .localization-wrapper { box-shadow: var(--shadow-popover); border: var(--style-border-popover); background-color: var(--color-background); max-height: 27.5rem; position: absolute; top: calc(100% + 10px); z-index: calc(var(--layer-header-menu) + 1); } dropdown-localization-component .localization-wrapper.right-bound { inset-inline-end: 0; inset-inline-start: unset; } dropdown-localization-component .localization-wrapper.left-bound { inset-inline-start: -8px; inset-inline-end: unset; } /* Additional specificity due to dropdown-localization-component getting a low score */ dropdown-localization-component .language-selector.language-selector { padding-block: 10px; padding-inline: 16px 8px; } dropdown-localization-component .localization-form__currency { width: max-content; opacity: 0; visibility: hidden; transition: none; } dropdown-localization-component .localization-form__select:hover { background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8)); } dropdown-localization-component :is( .localization-form__list-item:hover, .localization-form__list-item[aria-selected='true'], .localization-form__list-item[aria-current='true'] ) .localization-form__currency { opacity: 1; color: var(--color-foreground-muted); transition: opacity var(--animation-speed-slow) var(--animation-easing); visibility: visible; } .dropdown-localization .language-selector:where(:not(.language-selector--top-shadow)) { font-weight: var(--menu-top-level-font-weight); } .dropdown-localization:not(dropdown-localization-component) .language-selector { font-family: var(--menu-localization-font); font-size: var(--menu-localization-font-size); } /* END_SECTION:header */ /* START_SECTION:hero (INDEX:41) */ .hero-wrapper { --hero-height-offset: 0px; } /* Being extra specific in the selector for performance reasons. Header-dependent page rules use #header-group as the :has() subject and reach the page with `~`. With body as the subject, every [open] or [aria-expanded] change in the header restyles the whole page. */ #header-group:has(> .header-section > #header-component) ~ * .hero-wrapper:first-child { --hero-height-offset: var(--header-group-height, 0); } .hero { position: relative; min-height: calc(var(--hero-min-height) - var(--hero-height-offset)); } .hero[data-shopify-visual-preview] { --hero-min-height: 600px; min-height: 600px; } .hero__container { position: relative; overflow: hidden; border: var(--hero-border-width) var(--hero-border-style) rgb(var(--color-border-rgb) / var(--hero-border-opacity)); min-height: inherit; align-items: var(--vertical-alignment-mobile); justify-content: var(--horizontal-alignment); z-index: var(--layer-base); @media screen and (min-width: 750px) { align-items: var(--vertical-alignment); } } .hero__content-wrapper.page-width { grid-column: 2 / 3; } .hero__content-wrapper { position: relative; inset: 0; z-index: var(--layer-flat); } .hero__content-wrapper .group-block-content { position: relative; } .hero__media-grid { position: absolute; inset: 0; display: grid; grid-column: 1 / -1; grid-template-columns: repeat(var(--hero-media-count, 1), 1fr); } .hero--auto .hero__media { aspect-ratio: var(--hero-media-aspect-ratio); } .hero--no-blocks-auto-height { .hero__media { width: 100%; aspect-ratio: auto; } .hero__media-grid { /* When there are no blocks and the height is auto, allow the image to appear. */ position: relative; } } .hero__media-wrapper { overflow: hidden; position: relative; } .hero__media { height: 100%; width: 100%; object-fit: cover; object-position: center center; overflow: hidden; position: relative; z-index: var(--layer-base); } /* Mobile/Desktop media visibility */ .hero__media-wrapper--mobile { display: none; } .hero__media-wrapper--desktop { display: block; } @media screen and (max-width: 749px) { .hero__media-wrapper--desktop { display: none; } .hero__media-wrapper--mobile { display: block; } .hero__media-grid { grid-template-columns: repeat(var(--hero-media-count-mobile, 1), 1fr); } /* Mobile stacking */ .hero--stack-mobile .hero__media-grid { grid-template-columns: 1fr; grid-template-rows: repeat(var(--hero-media-count-mobile, 1), calc(100% / var(--hero-media-count-mobile, 1))); } } .hero__link { position: absolute; inset: 0; grid-column: 1 / -1; } .hero__media-grid, .hero__content-wrapper { pointer-events: none; :is(a, button, input, textarea, select, details, summary) { pointer-events: auto; } /* * App blocks own their interactive markup, and an app is free to render it into a shadow * root that no selector here can reach. Restoring pointer events on the app block wrapper * covers both cases, because pointer-events inherits into the shadow tree. */ .shopify-app-block { pointer-events: auto; } } .hero__content-wrapper--design-mode * { pointer-events: auto; } .hero[data-blur-shadow='true'] { --blurred-reflection-filter-saturate: saturate(1.5); --blurred-reflection-mask-image: linear-gradient(to bottom, #000 0%, #000 60%, transparent 100%); --blurred-reflection-box-shadow: rgb(0 0 0 / 5%) 0 0 1rem; --blurred-reflection-filter-blur: blur(20px); --blurred-reflection-scale: scale(2, 1.25); --blurred-reflection-padding-block-end: 60px; } .hero[data-blur-shadow='true'] .hero__container::before { content: ''; position: absolute; inset: 0; box-shadow: var(--blurred-reflection-box-shadow); mix-blend-mode: overlay; pointer-events: none; z-index: -1; } .hero__blurred-image { position: absolute; inset: 0; z-index: -1; mask-image: var(--blurred-reflection-mask-image); filter: var(--blurred-reflection-filter-saturate); pointer-events: none; transform: translateY(50%); overflow: hidden; } .hero__blurred-image--desktop { display: none; @media screen and (min-width: 750px) { display: block; } } .hero__blurred-image--mobile { display: block; @media screen and (min-width: 750px) { display: none; } } .hero__blurred-image img, .hero__blurred-image svg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; filter: var(--blurred-reflection-filter-blur); opacity: var(--blur-opacity); transform: var(--blurred-reflection-scale); padding-block-end: var(--blurred-reflection-padding-block-end); &:not(:only-child) { width: 50%; &:last-child { inset-inline-end: 0; inset-inline-start: auto; } } } /* END_SECTION:hero */ /* START_SECTION:layered-slideshow (INDEX:42) */ .layered-slideshow-section { position: relative; } layered-slideshow-component { display: block; width: 100%; } .layered-slideshow__container { --radius: calc(var(--corner-radius, 1) * 1rem); --button-width: 56px; --border-color: var(--color-background); --inactive-tabs-width: calc((var(--total-tabs) - 1) * var(--button-width)); --active-panel-width: calc(100cqi - var(--inactive-tabs-width)); width: 100%; position: relative; container-type: inline-size; border-radius: var(--radius); overflow: hidden; } .layered-slideshow__container:not([size='auto']) { height: 100%; } .layered-slideshow__container[size='auto'] { height: auto; } @media screen and (min-width: 750px) { layered-slideshow-component { min-height: var(--layered-min-height-desktop, 0px); } } .layered-slideshow__tablist { display: grid; grid-template-columns: var(--active-tab); position: absolute; inset: 0; height: 100%; pointer-events: none; z-index: var(--layer-raised); } .layered-slideshow__tablist button { width: var(--button-width); height: 100%; pointer-events: all; opacity: 0; cursor: grab; border: none; background: transparent; padding: 0; position: relative; outline: none; transition: opacity 0.2s ease; } .layered-slideshow__tablist button:active { cursor: grabbing; } .layered-slideshow__tablist button[aria-selected='true'] { cursor: default; } .layered-slideshow__tablist button:focus-visible { opacity: 1; } .layered-slideshow__container[data-dragging] { cursor: grabbing; } .layered-slideshow__container[data-instant-transitions], .layered-slideshow__container:is([data-dragging], [data-instant-transitions]) :is( .layered-slideshow__tablist, .layered-slideshow__panels, .layered-slideshow__panel-content, .layered-slideshow__content ) { transition: none; } .layered-slideshow__panels { display: grid; grid-template-columns: var(--active-tab); height: 100%; overflow: hidden; } .layered-slideshow__panel { position: relative; height: 100%; min-width: var(--button-width); border-radius: var(--radius); z-index: calc(var(--total-tabs) - var(--index)); } .layered-slideshow__panel:first-child .layered-slideshow__panel-content { width: var(--active-panel-width); border-inline-start: var(--border-width) solid var(--border-color); } .layered-slideshow__panel:not(:first-child) .layered-slideshow__content { padding-inline-start: calc((var(--radius) * 2) + var(--padding-inline-start, 0px)); } .layered-slideshow__panel-content { border: var(--border-width) solid var(--border-color); border-inline-start: none; border-radius: var(--radius); position: absolute; inset-inline-end: 0; top: 0; bottom: 0; overflow: hidden; width: calc(var(--active-panel-width) + (var(--radius) * 2)); } .layered-slideshow__panel-content :is(img, video, svg) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* Video poster visibility - poster shows initially and hides when panel becomes active */ .layered-slideshow__video-poster { z-index: 1; } .layered-slideshow__video { z-index: 0; } /* When panel is active, hide poster so video is visible */ .layered-slideshow__panel:not([inert]) .layered-slideshow__video-poster { opacity: 0; } @media (prefers-reduced-motion: no-preference) { .layered-slideshow__video-poster { transition: opacity 0.3s ease; } } .layered-slideshow__content { height: 100%; position: relative; z-index: 1; } .layered-slideshow__content > * { margin: auto; } .layered-slideshow__content.background-transparent { background-color: transparent; } .layered-slideshow__panel--drop-shadow:not(:last-child) .layered-slideshow__panel-content { box-shadow: 4px 0 12px 0 rgba(0, 0, 0, 0.1); } @media screen and (min-width: 750px) { [dir='rtl'] .layered-slideshow__panel--drop-shadow:not(:last-child) .layered-slideshow__panel-content { box-shadow: -4px 0 12px 0 rgba(0, 0, 0, 0.1); } } /* Shared transitions (desktop and mobile) */ @media (prefers-reduced-motion: no-preference) { .layered-slideshow__panels, .layered-slideshow__tablist { transition-property: grid-template-columns, grid-template-rows; transition-duration: 0.6s; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } .layered-slideshow__content { opacity: 0; transform: translateY(0.5lh); transition: opacity 0.48s, transform 0.48s; } .layered-slideshow__panel:not([inert]) .layered-slideshow__content { opacity: 1; transform: translateY(0); transition-delay: 0.24s; } } @media screen and (max-width: 749px) { .layered-slideshow__container { --button-height: 44px; --inactive-tabs-height: calc((var(--total-tabs) - 1) * var(--button-height)); } .layered-slideshow__container:not([size='auto']) { --layered-total-height: calc(var(--layered-panel-height-mobile, 260px) + var(--inactive-tabs-height)); --active-panel-height: var(--layered-panel-height-mobile, 260px); min-height: var(--layered-total-height); height: var(--layered-total-height); } .layered-slideshow__container[size='auto'] { height: auto; } .layered-slideshow__tablist { grid-template-rows: var(--active-tab); grid-template-columns: 1fr; grid-auto-flow: row; } .layered-slideshow__tablist button { width: 100%; height: var(--button-height); } .layered-slideshow__panels { grid-template-rows: var(--active-tab); grid-template-columns: 1fr; grid-auto-flow: row; } .layered-slideshow__panel { min-height: var(--button-height); width: 100%; height: 100%; position: relative; z-index: calc(var(--total-tabs) - var(--index)); } .layered-slideshow__panel:first-child .layered-slideshow__panel-content { width: 100%; height: var(--active-panel-height); border-top: var(--border-width) solid var(--border-color); inset-inline: 0; border-inline-start: var(--border-width) solid var(--border-color); } .layered-slideshow__panel-content { position: absolute; border: var(--border-width) solid var(--border-color); border-radius: var(--radius); box-sizing: border-box; width: 100%; /* Clamp overlap to (button-height - border-width) to prevent visual issues with large radius + border */ height: calc(var(--active-panel-height) + min(var(--radius) * 2, var(--button-height) - var(--border-width))); top: unset; inset-inline: 0; bottom: 0; overflow: hidden; } .layered-slideshow__panel:not(:first-child) .layered-slideshow__panel-content { border-top: none; } .layered-slideshow__panel:not(:first-child) { margin-top: calc(var(--border-width) * -1); } .layered-slideshow__content { padding-inline-start: var(--padding-inline-start, 0px); padding-inline-end: var(--padding-inline-end, 0px); } /* Adjust padding for non-first slides to account for radius overlap at the top (not sides on mobile) */ .layered-slideshow__panel:not(:first-child) .layered-slideshow__content { padding-block-start: calc((var(--radius) * 2) + var(--padding-block-start, 0px)); padding-inline-start: var(--padding-inline-start, 0px); } .layered-slideshow__panel--drop-shadow:not(:last-child) .layered-slideshow__panel-content { box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1); } } /* END_SECTION:layered-slideshow */ /* START_SECTION:logo (INDEX:43) */ .logo-section { width: calc(var(--logo-width) + var(--padding-inline-start) + var(--padding-inline-end)); max-width: 100%; max-height: calc(var(--logo-height, 100%) + var(--padding-block-start) + var(--padding-block-end)); font-size: var(--logo-height); display: flex; @media screen and (max-width: 749px) { max-height: calc( var(--logo-height-mobile, var(--logo-height, 100%)) + var(--padding-block-start) + var(--padding-block-end) ); font-size: var(--logo-height-mobile, var(--logo-height)); width: calc( var(--logo-width-mobile, var(--logo-width)) + var(--padding-inline-start) + var(--padding-inline-end) ); } } .logo-section--center { margin-inline: auto; } .logo-section--flex-end { margin-inline-start: auto; } .logo-section--flex-start { margin-inline-end: auto; } .logo-section__image-wrapper { display: flex; width: 100%; max-width: 100%; max-height: 100%; } .logo-section__image { object-fit: contain; width: 100%; } /* END_SECTION:logo */ /* START_SECTION:main-blog-post (INDEX:45) */ .blog-post-comments-container { width: 100%; max-width: var(--normal-content-width); margin: 0 auto; } .blog-post-comments { display: flex; flex-direction: column; gap: var(--gap-3xl); } .blog-post-comment__author { display: flex; align-items: center; gap: var(--gap-2xs); margin-top: var(--margin-md); font-size: var(--font-size--body-sm); color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text)); } .blog-post-comments-pagination { display: flex; justify-content: center; gap: var(--gap-2xs); } .blog-post-comments-pagination, .blog-post-comments-pagination a { color: var(--color-foreground); } .blog-post-comments-pagination .current { color: var(--color-foreground); } .blog-post-comments-pagination .current, .blog-post-comments-pagination a { display: block; padding: var(--padding-2xs) var(--padding-xs); } .blog-post-comments-pagination .current, .blog-post-comments-pagination a:hover { border-bottom: 1px solid var(--color-foreground); } /* END_SECTION:main-blog-post */ /* START_SECTION:main-blog (INDEX:46) */ /** * Blog posts page layout */ .blog-posts { --page-content-width: var(--narrow-page-width); --page-width: calc(var(--page-content-width) + (var(--page-margin) * 2)); /* Keep the responsive image sizes above in sync with this gap. */ --columns-gap: 36px; --rows-gap: 36px; } .blog-posts-container { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; width: 100%; column-gap: var(--columns-gap); row-gap: var(--rows-gap); } /** * Blog post item grid positioning and scaling. * Layout is calculated in Liquid based on total article count. * Mobile overrides are applied per-item in inline styles for proper specificity. */ .blog-post-item { grid-column: span var(--col-span); background-color: var(--color-background); } /** * When there's no image, the blog post item has a border. */ .blog-post-item { border: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-20)); padding: 0 1rem 1rem; } .blog-post-item:has(.blog-post-card__image-container) { border: none; padding: 0; } /* END_SECTION:main-blog */ /* START_SECTION:main-cart (INDEX:47) */ .cart-page { display: grid; grid-template-columns: 1fr; gap: 0 var(--padding-5xl); } .cart-page--empty { display: flex; flex-direction: column; align-items: center; justify-content: center; } .cart-page--empty .cart-page__title, .cart-page--empty .cart-page__more-blocks { margin-top: var(--margin-6xl); } .cart-page__more-blocks { width: 100%; } .cart-page--empty .cart-title { text-align: center; } .cart-page__main { grid-column: 1; } .cart-page__summary { padding-top: var(--padding-xl); } .cart-page__title + .cart-page__items { margin-block-start: var(--margin-lg); } @media screen and (min-width: 750px) { .cart-page { grid-template-columns: 1fr min(50vw, var(--sidebar-width)); grid-template-rows: min-content min-content 1fr; } .cart-page__summary { display: grid; height: 100%; grid-column: 2; grid-row: 1 / -1; align-self: stretch; grid-template-rows: subgrid; padding-top: 0; /* needed to support blurred effect from hero section */ position: relative; } .section--page-width .cart-page:has(.cart-summary--extend) { grid-column: 2 / 4; grid-template-columns: 1fr minmax( var(--sidebar-width), calc((100vw - var(--page-width)) / 2 + var(--sidebar-width)) ); } } @media screen and (min-width: 1400px) { .cart-page { grid-template-columns: 1fr var(--sidebar-width); } } /* END_SECTION:main-cart */ /* START_SECTION:marquee (INDEX:51) */ marquee-component { display: block; width: 100%; overflow: hidden; } .marquee__wrapper { display: flex; gap: var(--marquee-gap); width: fit-content; white-space: nowrap; } .marquee__content { min-width: max-content; display: flex; gap: var(--marquee-gap); } .marquee__content :is(p, h1, h2, h3, h4, h5, h6) { white-space: nowrap; } .marquee__content .marquee__repeated-items * { max-width: none; } .marquee__repeated-items { min-width: max-content; display: flex; gap: var(--marquee-gap); align-items: center; justify-content: center; } .marquee__repeated-items > * { align-content: center; } @media (prefers-reduced-motion: no-preference) { marquee-component:not([data-disabled]) .marquee__wrapper { animation: marquee-motion var(--marquee-speed) linear infinite var(--marquee-direction); } } @keyframes marquee-motion { to { transform: translate3d(calc(-50% - (var(--marquee-gap) / 2)), 0, 0); } } /* END_SECTION:marquee */ /* START_SECTION:media-with-content (INDEX:52) */ .section--page-width { &.media-with-content { grid-template-areas: 'margin-left media margin-right' 'margin-left content margin-right'; @media screen and (min-width: 750px) { /* Wide proportion is media 3.5 parts, content 2.5 parts. Which equals 7|5. So divide the central column by 7+5 and multiply accordingly */ --media-with-content-grid-columns: var(--full-page-grid-margin) calc((var(--full-page-grid-central-column-width) / 12) * 7) calc((var(--full-page-grid-central-column-width) / 12) * 5) var(--full-page-grid-margin); grid-template-areas: 'margin-left media content margin-right'; } } &.media-with-content--media-right { @media screen and (min-width: 750px) { --media-with-content-grid-columns: var(--full-page-grid-margin) calc((var(--full-page-grid-central-column-width) / 12) * 5) calc((var(--full-page-grid-central-column-width) / 12) * 7) var(--full-page-grid-margin); grid-template-areas: 'margin-left content media margin-right'; } } &.media-with-content--medium { @media screen and (min-width: 750px) { --media-with-content-grid-columns: var(--full-page-grid-margin) repeat(2, calc(var(--full-page-grid-central-column-width) / 2)) var(--full-page-grid-margin); } } &.media-with-content--narrow.media-with-content--media-right { @media screen and (min-width: 750px) { --media-with-content-grid-columns: var(--full-page-grid-margin) calc((var(--full-page-grid-central-column-width) / 3) * 2) calc(var(--full-page-grid-central-column-width) / 3) var(--full-page-grid-margin); } } &.media-with-content--narrow { @media screen and (min-width: 750px) { --media-with-content-grid-columns: var(--full-page-grid-margin) calc(var(--full-page-grid-central-column-width) / 3) calc((var(--full-page-grid-central-column-width) / 3) * 2) var(--full-page-grid-margin); } } } .section--full-width { &.media-with-content--media-right { @media screen and (min-width: 750px) { --media-with-content-grid-columns: 2.5fr 3.5fr; grid-template-areas: 'content media'; } } &.media-with-content--medium { @media screen and (min-width: 750px) { --media-with-content-grid-columns: 1fr 1fr; } } &.media-with-content--narrow { @media screen and (min-width: 750px) { --media-with-content-grid-columns: 2fr 4fr; } } &.media-with-content--narrow.media-with-content--media-right { @media screen and (min-width: 750px) { --media-with-content-grid-columns: 4fr 2fr; } } } /* Keep the CSS specificity lower assuming that liquid won't assign this class with a full width section */ .media-with-content.media-with-content--media-extend { grid-template-columns: var(--media-with-content-grid-columns); grid-template-areas: 'media media media' 'margin-left content margin-right'; @media screen and (min-width: 750px) { grid-template-areas: 'media media content margin-right'; } } .media-with-content--media-extend.media-with-content--media-right { @media screen and (min-width: 750px) { grid-template-areas: 'margin-left content media media'; } } .media-with-content--media-right { @media screen and (min-width: 750px) { grid-template-areas: 'margin-left content media media'; } } .media-with-content { --media-with-content-grid-columns: var(--full-page-grid-with-margins); grid-template-columns: var(--media-with-content-grid-columns); grid-template-areas: 'media media media' 'content content content'; @media screen and (min-width: 750px) { --media-with-content-grid-columns: 3.5fr 2.5fr; /* Default desktop layout is wide media, on the left, in full page section */ grid-template-areas: 'media content'; } .media-block { grid-area: media; } .media-with-content__content { grid-area: content; } /* Inner blocks spacing */ .media-with-content__content > .group-block-content { padding-inline: var(--page-margin); padding-block: calc(2 * var(--page-margin)); @media screen and (min-width: 750px) { padding-block: var(--page-margin); } } &.section--page-width .media-with-content__content > .group-block-content { padding-inline: 0; @media screen and (min-width: 750px) { padding-inline-start: var(--page-margin); } } &.section--page-width.media-with-content--media-right .media-with-content__content > .group-block-content { padding-inline-end: var(--page-margin); padding-inline-start: 0; } } .media-with-content[data-shopify-visual-preview] { --hero-min-height: 500px; min-height: 500px; } /* END_SECTION:media-with-content */ /* START_SECTION:password-footer (INDEX:70) */ .password-footer { display: flex; flex-direction: column; align-items: center; gap: var(--gap-sm); padding-block: var(--padding-xl); } .password-footer__powered-by { margin: 0; display: flex; align-items: center; gap: var(--padding-xs); height: 1em; > a { display: flex; } .icon-shopify { display: inline; height: 1.3em; color: var(--color-foreground); } } .password-footer__links { display: flex; align-items: center; gap: var(--gap-2xl); @media screen and (max-width: 749px) { flex-direction: column; gap: var(--gap-sm); } } .password-footer__admin-link { margin: 0; } .password-footer__button { height: var(--minimum-touch-target); background-color: transparent; color: var(--color-foreground); cursor: pointer; text-decoration: underline; &:hover { color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text)); text-decoration: none; } } /* END_SECTION:password-footer */ /* START_SECTION:password (INDEX:71) */ .section-password { flex-grow: 1; display: flex; } .password-content { text-align: center; } /* END_SECTION:password */ /* START_SECTION:product-hotspots (INDEX:74) */ /* Section layout */ .section-product-hotspots { position: relative; } .section-product-hotspots__wrapper { display: flex; flex-direction: column; gap: var(--gap); width: 100%; height: 100%; } /* Image container */ .section-product-hotspots__content { position: relative; aspect-ratio: var(--ratio, 21 / 9); overflow: hidden; } /* Hide hotspots without products on touch devices (tablets included) */ @media (hover: none) { .hotspot.hotspot--hidden-touch { display: none; } } /* Responsive adjustments */ @media screen and (max-width: 749px) { /* Hide dialog on mobile - hotspot opens quick-add modal instead */ .hotspot .hotspot-dialog { display: none; } } /* Hotspot button - positioned element with clickable area */ .hotspot { position: absolute; cursor: pointer; width: var(--button-size); height: var(--button-size); display: flex; align-items: center; justify-content: center; background: transparent; border: none; padding: 0; font: inherit; color: inherit; outline: none; transition: border-color 0.2s ease-out, box-shadow 0.2s ease-out; z-index: var(--layer-flat); } .hotspot:has(.hotspot-dialog[open]) { z-index: var(--layer-raised); } .hotspot .hotspot-trigger { padding: 0; border: none; } .hotspot-dialog__product-content { display: flex; flex-direction: column; justify-content: space-between; padding: var(--padding-xs); padding-inline-start: 0; overflow: hidden; } /* Visual target circle */ .hotspot-trigger { width: var(--hotspot-size); height: var(--hotspot-size); background: var(--hotspot-bg, rgb(0 0 0 / 0.5)); border-radius: 50%; cursor: pointer; position: relative; transition: width 0.1s ease-out, height 0.1s ease-out; } /* On mobile, ensure trigger is tappable */ @media screen and (max-width: 749px) { .hotspot-trigger { cursor: pointer; -webkit-tap-highlight-color: transparent; } } /* Bullseye using ::after pseudo-element */ .hotspot-trigger::after { content: ''; position: absolute; top: 50%; left: 50%; width: calc(var(--hotspot-size) * 0.4); height: calc(var(--hotspot-size) * 0.4); background: var(--hotspot-bullseye, #fff); border-radius: 50%; transform: translate(-50%, -50%); transition: width 0.1s ease-out, height 0.1s ease-out, background 0.1s ease-out; } /* Bullseye grows on hover or when dialog is open (desktop only) */ @media screen and (min-width: 750px) { .hotspot:hover .hotspot-trigger::after, .hotspot:has(.hotspot-dialog[open]) .hotspot-trigger::after { width: calc(var(--hotspot-size) * 0.55); height: calc(var(--hotspot-size) * 0.55); transition: width 0.2s ease-out, height 0.2s ease-out, background 0.2s ease-out; transition-delay: 0.2s; } } .hotspots-container { position: absolute; inset: 0; z-index: var(--layer-flat); overflow: clip; } .hotspots__background-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } /* Dialog positioning */ .hotspot .hotspot-dialog { position: absolute; padding: 0; border-radius: var(--style-border-radius-popover); border: var(--style-border-popover); width: max-content; min-width: var(--minimum-width-dialog); max-width: var(--maximum-width-dialog); box-shadow: var(--shadow-popover); &[data-placement*='bottom'] { --offset-y: 0px; --origin-y: calc(var(--hotspot-size) / 2); top: calc((var(--button-size) - var(--hotspot-size)) / 2 + var(--dialog-vertical-offset, 0px)); bottom: unset; } &[data-placement*='top'] { --offset-y: 0px; --origin-y: calc(100% - (var(--hotspot-size) * 0.5)); top: unset; bottom: calc((var(--button-size) - var(--hotspot-size)) * 0.5 - var(--dialog-vertical-offset, 0px)); } &[data-placement*='left'] { --offset-x: calc((var(--button-size) - var(--hotspot-size)) * 0.5); --origin-x: calc(100% - (var(--hotspot-size) * 0.5)); left: unset; right: 100%; } &[data-placement*='right'] { --offset-x: calc((var(--button-size) - var(--hotspot-size)) * -0.5); --origin-x: calc(var(--hotspot-size) * 0.5); left: 100%; right: unset; } &[data-placement*='center'] { left: 50%; translate: -50% 0; right: unset; } &[data-placement*='center'][data-placement*='bottom'] { --origin-y: calc(var(--hotspot-size) * 0.5); --origin-x: 50%; --offset-y: calc((var(--button-size) - var(--hotspot-size)) * -0.5); /* stylelint-disable-next-line declaration-property-value-disallowed-list */ --offset-x: 0; top: 100%; bottom: unset; margin: 0; } &[data-placement*='center'][data-placement*='top'] { --origin-y: calc(100% - (var(--hotspot-size) * 0.5)); --origin-x: 50%; --offset-y: calc((var(--button-size) - var(--hotspot-size)) * 0.5); /* stylelint-disable-next-line declaration-property-value-disallowed-list */ --offset-x: 0; bottom: 100%; } } .hotspot .hotspot-dialog:is(:focus, :focus-visible), .hotspot .hotspot-dialog__link:is(:focus, :focus-visible) { outline: none; } .hotspot-dialog__product { display: grid; grid-template-columns: auto 1fr; } .hotspot-dialog__product-image, .hotspot-dialog svg.hotspot-dialog__placeholder-product-image { width: var(--width-product-image-dialog); height: var(--width-product-image-dialog); aspect-ratio: 1; padding: var(--padding-product-image-popover, var(--padding-xs)); object-fit: cover; border-radius: var(--style-border-radius-popover); } .hotspot-dialog__link { position: absolute; inset: 0; z-index: var(--layer-flat); } .hotspot-dialog__product-title { margin-block-end: var(--product-title-gap); padding-inline-end: var(--padding-sm); min-width: 0; } .hotspot .hotspot-dialog .hotspot-dialog__sold-out-badge { display: flex; width: fit-content; justify-self: flex-end; align-self: flex-end; justify-content: center; align-items: center; font-size: var(--font-body--size); padding: var(--padding-2xs) var(--padding-sm); background: rgb(var(--color-foreground-rgb) / var(--opacity-10)); border-radius: var(--border-radius-sm); text-transform: uppercase; letter-spacing: var(--letter-spacing-sm); opacity: var(--opacity-80); } /* Dialog transitions */ .hotspot .hotspot-dialog { --hotspot-blur: 4px; --hotspot-scale: 0.8; --hotspot-entry-duration: 0.2s; --hotspot-exit-duration: 0.1s; /* Firefox doesn't have reverse transitions */ /* in webkit/chromium we can set a closing attribute as we transition the exit and hook there */ filter: blur(var(--hotspot-blur)); opacity: 0; transform: scale(var(--hotspot-scale)) translate(0, 0); transition-property: display, opacity, filter, transform; transition-duration: var(--hotspot-entry-duration); transition-timing-function: ease; transform: scale(var(--hotspot-scale)) translate(var(--offset-x), var(--offset-y)); transform-origin: var(--origin-x) var(--origin-y); transition-timing-function: cubic-bezier(0.65, -0.49, 0.35, 1.12); &[data-closing='true'] { transition-duration: var(--hotspot-exit-duration); transition-timing-function: ease-out; transform: scale(1) translate(0, calc(var(--hotspot-size) * 0.25)); } /* We can only set transition-behavior once we've measured the dialog dimensions */ &[data-showing='true'] { transition-behavior: allow-discrete; } } .hotspot .hotspot-dialog[open][data-showing='true'] { opacity: 1; transform: scale(1) translate(0, 0); filter: blur(0px); } @starting-style { .hotspot .hotspot-dialog[open][data-showing='true'] { opacity: 0; filter: blur(var(--hotspot-blur)); transform: scale(var(--hotspot-scale)) translate(var(--offset-x), var(--offset-y)); transform-origin: var(--origin-x) var(--origin-y); } } /* Safety triangles for dialogs */ .hotspot .hotspot-dialog::after { content: ''; position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; pointer-events: all; transition: opacity 0.22s ease-out, translate 0.22s 0.1s ease-out; scale: var(--scale-x, 1) var(--scale-y, 1); z-index: var(--layer-flat); } .hotspot-dialog[open]:is([data-placement*='left'], [data-placement*='right'])::after { /* stylelint-disable-next-line plugin/no-unsupported-browser-features */ clip-path: polygon(0 0, 100% 0, 100% 100%); width: calc(var(--button-size) / 2 + var(--hotspot-size) * 0.5); } .hotspot-dialog[open][data-placement*='right']::after { right: 100%; left: unset; } .hotspot-dialog[open][data-placement*='left']::after { left: 100%; right: unset; --scale-x: -1; } .hotspot-dialog[open][data-placement*='top']::after { --scale-y: -1; } .hotspot-dialog[open][data-placement*='center']::after { height: calc(var(--button-size) / 2 + var(--hotspot-size) * 0.5); width: 100%; /* stylelint-disable-next-line plugin/no-unsupported-browser-features */ clip-path: polygon(0 0, 100% 0, 50% calc(100% - var(--hotspot-size) * 0.25)); --scale-x: 1; --scale-y: 1; } .hotspot-dialog[open][data-placement*='center'][data-placement*='bottom']::after { top: unset; bottom: 100%; --scale-y: -1; } .hotspot-dialog[open][data-placement*='center'][data-placement*='top']::after { top: 100%; bottom: unset; } /* Quick add button */ .hotspot-dialog { .quick-add { display: flex; justify-content: flex-end; position: relative; z-index: var(--layer-flat); } .quick-add__button.add-to-cart-button { width: calc(var(--button-size-md) - 4px); position: relative; transform: translateX(2px); justify-self: flex-end; height: fit-content; border: none; color: var(--quick-add-foreground, var(--color-foreground)); background-color: var(--quick-add-background, var(--color-background)); pointer-events: all; opacity: 1; overflow: hidden; outline: 2px solid transparent; @media (prefers-reduced-motion: no-preference) { transition: width var(--animation-speed) var(--ease-out-cubic), outline-color var(--animation-speed) var(--ease-out-cubic) var(--animation-speed-slow), transform var(--animation-speed) var(--ease-out-cubic); } &:is(:hover, :active) { outline-color: rgb(var(--color-foreground-rgb) / var(--opacity-15)); } &:focus-visible { outline-color: currentcolor; transition-delay: 0s; } } .quick-add__button.add-to-cart-button[data-added='true'] { color: transparent; } } @media screen and (min-width: 750px) { .hotspot-dialog { .quick-add__button:is(:hover, :focus-visible) { width: max-content; transform: translateX(0); } } } /* END_SECTION:product-hotspots */ /* START_SECTION:product-information (INDEX:75) */ .sticky-add-to-cart__bar { position: fixed; bottom: max(20px, var(--safe-area-inset-bottom)); left: 50%; /* stylelint-disable-line csstools/use-logical -- centring pair with a physical translateX(-50%) */ opacity: 0; transform: translateX(-50%) translateY(calc(100% + 40px)); z-index: calc(var(--layer-sticky) - 1); /* Below sticky header */ display: block; width: 600px; border-radius: calc( var(--style-border-radius-buttons-primary) + min(var(--padding-sm), var(--style-border-radius-buttons-primary)) ); box-shadow: var(--shadow-popover); padding: var(--padding-sm); /* Layout styling */ display: flex; align-items: center; gap: var(--gap-md); @starting-style { opacity: 0; transform: translateX(-50%) translateY(calc(100% + 40px)); } &::before { --border: 2px; content: ''; position: absolute; inset: calc(var(--border) * -1); background: linear-gradient(var(--color-background) 0 100%), linear-gradient(hsl(0 0% 0% / 0.15) 0 100%); background-clip: content-box, border-box; border: var(--border) solid #0000; border-radius: inherit; z-index: -1; backdrop-filter: blur(20px) saturate(180%) brightness(1.5); } } @media (prefers-reduced-motion: no-preference) { .sticky-add-to-cart__bar { transition-property: transform, opacity, display; transition-duration: 0.3s; transition-timing-function: var(--ease-out-quad); transition-behavior: allow-discrete; } } .sticky-add-to-cart__bar[data-stuck='true'] { transform: translateX(-50%) translateY(0%); opacity: 1; } sticky-add-to-cart:not([data-variant-available='true']) .sticky-add-to-cart__bar { opacity: 0; transform: translateX(-50%) translateY(calc(100% + 40px)); display: none; } .sticky-add-to-cart__info[data-has-image='false'] { padding-inline-start: var(--padding-lg); } .sticky-add-to-cart__image { flex-shrink: 0; aspect-ratio: 1; height: var(--height-buy-buttons); overflow: hidden; border-radius: var(--style-border-radius-buttons-primary); background: var(--color-background-secondary); } .sticky-add-to-cart__image-img { width: 100%; height: 100%; object-fit: cover; } .sticky-add-to-cart__info { flex: 1; min-width: 0; /* Allow text truncation */ } .sticky-add-to-cart__title { font-size: var(--font-paragraph-medium--size); font-weight: var(--font-weight-semibold); line-height: var(--font-paragraph--line-height); margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sticky-add-to-cart__variant { color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text)); font-size: var(--font-paragraph-small--size); margin-top: var(--margin-3xs); } .sticky-add-to-cart__price { font-weight: var(--font-weight-semibold); } .sticky-add-to-cart__button { height: var(--height-buy-buttons); position: relative; } /* Mobile adjustments */ @media screen and (max-width: 749px) { .sticky-add-to-cart__bar { bottom: 0; width: 100%; max-width: none; border-radius: 0; /* Full-bleed bar touches the physical bottom edge (viewport-fit=cover); keep the controls above the home indicator while the background fills the safe area */ padding-block-end: calc(var(--padding-sm) + var(--safe-area-inset-bottom)); &::before { --border: 1px; } } .sticky-add-to-cart__bar .add-to-cart-text__content { display: none; } .sticky-add-to-cart__info[data-has-image='false'] { padding-inline-start: 0; } .sticky-add-to-cart__title { font-size: var(--font-paragraph--size); } .sticky-add-to-cart__button { padding: var(--padding-lg); } .sticky-add-to-cart__price { font-size: var(--font-paragraph-small--size); } .sticky-add-to-cart__button { width: var(--height-buy-buttons); } sticky-add-to-cart:not([data-variant-available='true']) .add-to-cart-text__content { display: initial; } sticky-add-to-cart:not([data-variant-available='true']) .sticky-add-to-cart__button { width: auto; } } /* Small mobile - hide text content and compare price */ @media screen and (max-width: 389px) { .sticky-add-to-cart__bar { .compare-at-price { display: none; } } .sticky-add-to-cart__title { display: none; } /* For product with only default variant show title */ .sticky-add-to-cart__info[data-singleton='true'] .sticky-add-to-cart__title { display: block; } /* For single variant show title and variant, truncate both. variant should be identifiable with truncation */ .sticky-add-to-cart__info[data-single-option='true'] .sticky-add-to-cart__title { display: block; } .sticky-add-to-cart__info[data-single-option='true'] .sticky-add-to-cart__variant { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } /* END_SECTION:product-information */ /* START_SECTION:quick-order-list (INDEX:78) */ .quick-order-list { --quantity-selector-width: 124px; --image-size: 43px; --quantity-header-padding: calc(var(--minimum-touch-target) + var(--gap-sm)); --quick-order-quantity-column-width: calc( var(--quantity-selector-width) + 2 * var(--gap-sm) + 2 * var(--minimum-touch-target) ); --transform-offset-negative: calc(-1 * var(--icon-stroke-width)); --quick-order-first-column-width: 2fr; /* Takes 2 fractions of available space */ --quick-order-price-column-width: 1fr; /* Takes 1 fraction */ --quick-order-total-column-width: 1fr; /* Takes 1 fraction */ display: flex; flex-direction: column; gap: var(--gap-sm); } .quick-order-list__container { width: 100%; } /* Grid container setup */ .quick-order-list__grid { width: 100%; display: block; /* Container is block, children use grid */ contain: layout; /* Isolate layout calculations for performance */ } .quick-order-list__grid-body { contain: layout; /* Isolate layout calculations for performance */ } .quick-order-list__grid-header, .quick-order-list__grid-row { display: grid; grid-template-columns: var(--quick-order-first-column-width) /* Variant column - takes 2 parts of available space */ var(--quick-order-quantity-column-width) /* Fixed pixel width for quantity */ var(--quick-order-price-column-width) /* Price column - takes 1 part */ var(--quick-order-total-column-width); /* Total column - takes 1 part */ gap: var(--gap-md); align-items: center; } .quick-order-list__grid-header { border-block-end: var(--style-border-width) solid var(--color-border); padding-block-end: var(--padding-xl); margin-block-end: var(--padding-sm); opacity: var(--opacity-85); font-weight: normal; font-size: var(--font-size--xs); letter-spacing: var(--letter-spacing--body-loose); } /* Add padding to quantity column header to align with content */ .quick-order-list__grid-header .quick-order-list__grid-cell--quantity { padding-inline-start: var(--quantity-header-padding); } .quick-order-list__grid-row { padding-block-start: var(--padding-sm); padding-block-end: var(--padding-sm); content-visibility: auto; contain-intrinsic-size: auto calc(2 * var(--padding-sm) + var(--image-size) + var(--minimum-touch-target) + var(--padding-2xl)); } @media screen and (min-width: 750px) { .quick-order-list__grid-row { contain-intrinsic-size: auto calc(2 * var(--padding-sm) + var(--image-size)); } } .quick-order-list__grid-cell--variant { text-align: start; justify-self: stretch; } .quick-order-list__grid-cell--quantity { display: flex; justify-content: flex-start; align-items: flex-start; justify-self: stretch; } .quick-order-list__grid-cell--quantity .variant-item__inner-container { width: 100%; justify-content: flex-start; } .quick-order-list__grid-cell--price { text-align: end; justify-self: stretch; } .quick-order-list__grid-cell--total { text-align: end; justify-self: stretch; } .variant-item__image-container, .quick-order-list__table-image { width: var(--image-size); height: auto; } .quick-order-list .pagination { margin-block-start: 0; padding-block-start: var(--padding-xl); padding-block-end: 0; } .variant-item__inner-container { display: flex; align-items: center; gap: var(--gap-sm); } .volume-pricing-info-placeholder { width: var(--minimum-touch-target); height: var(--minimum-touch-target); } .variant-item__quantity .quantity-selector { display: flex; flex: 0 0 var(--quantity-selector-width); min-width: var(--quantity-selector-width); font-size: var(--font-size--xs); height: auto; } .variant-item__remove { background-color: transparent; color: var(--color-foreground); width: var(--minimum-touch-target); height: var(--minimum-touch-target); justify-content: center; box-shadow: none; padding: 0; } .remove-icon-bottom, .remove-icon-top { transition: transform var(--animation-speed) var(--animation-easing); } .variant-item__remove:not(.variant-item__remove--hidden):hover .remove-icon-top { transform: translate(var(--transform-offset-negative), var(--icon-stroke-width)) rotate(-15deg); } .variant-item__remove:not(.variant-item__remove--hidden):is(:hover, :active) .remove-icon-bottom { transform: translateY(var(--icon-stroke-width)); } /* Hide remove button with opacity to prevent layout shift */ .variant-item__remove--hidden { opacity: 0; pointer-events: none; cursor: default; } .variant-item__name { font-weight: var(--font-weight-medium); } .variant-item__sku { font-size: var(--font-size--3xs); opacity: var(--opacity-85); } .variant-item__details { display: inline-flex; flex-direction: column; } .variant-item__totals { flex: 0 0 auto; padding-block-start: var(--padding-2xs); } /* Compare at price styles */ .variant-item__discounted-prices { display: flex; gap: var(--gap-2xs); justify-content: flex-end; } .variant-item__discounted-prices dd { margin: 0; } /* Mobile layout */ @media screen and (max-width: 749px) { .quick-order-list__grid-header, .quick-order-list__grid-row { grid-template-columns: 1fr auto; /* Variant column and total column on mobile */ gap: var(--gap-sm); max-width: 100%; overflow: hidden; align-items: flex-start; } .quick-order-list__grid-header .quick-order-list__grid-cell--total { text-align: end; } .quick-order-list__grid-row { margin-block-end: var(--margin-2xl); padding-block-end: var(--padding-2xl); border-block-end: var(--style-border-width) solid var(--color-border); } .quick-order-list__grid-row:last-child { margin-block-end: 0; border-block-end: none; } .variant-item__inner { flex: 1 1 auto; padding-inline-end: var(--padding-lg); } .variant-item__inner-container { display: flex; gap: var(--gap-md); align-items: flex-start; } .variant-item__details { flex: 1; display: flex; flex-direction: column; min-width: 0; /* Allow text to shrink */ } .variant-item__totals { flex: 0 0 auto; text-align: end; padding-block-start: var(--padding-2xs); } .variant-item__totals .variant-item__total-price { font-size: var(--font-size--sm); font-weight: var(--font-weight-medium); } .variant-item__title-container .variant-item__name { display: block; font-size: var(--font-size--sm); line-height: var(--line-height-tight); margin: 0; } .variant-item__mobile-price-container { margin-block-end: var(--margin-xs); } .variant-item__mobile-price { font-size: var(--font-size--sm); opacity: var(--opacity-85); white-space: nowrap; } /* Mobile compare at price styles */ .variant-item__discounted-prices--mobile { display: flex; flex-direction: row; align-items: baseline; justify-content: flex-start; gap: var(--gap-xs); margin-block-start: var(--margin-2xs); margin-block-end: 0; } .variant-item__discounted-prices--mobile dd { display: inline; } .variant-item__mobile-quantity { display: flex; align-items: center; gap: 0; } /* Mobile-only content styles */ .variant-item__mobile-info { display: flex; flex-direction: column; width: 100%; } .variant-item__image-container { flex: 0 0 var(--image-size); width: var(--image-size); height: var(--image-size); } .quick-order-list__table-image { width: 100%; height: 100%; } .variant-item__mobile-quantity .quantity-selector { display: flex; flex: 0 0 var(--quantity-selector-width); min-width: var(--quantity-selector-width); font-size: var(--font-size--xs); margin: 0; padding: 0; } /* Mobile remove button styling */ .variant-item__remove--mobile { background-color: transparent; color: var(--color-foreground); width: var(--minimum-touch-target); height: var(--minimum-touch-target); min-width: var(--minimum-touch-target); display: flex; align-items: center; justify-content: center; box-shadow: none; padding: 0; margin: 0; flex-shrink: 0; border: none; cursor: pointer; } .variant-item__remove--mobile svg { width: var(--icon-size-sm); height: var(--icon-size-sm); } .variant-item__remove--mobile:not(.variant-item__remove--hidden):hover { opacity: var(--opacity-70); } .quick-order-list .pagination { padding-block-start: var(--padding-2xl); } } .quick-order-list-disabled { pointer-events: none; } .quick-order-list-total { background: var(--color-background); border-block-start: var(--style-border-width) solid var(--color-border); } /* Tablet and Desktop styles - sticky footer */ @media screen and (min-width: 750px) { .quick-order-list-total { position: sticky; inset-block-end: 0; z-index: var(--layer-raised); } } .quick-order-list-total__info, .quick-order-list-total__confirmation { min-height: 8rem; padding-block-start: var(--padding-4xl); } .quick-order-list-total__info { align-items: flex-start; gap: var(--gap-md); } .quick-order-list-total__confirmation { display: flex; gap: var(--gap-2xl); align-items: center; justify-content: center; padding: var(--padding-2xl) var(--padding-xl); } .quick-order-list-total__column { display: flex; flex-direction: column; } .quick-order-list-total__actions { display: flex; } /* Desktop layout - Use CSS Grid to match main table alignment */ @media screen and (min-width: 750px) { .quick-order-list-total__info { display: grid; grid-template-columns: var(--quick-order-first-column-width) /* Variant column - takes 2 parts of available space */ var(--quick-order-quantity-column-width) /* Fixed pixel width for quantity */ var(--quick-order-price-column-width) /* Price column - takes 1 part */ var(--quick-order-total-column-width); /* Total column - takes 1 part */ } .quick-order-list-total__column { grid-column: 1; display: flex; flex-direction: column; gap: var(--gap-md); } .quick-order-list-total__summary { grid-column: 2 / 5; display: grid; grid-template-columns: var(--quick-order-quantity-column-width, 234px) auto; } .quick-order-list-total__items { grid-column: 1; justify-self: center; text-align: center; } .quick-order-list-total__price { grid-column: 3; justify-self: end; text-align: end; } } /* Tablet-specific overrides - 750px to 989px */ @media screen and (min-width: 750px) and (max-width: 989px) { .quick-order-list-total__actions { flex-direction: column; } .quick-order-list-total__messages { align-items: stretch; } .quick-order-list__remove-all-button { padding-inline: 0; } } .quick-order-list__button.button--full-width { width: 100%; } .quick-order-list__button.button { display: flex; align-items: center; justify-content: center; } .quick-order-list-total .button--unstyled { border: none; box-shadow: none; background-color: transparent; color: var(--color-foreground); cursor: pointer; } .quick-order-list__remove-all-button svg { width: var(--icon-size-sm); height: var(--icon-size-sm); flex-shrink: 0; } .quick-order-list-total__items span { display: block; margin-block-end: var(--margin-xs); } .quick-order-list-total__items .h5 { margin: 0; letter-spacing: var(--letter-spacing--body-loose); opacity: var(--opacity-85); } .quick-order-list-total__subtotal-value { display: block; margin-block-end: var(--margin-xs); line-height: var(--font-paragraph--line-height); } /* Ensure text-component displays properly */ .quick-order-list-total__subtotal-value text-component { display: block; } .quick-order-list-total__subtotal { margin: 0; letter-spacing: var(--letter-spacing--body-loose); opacity: var(--opacity-85); } .quick-order-list-total__tax-note { opacity: var(--opacity-subdued-text); } .quick-order-list-total__messages { display: flex; flex-direction: column; gap: var(--gap-xs); } .quick-order-list-total__success, .quick-order-list-total__error { display: flex; align-items: center; gap: var(--gap-xs); } .quick-order-list-total__success .icon-success, .quick-order-list-total__error .quick-order-list-total__icon--error { display: inline-flex; align-items: center; justify-content: center; width: var(--icon-size-sm); height: var(--icon-size-sm); color: inherit; } .quick-order-list-total__success .icon-success svg, .quick-order-list-total__error .quick-order-list-total__icon--error svg { width: 100%; height: 100%; } .quick-order-list-total__error:empty, .quick-order-list-total__success:empty { display: none; } .quick-order-list-total__info.confirmation-visible { display: none; } .quick-order-list-total__confirmation-text { white-space: nowrap; } .quick-order-list-total__confirmation-buttons { display: flex; gap: var(--gap-md); align-items: center; } .quick-order-list-total__confirmation button { margin: 0; white-space: nowrap; } .quick-order-list__remove-all-button { display: flex; align-items: center; justify-content: center; gap: var(--gap-sm); } /* Mobile styles */ @media screen and (max-width: 749px) { .quick-order-list-total__info { display: flex; flex-direction: column; align-items: center; } .quick-order-list-total__column { order: 3; /* Move column to the end on mobile */ width: 100%; flex: 1 1 auto; } .quick-order-list-total__actions { flex-direction: column; width: 100%; } .quick-order-list-total__messages { width: 100%; align-items: center; margin-block-start: var(--margin-xs); } .quick-order-list-total__summary { order: 1; /* First on mobile */ display: flex; flex-direction: column; align-items: center; width: 100%; gap: var(--gap-md); } .quick-order-list-total__items { text-align: center; width: auto; display: flex; align-items: center; justify-content: center; gap: var(--gap-xs); } .quick-order-list-total__items span { display: inline; margin-block-end: 0; } .quick-order-list-total__items .h5 { display: inline; } .quick-order-list-total__price { text-align: center; width: 100%; } .quick-order-list-total__product-total { display: flex; align-items: center; justify-content: center; gap: var(--gap-xs); } .quick-order-list-total__product-total .quick-order-list-total__subtotal-value { display: inline-block; margin-block-end: 0; } .quick-order-list-total__product-total .quick-order-list-total__subtotal { display: inline; } .quick-order-list__button, .quick-order-list__remove-all-button { width: 100%; justify-content: center; } .quick-order-list-total__confirmation { flex-direction: column; } .quick-order-list-total__tax-note { margin-block-start: var(--margin-xs); } } /* END_SECTION:quick-order-list */ /* START_SECTION:slideshow (INDEX:83) */ .slideshow-section { slideshow-arrows .slideshow-control:first-of-type { margin-inline-start: var(--padding-xs); } slideshow-arrows .slideshow-control:last-of-type { margin-inline-end: var(--padding-xs); } .slideshow--with-hints--mobile-with-hints { gap: var(--slideshow-gap, 0); grid-column: 1 / -1; } /* Hide navigation arrows at boundaries for with-hints mode */ .slideshow--with-hints--mobile-with-hints slideshow-arrows .slideshow-control { transition: opacity 0.3s ease; } /* Override animation for boundary arrows in with-hints mode on hover */ slideshow-component.slideshow--with-hints--mobile-with-hints:has( slideshow-slide:first-child:not([aria-hidden='true']) ) > slideshow-container > slideshow-arrows .slideshow-control--previous, slideshow-component.slideshow--with-hints--mobile-with-hints:has( slideshow-slide:last-child:not([aria-hidden='true']) ) > slideshow-container > slideshow-arrows .slideshow-control--next { animation: none; opacity: 0; pointer-events: none; } @media screen and (max-width: 749px) { .slideshow--with-hints--mobile-with-hints slideshow-slides { padding-inline: var(--page-margin); } .slideshow--with-hints--mobile-with-hints slideshow-slide { width: 96%; } .slideshow--with-hints--mobile-with-hints slideshow-slides { gap: min(var(--slideshow-gap, 0), 10px); } } @media screen and (min-width: 750px) { .slideshow--with-hints { gap: var(--slideshow-gap, 0); grid-column: 1 / -1; } .slideshow--with-hints slideshow-slides { padding-inline: var(--page-margin); gap: var(--slideshow-gap, 0); } .slideshow--with-hints slideshow-slide { width: calc((100vw - var(--page-margin) * 2)); overflow: hidden; } .slideshow--with-hints slideshow-arrows .slideshow-control { transition: opacity 0.3s ease; } slideshow-component.slideshow--with-hints:has(slideshow-slide:first-child:not([aria-hidden='true'])) > slideshow-container > slideshow-arrows .slideshow-control--previous, slideshow-component.slideshow--with-hints:has(slideshow-slide:last-child:not([aria-hidden='true'])) > slideshow-container > slideshow-arrows .slideshow-control--next { animation: none; opacity: 0; pointer-events: none; } } } /* END_SECTION:slideshow */ /* CSS from block stylesheet tags */ /* START_BLOCK:_blog-post-card (INDEX:86) */ .blog-post-card { display: flex; flex-direction: column; text-align: var(--text-align); column-gap: var(--columns-gap); } .blog-post-card__content { padding-block-start: 0.4rem; display: flex; flex-direction: column; } .blog-post-card--horizontal .blog-post-card__title-link .spacing-style, .blog-post-card--horizontal .blog-post-details, .blog-post-card--horizontal .blog-post-card__content-text { padding-inline-start: 0; } .blog-post-card__image-container, .blog-post-card__content { width: 100%; } /** * Horizontal layout (image left, content right) * Applied to hero posts based on total article count * Only applies the split layout when an image is actually present */ .blog-post-card--horizontal { flex-direction: row; @media screen and (max-width: 749px) { flex-direction: column; } } .blog-post-card--horizontal > .blog-post-card__image-container { flex-basis: 70%; } .blog-post-card--horizontal .blog-post-card__content { flex-basis: 30%; flex-grow: 1; } .blog-post-card__content a { display: block; text-wrap: pretty; text-decoration: none; padding-block-start: 0.75rem; color: var(--color-foreground); } .blog-post-card__content a:hover { color: var(--color-foreground-subdued); } a.blog-post-card__title-link { color: var(--color-foreground); &:hover { color: var(--color-foreground-subdued); } } /* END_BLOCK:_blog-post-card */ /* START_BLOCK:_blog-post-content (INDEX:87) */ .blog-post-content { max-width: var(--normal-content-width); margin: 0 auto; color: var(--color, inherit); } .blog-post-content a { color: currentcolor; } /* END_BLOCK:_blog-post-content */ /* START_BLOCK:_blog-post-description (INDEX:88) */ .blog-post-card__content-text a { color: currentcolor; } .blog-post-card__content-text a:hover { color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text)); } /* END_BLOCK:_blog-post-description */ /* START_BLOCK:_blog-post-featured-image (INDEX:89) */ .blog-post-featured-image { --width: 100%; --custom-width: 100%; position: relative; display: block; width: var(--width); margin-inline: auto; } .blog-post-featured-image.size-style { --width: var(--size-style-width, 100%); } .blog-post-featured-image--height-fit { height: fit-content; } .blog-post-featured-image--height-fill { height: 100%; } .blog-post-featured-image__image { aspect-ratio: var(--ratio); width: 100%; height: 100%; object-fit: cover; object-position: center center; } @media screen and (max-width: 749px) { .blog-post-featured-image { --width: var(--width-mobile, var(--width)); --custom-width: var(--custom-width-mobile, var(--custom-width)); } .blog-post-featured-image.size-style { --width: var(--size-style-width-mobile, var(--size-style-width, 100%)); } } /* END_BLOCK:_blog-post-featured-image */ /* START_BLOCK:_blog-post-image (INDEX:90) */ .blog-post-card__image { width: 100%; object-fit: cover; object-position: center center; height: calc(var(--blog-post-card-img-height) * var(--blog-post-card-scale)); } .blog-post-card__image--small { --blog-post-card-img-height: 280px; } .blog-post-card__image--medium { --blog-post-card-img-height: 340px; } .blog-post-card__image--large { --blog-post-card-img-height: 400px; } /* END_BLOCK:_blog-post-image */ /* START_BLOCK:_blog-post-info-text (INDEX:91) */ .blog-post-details { display: flex; gap: var(--gap-sm); font-size: var(--font-paragraph-size); color: var(--color-details, var(--color-foreground-muted)); white-space: nowrap; flex-wrap: wrap; } .blog-post-details > span { text-overflow: clip; overflow: hidden; } /* END_BLOCK:_blog-post-info-text */ /* START_BLOCK:_card (INDEX:93) */ .card { position: relative; display: flex; flex-direction: column; overflow: hidden; width: 100%; height: 100%; border-radius: var(--border-radius, 0); border-width: var(--border-width, 0); border-style: var(--border-style, none); border-color: var(--border-color); container-type: inline-size; } .card__content { width: 100%; height: 100%; position: relative; z-index: var(--layer-flat); display: flex; flex-direction: column; aspect-ratio: var(--card-ratio, 1); } .card__content.background-transparent { background-color: transparent; } /* When card has both image and content, use min-height from container query */ .card__content--has-min-height { min-height: calc(100cqw / var(--card-ratio-numeric)); } .card__inner { flex: 1; } .card__media-wrapper { display: flex; width: 100%; height: 100%; overflow: hidden; position: absolute; top: 0; left: 0; } .card__media-wrapper video { z-index: var(--layer-raised); } .card__link { position: absolute; inset: 0; z-index: var(--layer-raised); } .card__link ~ :is(.card__content, .card__media-wrapper) { pointer-events: none; :is(a, button, input, textarea, select) { pointer-events: auto; } } /* Needs the .card__link ~ to be specific enough to take effect. */ .card__link ~ .card__content--design-mode { pointer-events: auto; } /* END_BLOCK:_card */ /* START_BLOCK:_carousel-content (INDEX:94) */ .carousel-content slideshow-slides { --slideshow-gap: var(--carousel-gap); } .carousel-content slideshow-slides > .card { flex: 0 0 auto; width: calc( (100% - (var(--carousel-gap, 8px) * (var(--carousel-mobile-columns, 2) - 1)) - var(--peek-next-slide-size, 0px)) / var(--carousel-mobile-columns, 2) ); } @media screen and (min-width: 750px) { .carousel-content slideshow-slides > .card { width: calc( (100% - (var(--carousel-gap, 8px) * (var(--carousel-columns, 4) - 1)) - var(--peek-next-slide-size, 0px)) / var(--carousel-columns, 4) ); } } .carousel-content .slideshow-control[disabled] { display: none; } .carousel-content slideshow-arrows { padding-inline: var(--util-page-margin-offset); } .carousel-content .slideshow-control--next { margin-inline-start: auto; } /* END_BLOCK:_carousel-content */ /* START_BLOCK:_cart-products (INDEX:95) */ .cart-page__title + .cart-page__items { margin-block-start: var(--margin-lg); } /* END_BLOCK:_cart-products */ /* START_BLOCK:_cart-summary (INDEX:96) */ .cart-summary__inner { display: flex; flex-direction: column; align-items: center; gap: var(--gap-2xl); container-type: inline-size; padding: 0; position: sticky; top: 0; align-self: start; @media screen and (min-width: 750px) { padding: var(--padding-5xl); grid-row: 1 / -1; } } /* Header-dependent page rules use #header-group as the :has() subject and reach the page with `~`. With body as the subject, every [open] or [aria-expanded] change in the header restyles the whole page. */ #header-group:has(> .header-section > header-component[sticky]) ~ * .cart-summary__inner { top: var(--header-height, 0); } .cart-summary { @media screen and (max-width: 749px) { border: none; } @media screen and (min-width: 750px) { display: grid; grid-template-rows: subgrid; grid-row: 1 / -1; } } .cart-summary--extend { height: 100%; @media screen and (min-width: 750px) { border-inline-end: none; border-start-end-radius: 0; border-end-end-radius: 0; } } /* If extend is on, only include top and bottom borders when the border radius is 0. */ .cart-summary--extend:not(.has-border-radius) { @media screen and (min-width: 750px) { border-top: none; border-bottom: none; } } .cart-summary--extend .cart-summary__inner { @media screen and (min-width: 750px) { grid-row: 2 / -1; padding: var(--padding-md) var(--page-margin) var(--padding-4xl); width: var(--sidebar-width); } } /* If extend is off, apply the border radius to the inner summary container */ .cart-summary__inner.has-border-radius { border-radius: var(--border-radius); } /* On mobile, drop the summary's custom palette and inherit from the cart section so the summary visually merges with the rest of the cart page. */ @media screen and (max-width: 749px) { :is(.section-background, .cart-summary, .cart-summary__inner).inherit-parent-scheme--mobile { --color: inherit; --color-rgb: inherit; --color-background: inherit; --color-background-rgb: inherit; --color-foreground: inherit; --color-foreground-rgb: inherit; --color-foreground-subdued: inherit; --color-border: inherit; --color-border-rgb: inherit; --color-shadow: inherit; --color-shadow-rgb: inherit; --color-primary-button-text: inherit; --color-primary-button-background: inherit; --color-primary-button-border: inherit; --color-primary-button-hover-text: inherit; --color-primary-button-hover-background: inherit; --color-primary-button-hover-border: inherit; --color-secondary-button-text: inherit; --color-secondary-button-background: inherit; --color-secondary-button-border: inherit; --color-secondary-button-hover-text: inherit; --color-secondary-button-hover-background: inherit; --color-secondary-button-hover-border: inherit; --color-input-text: inherit; --color-input-text-rgb: inherit; --color-input-background: inherit; --opacity-10-25: inherit; } } /* END_BLOCK:_cart-summary */ /* START_BLOCK:_cart-title (INDEX:97) */ .cart-title h1 { margin-block-end: 0; display: inline-flex; align-items: center; gap: var(--gap-sm); } .cart-title .cart-bubble { width: fit-content; display: inline-flex; align-items: center; justify-content: center; aspect-ratio: auto; padding: var(--cart-padding); } .cart-title .cart-bubble[data-maintain-ratio] { width: min(1lh, 26px); height: min(1lh, 26px); } .cart-title .cart-bubble .cart-bubble__background { background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10-25)); } .cart-title .cart-bubble__text { color: var(--color-foreground); font-family: var(--font-paragraph--family); font-weight: var(--font-paragraph--weight); font-size: clamp(var(--font-size--3xs), 0.75em, var(--font-size--xs)); } /* END_BLOCK:_cart-title */ /* START_BLOCK:_collection-image (INDEX:100) */ .collection-image { width: var(--image-width); } .collection-image .collection-image__featured-image { aspect-ratio: var(--ratio); object-fit: cover; } /* END_BLOCK:_collection-image */ /* START_BLOCK:_collection-link (INDEX:102) */ .collection-links__link { --min-font-size: var(--font-size--4xl); --max-font-size: var(--font-size--6xl); display: flex; color: inherit; text-decoration: none; text-wrap: pretty; font-size: clamp(var(--min-font-size), 4.5vw, var(--max-font-size)); /* When hovering over container, dim non-current links (text layout only) */ @media (hover: hover) { collection-links-component:not([layout='spotlight']) .collection-links__container:hover & { opacity: var(--opacity-subdued-text); } collection-links-component:not([layout='spotlight']) .collection-links__container:hover &[aria-current='true'] { opacity: 1; } } [layout='spotlight'] & { /* Spotlight layout: dimmed by default */ opacity: var(--disabled-opacity); &[aria-current='true'] { opacity: 1; } } .text-block { display: inline-block; } @media screen and (max-width: 749px) { --min-font-size: var(--font-size--3xl); --max-font-size: var(--font-size--5xl); [layout='spotlight'] & { white-space: normal; scroll-snap-align: start; text-wrap: pretty; span { text-wrap: pretty; } } } } .collection-links__count { font-size: 0.5em; opacity: var(--disabled-opacity); font-weight: var(--font-paragraph--weight); } .collection-links__image { align-items: center; justify-content: center; &:not([hidden]) { display: flex; } &[reveal] { --offset: 15px; position: fixed; top: 0; left: 0; z-index: var(--layer-temporary); display: block; translate: calc(var(--x) + var(--offset)) calc(var(--y) + var(--offset)); pointer-events: none; width: auto; image-block { --image-height-basis: 5rem; height: var(--image-height); } } } /* END_BLOCK:_collection-link */ /* START_BLOCK:_featured-blog-posts-card (INDEX:106) */ .featured-blog-posts-card { width: 100%; position: relative; height: 100%; text-align: var(--text-align); } .featured-blog-posts-card__inner { width: 100%; overflow: hidden; position: relative; display: flex; flex-direction: column; z-index: var(--layer-flat); pointer-events: none; gap: var(--gap); } .featured-blog-posts-card__link { position: absolute; inset: 0; /* allows focus outline to have radius in supported browsers */ border-radius: var(--border-radius); } /* Editorial layout */ .resource-list:not(.hidden--desktop) .blog-post-card--flexible-aspect-ratio { .featured-blog-posts-card__image, .blog-placeholder-svg { aspect-ratio: 99; height: 100%; } .featured-blog-posts-card__inner { display: flex; flex-direction: column; height: 100%; } .featured-blog-posts-card__content { --flex-wrap: nowrap; flex-shrink: 0; height: auto; } } @media screen and (max-width: 749px) { .resource-list:not(.hidden--desktop) .blog-post-card--flexible-aspect-ratio { .featured-blog-posts-card__image, .blog-placeholder-svg { aspect-ratio: unset; } } } .featured-blog-posts-card__inner a, .featured-blog-posts-card__inner button { pointer-events: auto; } /* allow all blocks to be selectable in editor preview */ .shopify-design-mode .featured-blog-posts-card__content * { pointer-events: auto; } .featured-blog-posts-card__content { --flex-wrap: wrap; display: flex; position: relative; height: 100%; width: 100%; gap: var(--gap); } .featured-blog-posts-card__content h4 { margin: 0; } /* END_BLOCK:_featured-blog-posts-card */ /* START_BLOCK:_featured-blog-posts-image (INDEX:107) */ .featured-blog-posts-card__image { width: 100%; } .featured-blog-posts-card__image .blog-placeholder-svg { object-fit: cover; width: 100%; height: 100%; } /* END_BLOCK:_featured-blog-posts-image */ /* START_BLOCK:_featured-product-gallery (INDEX:109) */ .featured-product-section .card-gallery .quick-add__button { position: absolute; inset-inline-end: var(--quick-add-offset, var(--padding-sm)); bottom: var(--quick-add-offset, var(--padding-sm)); } /* END_BLOCK:_featured-product-gallery */ /* START_BLOCK:_featured-product (INDEX:112) */ .featured-product-content-top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--gap-sm); } /* END_BLOCK:_featured-product */ /* START_BLOCK:_footer-social-icons (INDEX:113) */ .social-icons__wrapper { display: flex; gap: var(--gap-sm); flex-wrap: wrap; justify-content: center; @media screen and (min-width: 750px) { flex-wrap: nowrap; justify-content: flex-start; } } /* END_BLOCK:_footer-social-icons */ /* START_BLOCK:_header-logo (INDEX:114) */ .header-logo { display: flex; height: 100%; font-size: var(--font-size--md); font-family: var(--font-family); font-weight: var(--font-weight); font-style: var(--font-style); color: var(--color-foreground); justify-content: center; align-items: center; text-decoration: none; &[data-hidden-on-home-page] { display: none; #header-component:is( [sticky='always']:not([data-scroll-direction='none']), [sticky='scroll-up'][data-scroll-direction='up'] ) & { display: flex; } } @media screen and (max-width: 749px) { padding: 0; } @media screen and (min-width: 750px) { flex-shrink: 0; } &:hover { text-decoration: none; } } .header-logo__image { object-fit: contain; height: var(--header-logo-image-height-mobile); width: var(--header-logo-image-width-mobile); @media screen and (min-width: 750px) { height: var(--header-logo-image-height); width: var(--header-logo-image-width); } } .header-logo__solid-header-image-container { display: var(--header-logo-display, block); } .header-logo__transparent-header-image-container { display: var(--header-logo-inverse-display, none); } /* END_BLOCK:_header-logo */ /* START_BLOCK:_header-menu (INDEX:115) */ .header__drawer { --header-drawer-min-height: 60px; display: flex; min-height: var(--header-drawer-min-height); align-items: center; } #header-component[data-menu-style='drawer'] .header__drawer { display: flex; min-height: var(--header-drawer-min-height); } @media screen and (min-width: 750px) { #header-component[data-menu-style='menu'] .header__drawer { display: none; min-height: 0; } } .header--compact .header__drawer { min-height: var(--minimum-touch-target); } .menu-list--mobile { &.menu-list { display: grid; } & .menu-list__list { width: max-content; margin-inline: auto; gap: var(--menu-horizontal-gap); } & li { width: max-content; padding-block: var(--padding-sm); } & li:first-of-type { padding-inline-start: var(--menu-horizontal-gap); } & li:last-of-type { padding-inline-end: var(--menu-horizontal-gap); } & a { color: var(--color-foreground); } } .menu-list__scroll-container { position: relative; overflow-x: auto; mask-image: linear-gradient(to right, transparent, #000 20px, #000 calc(100% - 20px), transparent); padding-block: var(--padding-2xs); } .menu-list { --menu-horizontal-gap: var(--gap-xl); --menu-vertical-gap: var(--gap-xl); display: flex; height: 100%; } .menu-list__list { display: flex; justify-content: var(--grid-area-alignment); } .menu-list__list-item { flex-shrink: 0; white-space: nowrap; display: flex; align-items: center; height: 100%; } .menu-list__list-item[aria-hidden='true'] { visibility: hidden; } .menu-list__link { font-family: var(--menu-top-level-font-family); font-style: var(--menu-top-level-font-style); font-weight: var(--menu-top-level-font-weight); font-size: var(--menu-top-level-font-size); line-height: var(--menu-top-level-font-line-height); text-transform: var(--menu-top-level-font-case); color: var(--menu-top-level-font-color); text-decoration: none; display: flex; flex-direction: column; justify-content: center; cursor: pointer; height: 100%; margin-block: 0; &::after { content: ''; position: absolute; display: none; top: var(--header-padding); height: var(--box-height); inset-inline: 0; } &[data-safety-box='true']::after { display: block; } &:hover, &:focus { color: var(--menu-top-level-font-color); } @media screen and (min-width: 750px) { font-size: var(--menu-top-level-font-size-desktop); } } /* Wraps a top-level link and its disclosure button. Positioned so the absolutely-positioned button can sit in the gap after the link without affecting the top-bar layout. */ .menu-list__trigger { position: relative; display: flex; height: 100%; } .menu-list__disclosure { position: absolute; inset-block-start: 50%; inset-inline-start: calc(100% - var(--gap-xs)); width: max-content; display: flex; align-items: center; justify-content: center; padding-inline: var(--padding-3xs); padding-block: var(--padding-sm); color: var(--menu-top-level-font-color); cursor: pointer; opacity: 0; transform: translateY(-50%); outline-offset: 0.1em; /* Hidden control must not intercept pointer events; hover-open is driven by the list item itself. */ pointer-events: none; &:focus-visible { opacity: 1; pointer-events: auto; } } .menu-list__disclosure-icon { display: block; width: var(--font-size--3xs); aspect-ratio: 10 / 6; fill: currentColor; transition: transform var(--animation-speed) var(--animation-easing); } .menu-list__disclosure[aria-expanded='true'] .menu-list__disclosure-icon { transform: rotate(180deg); } .menu-list__link-title { padding-inline: var(--gap-sm); } [slot='overflow'] .menu-list__link-title { padding-inline: 0; } .menu-list__list-item:not([slot='overflow']) { flex-direction: column; } .menu-list__list-item[slot='more']:has(.menu-list__link[aria-expanded='true'])::after { content: ''; width: 100%; height: var(--header-padding); margin-bottom: calc(-1 * var(--header-padding)); } [slot='overflow'] > .menu-list__link::after { content: none; } /* High specificity selectors to subdue non-hovered links without javascript. If the need for js-generated `hovered` and `focused` classes arises for another reason we can simplify these. */ .menu-list:where(:has(.menu-list__list-item:hover)), .menu-list:where(:has(.menu-list__list-item:focus-within)), .menu-list:where(:has(.menu-list__list-item:not([aria-hidden='true']) .menu-list__link--active)) { .menu-list__link { color: rgb(var(--menu-top-level-font-color-rgb) / var(--opacity-subdued-text)); } } /* stylelint-disable-next-line selector-max-specificity */ .menu-list:not(:has(.menu-list__list-item:hover)) .menu-list__link--active, .menu-list .menu-list__list-item:where(:hover, :focus-within) .menu-list__link, .menu-list .menu-list__list-item:is([slot='more'], [slot='overflow']):has([aria-expanded='true']) .menu-list__link { color: var(--menu-top-level-font-color); } .overflow-menu::part(list) { /* Make sure focus outline is not cut off by overflow hidden */ --focus-outline-size: calc(var(--focus-outline-offset) + var(--focus-outline-width)); gap: 0; margin-inline: calc(-1 * var(--menu-horizontal-gap) / 2); } .overflow-menu { /* stylelint-disable-next-line declaration-no-important */ background-color: transparent !important; padding: var(--focus-outline-size); margin: calc(-1 * var(--focus-outline-size)); } /** mega menu **/ .menu-list__submenu, .overflow-menu::part(overflow) { --submenu-padding-block-start: var(--padding-3xl); --submenu-padding-block-end: var(--padding-3xl); background-color: transparent; } .header__row[style*='--border-bottom-width: 0px'] { .menu-list__submenu.background-matches-parent, .overflow-menu.background-matches-parent::part(overflow) { --submenu-padding-block-start: 0px; } } .menu-list__list-item:where(:not([slot='overflow'])) > .menu-list__submenu, .overflow-menu::part(overflow) { --submenu-content-opacity: 0; --submenu-content-animation: opacity calc(var(--submenu-animation-speed) * 0.75) var(--animation-easing); /* Bridge the gap (row bottom padding + border) so the pointer reaches the submenu; collapses to 0 when the padding does. */ --submenu-gap: calc(var(--padding-block-end, var(--header-padding)) + var(--border-bottom-width, 0px)); --submenu-clip-top: calc(var(--header-height) - var(--submenu-gap)); visibility: hidden; position: absolute; width: 100%; inset-inline-start: 0; top: calc(100% - 1px + var(--border-bottom-width) - (var(--full-open-header-height) - var(--submenu-height))); z-index: var(--layer-header-menu); padding-inline: var(--padding-inline); clip-path: rect(var(--submenu-clip-top) 100% var(--full-open-header-height) 0); /* stylelint-disable-line */ transition: clip-path var(--submenu-animation-speed) var(--ease-out-cubic); /* stylelint-disable-line */ } /* Keep the submenu transparent (color-custom paints an opaque bg) so the bridged band shows the header row; the underlay paints the dropdown. */ .menu-list__list-item > .menu-list__submenu { background-color: transparent; } [data-submenu-overlap-bottom-row] { .menu-list__list-item:where(:not([slot='overflow'])) > .menu-list__submenu, .overflow-menu::part(overflow) { --submenu-clip-top: calc(var(--top-row-height) - var(--submenu-gap)); } } /* Show the submenus on hover */ .menu-list__list-item:has([aria-expanded='true']) > .menu-list__submenu, /* Show the overflow menu when a menu item is hovered */ .overflow-menu:has([slot="overflow"] [aria-expanded='true'])::part(overflow-list), /* Keep the submenus open when they are hovered */ .menu-list__submenu:is(:hover), .overflow-menu::part(overflow):hover { --submenu-content-opacity: 1; visibility: visible; } .overflow-menu::part(overflow) { --menu-top-level-font-size: var(--font-size--xlarge); display: grid; grid-template-columns: var(--full-page-grid-with-margins); } .overflow-menu::part(overflow-list) { position: relative; display: grid; grid-template-columns: minmax(auto, 200px) 1fr; grid-template-areas: 'left right'; grid-template-rows: max-content; grid-gap: 0; grid-column: 2; } .menu-list__list-item:is([slot='overflow']) { --menu-top-level-font-color: var(--color-foreground); --menu-top-level-font-color-rgb: var(--color-foreground-rgb); display: contents; white-space: normal; /* The trigger becomes the left-column grid item, laying the link and its disclosure button out inline */ .menu-list__trigger { grid-area: left; grid-row: auto; display: flex; align-items: center; justify-content: flex-start; gap: var(--gap-2xs); } .menu-list__disclosure { position: static; flex-shrink: 0; transform: none; } /* Point the chevron toward the content that opens to the right. */ .menu-list__disclosure-icon, .menu-list__disclosure[aria-expanded='true'] .menu-list__disclosure-icon { transform: rotate(-90deg); } .menu-list__link { /* Bare leaf links (no children) have no `.menu-list__trigger` wrapper, so they need explicit left-column placement themselves. On parent items the link is inside the trigger and this is simply ignored. */ grid-area: left; grid-row: auto; height: min-content; font-size: var(--font-size--xl); transition: var(--submenu-content-animation); } .menu-list__submenu { visibility: hidden; grid-row: 1; grid-area: right; grid-row-end: span calc(var(--overflow-count) + 1); padding-inline-start: var(--menu-horizontal-gap); } .menu-list__submenu-inner { transform: none; grid-column: unset; padding-block: 0; } /* The disclosure button owns the expanded state; reveal the submenu when it is expanded (via the inline chevron, hover, or the More trigger). */ &:has(.menu-list__disclosure[aria-expanded='true']) .menu-list__submenu { visibility: visible; } } .header-menu { height: 100%; } .menu-list__submenu-inner { position: relative; display: flex; justify-content: space-between; flex-wrap: wrap; } .menu-list__submenu-inner, .overflow-menu::part(overflow-list) { padding-block-start: var(--submenu-padding-block-start); padding-block-end: var(--submenu-padding-block-end); padding-inline: var(--section-padding-inline); opacity: var(--submenu-content-opacity); transition: var(--submenu-content-animation); transform: translateY(calc(var(--full-open-header-height) - var(--submenu-height))); /* Make overflow menu scrollable when content exceeds viewport */ max-height: calc(80vh - var(--header-height)); overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: rgb(var(--color-foreground-rgb) / var(--opacity-40)) transparent; } .mega-menu__link { font-family: var(--menu-child-font-family); font-style: var(--menu-child-font-style); font-weight: var(--menu-child-font-weight); font-size: var(--menu-child-font-size); line-height: var(--menu-child-font-line-height); text-transform: var(--menu-child-font-case); color: var(--menu-child-font-color); white-space: normal; text-decoration: none; display: inline-flex; padding: var(--padding-2xs) 0; &:hover { color: var(--menu-child-active-font-color); } } .mega-menu__link--parent { font-family: var(--menu-parent-font-family); font-style: var(--menu-parent-font-style); font-weight: var(--menu-parent-font-weight); font-size: var(--menu-parent-font-size); line-height: var(--menu-parent-font-line-height); text-transform: var(--menu-parent-font-case); color: var(--menu-parent-font-color); &:hover { color: var(--menu-parent-active-font-color); } } @media screen and (max-width: 989px) { .mega-menu__content-list-item--hidden-tablet { display: none; } } .mega-menu__link:has(.mega-menu__link-image) { display: flex; flex-direction: column; padding-inline: 0; padding-block: var(--padding-sm) 0; } .mega-menu__link-image { width: 100%; position: relative; aspect-ratio: 16 / 9; margin-bottom: var(--padding-sm); object-fit: cover; border-radius: var(--menu-image-border-radius); } /* Fix alignment for collection image mode links without images */ /* Target only top-level links (direct children of column > div) in collection image mode */ .mega-menu__grid:has(.mega-menu__link-image) .mega-menu__column > div > .mega-menu__link:not(:has(.mega-menu__link-image)) { display: flex; flex-direction: column; padding-inline: 0; padding-block: var(--padding-sm) 0; } .mega-menu__grid:has(.mega-menu__link-image) .mega-menu__column > div > .mega-menu__link:not(:has(.mega-menu__link-image))::before { content: ''; display: block; width: 100%; aspect-ratio: 16 / 9; margin-bottom: var(--padding-sm); background-color: var(--color-foreground-muted); opacity: 0.1; border-radius: var(--menu-image-border-radius); } .mega-menu__grid { display: grid; grid-template-columns: repeat(var(--menu-columns-tablet), minmax(0, 1fr)); gap: var(--menu-vertical-gap) var(--menu-horizontal-gap); width: 100%; @media screen and (min-width: 990px) { grid-template-columns: repeat(var(--menu-columns-desktop), minmax(0, 1fr)); } } .mega-menu__column { grid-column: span 1; } .mega-menu__column--span-2 { grid-column: span 2; } .mega-menu__column--span-3 { grid-column: span 3; } .mega-menu__column--span-4 { grid-column: span 4; } .mega-menu__column--wide-collection-image { grid-column: span 1; @media screen and (min-width: 990px) { grid-column: span 2; } } .mega-menu__submenu .mega-menu__column--wide-collection-image { grid-column: span 1; } .mega-menu__content-list { display: grid; justify-content: end; gap: var(--menu-vertical-gap) var(--menu-horizontal-gap); } .mega-menu__content-list--products { grid-template-columns: repeat(var(--menu-content-columns-tablet), minmax(0, 1fr)); @media screen and (min-width: 990px) { grid-template-columns: repeat(var(--menu-content-columns-desktop), minmax(0, 1fr)); } } .mega-menu__content-list--collections { grid-template-columns: repeat(var(--menu-content-columns-tablet), minmax(0, 300px)); @media screen and (min-width: 990px) { grid-template-columns: repeat(var(--menu-content-columns-desktop), minmax(0, 300px)); } } .mega-menu__list { display: grid; grid-template-columns: subgrid; grid-column: span var(--menu-columns-tablet); gap: var(--menu-vertical-gap) var(--menu-horizontal-gap); @media screen and (min-width: 990px) { grid-column: span var(--menu-columns-desktop); } } .mega-menu__content { grid-column: span var(--menu-content-columns-tablet) / -1; @media screen and (min-width: 990px) { grid-column: span var(--menu-content-columns-desktop) / -1; } } .menu-list__list-item[slot='overflow'] .section { grid-template-columns: 1fr; } .menu-list__list-item[slot='overflow'] .section .mega-menu__grid { grid-column: 1; } .mega-menu__content-list li { white-space: normal; } /* mega more menu */ .mega-menu__more-list { --menu-child-font-size: var(--font-size--xl); width: 200px; } .mega-menu__submenu { /* preserves the inherited grid layout when this submenu wrapper is used */ display: contents; } /* Hide product cards in collapsed submenus from the IntersectionObserver that fires product view events */ .menu-list__list-item:not(:has([aria-expanded='true'])) > .menu-list__submenu product-component { display: none; } /* END_BLOCK:_header-menu */ /* START_BLOCK:_image (INDEX:118) */ .image-block__placeholder { height: 100%; width: 100%; object-fit: cover; object-position: center center; overflow: hidden; position: relative; } image-block { --image-height-basis: 10rem; --image-height-small: calc(var(--image-height-basis) * 2); --image-height-medium: calc(var(--image-height-basis) * 3); --image-height-large: calc(var(--image-height-basis) * 4); display: flex; align-items: center; justify-content: center; aspect-ratio: var(--ratio); width: 100%; max-width: calc(var(--image-height) * var(--ratio)); height: var(--image-height); overflow: hidden; @media screen and (min-width: 750px) { --image-height-small: calc(var(--image-height-basis) * 2.5); --image-height-medium: calc(var(--image-height-basis) * 3.5); --image-height-large: calc(var(--image-height-basis) * 4.5); } @media screen and (max-width: 749px) { height: auto; } &[height='small'] { --image-height: var(--image-height-small); } &[height='medium'] { --image-height: var(--image-height-medium); } &[height='large'] { --image-height: var(--image-height-large); } &[ratio='portrait'] { --ratio: 4 / 5; } &[ratio='square'] { --ratio: 1 / 1; @media screen and (min-width: 750px) { max-width: var(--image-height); } } &[ratio='landscape'] { --ratio: 16 / 9; } img { object-fit: cover; width: 100%; height: auto; aspect-ratio: var(--ratio); border-radius: var(--border-radius); } } /* END_BLOCK:_image */ /* START_BLOCK:_marquee (INDEX:122) */ marquee-component { display: block; width: 100%; overflow: hidden; background-color: var(--color-background); } .marquee__wrapper { display: flex; gap: var(--marquee-gap); width: fit-content; white-space: nowrap; } .marquee__content { min-width: max-content; display: flex; gap: var(--marquee-gap); } .marquee__content :is(p, h1, h2, h3, h4, h5, h6) { white-space: nowrap; } .marquee__content .marquee__repeated-items * { max-width: none; } .marquee__repeated-items { min-width: max-content; display: flex; gap: var(--marquee-gap); align-items: center; justify-content: center; } .marquee__repeated-items > * { align-content: center; } .hero__content-wrapper.layout-panel-flex--column marquee-component { --margin-inline: var(--full-page-margin-inline-offset); width: -webkit-fill-available; min-height: max-content; } @media (prefers-reduced-motion: no-preference) { marquee-component:not([data-disabled]) .marquee__wrapper { animation: marquee-motion var(--marquee-speed) linear infinite var(--marquee-direction); } } @keyframes marquee-motion { to { transform: translate3d(calc(-50% - (var(--marquee-gap) / 2)), 0, 0); } } /* END_BLOCK:_marquee */ /* START_BLOCK:_product-details (INDEX:127) */ /* Clear padding on mobile, if not full-width */ @media screen and (max-width: 749px) { .product-information.section--page-width .product-details > .group-block { padding-inline: 0; } } .view-product-title { display: none; } /* Container styles */ .product-details { display: flex; align-self: start; justify-content: center; } @media screen and (min-width: 750px) { .product-details > .group-block { height: min-content; } .full-height--desktop { height: 100%; max-height: calc(100vh - var(--header-group-height, 0)); min-height: fit-content; } .full-height--desktop .group-block { align-self: var(--details-position, 'flex-start'); } } /* END_BLOCK:_product-details */ /* START_BLOCK:_search-input (INDEX:132) */ .search-page-input { width: 100%; color: var(--color-input-text); background-color: var(--color-input-background); padding-block: var(--padding-lg); padding-inline: calc(var(--icon-size-lg) + var(--margin-xl) * 1.5); text-overflow: ellipsis; overflow: hidden; border-radius: var(--style-border-radius-inputs); border: var(--style-border-width-inputs) solid var(--color-input-border); @media screen and (max-width: 749px) { padding-inline: calc(var(--margin-xs) + var(--icon-size-lg) + var(--padding-md)); } } .search-page-input::placeholder { color: rgb(var(--color-input-text-rgb) / var(--opacity-subdued-text)); } .search-page-input__parent { display: flex; flex-direction: column; align-items: var(--horizontal-alignment); } .search-results__no-results { opacity: var(--opacity-subdued-text); } search-page-input-component { position: relative; width: 100%; display: flex; top: 0; max-width: var(--size-style-width); align-items: center; background-color: var(--color-background); margin: var(--margin-2xl) 0 var(--margin-md); @media screen and (max-width: 749px) { max-width: 100%; } } search-page-input-component .search__icon, search-page-input-component .search__icon:hover, search-page-input-component .search__reset-button, search-page-input-component .search__reset-button:hover { background: transparent; position: absolute; top: auto; width: var(--icon-size-lg); height: var(--icon-size-lg); } search-page-input-component .search__icon svg, search-page-input-component .search__reset-button svg { width: var(--icon-size-md); height: var(--icon-size-md); } search-page-input-component .search__icon svg { color: var(--color-input-text); } search-page-input-component .search__icon { inset-inline-start: var(--margin-lg); @media screen and (max-width: 749px) { inset-inline-start: var(--margin-md); } } search-page-input-component .search__reset-button { border-radius: 100%; color: var(--color-input-text); inset-inline-end: var(--margin-lg); cursor: pointer; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--animation-speed) var(--animation-easing), visibility var(--animation-speed) var(--animation-easing); @media screen and (max-width: 749px) { inset-inline-end: var(--margin-md); } } search-page-input-component:has(.search-page-input:not(:placeholder-shown)) .search__reset-button { opacity: 1; visibility: visible; pointer-events: auto; } search-page-input-component .search__reset-button-icon { vertical-align: middle; display: flex; align-items: center; justify-content: center; width: var(--icon-size-lg); height: var(--icon-size-lg); transition: transform var(--animation-speed) var(--animation-easing); } search-page-input-component .search__reset-button:active .search__reset-button-icon { transform: scale(0.9); } search-page-input-component .search__reset-button-icon svg { width: var(--icon-size-md); height: var(--icon-size-md); } search-page-input-component .search__reset-button--hidden { cursor: default; opacity: 0; transition: opacity var(--animation-speed) var(--animation-easing); pointer-events: none; visibility: hidden; } search-page-input-component .search__reset-button-text { display: none; } /* END_BLOCK:_search-input */ /* START_BLOCK:_slide (INDEX:133) */ .slide__content { height: 100%; position: relative; z-index: var(--layer-flat); @supports (animation-timeline: auto) { opacity: 0; animation: slide-reveal both linear; animation-timeline: var(--slideshow-timeline); } @media (prefers-reduced-motion) { opacity: 1; animation: none; } } .slide__content > * { margin: auto; } .slide__content.background-transparent { background-color: transparent; } slideshow-slide > .slide__image-container { display: flex; width: 100%; height: 100%; overflow: hidden; position: absolute; } .slide__image-container > .slide__image, .slide__image-container > .slide__video, .slide__image-container > .slide__video-poster { position: relative; width: 100%; height: 100%; object-fit: cover; object-position: center center; } .slide__image-container > .slide__video-poster { position: absolute; } /* * Force Safari to recalculate the timeline state on timeline refresh (after loop) */ slideshow-component[refreshing-timeline] .slide__content { animation: none; } slideshow-slide .slide__image-container--rounded { border-radius: var(--corner-radius, 0); } /* END_BLOCK:_slide */ /* START_BLOCK:_social-link (INDEX:134) */ .social-icons__icon-wrapper { display: flex; align-items: center; justify-content: center; height: var(--icon-size-lg); } .social-icons__icon { display: flex; flex-shrink: 0; width: var(--icon-size-lg); height: var(--icon-size-lg); } .social-icons__icon { display: none; } .social-icons__icon-wrapper:has(.social-icons__icon path) { width: var(--icon-size-lg); .social-icons__icon { display: block; } .social-icons__icon-label { display: none; } } /* Disabled state for editor */ .shopify-design-mode .social-icons__icon-wrapper--disabled { opacity: var(--disabled-opacity, 0.5); cursor: not-allowed; } .shopify-design-mode .social-icons__icon-wrapper--disabled a { pointer-events: none; } /* END_BLOCK:_social-link */ /* START_BLOCK:comparison-slider (INDEX:142) */ comparison-slider-component { display: block; } .comparison-slider { position: relative; overflow: hidden; aspect-ratio: var(--ratio); min-height: 0; } .comparison-slider:not(:has(img)) { min-width: 25dvh; } .comparison-slider__container { position: relative; width: 100%; height: 100%; } /* Container and Layout */ .comparison-slider__media-wrapper { --compare: 50; position: relative; width: 100%; height: 100%; display: grid; grid-template: 1fr / 1fr; overflow: hidden; } /* Layer Containers */ .comparison-slider__layer { grid-area: 1 / 1; position: relative; width: 100%; height: 100%; transition: clip-path var(--transition-duration, 0s) ease-in-out; } .comparison-slider__layer--after { z-index: var(--layer-base); } /* Before Layer Clipping (inverse of after layer) */ [data-orientation='horizontal'] .comparison-slider__layer--before { /* stylelint-disable-next-line plugin/no-unsupported-browser-features */ clip-path: inset(0 calc((100 - var(--compare)) * 1%) 0 0); } [data-orientation='vertical'] .comparison-slider__layer--before { /* stylelint-disable-next-line plugin/no-unsupported-browser-features */ clip-path: inset(0 0 calc(var(--compare) * 1%) 0); } /* After Layer Clipping */ [data-orientation='horizontal'] .comparison-slider__layer--after { /* stylelint-disable-next-line plugin/no-unsupported-browser-features */ clip-path: inset(0 0 0 calc(var(--compare) * 1%)); } [data-orientation='vertical'] .comparison-slider__layer--after { /* stylelint-disable-next-line plugin/no-unsupported-browser-features */ clip-path: inset(calc((100 - var(--compare)) * 1%) 0 0 0); } /* Images and Placeholders */ .before-image, .after-image, .comparison-slider__placeholder { width: 100%; height: 100%; object-fit: cover; aspect-ratio: var(--ratio); } .comparison-slider__placeholder { position: absolute; inset: 0; } .comparison-slider__placeholder svg { width: 100%; height: 100%; background-color: var(--color-background); fill: var(--color-foreground); } /* Range Input (Hidden but Functional) */ .cs-slider { position: absolute; inset: 0; z-index: var(--layer-heightened); width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: inherit; appearance: none; } [data-orientation='horizontal'] .cs-slider { cursor: ew-resize; } [data-orientation='vertical'] .cs-slider { cursor: ns-resize; writing-mode: vertical-lr; direction: rtl; } /* Range Input Thumb */ .cs-slider::-webkit-slider-thumb, .cs-slider::-moz-range-thumb { width: var(--button-size); height: var(--button-size); border: 0; background: transparent; cursor: inherit; appearance: none; } /* Range Input Track */ .cs-slider::-webkit-slider-track, .cs-slider::-moz-range-track { background: transparent; border: 0; appearance: none; } /* Visual Slider Elements */ .comparison-slider__media-wrapper::before, .comparison-slider__media-wrapper::after { content: ''; position: absolute; pointer-events: none; transition: left var(--transition-duration, 0s) ease-in-out, top var(--transition-duration, 0s) ease-in-out; z-index: var(--layer-raised); } /* Slider Track Line */ .comparison-slider__media-wrapper::after { background: var(--color-background); box-shadow: 0 0 12px 0 rgb(0 0 0 / 0.1); } .comparison-slider__media-wrapper::before { background: var(--color-background); } .comparison-slider__media-wrapper[data-orientation='horizontal']::after { inset: 0 auto; left: calc(var(--compare) * 1%); width: 4px; transform: translateX(-50%); } .comparison-slider__media-wrapper[data-orientation='vertical']::after { inset: auto 0; top: calc((100 - var(--compare)) * 1%); height: 4px; transform: translateY(-50%); } /* Slider Handle */ .cs-slider__handle { position: absolute; z-index: var(--layer-heightened); pointer-events: none; width: var(--button-size); height: var(--button-size); color: var(--handle-color, var(--color-foreground)); background: var(--color-background); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 12px 0 rgb(0 0 0 / 0.1); transition: left var(--transition-duration, 0s) ease-in-out, top var(--transition-duration, 0s) ease-in-out, gap 0.2s ease-in-out; gap: var(--gap-sm); padding: var(--padding-xs); } .comparison-slider__media-wrapper:hover .cs-slider__handle { gap: var(--gap-2xs); } .cs-slider__chevron { display: flex; align-items: center; justify-content: center; } [data-orientation='horizontal'] .cs-slider__handle { top: 50%; left: calc(var(--compare) * 1%); transform: translate(-50%, -50%); flex-direction: row; } [data-orientation='vertical'] .cs-slider__handle { left: 50%; top: calc((100 - var(--compare)) * 1%); transform: translate(-50%, -50%) rotate(90deg); } /* Text Labels */ .comparison-slider__text { position: absolute; padding: var(--padding-xs); pointer-events: none; } .comparison-slider__text--with-bg { background: var(--text-background-color); border-radius: var(--text-corner-radius); } /* Horizontal: before/after control inline (left/right), position controls block (top/bottom) */ [data-orientation='horizontal'] .comparison-slider__text--before { inset-inline-start: var(--padding-sm); } [data-orientation='horizontal'] .comparison-slider__text--after { inset-inline-end: var(--padding-sm); } [data-orientation='horizontal'][data-text-position='start'] .comparison-slider__text { inset-block-start: var(--padding-sm); } [data-orientation='horizontal'][data-text-position='end'] .comparison-slider__text { inset-block-end: var(--padding-sm); } /* Vertical: before/after control block (top/bottom), position controls inline (left/right) */ [data-orientation='vertical'] .comparison-slider__text--before { inset-block-start: var(--padding-sm); } [data-orientation='vertical'] .comparison-slider__text--after { inset-block-end: var(--padding-sm); } [data-orientation='vertical'][data-text-position='start'] .comparison-slider__text { inset-inline-start: var(--padding-sm); } [data-orientation='vertical'][data-text-position='end'] .comparison-slider__text { inset-inline-end: var(--padding-sm); } /* END_BLOCK:comparison-slider */ /* START_BLOCK:contact-form-submit-button (INDEX:143) */ .submit-button { min-width: max-content; } /* END_BLOCK:contact-form-submit-button */ /* START_BLOCK:contact-form (INDEX:144) */ .contact-form__form { display: flex; flex-direction: column; gap: var(--gap-md); } .contact-form__form-row { display: flex; flex-direction: column; gap: var(--gap-md); @media screen and (min-width: 750px) { flex-direction: row; align-items: center; } } .contact-form__input { width: 100%; overflow: hidden; text-overflow: ellipsis; color: var(--color-input-text); background-color: var(--color-input-background); padding: var(--padding-lg) var(--padding-xl); border-radius: var(--style-border-radius-inputs); border: var(--style-border-width-inputs) solid var(--color-input-border); -webkit-font-smoothing: antialiased; } .contact-form__input--textarea { resize: vertical; min-height: var(--input-textarea-min-height); } .contact-form__error, .contact-form__success { display: flex; align-items: center; gap: var(--gap-xs); } /* END_BLOCK:contact-form */ /* START_BLOCK:disclosures (INDEX:146) */ .disclosures__container { width: 100%; } .disclosures__container:has(> [shopify-block-empty]) { display: none; } .disclosures { --disclosures-symbol-width: calc(var(--disclosures-icon-size) * var(--disclosures-symbol-aspect-ratio, 1)); display: block; color: var(--color, inherit); width: 100%; container-type: inline-size; } .disclosures.accordion--dividers accordion-custom:first-child .details { border-block-start: var(--style-border-width) solid var(--color-border); } .disclosures.accordion--dividers accordion-custom:last-child .details { border-block-end: var(--style-border-width) solid var(--color-border); } .disclosures__heading { margin-block-end: var(--margin-lg); } .disclosures .details__header { padding-block: var(--padding-xl); display: flex; align-items: flex-start; gap: var(--gap-xs); } .disclosures .details__header > .svg-wrapper { margin-block-start: calc((var(--disclosures-icon-size) - var(--icon-size-xs)) / 2); } .disclosures details[open] .details__header { padding-block-end: var(--padding-xs); } .disclosures__summary-content { flex: 1 1 0%; display: flex; flex-wrap: wrap; align-items: center; row-gap: var(--gap-xs); min-width: 0; } .disclosures__summary-item { display: flex; flex-direction: column; row-gap: var(--gap-xs); min-width: 0; overflow-wrap: break-word; } .disclosures__summary-item--measure { position: fixed; inset-block-start: 0; inset-inline-start: 0; display: block; width: max-content; max-width: none; visibility: hidden; white-space: nowrap; pointer-events: none; contain: layout style; } .disclosures__summary-item-row { display: flex; align-items: center; gap: var(--padding-2xs); min-width: 0; vertical-align: middle; } .disclosures__summary-item-title { font-weight: var(--font-weight-normal, normal); overflow-wrap: break-word; } .disclosures__summary-item--measure .disclosures__summary-item-title { white-space: nowrap; overflow-wrap: normal; } .disclosures .details__icon { display: inline-block; flex-shrink: 0; width: auto; max-inline-size: 100%; height: var(--disclosures-icon-size); margin: 0; object-fit: contain; vertical-align: middle; } .disclosures .details__icon--fallback { width: var(--disclosures-icon-size); } .disclosures .details__icon--fallback > svg { display: block; width: 100%; height: 100%; transform: scale(1.2); transform-origin: center; } .disclosures__summary-item-row:has(> .details__icon) { display: grid; grid-template-columns: var(--disclosures-symbol-width) minmax(0, 1fr); align-items: center; column-gap: var(--padding-2xs); min-inline-size: 0; } .disclosures__summary-item-row:has(> .details__icon) > .details__icon { grid-column: 1; justify-self: center; } .disclosures__summary-item-row:has(> .details__icon) > .disclosures__summary-item-title { grid-column: 2; } .disclosures details[open] > summary .disclosures__summary-item-title { font-weight: var(--font-weight-bold, bold); } .disclosures__summary-item-extra { display: block; } .disclosures__separator { display: none; flex-shrink: 0; padding-inline: var(--padding-xs); line-height: 1; } @container (min-width: 701px) { .disclosures:where([data-summary-layout='inline']) .details__header { align-items: center; } .disclosures:where([data-summary-layout='inline']) .details__header > .svg-wrapper { margin-block-start: 0; } .disclosures:where([data-summary-layout='inline']) .disclosures__summary-item { display: block; } .disclosures:where([data-summary-layout='inline']) .disclosures__summary-item-row { display: inline-flex; } .disclosures:where([data-summary-layout='inline']) .disclosures__summary-item-row:has(> .details__icon) { display: inline-grid; } .disclosures:where([data-summary-layout='inline']) .disclosures__summary-item-extra { display: inline-flex; align-items: center; } .disclosures:where([data-summary-layout='inline']) .disclosures__separator { display: inline-block; } } .disclosures__summary-item--measure .disclosures__summary-item-row { display: inline-flex; white-space: nowrap; } .disclosures__summary-item--measure .disclosures__summary-item-row:has(> .details__icon) { display: inline-grid; } .disclosures__summary-item--measure .disclosures__summary-item-extra { display: inline-flex; align-items: center; white-space: nowrap; } .disclosures__summary-item--measure .disclosures__separator { display: inline-block; } .disclosures details[open] .disclosures__summary-item-extra { display: none; } .disclosures__item { display: flex; } .disclosures__item + .disclosures__item { margin-block-start: var(--spacing-lg); } .disclosures__item-left { flex: 0 1 auto; min-width: 0; cursor: default; } .disclosures__item-right { flex: 1; cursor: pointer; } .disclosures__item-header { display: flex; align-items: center; gap: var(--padding-2xs); margin-block-end: var(--spacing-xs); padding-block-end: var(--padding-xs); } .disclosures__item-title { margin: 0; } .disclosures__item-header:has(> .details__icon) { display: grid; grid-template-columns: var(--disclosures-symbol-width) minmax(0, 1fr); align-items: center; column-gap: var(--padding-2xs); min-inline-size: 0; } .disclosures__item-header:has(> .details__icon) > .details__icon { grid-column: 1; justify-self: center; } .disclosures__item-header:has(> .details__icon) > .disclosures__item-title { grid-column: 2; } .disclosures details[open] .disclosures__item-title { font-weight: var(--font-weight-bold, bold); } .disclosures__item-content { max-width: var(--normal-content-width); padding-block-end: var(--padding-2xl); } .disclosures details[open] .details-content { padding-block-end: 0; } /* END_BLOCK:disclosures */ /* START_BLOCK:email-signup (INDEX:147) */ .email-signup-block { --arrow-button-size: 58px; --arrow-button-size-integrated: 42px; --arrow-button-size-small: 20px; --arrow-icon-size: 32px; --arrow-icon-size-small: 24px; min-width: fit-content; @media screen and (max-width: 749px) { width: 100%; min-width: unset; } } .email-signup__heading { color: var(--color, inherit); padding-block: var(--padding-sm); } .email-signup__form { display: flex; flex-direction: column; } .email-signup__input-group { display: flex; align-items: stretch; background-color: transparent; } .email-signup__input-group:not(.email-signup__input-group--integrated):not(.email-signup__input-group--underline) { gap: var(--gap-xs); align-items: center; } .email-signup__input-group:not(.email-signup__input-group--arrow):not(.email-signup__input-group--underline):not( .email-signup__input-group--integrated ) { @media screen and (max-width: 749px) { flex-direction: column; } } .email-signup__input-group--integrated { border-width: var(--border-width); border-radius: var(--border-radius); border-style: solid; border-color: var(--color-input-border); background-color: var(--color-input-background); } .email-signup__input-group--integrated.email-signup__input-group--no-border { border: none; } .email-signup__input { flex: 1; min-width: 0; border-width: var(--border-width); border-radius: var(--border-radius); border-style: solid; border-color: var(--color-input-border); background-color: var(--color-input-background); transition: background-color var(--animation-speed) var(--animation-easing), color var(--animation-speed) var(--animation-easing); @media screen and (max-width: 749px) { width: 100%; } } .email-signup__input.paragraph { color: var(--color-input-text); outline-color: var(--color-input-background); } .email-signup__button { white-space: nowrap; padding: 0; @media screen and (max-width: 749px) { width: 100%; } } .email-signup__input, .email-signup__button--text { padding: var(--padding-lg) var(--padding-3xl); } .email-signup__input-group--underline { --box-shadow-color: var(--color-input-border); --box-shadow-multiplier: 1; --box-shadow-focused-multiplier: 1.75; box-shadow: 0 calc(var(--border-width) * var(--box-shadow-multiplier)) 0 var(--box-shadow-color); transition: box-shadow var(--animation-values); margin-block-end: calc(var(--border-width) * var(--box-shadow-focused-multiplier)); &:focus-within { --box-shadow-multiplier: var(--box-shadow-focused-multiplier); --box-shadow-color: var(--color-input-text); } } .email-signup__input-group .email-signup__input--underline { color: var(--color-input-text); background-color: transparent; padding: 12px 0; border: none; border-radius: 0; &:focus-visible { outline: none; } } .email-signup__input::placeholder { color: rgb(var(--color-input-text-rgb) / var(--opacity-70)); } .email-signup__input-group .email-signup__input--none { color: var(--color-input-text); background-color: var(--color-input-background); border: none; } .email-signup__input-group--integrated .email-signup__input { background-color: transparent; border: none; border-radius: 0; } .email-signup__button-icon { color: currentcolor; padding: 5px; @media screen and (max-width: 749px) { padding: 0; align-self: center; justify-self: center; width: var(--icon-size-lg); height: var(--icon-size-lg); } } .email-signup__button--arrow { width: var(--arrow-button-size-small); height: var(--arrow-button-size-small); padding: 0; &:not(.email-signup__button--integrated) { width: var(--arrow-button-size); height: var(--arrow-button-size); display: flex; align-items: center; justify-content: center; > .email-signup__button-icon { width: var(--arrow-icon-size); height: var(--arrow-icon-size); padding: 0; } } } .email-signup__button--integrated { --button-offset: var(--margin-xs); align-self: stretch; margin: var(--button-offset); flex-shrink: 0; @media screen and (max-width: 749px) { width: fit-content; } &.email-signup__button--text { padding: 0 var(--padding-3xl); } &.email-signup__button--text.button-unstyled { padding: 0 var(--padding-xl); } &.button-unstyled { border-radius: var(--border-radius); } > .email-signup__button-icon { padding: 0; } &.email-signup__button--arrow { width: var(--arrow-button-size-integrated); height: var(--arrow-button-size-integrated); align-self: center; display: flex; align-items: center; justify-content: center; > .email-signup__button-icon { width: var(--arrow-icon-size-small); height: var(--arrow-icon-size-small); } } } .email-signup__input--underline + .email-signup__button--integrated { margin: 0; align-self: center; &.email-signup__button--text { padding-block: 9px; } &.email-signup__button--text.button-unstyled { padding-inline: 0; min-width: 44px; min-height: 44px; } &.button-unstyled { border-radius: 0; } &.email-signup__button--arrow { width: var(--arrow-button-size-integrated); height: var(--arrow-button-size-integrated); display: flex; align-items: center; justify-content: center; > .email-signup__button-icon { width: var(--arrow-icon-size-small); height: var(--arrow-icon-size-small); } } } .email-signup__button:not(.button-unstyled) { background-color: var(--button-background-color); color: var(--button-color); text-transform: var(--button-text-case-primary); } .email-signup__button.button-secondary { text-transform: var(--button-text-case-secondary); } .email-signup__button.button-unstyled { background-color: transparent; color: var(--color-input-text); } .email-signup__button.button-unstyled:hover { --hover-color-rgb: var(--color-input-text-rgb); color: rgb(var(--hover-color-rgb) / var(--opacity-70)); cursor: pointer; } .email-signup__message { display: flex; align-items: center; gap: var(--gap-xs); } .email-signup__message-text { margin: 0; } /* END_BLOCK:email-signup */ /* START_BLOCK:featured-collection (INDEX:148) */ .featured-collection-block { width: 100%; } /* END_BLOCK:featured-collection */ /* START_BLOCK:filters (INDEX:149) */ .facets-block-wrapper { @media screen and (min-width: 750px) { margin: var(--facets-margin); grid-column: var(--grid-column--desktop); } } .facets-block-wrapper--vertical { @media screen and (min-width: 750px) { grid-column: var(--grid-column--desktop); } } .facets-toggle { --icon-offset: -3px; display: flex; justify-content: space-between; align-items: center; height: var(--minimum-touch-target); margin: var(--facets-margin); padding-block: var(--facets-inner-padding-block); padding-inline: var(--facets-inner-padding-inline); @media screen and (min-width: 750px) { display: none; } } .facets-toggle__wrapper { margin-inline-start: var(--icon-offset); } .facets-toggle__button { box-shadow: none; @media screen and (min-width: 750px) { display: none; } } .filter-count-bubble { position: relative; width: 20px; aspect-ratio: 1; border-radius: 50%; display: grid; line-height: normal; place-content: center; color: var(--color-foreground); border: var(--icon-stroke-width) solid var(--color-background); } .facets-mobile__title-wrapper .h3 { margin-block-end: 0; display: inline-flex; align-items: center; gap: var(--gap-xs); } .facets-mobile__title-wrapper .filter-count-bubble { width: 22px; height: 22px; } .facets-mobile__title-wrapper .filter-count-bubble__text { font-size: var(--font-size--xs); } .filter-count-bubble__background { position: absolute; inset: 0; background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10-25)); border-radius: var(--style-border-radius-50); } .filter-count-bubble__text { font-size: 11px; font-weight: var(--font-paragraph--weight); aspect-ratio: 1 / 1; } .facets-toggle--no-filters { @media screen and (max-width: 749px) { /* stylelint-disable-next-line declaration-no-important */ justify-content: unset !important; & > .facets-mobile-wrapper { width: 100%; } } } .facets-block-wrapper--vertical + .facets-toggle { @media screen and (max-width: 749px) { margin: 0; } } .facets-mobile-wrapper { display: flex; align-items: center; gap: var(--gap-sm); justify-content: flex-end; } .facets-mobile-wrapper--multiple-controls { justify-content: space-between; } .facets { --facets-form-horizontal-gap: 20px; --facets-horizontal-max-input-wrapper-height: 230px; --facets-upper-z-index: var(--layer-raised); --facets-open-z-index: var(--layer-heightened); --facets-sticky-z-index: var(--layer-sticky); --facets-panel-min-width: 120px; --facets-panel-height: 300px; --facets-grid-panel-width: 300px; --facets-clear-padding: var(--padding-md); --facets-clear-shadow: 0 -4px 14px 0 rgb(var(--color-foreground-rgb) / var(--facets-low-opacity)); --facets-input-label-color: rgb(var(--color-input-text-rgb) / var(--opacity-60)); --facets-clear-all-min-width: 120px; --facets-see-results-min-width: 55%; --facets-mobile-gap: 22px; --facets-low-opacity: 10%; --facets-hover-opacity: 75%; @media screen and (min-width: 750px) { padding-inline: var(--padding-inline-start) var(--padding-inline-end); } } .facets--horizontal { display: none; @media screen and (min-width: 750px) { padding-block: var(--padding-block-start) var(--padding-block-end); display: flex; align-items: center; position: relative; z-index: var(--facets-upper-z-index); border: none; height: auto; top: initial; bottom: initial; max-height: none; width: auto; overflow: visible; } } .facets--vertical { display: none; @media screen and (min-width: 750px) { padding-block: 0 var(--padding-block-end); display: block; position: static; top: auto; bottom: auto; height: auto; max-height: none; width: auto; overflow: visible; } } .facets-drawer__form-wrapper { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; } .facets-drawer__form-wrapper .facets__form { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; } .facets-drawer__filters { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; position: relative; } .facets-drawer__filters .facets__filters-wrapper, .facets-drawer__filters .filter-remove-buttons, .facets-drawer__filters .sorting-filter-component { overflow: visible; } .facets.facets-controls-wrapper { @media screen and (min-width: 750px) { grid-column: column-1 / column-12; color: rgb(var(--color-foreground-rgb) / var(--opacity-70)); gap: 0 var(--facets-form-horizontal-gap); padding-bottom: var(--padding-xs); } } .facets__inputs { display: flex; flex-direction: column; gap: var(--padding-lg); width: 100%; } :is(.facets--drawer, .facets--vertical) .facets__inputs:not(:has(.show-more)) { padding-block-end: var(--padding-sm); } /* Facets - Form */ .facets__form-wrapper { display: flex; flex-direction: column; color: var(--color-foreground-subdued); width: 100%; } .facets--horizontal .facets__form-wrapper { @media screen and (min-width: 750px) { flex-direction: row; height: auto; } } .facets__form { display: flex; flex-flow: column; width: 100%; height: 100%; } .facets--horizontal .facets__form { @media screen and (min-width: 750px) { flex-flow: row nowrap; height: auto; } } .facets:not(.facets--drawer) .facets__filters-wrapper { @media screen and (min-width: 750px) { margin-inline-end: var(--margin-md); } } .facets--horizontal .facets__filters-wrapper { @media screen and (min-width: 750px) { max-width: 60%; display: flex; flex-wrap: wrap; column-gap: var(--gap-xl); margin-inline-end: 0; } } /* Facets - Summary */ .facets__summary { --variant-picker-swatch-width: 32px; --variant-picker-swatch-height: 32px; --icon-opacity: 0.5; @media screen and (min-width: 750px) { --variant-picker-swatch-width: 26px; --variant-picker-swatch-height: 26px; } font-size: var(--font-h5--size); display: flex; justify-content: space-between; &:hover { --icon-opacity: 1; } } .facets__filters-wrapper:hover .facets__summary, .facets__filters-wrapper:has(.facets__panel[open]) .facets__summary { opacity: var(--facets-hover-opacity); } .facets__filters-wrapper .facets__summary:hover, .facets__filters-wrapper .facets__panel[open] .facets__summary { opacity: 1; } .facets--horizontal .facets__summary { @media screen and (min-width: 750px) { font-size: var(--font-paragraph--size); justify-content: flex-start; height: var(--minimum-touch-target); } } .facets__summary .icon-caret { height: var(--icon-size-xs); width: var(--icon-size-xs); color: rgb(var(--color-foreground-rgb) / var(--icon-opacity)); margin-block: var(--margin-2xs); transition: color var(--animation-speed) var(--animation-easing); } .facets--drawer .facets__summary .icon-caret { margin-inline-start: var(--margin-2xs); } /* Facets - Inputs */ .facets__inputs-wrapper { margin-block: var(--padding-xs) var(--padding-xs); } .facets__inputs .show-more { display: flex; flex-direction: column; gap: var(--gap-xl); margin-block-end: var(--padding-xl); } .facets:not(.facets--drawer) .facets__inputs-wrapper { @media screen and (min-width: 750px) { gap: var(--gap-sm); } } .facets--horizontal .facets__inputs .show-more { @media screen and (min-width: 750px) { display: contents; } } .facets--horizontal .facets__inputs-wrapper { @media screen and (min-width: 750px) { max-height: var(--facets-horizontal-max-input-wrapper-height); scrollbar-width: none; -ms-overflow-style: none; overflow-x: auto; padding: var(--padding-md); margin-block: 0; } } .facets--vertical .facets__inputs:has(.show-more) .facets__inputs-wrapper { padding-block: var(--padding-sm); padding-inline: var(--padding-sm); margin-block: calc(var(--padding-sm) * -1); margin-inline: calc(var(--padding-sm) * -1); } @media screen and (max-width: 749px) { .facets__inputs:has(.show-more) .facets__inputs-wrapper { padding-block: var(--padding-sm); padding-inline: var(--padding-sm); margin-block: calc(var(--padding-sm) * -1); margin-inline: calc(var(--padding-sm) * -1); } } .facets__inputs-wrapper:not(:has(.facets__inputs-list)), .facets__inputs-wrapper .facets__inputs-list { display: flex; gap: var(--facets-mobile-gap); flex-direction: column; @media screen and (min-width: 750px) { gap: var(--gap-sm); } } @media screen and (min-width: 750px) { .facets--vertical .facets__inputs-wrapper .facets__inputs-list--swatches { gap: var(--gap-sm); } .facets--horizontal .facets__inputs-wrapper .facets__inputs-list--swatches:not(.facets__inputs-list--swatches-grid) { display: grid; grid-template-columns: repeat(var(--swatch-columns, 4), 1fr); } } .facets__inputs-wrapper .facets__inputs-list--swatches { --facets-mobile-gap: var(--gap-sm); } .facets__inputs-wrapper .facets__inputs-list--grid { --min-column-width: 20%; display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--min-column-width), 1fr)); gap: var(--gap-sm); @media screen and (min-width: 750px) { --min-column-width: 50px; } } .facets-block-wrapper:not(.facets-block-wrapper--vertical) .facets__inputs-list--grid { @media screen and (min-width: 750px) { width: var(--facets-grid-panel-width); } } .facets__inputs-wrapper--row:not(:has(.facets__inputs-list)), .facets__inputs-wrapper--row .facets__inputs-list { flex-wrap: wrap; flex-direction: row; } .facets__inputs .show-more__button { --show-more-icon-size: 22px; --show-more-gap: 8px; gap: var(--show-more-gap); @media screen and (min-width: 750px) { --show-more-icon-size: 16px; --show-more-gap: 6px; } } .facets__inputs .show-more__button .icon-plus { width: var(--show-more-icon-size); height: var(--show-more-icon-size); svg { width: var(--icon-size-xs); height: var(--icon-size-xs); } } /* Facets - Panel */ .facets__panel { padding: 0 var(--theme-drawer-padding); } .facets:not(.facets--drawer) .facets__panel, .facets-controls-wrapper .facets__panel { @media screen and (min-width: 750px) { padding: 0; } } .facets--horizontal .facets__panel { @media screen and (min-width: 750px) { position: relative; } } .facets-mobile-wrapper .facets__panel-content { border-radius: var(--style-border-radius-popover); } .facets-mobile-wrapper { --facets-upper-z-index: var(--layer-raised); --facets-panel-min-width: 120px; --facets-panel-height: 300px; } .facets--horizontal .facets__panel-content { @media screen and (min-width: 750px) { border-radius: var(--style-border-radius-popover); position: absolute; top: 100%; width: max-content; min-width: var(--facets-panel-min-width); max-width: var(--facets-panel-width); max-height: var(--facets-panel-height); z-index: var(--facets-upper-z-index); box-shadow: var(--shadow-popover); border: var(--style-border-popover); background-color: var(--color-background); overflow-y: hidden; gap: 0; } } :is(.facets--drawer, .facets--vertical) :is(.facets__item, .sorting-filter)::before { content: ''; display: block; height: 0; width: calc(100% - var(--theme-drawer-padding) * 2); border-top: var(--style-border-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25)); margin: 0 auto; } @media screen and (min-width: 750px) { .facets:not(.facets--drawer) :is(.facets__item, .sorting-filter)::before { width: 100%; } .facets--horizontal .facets__item:not(:first-of-type)::before, .facets--horizontal .sorting-filter::before { content: none; } } @media screen and (min-width: 750px) { .facets--vertical .facets__item:not(:first-of-type)::before, .facets--vertical .sorting-filter::before { content: ''; } } /* Facets - Text */ .facets__label, .facets__clear-all-link, .clear-filter { text-decoration-color: transparent; text-decoration-thickness: 0.075em; text-underline-offset: 0.125em; transition: text-decoration-color var(--animation-speed) var(--animation-easing); } .facets__clear-all-link { display: none; cursor: pointer; padding: var(--padding-xs); color: var(--button-color); transition: text-decoration-color var(--animation-speed) var(--animation-easing), color var(--animation-speed) var(--animation-easing); } .facets__clear-all-link:hover { --button-color: rgb(var(--color-foreground-rgb) / var(--opacity-80)); text-decoration: underline; text-decoration-color: var(--button-color); } .facets__clear-all-link--horizontal { height: var(--minimum-touch-target); padding-inline: var(--facets-form-horizontal-gap); min-width: var(--facets-clear-all-min-width); } .facets__clear-all-link--active { display: block; } .facets__label, .products-count-wrapper { text-transform: var(--facet-label-transform); } .clear-filter { background-color: transparent; box-shadow: none; padding: 0; } .clear-filter:hover { text-decoration: underline; } /* Clear button */ .facets__clear { display: none; } .facets--horizontal .facets__clear { @media screen and (min-width: 750px) { width: 100%; justify-content: flex-end; padding: 0 var(--facets-clear-padding) var(--facets-clear-padding) 0; cursor: pointer; } } .facets__clear--active { @media screen and (min-width: 750px) { display: flex; } } /* Facets - Label */ .facets__label { color: var(--color-foreground); cursor: pointer; white-space: nowrap; @media screen and (min-width: 750px) { margin-inline-end: var(--margin-2xs); } } /* Products count */ .products-count-wrapper { display: none; } .facets--horizontal .products-count-wrapper { @media screen and (min-width: 750px) { display: flex; margin-inline-start: auto; flex-shrink: 0; align-items: center; height: var(--minimum-touch-target); } } /* Mobile specific components */ .facets__title-wrapper { background-color: var(--color-background); color: var(--color-foreground); position: sticky; top: 0; display: flex; justify-content: space-between; align-items: center; padding-block: var(--padding-xs); padding-inline-start: var(--theme-drawer-padding); padding-inline-end: var(--padding-2xs); z-index: var(--facets-sticky-z-index); } :is(.facets--horizontal, .facets--vertical) .facets__title-wrapper { @media screen and (min-width: 750px) { display: none; } } .facets--drawer .theme-drawer__title { --variant-picker-swatch-width: 32px; --variant-picker-swatch-height: 32px; @media screen and (min-width: 750px) { --variant-picker-swatch-width: 26px; --variant-picker-swatch-height: 26px; } } /* Status */ .facets__status:not(:empty) { width: max-content; display: flex; margin-inline-start: auto; font-weight: 500; color: var(--color-foreground); } .facets__panel[open] .facets__status { display: none; } .facets--filters-title { margin-block-end: 0; color: var(--color-foreground); height: fit-content; @media screen and (max-width: 749px) { display: none; } } .facets--horizontal .facets__panel .facets__status:has(:not(:empty)) { @media screen and (min-width: 750px) { display: flex; margin-inline-start: var(--margin-xs); margin-inline-end: var(--margin-xs); } } /* Horizontal filter style */ .facets--horizontal .facets__form { @media screen and (min-width: 750px) { gap: 0 var(--facets-form-horizontal-gap); } } /* Facets - Actions */ .facets__drawer-actions { --to-top-gradient-background: linear-gradient( to top, rgb(var(--color-background-rgb) / var(--opacity-90)), rgb(var(--color-background-rgb) / var(--opacity-80)), rgb(var(--color-background-rgb) / var(--opacity-40)), transparent ); position: sticky; bottom: 0; z-index: var(--facets-sticky-z-index); order: 1; display: flex; flex-shrink: 0; justify-content: space-between; align-items: stretch; gap: var(--gap-sm); padding-block-start: var(--padding-xs); padding-block-end: var(--padding-md); padding-inline: var(--padding-lg); margin-top: auto; background-image: var(--to-top-gradient-background); background-color: var(--color-background); } /* Clear all is hidden until filters are active; its empty wrapper must not reserve gap */ .facets__drawer-actions:not(:has(.facets__clear-all--active)) { gap: 0; } /* Clear all button */ .facets__clear-all { display: none; cursor: pointer; min-width: var(--facets-clear-all-min-width); flex-grow: 1; padding-block: var(--padding-lg); color: var(--button-color, inherit); } .facets__clear-all--active { display: block; opacity: 1; transform: translateY(0); transition: transform var(--animation-values), opacity var(--animation-values); } @starting-style { .facets__clear-all--active { opacity: 0; transform: translateY(100%); } } .facets__see-results { min-width: var(--facets-see-results-min-width); flex-grow: 1; padding-block: var(--padding-lg); @media screen and (min-width: 990px) { display: none; } } .facets-horizontal-remove { display: flex; align-items: center; } .facets-horizontal-remove--active::before { content: ''; border-inline-start: var(--style-border-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25)); height: var(--font-paragraph--size); position: absolute; } /* END_BLOCK:filters */ /* START_BLOCK:footer-copyright (INDEX:151) */ .footer-utilities__group-copyright { color: var(--color-utilities, var(--color-foreground-muted)); } /* END_BLOCK:footer-copyright */ /* START_BLOCK:footer-policy-list (INDEX:152) */ .policy-list-trigger { anchor-name: --terms-policies-trigger; cursor: pointer; font-size: var(--font-size, 0.75rem); text-transform: var(--text-transform, none); } .policy_list { li { border-radius: calc(var(--style-border-radius-popover) - 8px); a { color: var(--color-foreground); display: inline-block; padding: 8px; text-align: start; width: 100%; outline-color: #0000; font-size: var(--font-size, 0.75rem); text-transform: var(--text-transform, none); } &:is(:hover, :focus-within) { background: rgb(var(--color-foreground-rgb) / 0.15); } } } .terms-policies-popover { position-anchor: --terms-policies-trigger; inset: unset; bottom: calc(anchor(top) + 1rem); inset-inline-start: anchor(start); border-radius: var(--style-border-radius-popover); background: linear-gradient(var(--color-background) 0 100%), linear-gradient(rgb(var(--color-background-rgb) / 0.15) 0 100%); background-clip: padding-box, border-box; border: 1px solid #0000; box-shadow: var(--shadow-popover); padding: 8px; margin: 0; opacity: 0; scale: 0.94; translate: 0 6px; transform-origin: 3.9em 100%; } /* Mirror the scale animation origin onto the trigger in RTL */ [dir='rtl'] .terms-policies-popover { transform-origin: calc(100% - 3.9em) 100%; @media screen and (max-width: 749px) { transform-origin: 100% 100%; } } .terms-policies-popover.\:popover-open, .terms-policies-popover:popover-open { opacity: 1; translate: 0 0; scale: 1; } @media screen and (max-width: 749px) { /* Centering on the trigger is direction-neutral, so physical left is kept */ .terms-policies-popover { inset-inline-start: unset; left: anchor(center); transform: translate(-50%, 0); transform-origin: 0% 100%; } } @supports not (position-anchor: --account-button-trigger) { .terms-policies-popover { bottom: unset; top: calc(var(--anchor-top) * 1px); inset-inline-start: calc(var(--anchor-inline-start) * 1px); transform: translate(0, calc(-100% - 1.25rem)); } @media screen and (max-width: 749px) { .terms-policies-popover { inset-inline-start: unset; left: calc((var(--anchor-left) + (var(--anchor-width) / 2)) * 1px); transform: translate(-50%, calc(-100% - 1.25rem)); } } } @media (prefers-reduced-motion: no-preference) { .terms-policies-popover { transition-property: display, overlay, opacity, scale, translate; transition-behavior: allow-discrete; transition-duration: 0.3s; transition-timing-function: var(--ease-out-quad); } @starting-style { .terms-policies-popover.\:popover-open, .terms-policies-popover:popover-open { opacity: 0.7; translate: 0 6px; scale: 0.94; } } } /* END_BLOCK:footer-policy-list */ /* START_BLOCK:icon (INDEX:154) */ .icon-block { display: flex; flex-shrink: 0; } .icon-block__media { height: auto; } /* END_BLOCK:icon */ /* START_BLOCK:image (INDEX:155) */ .image-block__placeholder { height: 100%; width: 100%; object-fit: cover; object-position: center center; overflow: hidden; position: relative; } .placeholder-image { position: relative; aspect-ratio: var(--ratio); overflow: hidden; } .image-block { display: flex; /* When the image is nested in a group, section, etc, respect the parent's horizontal alignment */ justify-content: var(--horizontal-alignment, 'inline-start'); } .image-block--height-fill .image-block__image { height: 100%; } .image-block__image { object-fit: cover; aspect-ratio: var(--ratio); } /* END_BLOCK:image */ /* START_BLOCK:logo (INDEX:157) */ .logo-block { width: calc(var(--logo-width) + var(--padding-inline-start) + var(--padding-inline-end)); max-width: 100%; max-height: calc(var(--logo-height, 100%) + var(--padding-block-start) + var(--padding-block-end)); font-size: var(--logo-height); display: flex; @media screen and (max-width: 749px) { max-height: calc( var(--logo-height-mobile, var(--logo-height, 100%)) + var(--padding-block-start) + var(--padding-block-end) ); font-size: var(--logo-height-mobile, var(--logo-height)); width: calc( var(--logo-width-mobile, var(--logo-width)) + var(--padding-inline-start) + var(--padding-inline-end) ); } } .logo-block__image-wrapper { display: flex; width: 100%; max-width: 100%; max-height: 100%; } .logo-block__image { object-fit: contain; width: 100%; } /* END_BLOCK:logo */ /* START_BLOCK:menu (INDEX:158) */ .menu { width: 100%; } .menu:not(:has(.menu__heading--empty)) .details-content { margin-block-start: var(--spacing--size); } .menu__item + .menu__item { margin-block-start: var(--spacing--size); } .menu .menu__heading--empty { display: none; } .menu__heading__default { display: contents; } .menu__heading__accordion { display: none; } @media screen and (max-width: 749px) { /* Always show the fallback heading on mobile when accordion is enabled */ .menu--accordion .menu__heading--empty { display: flex; } .menu--accordion .menu__heading__accordion { display: contents; } .menu--accordion .menu__heading__default { display: none; } .menu--accordion .details-content { margin-block-start: var(--spacing--size); } .menu--accordion .menu__details { padding-inline: 0; } .menu--dividers .menu__details { border-block-end: var(--style-border-width) solid var(--color-border); } .menu--dividers .details-content { padding-block-end: var(--padding-sm); } } /* END_BLOCK:menu */ /* START_BLOCK:page-content (INDEX:159) */ .page-content { color: var(--color, inherit); } .page-content a { color: currentcolor; } /* END_BLOCK:page-content */ /* START_BLOCK:page (INDEX:160) */ .page-block { display: flex; flex-direction: column; max-width: 100%; max-height: 100%; width: 100%; height: auto; align-items: flex-start; } .page-title { margin-bottom: var(--margin-xl); } /* END_BLOCK:page */ /* START_BLOCK:payment-icons (INDEX:161) */ .payment-icons { width: 100%; } .payment-icons__list { display: flex; align-items: center; justify-content: var(--alignment); flex-wrap: wrap; gap: var(--icon-gap); margin: 0; padding: 0; } .payment-icons__item { display: flex; align-items: center; } /* END_BLOCK:payment-icons */ /* START_BLOCK:popup-link (INDEX:162) */ .popup-link__button svg { display: inline-block; position: relative; top: var(--margin-2xs); } .popup-link__content { box-shadow: var(--shadow-popover); border: var(--style-border-popover); border-radius: var(--style-border-radius-popover); background-color: var(--color-background); padding: var(--padding-4xl) var(--padding-xl) var(--padding-xl); max-width: var(--normal-content-width); max-height: var(--modal-max-height); @media screen and (min-width: 750px) { padding: var(--padding-5xl); } } .popup-link__content[open] { animation: modalSlideInTop var(--animation-speed) var(--animation-easing) forwards; } .popup-link__content.dialog-closing { animation: modalSlideOutTop var(--animation-speed) var(--animation-easing) forwards; } .popup-link__content--drawer { position: fixed; border-radius: 0; width: var(--sidebar-width); max-width: 95vw; height: 100%; margin: 0; margin-inline-start: auto; /* Inline-end-anchored drawer spans the full physical viewport (viewport-fit=cover); keep its content clear of the outer-edge notch and home indicator */ padding-inline-end: calc(var(--padding-xl) + var(--safe-area-inset-right)); padding-block-end: calc(var(--padding-xl) + var(--safe-area-inset-bottom)); @media screen and (min-width: 750px) { padding-inline-end: calc(var(--padding-5xl) + var(--safe-area-inset-right)); padding-block-end: calc(var(--padding-5xl) + var(--safe-area-inset-bottom)); } } /* Safe-area env() values are physical; the mirrored drawer's outer edge is the left notch in RTL */ [dir='rtl'] .popup-link__content--drawer { padding-inline-end: calc(var(--padding-xl) + var(--safe-area-inset-left)); @media screen and (min-width: 750px) { padding-inline-end: calc(var(--padding-5xl) + var(--safe-area-inset-left)); } } /* The drawer slides in from its anchored edge; mirror the animation in RTL */ [dir='rtl'] .popup-link__content--drawer[open] { --start-x: -100%; } [dir='rtl'] .popup-link__content--drawer[open].dialog-closing { --end-x: -100%; } /* Needed to ensure the drawer is full height */ .popup-link__content--drawer:modal { max-height: 100dvh; } .popup-link__close { top: var(--margin-2xs); inset-inline-end: var(--margin-2xs); opacity: 0.8; animation: none; } /* Match the specificity of the base [dir='rtl'] .close-button safe-area rule so the popup close button keeps its own corner inset in RTL */ [dir='rtl'] .popup-link__close { inset-inline-end: var(--margin-2xs); } /* The close button is absolutely positioned so it bypasses the drawer's safe-area padding */ .popup-link__content--drawer .popup-link__close { top: max(var(--margin-2xs), var(--safe-area-inset-top)); inset-inline-end: max(var(--margin-2xs), var(--safe-area-inset-right)); } /* Safe-area env() values are physical; in RTL the button sits by the left-side notch */ [dir='rtl'] .popup-link__content--drawer .popup-link__close { inset-inline-end: max(var(--margin-2xs), var(--safe-area-inset-left)); } /* END_BLOCK:popup-link */ /* START_BLOCK:product-custom-property (INDEX:165) */ product-custom-property-component { display: block; width: 100%; } product-custom-property-component .__heading { margin-inline: 0; margin-block: 0 var(--padding-sm); } product-custom-property-component .__heading:has(+ .__description) { margin-block-end: var(--padding-2xs); } product-custom-property-component .__description { font-size: min(0.85em, var(--font-paragraph--size)); color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text)); margin-inline: 0; margin-block: 0 var(--padding-md); } product-custom-property-component .__field { position: relative; } product-custom-property-component .__input-wrapper { position: relative; } product-custom-property-component input, product-custom-property-component textarea { width: 100%; /* stylelint-disable-next-line declaration-no-important */ color: var(--color-input-text) !important; } /* Add padding for inputs with counter inside */ product-custom-property-component .__input-wrapper input { padding-bottom: calc(var(--padding-sm) * 3); } product-custom-property-component .__input-wrapper textarea { padding-bottom: calc(var(--padding-sm) * 3); scroll-padding-bottom: calc(var(--padding-sm) * 3); } product-custom-property-component textarea { min-height: 80px; } @supports (resize: vertical) { @media (hover: hover) and (pointer: fine) { product-custom-property-component textarea { resize: vertical; /* stylelint-disable-line */ } } } product-custom-property-component .__character-label { position: absolute; inset-inline-start: var(--input-padding-x); bottom: var(--padding-sm); pointer-events: none; } product-custom-property-component .__character-count { font-style: italic; /* stylelint-disable-next-line declaration-no-important */ color: var(--color-input-text) !important; } /* We should consolidate input styles that share the same behavior */ .custom-property__input { border: var(--style-border-width-inputs) solid var(--color-input-border); border-radius: var(--style-border-radius-inputs); /* this is needed to override the styles from field__input */ box-shadow: none; &:is(:hover, :focus) { /* this is needed to override the styles from field__input */ box-shadow: none; } &:focus { /* this is needed to override the styles from field__input */ outline: var(--focus-outline-width) solid var(--color-input-background); } } /* END_BLOCK:product-custom-property */ /* START_BLOCK:product-inventory (INDEX:167) */ .product-inventory__status { display: flex; align-items: center; font-size: var(--font-paragraph--size); line-height: var(--font-paragraph--line-height); gap: var(--padding-xs); } .product-inventory__icon, .product-inventory__icon svg { width: var(--icon-size-sm); height: var(--icon-size-sm); } .product-inventory__icon-low { color: var(--color-lowstock); } .product-inventory__icon-in_stock { color: var(--color-instock); } .product-inventory__icon-out_of_stock { color: var(--color-outofstock); } .product-inventory__icon circle:first-of-type { opacity: 0.3; } /* END_BLOCK:product-inventory */ /* START_BLOCK:product-recommendations (INDEX:168) */ .block-resource-list { display: flex; flex-direction: column; row-gap: var(--gap); min-width: 0; min-height: 0; container-type: inline-size; container-name: resource-list; border-radius: var(--border-radius, 0); } .product-recommendations-wrapper { width: 100%; } .product-recommendations-wrapper:has(product-recommendations[data-shopify-editor-preview]) { width: 100vw; } /* END_BLOCK:product-recommendations */ /* START_BLOCK:review (INDEX:171) */ .rating-wrapper { --star-fill-color: var(--color-foreground); --star-fill-color-rgb: var(--color-foreground-rgb); --color: var(--color-foreground); --color-rgb: var(--color-foreground-rgb); gap: var(--gap-xs); min-width: fit-content; } .rating-wrapper, .rating { display: flex; align-items: center; } .rating-wrapper.justify-right { flex-direction: row-reverse; /* row-reverse flips the main axis, so main-start is inline-end */ justify-content: flex-start; } .rating { gap: var(--gap-3xs); } .rating-wrapper .rating-count, .rating-wrapper .rating-count-separator { color: var(--star-fill-color); margin: 0; white-space: nowrap; } .rating-count-separator { opacity: var(--opacity-20); padding-inline: calc(var(--padding-xs) / 2) var(--padding-xs); } .stars { height: var(--star-size); fill: var(--empty-star-fill-color); } .filled-star { fill: var(--star-fill-color); } /* END_BLOCK:review */ /* START_BLOCK:social-links (INDEX:173) */ .social-icons__wrapper { display: flex; gap: var(--gap-sm); flex-wrap: wrap; justify-content: center; @media screen and (min-width: 750px) { flex-wrap: nowrap; justify-content: flex-start; } } .social-icons__icon-wrapper { display: flex; align-items: center; justify-content: center; height: var(--icon-size-lg); } .social-icons__icon { display: flex; flex-shrink: 0; width: var(--icon-size-lg); height: var(--icon-size-lg); } .social-icons__icon { display: none; } .social-icons__icon-wrapper:has(.social-icons__icon path) { width: var(--icon-size-lg); .social-icons__icon { display: block; } .social-icons__icon-label { display: none; } } /* Disabled state for editor */ .shopify-design-mode .social-icons__icon-wrapper--disabled { opacity: var(--disabled-opacity, 0.5); cursor: not-allowed; } .shopify-design-mode .social-icons__icon-wrapper--disabled a { pointer-events: none; } /* END_BLOCK:social-links */ /* START_BLOCK:spacer (INDEX:174) */ /* Fill opposite direction */ .layout-panel-flex--column > .spacer-block { width: 100%; } .layout-panel-flex--row > .spacer-block { height: 100%; } /* Flex - Percent */ :is(.layout-panel-flex--row, .layout-panel-flex--column) > .spacer-block--size-percent { flex: var(--spacer-size); } /* Flex - Pixel */ .layout-panel-flex--row > .spacer-block--size-pixel { width: var(--spacer-size); } .layout-panel-flex--column > .spacer-block--size-pixel { height: var(--spacer-size); } /* Mobile */ @media screen and (max-width: 749px) { /* Percent */ .layout-panel-flex--row:not(.mobile-column) > .spacer-block--size-mobile-percent { flex: var(--spacer-size-mobile); height: 100%; } .layout-panel-flex--column > .spacer-block--size-mobile-percent, .mobile-column > .spacer-block--size-percent:not(.spacer-block--size-mobile-pixel) { width: 100%; flex: var(--spacer-size-mobile); } /* Pixel */ .layout-panel-flex--row:not(.mobile-column) > .spacer-block--size-mobile-pixel { width: var(--spacer-size-mobile); height: 100%; } .layout-panel-flex--column > .spacer-block--size-mobile-pixel, .mobile-column > .spacer-block--size-mobile-pixel { width: 100%; flex: 0 0 auto; height: var(--spacer-size-mobile); } } /* END_BLOCK:spacer */ /* START_BLOCK:swatches (INDEX:175) */ product-swatches { width: 100%; display: flex; position: relative; overflow: hidden; gap: 0; flex-shrink: 0; } /* END_BLOCK:swatches */ /* START_BLOCK:video (INDEX:178) */ .placeholder-video { aspect-ratio: 5 / 3; } /* END_BLOCK:video */ /* CSS from snippet stylesheet tags */ /* START_SNIPPET:accordion-custom-component (INDEX:179) */ accordion-custom { details { &::details-content, .details-content { block-size: 0; overflow-y: clip; opacity: 0; interpolate-size: allow-keywords; transition: content-visibility var(--animation-speed-slow) allow-discrete, padding-block var(--animation-speed-slow) var(--animation-easing), opacity var(--animation-speed-slow) var(--animation-easing), block-size var(--animation-speed-slow) var(--animation-easing); } /* Disable transitions when the content toggle is not caused by the direct user interaction, e.g. opening the filters on mobile. */ &:not(:focus-within)::details-content, &:not(:focus-within) .details-content { transition: none; } &:not([open]) { &::details-content, .details-content { padding-block: 0; } } &[open] { &::details-content, .details-content { opacity: 1; block-size: auto; @starting-style { block-size: 0; opacity: 0; overflow-y: clip; } &:focus-within { overflow-y: visible; } } } } } accordion-custom[data-disable-on-mobile='true'] summary { @media screen and (max-width: 749px) { cursor: auto; } } accordion-custom[data-disable-on-desktop='true'] summary { @media screen and (min-width: 750px) { cursor: auto; } } /* END_SNIPPET:accordion-custom-component */ /* START_SNIPPET:accordion-styles (INDEX:180) */ .accordion { flex: 1; width: 100%; } .accordion--dividers accordion-custom:not(:first-child) .details { border-block-start: var(--style-border-width) solid var(--color-border); } /* When accordion borders are not set, show fallback borders */ .accordion--dividers { /* stylelint-disable-next-line declaration-property-value-disallowed-list */ --show-fallback-borders: 0; } .accordion--dividers:not([class*='color-'])[style*='--border-width: 0'], .accordion--dividers:not([class*='color-'])[style*='--border-style: none'] { --show-fallback-borders: 1; } .accordion--dividers accordion-custom:first-child .details { border-block-start: calc(var(--style-border-width) * var(--show-fallback-borders)) solid var(--color-border); } .accordion--dividers accordion-custom:last-child .details { border-block-end: calc(var(--style-border-width) * var(--show-fallback-borders)) solid var(--color-border); } .accordion--dividers .details-content { padding-block-end: var(--padding-sm); } .accordion--caret .icon-plus, .accordion--plus .icon-caret { display: none; } /* because we can't pass apply a specific class on a block based on its parent block setting */ .accordion .details__header { font-family: var(--summary-font-family); font-style: var(--summary-font-style); font-weight: var(--summary-font-weight); font-size: var(--summary-font-size); line-height: var(--summary-font-line-height); text-transform: var(--summary-font-case); min-height: var(--minimum-touch-target); } .details__icon { height: auto; margin-inline-end: var(--margin-xs); } /* END_SNIPPET:accordion-styles */ /* START_SNIPPET:add-to-cart-button-styles (INDEX:181) */ /* Add to cart button */ .button[id^='BuyButtons-ProductSubmitButton-'] { position: relative; overflow: hidden; } .add-to-cart-button { --text-speed: 0.26; --base-delay: calc(var(--text-speed) * 0.25); --tick-speed: 0.1; --ring-speed: 0.2; --check-speed: 0.2; --burst-speed: 0.32; --step-delay: 3; --speed: 1; position: relative; display: flex; align-items: center; justify-content: center; gap: var(--gap-2xs); user-select: none; transition-property: color, box-shadow, background-color, scale, translate; transition-duration: var(--animation-speed); transition-timing-function: var(--ease-out-cubic); &:active { scale: 0.99; translate: 0 1px; } } .add-to-cart-button .svg-wrapper .checkmark-burst { width: 30px; height: 30px; } .add-to-cart-text { --atc-opacity: 0; --atc-destination: -1em; display: flex; gap: var(--gap-2xs); align-items: center; justify-content: center; animation-duration: var(--animation-speed); animation-timing-function: var(--animation-easing); animation-fill-mode: forwards; transition: width var(--animation-speed) var(--animation-easing), opacity var(--animation-speed) var(--animation-easing); } .add-to-cart__added { --atc-opacity: 1; --atc-destination: 0px; position: absolute; top: 50%; left: 50%; /* stylelint-disable-line csstools/use-logical -- centring pair with a physical translate(-50%) */ translate: -50% -50%; display: flex; align-items: center; justify-content: center; gap: 0.3rem; } .add-to-cart__added-icon { width: 32px; height: 32px; } [data-added='true'] .add-to-cart-text, [data-added='true'] .add-to-cart__added { animation-name: atc-slide; } .checkmark-burst { opacity: 0; overflow: visible; .burst { rotate: 20deg; } .check { opacity: 0.2; scale: 0.8; filter: blur(2px); transform: translateZ(0); } :is(.ring, .line, .check, .burst, .tick) { transform-box: fill-box; transform-origin: center; } :is(.line) { stroke-dasharray: 1.5 1.5; stroke-dashoffset: -1.5; translate: 0 -180%; } g { transform-origin: center; rotate: calc(var(--index) * (360 / 8) * 1deg); } } .add-to-cart-button[data-added='true'] .checkmark-burst { opacity: 1; } .add-to-cart-button[data-added='true'] { color: transparent; .check { opacity: 1; scale: 1; filter: blur(0); } .tick { scale: 1.75; } .ring { opacity: 0; scale: 1; } .line { stroke-dashoffset: 1.5; } .add-to-cart__added { color: var(--button-color); } .add-to-cart-text { /* stylelint-disable-next-line plugin/no-unsupported-browser-features */ clip-path: circle(0% at 50% 50%); filter: blur(2px); opacity: 0; translate: 0 4px; } } @media (prefers-reduced-motion: no-preference) { .add-to-cart-button[data-added='true'] { .check { transition-property: opacity, scale, filter; transition-duration: calc(calc(var(--check-speed) * 1s)); transition-delay: calc((var(--base-delay) * 1s)); transition-timing-function: var(--ease-out-quad); } .tick { transition-property: scale; transition-duration: calc((calc(var(--tick-speed) * 1s))); transition-delay: calc(((var(--base-delay) + (var(--check-speed) * (var(--step-delay) * 1.1))) * 1s)); transition-timing-function: ease-out; } .ring { transition-property: opacity, scale; transition-duration: calc((calc(var(--ring-speed) * 1s))); transition-delay: calc(((var(--base-delay) + (var(--check-speed) * var(--step-delay))) * 1s)); transition-timing-function: var(--ease-out-quad); } .line { transition-property: stroke-dashoffset; transition-duration: calc((calc(var(--burst-speed) * 1s))); transition-delay: calc(((var(--base-delay) + (var(--check-speed) * var(--step-delay))) * 1s)); transition-timing-function: var(--ease-out-cubic); } } .add-to-cart-text { transition-property: clip-path, opacity, filter, translate; transition-duration: calc((var(--text-speed) * 0.6s)), calc((var(--text-speed) * 1s)); transition-timing-function: ease-out; } } .add-to-cart-text { /* stylelint-disable-next-line plugin/no-unsupported-browser-features */ clip-path: circle(100% at 50% 50%); } @keyframes atc-slide { to { opacity: var(--atc-opacity, 1); translate: 0px var(--atc-destination, 0px); } } /* END_SNIPPET:add-to-cart-button-styles */ /* START_SNIPPET:background-media (INDEX:183) */ .background-image-container { overflow: hidden; position: absolute; inset: 0; opacity: var(--image-opacity); } .background-image-container img, .background-image-container svg { object-fit: cover; width: 100%; height: 100%; } .background-image-fit img, .background-image-fit svg { object-fit: contain; } /* END_SNIPPET:background-media */ /* START_SNIPPET:bento-grid (INDEX:184) */ .bento-box { display: grid; column-gap: var(--bento-gap); row-gap: calc(var(--bento-gap) * 1.5); width: 100%; } .bento-box:has(.collection-card--image-bg) { row-gap: var(--bento-gap); } .bento-box ~ .bento-box { padding-block-start: var(--bento-gap); } @media screen and (max-width: 900px) { .bento-box { grid-template-columns: repeat(2, 1fr); } .bento-box__item { /* Prevent grid items from overflowing their cells when children have aspect-ratio */ min-width: 0; overflow: hidden; } .bento-box__item:nth-child(3n + 1) { grid-column: span 1; } .bento-box__item:nth-child(3n + 2) { grid-column: span 1; } .bento-box__item:nth-child(3n + 3) { grid-column: span 2; } /* Ensure last items create a full row */ .bento-box__item:last-child:nth-child(3n + 5) { grid-column: span 1; } .bento-box__item:last-child:nth-child(3n + 4) { grid-column: span 2; } } @media screen and (min-width: 901px) { .bento-box { grid-template-columns: repeat(12, 1fr); grid-template-areas: 'A A A B B B B B B C C C' 'D D D D D D E E E F F F' 'G G G H H H I I I I I I' 'J J J J K K K K L L L L'; } .bento-box__item:nth-child(1) { grid-area: A; } .bento-box__item:nth-child(2) { grid-area: B; } .bento-box__item:nth-child(3) { grid-area: C; } .bento-box__item:nth-child(4) { grid-area: D; } .bento-box__item:nth-child(5) { grid-area: E; } .bento-box__item:nth-child(6) { grid-area: F; } .bento-box__item:nth-child(7) { grid-area: G; } .bento-box__item:nth-child(8) { grid-area: H; } .bento-box__item:nth-child(9) { grid-area: I; } .bento-box__item:nth-child(10) { grid-area: J; } .bento-box__item:nth-child(11) { grid-area: K; } .bento-box__item:nth-child(12) { grid-area: L; } /* === Overrides for specific item counts === */ /* Exactly 1 item */ .bento-box--items-1 { grid-template-areas: 'A A A A A A A A A A A A'; } /* Exactly 2 items */ .bento-box--items-2 { grid-template-areas: 'A A A A A A B B B B B B'; } /* Exactly 4 items */ .bento-box--items-4 { grid-template-areas: 'A A A A B B B B B B B B' 'C C C C C C C C D D D D'; } /* Exactly 5 items */ .bento-box--items-5 { grid-template-areas: 'A A A B B B B B B C C C' 'D D D D D D E E E E E E'; } /* Exactly 7 items */ .bento-box--items-7 { grid-template-areas: 'A A A B B B B B B C C C' 'D D D D D D D D D E E E' 'F F F F F F G G G G G G'; } /* Exactly 8 items */ .bento-box--items-8 { grid-template-areas: 'A A A B B B B B B C C C' 'D D D D D D E E E F F F' 'G G G H H H H H H H H H'; } /* Exactly 10 items */ .bento-box--items-10 { grid-template-areas: 'A A A B B B B B B C C C' 'D D D D D D E E E F F F' 'G G G G G G G G G H H H' 'I I I J J J J J J J J J'; } /* Exactly 11 items */ .bento-box--items-11 { grid-template-areas: 'A A A B B B B B B C C C' 'D D D D D D E E E F F F' 'G G G H H H I I I I I I' 'J J J J K K K K K K K K'; } } /* END_SNIPPET:bento-grid */ /* START_SNIPPET:blog-comment-form (INDEX:185) */ .blog-post-comments__form-container { --comment-form-gap: var(--gap-md); width: 100%; max-width: var(--normal-content-width); margin: var(--margin-4xl) auto 0; } .blog-post-comments__form { display: grid; grid-template-columns: 1fr; gap: var(--comment-form-gap); @media screen and (min-width: 750px) { grid-template-columns: 1fr 1fr; } } .blog-post-comments__form-input { padding: var(--padding-lg) var(--padding-xl); border: var(--style-border-width-inputs) solid var(--color-input-border); } .blog-post-comments__form-input--textarea { resize: vertical; min-height: var(--input-textarea-min-height); } .blog-post-comments__form-message { display: flex; align-items: center; gap: var(--gap-xs); } .blog-post-comments__form-body { grid-column: 1 / -1; } .blog-post-comments__form-input:focus-visible { outline: var(--focus-outline-width) solid currentcolor; outline-offset: var(--focus-outline-offset); } .blog-post-comments__form-moderated { font-size: var(--font-size--xs); } .blog-post-comments__form-submit { margin-block-start: var(--comment-form-gap); } /* END_SNIPPET:blog-comment-form */ /* START_SNIPPET:buy-buttons-styles (INDEX:199) */ .buy-buttons-block { --buy-button-preferred-width: 185px; width: 100%; } .product-form-buttons { display: flex; flex-wrap: wrap; } .product-form-buttons:not(:has(.quantity-rules)) { gap: calc(var(--gap-sm) / 2); @media screen and (min-width: 750px) { gap: var(--gap-sm); } } .product-form-buttons > *:not(.quantity-selector-wrapper, .quantity-rules, .quantity-label, .volume-pricing, .product-form-text__error) { flex: 1 1 var(--buy-button-preferred-width, 0); min-width: fit-content; } .product-form-buttons--stacked > *:not(.quantity-selector-wrapper, .quantity-rules, .quantity-label, .volume-pricing, .product-form-text__error) { flex-basis: 51%; } .product-form-buttons button { width: 100%; padding-block: var(--padding-lg); } .quantity-selector { flex-grow: 0; flex-shrink: 0; height: var(--height-buy-buttons); } .quantity-label { flex: 1 0 100%; width: 100%; font-size: var(--font-size--sm); margin-block-end: var(--gap-xs); } .quantity-label__cart-count { color: var(--color-foreground-secondary); } .quantity-rules { display: flex; flex-wrap: wrap; gap: 0; row-gap: calc(var(--gap-xs) / 2); flex: 1 0 100%; width: 100%; font-size: var(--font-size--xs); color: var(--color-foreground-secondary); margin-block-start: var(--gap-xs); margin-block-end: var(--gap); } .product-form-buttons:has(~ .volume-pricing .volume-pricing__title) .quantity-rules { margin-block-end: var(--gap-md); } .quantity-rules__item { position: relative; display: inline-block; color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text)); } .quantity-rules__item:not(:last-child) { padding-inline-end: var(--padding-xl); margin-inline-end: var(--margin-2xs); } .quantity-rules__item:not(:last-child)::after { content: '•'; position: absolute; inset-inline-end: 0.5rem; top: 50%; transform: translateY(-50%); font-size: 0.5em; line-height: 0; } .add-to-cart-button { height: var(--height-buy-buttons); text-transform: var(--button-text-case-primary); } .add-to-cart-button.button-secondary { text-transform: var(--button-text-case-secondary); } shopify-accelerated-checkout { --shopify-accelerated-checkout-button-border-radius: var(--style-border-radius-buttons-primary); --shopify-accelerated-checkout-button-block-size: var(--height-buy-buttons); } .product-form-buttons:has(.add-to-cart-button.button-secondary) shopify-accelerated-checkout { --shopify-accelerated-checkout-button-border-radius: var(--style-border-radius-buttons-secondary); --shopify-accelerated-checkout-button-block-size: var(--height-buy-buttons); } .product-form-text__error { display: flex; flex: 1 0 100%; align-items: flex-start; gap: var(--gap-xs); margin-block-end: var(--gap-xs); } .product__pickup-availabilities { width: 100%; color: var(--color, var(--color-foreground)); } .pickup-availability__column { display: flex; flex-direction: column; justify-content: flex-start; } .pickup-availability__row { display: flex; gap: var(--padding-xs); } .pickup-availability__dialog-row { display: flex; justify-content: space-between; align-items: flex-start; } .pickup-availability__header-container { padding-block-end: var(--padding-2xl); } .pickup-location__wrapper { display: flex; flex-direction: column; padding-block: var(--padding-2xl); padding-inline: var(--theme-drawer-padding); border-top: 1px solid var(--color-border); gap: var(--padding-xs); } .pickup-location__address-wrapper { display: flex; flex-direction: column; gap: var(--padding-md); } .pickup-location__text-sm { font-size: var(--font-size--sm); margin: 0; } .pickup-location__text-xs { font-size: var(--font-size--xs); margin: 0; } .pickup-location__button { width: fit-content; color: var(--color, var(--color-foreground)); font-size: var(--font-size--xs); font-family: var(--font-body--family); padding: 0; cursor: pointer; margin-block: var(--margin-xs); } .pickup-location__button:hover { color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text)); } .pickup-location__h4 { margin: 0; } .pickup-location__text-bold { font-size: var(--font-size--md); font-weight: 600; margin: 0; } .pickup-location__availability-wrapper { display: flex; align-items: center; gap: var(--gap-xs); font-family: var(--font-paragraph--family); } .pickup-location__address { font-style: normal; } .volume-pricing { display: block; width: 100%; margin-bottom: var(--gap); } .volume-pricing:not(:has(.volume-pricing__title)) { margin-top: 0; margin-bottom: 0; } .volume-pricing__title { display: block; margin-block-end: var(--gap-sm); font-size: var(--font-size--sm); font-weight: var(--font-body--weight); color: var(--color-foreground); } .volume-pricing__table { width: 100%; } .volume-pricing__row { display: flex; justify-content: space-between; align-items: center; padding-block: var(--padding-sm); padding-inline: var(--padding-md); font-size: var(--font-size--sm); } .volume-pricing__row--even { background: rgb(var(--color-foreground-rgb) / var(--opacity-5)); } .volume-pricing__row--odd { background: var(--color-background); } .volume-pricing__collapsible-wrapper { block-size: 0; overflow-y: clip; opacity: 0; interpolate-size: allow-keywords; transition: opacity var(--animation-speed-slow) var(--animation-easing), block-size var(--animation-speed-slow) var(--animation-easing); } .volume-pricing__toggle { width: 100%; padding-bottom: 0; padding-inline: 0; text-align: start; color: var(--color-foreground-secondary); font-size: var(--font-size--xs); cursor: default; margin-block-start: 0; pointer-events: none; } button.volume-pricing__toggle { /* Need the extra specificity to override .product-form-buttons button */ padding-block: var(--padding-sm); } .volume-pricing__toggle-text { cursor: pointer; display: inline-block; pointer-events: auto; } .volume-pricing__show-less { display: none; } .volume-pricing--expanded .volume-pricing__collapsible-wrapper { opacity: 1; block-size: auto; @starting-style { block-size: 0; opacity: 0; overflow-y: clip; } } .volume-pricing--expanded .volume-pricing__show-more { display: none; } .volume-pricing--expanded .volume-pricing__show-less { display: inline; } /* Accelerated checkout styles — co-located here so they compile on pages where the quick-add modal can display buy buttons (e.g. collection pages). */ .accelerated-checkout-block[data-shopify-visual-preview] { width: 300px; } more-payment-options-link { font-size: smaller; } more-payment-options-link a:hover { color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text)); } .shopify-payment-button__more-options[aria-hidden='true'] { display: none; } /* END_SNIPPET:buy-buttons-styles */ /* START_SNIPPET:card-gallery (INDEX:200) */ .card-gallery { position: relative; overflow: hidden; container-type: inline-size; /* Make card-gallery a container */ container-name: card-gallery-container; /* Optional: name the container */ } @container (max-width: 70px) { .card-gallery:hover .quick-add__button { display: none; } } .card-gallery__placeholder svg { height: 100%; width: 100%; } .card-gallery svg { aspect-ratio: var(--gallery-aspect-ratio, var(--ratio)); } .product-card-gallery__title-placeholder { padding: var(--padding-md); font-size: var(--font-size--2xl); line-height: var(--line-height--display-loose); word-break: break-word; color: var(--color-foreground); background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5)); aspect-ratio: var(--gallery-aspect-ratio); border-radius: var(--product-corner-radius); display: block; } .product-card-gallery__title-placeholder .title-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; line-clamp: 5; overflow: hidden; } .card-gallery[data-image-ratio='landscape'] .product-card-gallery__title-placeholder .title-text { -webkit-line-clamp: 3; line-clamp: 3; } @media screen and (min-width: 750px) { .product-grid[data-product-card-size='extra-large'] .product-card-gallery__title-placeholder { padding: var(--padding-3xl); font-size: var(--font-size--3xl); } .product-grid[data-product-card-size='large'] .product-card-gallery__title-placeholder { padding: var(--padding-2xl); font-size: var(--font-size--2xl); } .product-grid[data-product-card-size='medium'] .product-card-gallery__title-placeholder { padding: var(--padding-xl); font-size: var(--font-size--xl); } .product-grid[data-product-card-size='small'] .product-card-gallery__title-placeholder { padding: var(--padding-sm); font-size: var(--font-size--lg); } .product-grid[data-product-card-size='extra-large'] .card-gallery.card-gallery--badge-top-right .product-card-gallery__title-placeholder { padding-inline-end: calc(var(--padding-3xl) + 50px); } .product-grid[data-product-card-size='large'] .card-gallery.card-gallery--badge-top-right .product-card-gallery__title-placeholder { padding-inline-end: calc(var(--padding-2xl) + 50px); } .product-grid[data-product-card-size='medium'] .card-gallery.card-gallery--badge-top-right .product-card-gallery__title-placeholder { padding-inline-end: calc(var(--padding-xl) + 50px); } .product-grid[data-product-card-size='small'] .card-gallery.card-gallery--badge-top-right .product-card-gallery__title-placeholder { padding-inline-end: calc(var(--padding-sm) + 50px); } .product-grid[data-product-card-size='extra-large'] .card-gallery.card-gallery--badge-top-left .product-card-gallery__title-placeholder { padding-top: calc(var(--padding-3xl) + 40px); } .product-grid[data-product-card-size='large'] .card-gallery.card-gallery--badge-top-left .product-card-gallery__title-placeholder { padding-top: calc(var(--padding-2xl) + 40px); } .product-grid[data-product-card-size='medium'] .card-gallery.card-gallery--badge-top-left .product-card-gallery__title-placeholder { padding-top: calc(var(--padding-xl) + 40px); } .product-grid[data-product-card-size='small'] .card-gallery.card-gallery--badge-top-left .product-card-gallery__title-placeholder { padding-top: calc(var(--padding-sm) + 40px); } .product-grid[data-product-card-size='extra-large'] .card-gallery.card-gallery--badge-bottom-left .product-card-gallery__title-placeholder { padding-bottom: calc(var(--padding-3xl) + 40px); } .product-grid[data-product-card-size='large'] .card-gallery.card-gallery--badge-bottom-left .product-card-gallery__title-placeholder { padding-bottom: calc(var(--padding-2xl) + 40px); } .product-grid[data-product-card-size='medium'] .card-gallery.card-gallery--badge-bottom-left .product-card-gallery__title-placeholder { padding-bottom: calc(var(--padding-xl) + 40px); } .product-grid[data-product-card-size='small'] .card-gallery.card-gallery--badge-bottom-left .product-card-gallery__title-placeholder { padding-bottom: calc(var(--padding-sm) + 40px); } } @media screen and (max-width: 749px) { .product-card-gallery__title-placeholder { font-size: var(--font-size--xl); padding: var(--padding-md); } .product-grid[data-product-card-size] .card-gallery.card-gallery--badge-top-right .product-card-gallery__title-placeholder { padding-inline-end: calc(var(--padding-sm) + 50px); } .product-grid[data-product-card-size] .card-gallery.card-gallery--badge-top-left .product-card-gallery__title-placeholder { padding-top: calc(var(--padding-sm) + 40px); } .product-grid[data-product-card-size] .card-gallery.card-gallery--badge-bottom-left .product-card-gallery__title-placeholder { padding-bottom: calc(var(--padding-sm) + 40px); } } [product-grid-view='zoom-out'] .card-gallery .product-card-gallery__title-placeholder { /* stylelint-disable-next-line declaration-no-important */ padding: var(--padding-xs) !important; font-size: var(--font-size--xs); } [product-grid-view='zoom-out'] .card-gallery .slideshow-control { min-width: auto; } ul[product-grid-view='zoom-out'] .product-grid__card .card-gallery { display: block; } [product-grid-view='zoom-out'] .card-gallery > :is(quick-add-component, .product-badges, slideshow-component > slideshow-controls) { display: none; } ul[product-grid-view='zoom-out'] .card-gallery > img { display: block; } .card-gallery slideshow-arrows .slideshow-control { /* Align icons with quick-add button */ padding-inline: var(--padding-xl); @container (max-width: 249px) { padding-inline: 0 var(--padding-sm); [dir='rtl'] & { padding-inline: var(--padding-sm) 0; } } } /* * Card galleries preview the next or previous images on 'pointerenter', so we * try to kick load them beforehand (they are lazy loaded otherwise). */ .card-gallery :is( slideshow-slide:has(+ slideshow-slide[aria-hidden='false']), slideshow-slide[aria-hidden='false'] + slideshow-slide ) { content-visibility: auto; slideshow-component[actioned] & { content-visibility: visible; } } /* END_SNIPPET:card-gallery */ /* START_SNIPPET:card-hover-effect-styles (INDEX:201) */ .product-card:hover, .collection-card:hover, .predictive-search-results__card:hover { z-index: var(--layer-raised); } /* END_SNIPPET:card-hover-effect-styles */ /* START_SNIPPET:cart-bubble (INDEX:202) */ .cart-bubble { --cart-padding: 0.2em; position: relative; width: 20px; aspect-ratio: 1; border-radius: 50%; border-width: 0; display: flex; line-height: normal; align-items: center; justify-content: center; color: var(--cart-bubble-text, var(--cart-bubble-text-fallback)); padding-inline: var(--cart-padding); } .cart-bubble[data-maintain-ratio] { aspect-ratio: 1; } .cart-bubble[data-maintain-ratio] .cart-bubble__background { border-radius: var(--style-border-radius-50); } .cart-bubble__background { position: absolute; inset: 0; background-color: var(--cart-bubble-background, var(--cart-bubble-background-fallback)); border-radius: var(--style-border-radius-lg); } .cart-bubble__text { font-size: var(--font-size--3xs); z-index: var(--layer-flat); line-height: 1; display: flex; align-items: center; justify-content: center; } /* END_SNIPPET:cart-bubble */ /* START_SNIPPET:cart-disclosure-tooltip (INDEX:203) */ .cart-disclosure-tooltip { position: relative; display: inline-flex; align-items: center; justify-content: center; width: var(--minimum-touch-target); height: var(--minimum-touch-target); flex-shrink: 0; } .cart-disclosure-tooltip__button { display: inline-flex; align-items: center; justify-content: flex-start; width: 100%; height: 100%; color: var(--color-foreground-secondary); line-height: 1; transition: color var(--animation-speed) var(--animation-easing); cursor: pointer; } .cart-items__title-row .cart-disclosure-tooltip { position: static; width: 1em; height: 1em; margin-inline-start: var(--gap-xs); vertical-align: baseline; } .cart-items__title-row .cart-disclosure-tooltip__button { position: relative; justify-content: center; width: 1em; height: 1em; } .cart-items__title-row .cart-disclosure-tooltip__button::before { content: ''; position: absolute; inset-block: calc((1em - var(--minimum-touch-target)) / 2); inset-inline-start: 0; inset-inline-end: calc(1em - var(--minimum-touch-target)); } .cart-disclosure-tooltip__button:hover { color: var(--color-foreground); } .cart-disclosure-tooltip__button .svg-wrapper { width: 1em; height: 1em; } .cart-disclosure-tooltip__popover { --cart-disclosure-tooltip-popover-max-width: 280px; --cart-disclosure-tooltip-popover-spacing: 8px; --cart-disclosure-tooltip-popover-offset-block: -4px; --cart-disclosure-tooltip-popover-viewport-margin: 16px; --cart-disclosure-tooltip-symbol-inset-inline: var(--padding-md); --cart-disclosure-tooltip-popover-native-fallback-top: calc( anchor(bottom) + var(--cart-disclosure-tooltip-popover-spacing) + var(--cart-disclosure-tooltip-popover-offset-block) ); --cart-disclosure-tooltip-popover-fixed-fallback-top: calc( (var(--anchor-top) + var(--anchor-height)) * 1px + var(--cart-disclosure-tooltip-popover-spacing) + var(--cart-disclosure-tooltip-popover-offset-block) ); inset: unset; top: var(--cart-disclosure-tooltip-popover-top, var(--cart-disclosure-tooltip-popover-native-fallback-top)); inset-inline-start: max( var(--cart-disclosure-tooltip-popover-viewport-margin), min( calc(anchor(start) - var(--cart-disclosure-tooltip-symbol-inset-inline)), calc( 100vw - var(--cart-disclosure-tooltip-popover-max-width) - var(--cart-disclosure-tooltip-popover-viewport-margin) ) ) ); min-inline-size: 240px; max-inline-size: var(--cart-disclosure-tooltip-popover-max-width); padding: 0; margin: 0; color: var(--color-foreground); background: var(--color-background); border: var(--style-border-popover); border-radius: var(--style-border-radius-popover, 0); box-shadow: var(--shadow-popover); opacity: 0; transition-property: display, opacity, translate; transition-duration: 0.3s; transition-timing-function: var(--ease-out-quad); transition-behavior: allow-discrete; translate: 0 20px; overflow: hidden; } @supports not (position-anchor: --cart-disclosure-trigger) { .cart-disclosure-tooltip__popover { position: fixed; top: var(--cart-disclosure-tooltip-popover-fixed-fallback-top); inset-inline-start: max( var(--cart-disclosure-tooltip-popover-viewport-margin), min( calc((var(--anchor-inline-start) * 1px) - var(--cart-disclosure-tooltip-symbol-inset-inline)), calc( 100vw - var(--cart-disclosure-tooltip-popover-max-width) - var(--cart-disclosure-tooltip-popover-viewport-margin) ) ) ); } } .cart-disclosure-tooltip__popover:popover-open { opacity: 1; translate: 0 0; } .cart-disclosure-tooltip__list { display: flex; flex-direction: column; } .cart-disclosure-tooltip__row { display: flex; align-items: flex-start; gap: var(--gap-xs); padding-block: var(--padding-xs); padding-inline: var(--cart-disclosure-tooltip-symbol-inset-inline, var(--padding-md)) var(--padding-md); font-size: var(--font-size--sm); color: var(--color-foreground); background: var(--color-background); overflow-wrap: break-word; } .cart-disclosure-tooltip__row:has(> .cart-disclosure-tooltip__symbol) { --cart-disclosure-tooltip-symbol-width: var(--icon-size-sm); display: grid; grid-template-columns: var(--cart-disclosure-tooltip-symbol-width) minmax(0, 1fr); min-inline-size: 0; } .cart-disclosure-tooltip__symbol { justify-self: center; width: 100%; max-inline-size: 100%; height: auto; margin: 0; object-fit: contain; } .cart-disclosure-tooltip__symbol:not(.cart-disclosure-tooltip__symbol--fallback) { min-block-size: var(--cart-disclosure-tooltip-symbol-width); max-block-size: var(--cart-disclosure-tooltip-symbol-width); } .cart-disclosure-tooltip__symbol--fallback { aspect-ratio: 1; } .cart-disclosure-tooltip__symbol--fallback > svg { display: block; width: 100%; height: 100%; transform: scale(1.38); transform-origin: center; } .cart-disclosure-tooltip__title { align-content: center; min-width: 0; min-block-size: var(--cart-disclosure-tooltip-symbol-width); margin: 0; line-height: var(--line-height--body-tight); } .cart-disclosure-tooltip__dialog { display: contents; } .cart-disclosure-modal { --cart-disclosure-modal-width: 28rem; --cart-disclosure-modal-max-height: 72dvh; --cart-disclosure-modal-border-radius: min(var(--style-border-radius-popover), 8px); position: fixed; top: 50%; left: 50%; width: min(var(--cart-disclosure-modal-width), calc(100vw - (var(--padding-2xl) * 2))); max-height: min(var(--cart-disclosure-modal-max-height), calc(100dvh - (var(--padding-2xl) * 2))); padding: 0; margin: 0; color: var(--color-foreground); background: var(--color-background); border: var(--style-border-popover); border-radius: var(--cart-disclosure-modal-border-radius); box-shadow: var(--shadow-popover); overflow: hidden; isolation: isolate; translate: -50% -50%; } .cart-disclosure-modal.dialog-modal[open] { animation: modalSlideInTop var(--animation-speed) var(--animation-easing) forwards; } .cart-disclosure-modal.dialog-modal.dialog-closing { animation: modalSlideOutTop var(--animation-speed) var(--animation-easing); } .cart-disclosure-modal::backdrop { backdrop-filter: brightness(0.65) blur(2px); background: rgb(var(--color-foreground-rgb) / var(--opacity-60)); } .cart-disclosure-modal__content { display: flex; flex-direction: column; gap: var(--gap-xl); max-height: inherit; padding: var(--padding-2xl); overflow-y: auto; overscroll-behavior: contain; } .cart-disclosure-modal .cart-disclosure-modal__heading { margin: 0; padding-inline-end: var(--minimum-touch-target); font-size: var(--font-size--2xl); font-weight: 700; line-height: 1.15; overflow-wrap: break-word; } .cart-disclosure-modal__list { display: flex; flex-direction: column; gap: var(--gap-xl); } .cart-disclosure-modal__item { --cart-disclosure-modal-symbol-size: var(--icon-size-lg); --cart-disclosure-modal-heading-offset: calc((var(--cart-disclosure-modal-symbol-size) - 1em) / 2); display: grid; grid-template-columns: var(--cart-disclosure-modal-symbol-size) minmax(0, 1fr); align-items: flex-start; column-gap: var(--gap-xs); row-gap: var(--gap-xs); min-width: 0; font-size: var(--font-size--md); overflow-wrap: break-word; } .cart-disclosure-modal__item:not(:has(> .cart-disclosure-modal__symbol)) { grid-template-columns: minmax(0, 1fr); } .cart-disclosure-modal__symbol { justify-self: center; width: var(--cart-disclosure-modal-symbol-size); max-inline-size: 100%; height: var(--cart-disclosure-modal-symbol-size); margin: 0; object-fit: contain; } .cart-disclosure-modal__symbol--fallback > svg { display: block; width: 100%; height: 100%; transform: scale(1.2); transform-origin: center; } /* The warning path ends at y=12.0932 in a 14-unit viewBox; include its stroke when aligning the painted bottom. */ .cart-disclosure-tooltip__button .svg-wrapper > svg { --cart-disclosure-tooltip-icon-bottom-inset: calc(1.9068px - var(--icon-stroke-width) / 2); width: 1em; height: 1em; } .cart-disclosure-tooltip__button .svg-wrapper > svg > :is(circle, path) { transform: translateY(var(--cart-disclosure-tooltip-icon-bottom-inset)); } .cart-disclosure-modal__item-content { display: contents; } .cart-disclosure-modal__item-heading { margin: 0; font-size: inherit; font-weight: 700; line-height: 1; overflow-wrap: break-word; } .cart-disclosure-modal__item:has(> .cart-disclosure-modal__symbol) .cart-disclosure-modal__item-heading { grid-column: 2; padding-block-start: var(--cart-disclosure-modal-heading-offset); } .cart-disclosure-modal__body { grid-column: 1 / -1; margin: 0; font-size: var(--font-size--sm); line-height: 1.35; overflow-wrap: break-word; } .cart-disclosure-modal__body > * { margin-block: 0; } .cart-disclosure-modal__close { position: absolute; inset-block-start: var(--padding-sm); inset-inline-end: var(--padding-sm); z-index: var(--layer-raised); overflow: visible; } /* Match the specificity of the base [dir='rtl'] .close-button safe-area rule so the absolutely positioned modal button keeps its own corner inset in RTL */ [dir='rtl'] .cart-disclosure-modal__close { inset-inline-end: var(--padding-sm); } @media screen and (min-width: 750px) { .cart-disclosure-modal__content { padding-block: var(--padding-2xl); padding-inline: var(--padding-2xl); } } @media screen and (max-width: 749px) { .cart-disclosure-modal { position: fixed; top: auto; left: 0; inset-block-start: auto; inset-block-end: 0; inset-inline: 0; width: 100%; height: fit-content; max-width: 100%; max-height: calc(100dvh - max(var(--padding-2xl), var(--safe-area-inset-top))); margin: auto 0 0; border-start-start-radius: var(--cart-disclosure-modal-border-radius); border-start-end-radius: var(--cart-disclosure-modal-border-radius); border-end-start-radius: 0; border-end-end-radius: 0; overflow: clip; translate: 0 0; } .cart-disclosure-modal__content { padding-block-end: calc(var(--padding-2xl) + var(--safe-area-inset-bottom)); } } /* END_SNIPPET:cart-disclosure-tooltip */ /* START_SNIPPET:cart-drawer (INDEX:204) */ cart-drawer-component { --cart-drawer-padding: var(--theme-drawer-padding); --font-paragraph--line-height: 1; display: contents; } .cart-drawer__inner { display: flex; flex-direction: column; height: 100%; overflow: hidden; } .cart-drawer__inner > .cart-items-component { flex: 1; min-height: 0; height: auto; } .cart-drawer__content { display: flex; flex-direction: column; padding: 0; background-color: var(--color-background); flex-grow: 1; overflow-y: auto; } .cart-drawer__items { display: flex; flex-direction: column; padding-inline: var(--cart-drawer-padding); overflow-y: auto; } .cart-drawer__items .cart-items__table-row { padding-bottom: var(--gap-xl); border-bottom: var(--style-border-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25)); margin-bottom: var(--gap-xl); } .cart-drawer__items .cart-items__table-row:has(+ .cart-items__nested-line) { border-bottom: none; margin-bottom: 0; } .cart-drawer__items .cart-items__table-row:last-child { border-bottom: none; padding-block-end: 0; margin-block-end: 0; } .cart-drawer__close-button--empty { margin-inline-start: auto; } .cart-drawer__summary { --cart-drawer-summary-padding: var(--padding-lg); position: sticky; bottom: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: var(--gap-xl); padding: var(--cart-drawer-summary-padding); margin-top: auto; background-color: var(--color-background); /* stylelint-disable-next-line color-named */ mask-image: linear-gradient(to bottom, transparent, black var(--cart-drawer-summary-padding)); @media screen and (min-width: 750px) { --cart-drawer-summary-padding: var(--padding-2xl); } } .theme-drawer__dialog[cart-summary-sticky='false'] .cart-drawer__summary { position: static; mask-image: none; } .theme-drawer__dialog[cart-summary-sticky='false'] .cart-drawer__items { overflow: unset; } .cart-actions summary { padding-inline: 0; padding-block: var(--padding-sm); line-height: 1.2; min-height: var(--minimum-touch-target); } .cart-drawer__summary .cart__summary-totals:not(:has(.cart__subtotal-container:empty)) { border-block-start: var(--style-border-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25)); padding-block-start: var(--padding-2xl); } .cart-drawer__summary .cart-note { @media screen and (min-width: 750px) { margin-block-start: var(--margin-3xs); } } .cart-drawer--empty .cart-drawer__content { text-align: center; align-items: center; justify-content: center; min-height: auto; } .cart-drawer--empty .cart-drawer__items { padding-inline: 0; } cart-drawer-component:not(:has(.cart-form)) .cart-drawer__content { text-align: center; align-items: center; justify-content: center; } cart-drawer-component:not(:has(.cart-form)) .cart-drawer__items { padding-inline: 0; } @media screen and (prefers-reduced-motion: no-preference) { html:active-view-transition-type(empty-cart-drawer) { .theme-drawer__close-button { view-transition-name: cart-drawer-close-button; } } } :active-view-transition { .cart-drawer__header, .cart-drawer__content { background: transparent; } } /* END_SNIPPET:cart-drawer */ /* START_SNIPPET:cart-items-component (INDEX:205) */ .cart-items-component { width: 100%; height: 100%; display: flex; flex-direction: column; } @media screen and (prefers-reduced-motion: no-preference) { html:active-view-transition-type(empty-cart-drawer), html:active-view-transition-type(fill-cart-drawer) { .cart-items-component { view-transition-name: cart-drawer-content; } } html:active-view-transition-type(empty-cart-page) { .cart-items-component { view-transition-name: cart-page-content; } } } ::view-transition-old(cart-page-content) { animation: cart-page-content-old var(--animation-speed-fast) var(--animation-easing) forwards; } @keyframes cart-page-content-old { from { opacity: 1; } to { opacity: 0; filter: blur(4px); } } ::view-transition-old(cart-drawer-content) { transform-origin: 50% 33%; animation: cart-contents-old var(--spring-d280-b0-duration) var(--spring-d280-b0-easing) forwards; } ::view-transition-new(cart-drawer-content) { transform-origin: top center; animation: cart-contents-new var(--spring-d280-b0-duration) var(--spring-d280-b0-easing) forwards; } @keyframes cart-contents-old { to { scale: 0.92; opacity: 0; } } @keyframes cart-contents-new { from { scale: 1.05; translate: 0 128px; filter: blur(1px); opacity: 0; } } /* END_SNIPPET:cart-items-component */ /* START_SNIPPET:cart-products (INDEX:206) */ .cart-items { --cart-item-media-width-min: 2.5rem; --cart-item-media-width-max: 7.5rem; container-name: cart-items; container-type: inline-size; width: 100%; } .cart-items-disabled { pointer-events: none; } .cart-items__wrapper { display: flex; flex-direction: column; } .cart-page--empty .cart-items__wrapper { align-items: center; margin-block-start: 0; text-align: center; } .cart-items__wrapper--drawer-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .cart-items__table { width: 100%; border-spacing: 0; } .cart-items__table * { margin: 0; } .cart-items__table-row { --cart-item-price-width: 6rem; display: grid; grid-template-columns: clamp(2.5rem, 15cqi, 7.5rem) minmax(0, 1fr) minmax(var(--cart-item-price-width), auto); grid-template-areas: 'media details price' 'media quantity price' 'media error error'; column-gap: var(--gap-md); align-items: start; padding-bottom: var(--cart-items-gap); margin-bottom: var(--margin-lg); } .cart-items__details { grid-area: details; min-width: 0; color: rgb(var(--color-foreground-rgb) / var(--opacity-70)); } .cart-items__product-info { min-width: 0; } /* Cart drawer: separate grid areas for variants and unit price */ .cart-items__table-row--full-width-variants { grid-template-columns: clamp(2.5rem, 15cqi, 7.5rem) minmax(0, 1fr) auto; grid-template-rows: repeat(4, min-content) 1fr; grid-template-areas: 'media details price' 'media variants variants' 'media unit_price unit_price' 'media quantity quantity' 'media error error'; .cart-items__details { display: contents; } .cart-items__product-info { grid-area: details; } .cart-items__variants-wrapper { grid-area: variants; &:empty { display: none; } p { margin: 0; } } .cart-items__unit-price-wrapper { grid-area: unit_price; font-size: var(--font-size--sm); } .cart-items__price { min-width: auto; width: max-content; } } .cart-items__table-row.cart-items__nested-line td:first-child { width: 60%; justify-self: right; } html:active-view-transition-type(page-navigation) .cart-items__table-row { /* stylelint-disable-next-line declaration-no-important */ view-transition-name: none !important; } .cart-items__table-row.removing { overflow: hidden; animation: removeRow calc(var(--animation-speed) * 2) var(--animation-easing) forwards; animation-delay: var(--animation-speed); } @keyframes removeRow { 0% { height: var(--row-height); } 100% { opacity: 0; height: 0; padding-bottom: 0; margin-bottom: 0; border-color: transparent; } } .cart-items__table-row.adding { interpolate-size: allow-keywords; overflow: hidden; animation: addRow calc(var(--animation-speed) * 2) var(--animation-easing) forwards; } @keyframes addRow { 0% { opacity: 0; height: 0; padding-bottom: 0; margin-bottom: 0; border-color: transparent; } 100% { opacity: 1; height: auto; } } .cart-items__table-row:last-child { padding-bottom: 0; } .cart-items--dividers .cart-items__table-row { border-bottom: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25)); margin-bottom: var(--cart-items-gap); } .cart-items--dividers .cart-items__table-row:has(+ .cart-items__nested-line) { border-bottom: none; margin-bottom: 0; } .cart-items--dividers .cart-items__table-row:last-of-type { border-block-end: none; padding-block-end: 0; margin-bottom: 0; } .cart-items__details > * + *, .cart-items__bundle li { margin-block-start: var(--margin-3xs); } .cart-items__details * { font-size: var(--font-size--sm); } .cart-items__details a { text-decoration: none; } .cart-items__title-row { display: block; max-width: 100%; min-width: 0; font-size: var(--font-size--md); } .cart-items__title { font-size: var(--font-size--md); color: var(--color-foreground); text-transform: var(--product-title-case); display: inline; margin-block-start: 0; min-width: 0; overflow-wrap: break-word; } .cart-items__variants { display: block; } .cart-items__variant { display: inline; } .cart-items__variant dt, .cart-items__variant dd { display: inline; margin: 0; } .cart-items__quantity { grid-area: quantity; margin-block-start: var(--margin-xs); display: flex; align-items: center; justify-content: flex-start; gap: var(--gap-xs); width: fit-content; } .cart-items__quantity-controls { display: flex; align-items: center; justify-content: flex-start; gap: var(--gap-xs); width: fit-content; } .cart-items__quantity-controls > .volume-pricing-info { margin-inline-start: calc(-1 * var(--minimum-touch-target) - var(--gap-xs)); } .cart-items__quantity .quantity-selector { display: inline-flex; font-size: var(--font-size--sm); height: auto; } .cart-items__remove { background-color: transparent; color: var(--color-foreground); width: var(--minimum-touch-target); height: var(--minimum-touch-target); justify-content: center; box-shadow: none; padding: 0; } .cart-items__media { grid-area: media; padding: 0; } .cart-items__price { grid-area: price; min-height: unset; min-width: var(--cart-item-price-width); text-align: end; display: block; font-size: var(--font-size--sm); line-height: var(--line-height); } .cart-items__price-unit { font-size: var(--font-size--xs); padding-block-start: var(--padding-2xs); } .cart-items__media-container { display: flex; aspect-ratio: var(--ratio); position: relative; width: 100%; overflow: hidden; } .cart-items__media-image { aspect-ratio: inherit; object-fit: cover; object-position: center center; width: 100%; height: auto; } .cart-items__empty-button { margin-top: var(--margin-md); margin-inline: auto; padding-inline: var(--padding-4xl); padding-block: var(--padding-lg); } /* Error message */ .cart-items__error { display: flex; align-items: flex-start; width: 100%; grid-area: error; margin-block-start: var(--margin-xs); opacity: 1; overflow: hidden; transform: translateY(0); transition: opacity var(--drawer-animation-speed) var(--animation-easing), transform var(--drawer-animation-speed) var(--animation-easing); @starting-style { opacity: 0; transform: translateY(-0.5rem); } } .cart-item__error { display: flex; align-items: flex-start; width: 100%; font-size: var(--font-size--sm); padding-block: var(--padding-2xs); } .cart-item__error .svg-wrapper { flex-shrink: 0; width: var(--icon-size-xs); height: var(--icon-size-xs); margin-inline: var(--margin-3xs) var(--margin-xs); margin-block-start: var(--margin-3xs); } @container cart-items (min-width: 720px) { /* Cart page: original layout */ .cart-items__table-row { --cart-item-price-width: 6rem; grid-template-columns: 7.5rem 1fr 1fr minmax(var(--cart-item-price-width), auto); grid-template-rows: min-content 1fr; grid-template-areas: 'media details quantity price' 'media details error error'; } .cart-items__quantity, .cart-items__price { grid-area: initial; } .cart-items__quantity { margin-top: 0; } .cart-items__price { min-height: var(--minimum-touch-target); display: flex; flex-direction: column; align-items: flex-end; } /* Cart drawer: separate areas for variants and unit price */ .cart-items__table-row--full-width-variants { grid-template-rows: min-content min-content min-content 1fr; grid-template-areas: 'media details quantity price' 'media variants variants variants' 'media unit_price unit_price unit_price' 'media error error error'; .cart-items__quantity, .cart-items__price { grid-area: initial; } } } .cart__subtotal-container, .cart__total-container { display: flex; flex-direction: column; } .cart__total-container { row-gap: var(--gap-2xs); &.cart__total-container--has-installments { row-gap: var(--gap-xs); } } .cart__subtotal-container:empty { display: none; } .cart__summary-totals { display: flex; flex-direction: column; gap: var(--gap-xl); width: 100%; border-block-start: none; &:has(> :first-child:not(.cart__subtotal-container, .cart__total-container)) { padding-block-start: 0; border-block-start: none; } @media screen and (min-width: 750px) { padding-block-start: 0; } } .cart__subtotal-container, .cart__subtotal-container * { font-size: var(--font-size--sm); } .cart__total { font-weight: var(--font-weight-bold); } .cart__total-label { font-size: var(--font-size--sm); } .cart__total-value { font-size: var(--font-size--xl); @media screen and (max-width: 749px) { font-size: var(--font-size--lg); } } .cart__ctas { width: 100%; display: grid; gap: var(--checkout-button-gap); grid-auto-flow: row; grid-template-columns: 1fr; } .cart__additional-checkout-buttons { width: 100%; } shopify-accelerated-checkout-cart { --shopify-accelerated-checkout-inline-alignment: center; --shopify-accelerated-checkout-button-border-radius: var(--style-border-radius-buttons-primary); --shopify-accelerated-checkout-button-block-size: var(--height-buy-buttons); --shopify-accelerated-checkout-row-gap: var(--checkout-button-gap, 10px); } /* Remove animation */ .remove-icon-bottom, .remove-icon-top { transition: transform var(--animation-speed) var(--animation-easing); } .cart-items__remove:hover .remove-icon-top { transform: translate(calc(-1 * var(--icon-stroke-width)), var(--icon-stroke-width)) rotate(-15deg); } .cart-items__remove:is(:hover, :active) .remove-icon-bottom { transform: translateY(var(--icon-stroke-width)); } .cart-items__table-row.removing .remove-icon-bottom { transform: translateY(0); } .cart-items__table-row.removing .remove-icon-top { animation: removeButtonClickedIconTop var(--animation-speed) var(--animation-easing) forwards; } @keyframes removeButtonClickedIconTop { 50% { transform: translate(0, calc(-1 * var(--icon-stroke-width))); } 100% { transform: translate(0, 0); } } .cart-items__properties { display: block; margin-block-start: var(--margin-2xs); } .cart-items__property { display: block; } .cart-items__properties dt, .cart-items__properties dd { display: inline; margin: 0; overflow-wrap: break-word; } @media screen and (min-width: 750px) { .cart-items .quantity-selector { --quantity-selector-width: 105px; height: var(--button-size-md); width: var(--quantity-selector-width); } .cart-items .quantity-selector button { width: var(--button-size-md); height: var(--button-size-md); } .cart-items .quantity-selector input[type='number'] { width: calc(var(--quantity-selector-width) - var(--button-size-md) * 2); } } @media screen and (prefers-reduced-motion: no-preference) { html:active-view-transition-type(empty-cart-drawer) { .cart-items__empty-button, .cart__checkout-button { view-transition-name: cart-drawer-primary-action; & > .button-text { view-transition-name: cart-drawer-primary-action-text; } } } } ::view-transition-old(cart-drawer-primary-action-text), ::view-transition-new(cart-drawer-primary-action-text) { height: 100%; object-fit: none; overflow: clip; overflow-clip-margin: 1em; } ::view-transition-old(cart-drawer-primary-action-text) { animation: cart-drawer-primary-action-text var(--animation-speed) var(--animation-easing) reverse forwards; } ::view-transition-new(cart-drawer-primary-action-text) { animation: cart-drawer-primary-action-text var(--animation-speed) var(--animation-easing) forwards; } ::view-transition-old(cart-drawer-primary-action), ::view-transition-new(cart-drawer-primary-action) { height: 100%; } ::view-transition-group(cart-drawer-primary-action-text), ::view-transition-group(cart-drawer-primary-action) { animation-duration: var(--spring-d300-b0-duration); animation-timing-function: var(--spring-d300-b0-easing); } @keyframes cart-drawer-primary-action-text { from { filter: blur(3px); opacity: 0; } to { filter: none; opacity: 1; } } /* END_SNIPPET:cart-products */ /* START_SNIPPET:cart-summary (INDEX:207) */ .cart-actions { display: flex; flex-direction: column; gap: 0; border-block: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25)); padding-block: 0; margin-block-start: var(--margin-3xs); } .cart-actions__divider { border-block-start: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25)); } .cart-totals:not(:has(.cart-actions)) { margin-block-start: var(--margin-3xs); border-block-start: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25)); padding-block-start: var(--margin-xl); } .cart-totals__item { display: flex; align-items: center; justify-content: space-between; } .cart-totals__tax-note { color: var(--color-foreground-subdued); } .cart-totals__tax-note a { color: var(--color-foreground-subdued); text-decoration-line: underline; text-decoration-color: currentColor; &:hover { text-decoration-color: transparent; } } .cart-totals__tax-note small { font-size: var(--font-size--2xs); } .cart-discounts { list-style: none; padding: 0; margin: 0; } .cart-discounts__item { display: flex; align-items: center; justify-content: space-between; } .cart-discounts__label { display: flex; align-items: center; gap: var(--gap-2xs); } .cart-discounts__label svg { width: var(--icon-size-sm); height: var(--icon-size-sm); display: inline-block; } .cart-totals__original-container, .cart-totals__container { display: flex; flex-direction: column; } .cart-totals__container { row-gap: var(--gap-2xs); &.cart-totals__container--has-installments { row-gap: var(--gap-xs); } } .cart-totals__original-container:empty { display: none; } .cart-totals { display: flex; flex-direction: column; gap: var(--gap-xl); width: 100%; border-block-start: none; &:has(> :first-child:not(.cart-totals__original-container, .cart-totals__container)) { padding-block-start: 0; border-block-start: none; } @media screen and (min-width: 750px) { padding-block-start: 0; } } .cart-totals__original-container, .cart-totals__original-container * { font-size: var(--cart-font-size--sm); } .cart-totals__total { align-items: baseline; font-weight: var(--font-weight-bold); } .cart-totals__total-label { font-size: var(--cart-font-size--sm); } .cart-totals__total-value { font-size: var(--cart-font-size--xl); @media screen and (max-width: 749px) { font-size: var(--font-size--lg); } } .cart-totals__installments { color: var(--color-foreground); font-size: var(--font-size--2xs); } .cart-note { width: 100%; } @starting-style { .cart-note[open-by-default-on-desktop][open-by-default-on-mobile] .details-content { block-size: auto; opacity: 1; overflow-y: visible; } } .cart-note__inner { padding-block: var(--padding-2xs) var(--padding-sm); } .cart-note__summary { display: flex; align-items: center; justify-content: space-between; } .cart-note__summary:hover { color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text)); } .cart-note__label { display: flex; align-items: flex-start; gap: var(--gap-2xs); font-size: var(--font-size--2xs); font-weight: 500; } .cart-note__instructions { color: var(--color-input-text); background-color: var(--color-input-background); border-width: var(--style-border-width-inputs); border-color: var(--color-input-border); transition: box-shadow var(--animation-speed) ease; box-shadow: var(--input-box-shadow); min-height: 5.5rem; min-width: 100%; max-width: 100%; font-size: var(--font-size--sm); padding: max(4px, calc(var(--style-border-radius-inputs) * (1 - cos(45deg)))); } .cart-totals__icon { height: var(--icon-size-xs); width: var(--icon-size-xs); margin: 0; } .cart__ctas { width: 100%; display: grid; gap: var(--checkout-button-gap); grid-auto-flow: row; grid-template-columns: 1fr; } .cart__ctas .cart__checkout-button { width: 100%; height: clamp(25px, var(--height-buy-buttons), 55px); padding-inline: var(--padding-4xl); } .cart-drawer__summary .cart-totals:not(:has(.cart-totals__original-container:empty)) { border-block-start: var(--style-border-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25)); padding-block-start: var(--padding-2xl); } .cart-drawer__summary .cart-note { @media screen and (min-width: 750px) { margin-block-start: var(--margin-3xs); } } .cart-discount__input { background-color: var(--color-input-background); color: var(--color-input-text); border-width: var(--style-border-width-inputs); border-color: var(--color-input-border); border-style: solid; border-radius: var(--style-border-radius-inputs); padding: var(--padding-sm) var(--padding-md); height: 100%; flex-grow: 1; min-width: 0; font-size: var(--font-size--sm); } .cart-discount__input::placeholder { color: rgb(var(--color-input-text-rgb) / var(--opacity-subdued-text)); } .cart-discount__pill-code { overflow: hidden; max-width: 100px; text-overflow: ellipsis; white-space: nowrap; margin: 0; } .cart-discount { width: 100%; } .cart-discount__codes { display: none; gap: var(--padding-xs); flex-wrap: wrap; list-style: none; padding-inline: 0; margin: 0; } .cart-discount__codes:has(.cart-discount__pill) { display: flex; } .cart-discount__button { height: 100%; } .cart-discount__content { height: calc(var(--button-size) + var(--padding-2xs) + var(--padding-sm)); } .cart-discount__pill { display: flex; color: var(--color-foreground); gap: var(--padding-xs); align-items: center; padding: var(--padding-xs) var(--padding-sm); border-radius: var(--style-border-radius-pills); background-color: var(--color-input-background); text-transform: uppercase; } .cart-discount__form { display: flex; gap: var(--padding-md); align-items: center; height: 100%; padding-block: var(--padding-2xs) var(--padding-sm); } :is(.cart-discount__pill-remove, .cart-discount__pill-remove:hover) { --close-icon-opacity: 0.4; color: var(--color-foreground); background-color: transparent; pointer-events: all; cursor: pointer; height: 100%; } .cart-discount__error { display: flex; align-items: center; width: 100%; padding-block: var(--padding-2xs) var(--padding-sm); } .cart-discount__error .svg-wrapper { flex-shrink: 0; width: var(--icon-size-xs); height: var(--icon-size-xs); margin-inline: var(--margin-3xs) var(--margin-xs); } .cart-discount__error-text { margin-block-start: var(--margin-3xs); } .cart-discount__summary { display: flex; align-items: center; justify-content: space-between; } .cart-discount__summary:hover { color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text)); } .cart-discount__label { display: flex; align-items: flex-start; gap: var(--gap-2xs); font-size: var(--font-size--2xs); font-weight: 500; } @media screen and (min-width: 750px) { .cart-summary--extend { height: 100%; } } /* END_SNIPPET:cart-summary */ /* START_SNIPPET:cart-typography-styles (INDEX:208) */ .cart-primary-typography { font-family: var(--cart-primary-font-family); font-style: var(--cart-primary-font-style); font-weight: var(--cart-primary-font-weight); } .cart-secondary-typography { font-family: var(--cart-secondary-font-family); font-style: var(--cart-secondary-font-style); font-weight: var(--cart-secondary-font-weight); } /* END_SNIPPET:cart-typography-styles */ /* START_SNIPPET:chat-drawer (INDEX:209) */ /* Pin the chat's mobile/desktop boundary so the theme and the chat agree on where standalone mode kicks in. Must stay in sync with the @media query below — @shopify/storefront-components reads this value once at init and uses it to decide when to force standalone mode. */ shopify-chat { --shopify-chat-breakpoint: 768px; } shopify-chat[mode='managed'] { position: static; height: 100%; } .theme-drawer__dialog:has(shopify-chat[mode='standalone'][open]) { z-index: calc(var(--layer-menu-drawer) + 1); } /* Keep the panel rendered while closed so 's position-fixed "Ask anything" launcher stays visible. */ .theme-drawer__dialog.chat-drawer:has(shopify-chat:defined) { display: flex; } /* END_SNIPPET:chat-drawer */ /* START_SNIPPET:checkbox-styles (INDEX:210) */ .checkbox { --checkbox-path-opacity: 0; --checkbox-cursor: pointer; position: relative; display: flex; align-items: center; &.checkbox--disabled { --checkbox-cursor: not-allowed; } } .checkbox:has(.checkbox__input:checked) { --checkbox-path-opacity: 1; } .checkbox__input { position: absolute; opacity: 0; margin: 0; padding: 0; width: var(--checkbox-size); height: var(--checkbox-size); aspect-ratio: unset; border: none; border-radius: 0; background: transparent; appearance: auto; display: block; cursor: pointer; /* Outline is on the SVG instead, to allow it to have border-radius */ &:focus-visible { outline: none; } } .checkbox__label { position: relative; display: inline-flex; cursor: var(--checkbox-cursor); line-height: var(--checkbox-size); min-width: var(--minimum-touch-target); } .checkbox .icon-checkmark { height: var(--checkbox-size); width: var(--checkbox-size); flex-shrink: 0; border: var(--checkbox-border); border-radius: var(--checkbox-border-radius); background-color: var(--color-background); } .checkbox__input:focus-visible + .checkbox__label .icon-checkmark { outline: var(--focus-outline-width) solid currentcolor; outline-offset: var(--focus-outline-offset); } .checkbox__input:checked + .checkbox__label .icon-checkmark { background-color: var(--color-foreground); border-color: var(--color-foreground); } .checkbox__input:disabled + .checkbox__label .icon-checkmark { background-color: var(--input-disabled-background-color); border-color: var(--input-disabled-border-color); } .checkbox__label-text { padding-inline-start: var(--checkbox-label-padding); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .checkbox .icon-checkmark path { stroke: var(--color-background); opacity: var(--checkbox-path-opacity); transition: opacity var(--animation-speed) var(--animation-easing); } .checkbox__input:disabled + .checkbox__label { color: var(--input-disabled-text-color); } /* END_SNIPPET:checkbox-styles */ /* START_SNIPPET:collection-card (INDEX:212) */ .collection-card { --fixed-card-height: var(--height-small); width: 100%; position: relative; height: 100%; flex: 1 1 var(--card-width-small); } .collection-card > svg { height: 100%; width: 100%; aspect-ratio: var(--ratio); } .collection-card--image-bg .collection-card__inner { height: 100%; } .collection-card__link { position: absolute; inset: 0; /* allows focus outline to have radius in supported browsers */ border-radius: var(--border-radius); } .collection-card__inner { width: 100%; overflow: hidden; position: relative; display: flex; flex-direction: column; z-index: var(--layer-flat); pointer-events: none; gap: var(--gap); a, button { pointer-events: auto; } } /* allow all blocks to be selectable in editor preview */ .shopify-design-mode .collection-card__content * { pointer-events: auto; } .collection-card__content { --flex-wrap: wrap; display: flex; position: relative; height: 100%; width: 100%; max-width: 100%; gap: var(--gap); } /* Nested image block rules */ .collection-card.collection-card--image-bg { aspect-ratio: var(--ratio); } .collection-card.collection-card--image-bg .collection-card__content { padding: var(--padding-lg); } .collection-card--image-height-fixed { height: 100%; } /* Bento layout rules */ .collection-card--image-height-fixed .collection-card__image { height: var(--fixed-card-height); width: 100%; } .collection-card--image-height-fixed.collection-card--image-bg { height: var(--fixed-card-height); aspect-ratio: unset; } .collection-card__image .resource-image__image { object-fit: cover; width: 100%; height: 100%; max-width: 100%; } .collection-card--image-bg .collection-card__image { position: absolute; width: 100%; height: 100%; } .collection-card__image svg { height: 100%; width: 100%; } /* Editorial layout */ .resource-list:not(.hidden--desktop) .collection-card--flexible-aspect-ratio { .collection-card__image { aspect-ratio: 99; height: 100%; } .collection-card__inner { display: flex; flex-direction: column; height: 100%; } .collection-card__content { flex-shrink: 0; } &:not(.collection-card--image-bg) .collection-card__content { height: auto; } &.collection-card.collection-card--image-bg, &.collection-card .placeholder-svg { aspect-ratio: 99; } } /* END_SNIPPET:collection-card */ /* START_SNIPPET:collection-wrapper-styles (INDEX:213) */ /* ------------------------------------------------------------------------------ */ /* Collection Wrapper - Shared layout CSS for collection and search pages */ /* ------------------------------------------------------------------------------ */ .collection-wrapper { @media screen and (min-width: 750px) { --facets-vertical-col-width: 6; grid-template-columns: 1fr repeat( var(--centered-column-number), minmax(0, calc((var(--page-width) - var(--page-margin) * 2) / var(--centered-column-number))) ) 1fr; } @media screen and (min-width: 990px) { --facets-vertical-col-width: 5; } } .collection-wrapper:has(.facets-block-wrapper--full-width), .collection-wrapper:has(.collection-wrapper--full-width) { @media screen and (min-width: 750px) { grid-column: 1 / -1; grid-template-columns: minmax(var(--page-margin), 1fr) repeat( var(--centered-column-number), minmax(0, calc((var(--page-width) - var(--page-margin) * 2) / var(--centered-column-number))) ) minmax(var(--page-margin), 1fr); } } .collection-wrapper:has(.facets--vertical) .facets-block-wrapper--vertical:not(.hidden) ~ .main-collection-grid { @media screen and (min-width: 750px) { grid-column: var(--facets-vertical-col-width) / var(--full-width-column-number); } } .collection-wrapper:has(.facets-block-wrapper--vertical:not(#filters-drawer)):has(.collection-wrapper--full-width) { @media screen and (min-width: 750px) { grid-column: 1 / -1; grid-template-columns: 0fr repeat(var(--centered-column-number), minmax(0, 1fr)) 0fr; } } :is(.collection-wrapper--full-width, .collection-wrapper--full-width-on-mobile) [product-grid-view='default'] .product-grid__card { @media screen and (max-width: 749px) { padding-inline-start: max(var(--padding-xs), var(--padding-inline-start)); padding-inline-end: max(var(--padding-xs), var(--padding-inline-end)); } } :is(.collection-wrapper--full-width, .collection-wrapper--full-width-on-mobile) [product-grid-view='mobile-single'] .product-grid__card { @media screen and (max-width: 749px) { padding-inline-start: max(var(--padding-xs), var(--padding-inline-start)); padding-inline-end: max(var(--padding-xs), var(--padding-inline-end)); } } /* Make product media go edge-to-edge by using negative margins */ :is(.collection-wrapper--full-width) .card-gallery, :is(.collection-wrapper--full-width-on-mobile) .card-gallery { @media screen and (max-width: 749px) { margin-inline-start: calc(-1 * max(var(--padding-xs), var(--padding-inline-start))); margin-inline-end: calc(-1 * max(var(--padding-xs), var(--padding-inline-end))); } } .collection-wrapper--full-width .main-collection-grid__title { margin-inline-start: var(--page-margin); } .collection-wrapper--full-width-on-mobile .main-collection-grid__title { @media screen and (max-width: 749px) { margin-inline-start: var(--page-margin); } } .collection-wrapper--grid-full-width .facets--vertical:not(.facets--drawer) { @media screen and (min-width: 750px) { padding-inline-start: max(var(--padding-sm), var(--padding-inline-start)); } } .collection-wrapper:has(.product-grid-mobile--large) .facets-mobile-wrapper.facets-controls-wrapper { @media screen and (max-width: 749px) { display: none; } } .collection-wrapper:has(> .facets--horizontal) .facets__panel[open] { @media screen and (min-width: 750px) { z-index: var(--facets-open-z-index); } } /* END_SNIPPET:collection-wrapper-styles */ /* START_SNIPPET:deferred-media-product-model-styles (INDEX:216) */ .product-media { aspect-ratio: var(--gallery-aspect-ratio, var(--ratio)); min-height: 0; min-width: 0; } .product-media__image { object-position: var(--focal-point, center center); } /*** Media border-radius feature ****/ @media screen and (min-width: 750px) { .media-gallery--carousel slideshow-container, .media-gallery--grid .product-media > * { border-radius: var(--media-radius, 0); overflow: hidden; } /* When the CAROUSEL is on the LEFT side */ .product-information .product-information__grid:not(.product-information--media-right) .media-gallery--carousel.media-gallery--extend slideshow-container { border-start-start-radius: 0; border-end-start-radius: 0; } /* When the CAROUSEL is on the RIGHT side */ .product-information .product-information__grid.product-information--media-right .media-gallery--carousel.media-gallery--extend slideshow-container { border-start-end-radius: 0; border-end-end-radius: 0; } /* When the GRID is on the LEFT side */ .product-information .product-information__grid:not(.product-information--media-right) { /* One column */ .media-gallery--grid.media-gallery--extend:not(.media-gallery--two-column) .product-media > *, /* Two column, small first image */ .media-gallery--grid.media-gallery--extend.media-gallery--two-column:not(.media-gallery--large-first-image) .product-media-container:nth-of-type(odd) .product-media > *, /* Two column, large first image */ .media-gallery--grid.media-gallery--extend.media-gallery--two-column.media-gallery--large-first-image .product-media-container:is(:first-of-type, :nth-of-type(even)) .product-media > * { border-start-start-radius: 0; border-end-start-radius: 0; } } /* When the GRID is on the RIGHT side */ .product-information .product-information__grid.product-information--media-right { /* One column */ .media-gallery--grid.media-gallery--extend:not(.media-gallery--two-column) .product-media > *, /* Two column, small first image */ .media-gallery--grid.media-gallery--extend.media-gallery--two-column:not(.media-gallery--large-first-image) .product-media-container:nth-of-type(even) .product-media > *, /* Two column, large first image */ .media-gallery--grid.media-gallery--extend.media-gallery--two-column.media-gallery--large-first-image .product-media-container:is(:first-of-type, :nth-of-type(odd)) .product-media > * { border-start-end-radius: 0; border-end-end-radius: 0; } } } .product-media product-model { position: absolute; } .product-media-container--model { /* Usefull when view in your space is shown */ flex-direction: column; } .shopify-model-viewer-ui__controls-area { bottom: calc(var(--minimum-touch-target) + var(--padding-sm)); } /* If the product media is already providing an image cover, hide images provided by sibling product-model */ .product-media__image ~ product-model .deferred-media__poster-image { display: none; } /* If the product model is playing, hide the preview image */ .product-media-container:has(product-model .deferred-media__playing) .product-media__image { opacity: 0; transition: opacity var(--animation-speed) var(--animation-easing); } product-model { /* Height needed to make sure when it's set to be stretched, it takes the full height */ height: 100%; width: 100%; position: relative; } /* Media that have a poster button sibling providing the size should be absolute-positioned. Otherwise, it should be a block to rely on its own size */ product-model model-viewer, product-model > .deferred-media__poster-button ~ *:not(template) { display: block; position: absolute; top: 0; inset-inline-start: 0; width: 100%; height: 100%; overflow: hidden; /* Required to make sure the absolute position respects the padding of the wrapper: */ padding: inherit; } product-model > .deferred-media__poster-button { width: 100%; height: 100%; aspect-ratio: var(--video-aspect-ratio, auto); } product-model > .deferred-media__poster-button.deferred-media__playing { opacity: 0; transition: opacity 0.3s ease; } .button-shopify-xr { width: 100%; display: flex; justify-content: center; align-items: center; padding: var(--padding-md); } .button-shopify-xr > svg { width: var(--icon-size-sm); height: var(--icon-size-sm); margin-inline-end: var(--margin-md); } .button-shopify-xr[data-shopify-xr-hidden] { display: none; } product-model .deferred-media__poster-icon { position: absolute; top: 50%; left: 50%; /* stylelint-disable-line csstools/use-logical -- centring pair with a physical translate(-50%) */ transform: translate(-50%, -50%); border-radius: 50%; display: flex; align-items: center; justify-content: center; } product-model .deferred-media__poster-icon svg { width: var(--button-size); height: var(--button-size); color: var(--color-white); filter: drop-shadow(var(--shadow-button)); &:hover { color: rgb(var(--color-white-rgb) / var(--opacity-80)); } @media screen and (min-width: 750px) { width: 4rem; height: 4rem; } } /* END_SNIPPET:deferred-media-product-model-styles */ /* START_SNIPPET:deferred-media-video-styles (INDEX:217) */ .product-media deferred-media { position: absolute; } /* If the product media is already providing an image cover, hide images provided by sibling deferred-media */ .product-media__image ~ deferred-media .deferred-media__poster-image { display: none; } /* If the product media video is playing, hide the preview image */ .product-media-container:has(deferred-media .deferred-media__playing) .product-media__image { opacity: 0; transition: opacity var(--animation-speed) var(--animation-easing); } deferred-media { /* Height needed to make sure when it's set to be stretched, it takes the full height */ height: 100%; width: 100%; position: relative; /* The overflow hidden in the deferred-media won't let the button show the focus ring */ &:has(:focus-visible) { outline: var(--focus-outline-width) solid currentcolor; outline-offset: var(--focus-outline-offset); } @supports not selector(:focus-visible) { &:has(:focus) { outline: var(--focus-outline-width) solid currentcolor; outline-offset: var(--focus-outline-offset); } } } /* Media that have a poster button sibling providing the size should be absolute-positioned. Otherwise, it should be a block to rely on its own size */ deferred-media > .deferred-media__poster-button ~ *:not(template) { display: block; position: absolute; top: 0; inset-inline-start: 0; width: 100%; height: 100%; overflow: hidden; /* Required to make sure the absolute position respects the padding of the wrapper: */ padding: inherit; } deferred-media.border-style { /* Apply the border radius to the video */ overflow: hidden; } deferred-media > .deferred-media__poster-button { width: 100%; height: 100%; aspect-ratio: var(--video-aspect-ratio, auto); } deferred-media > .deferred-media__poster-button.deferred-media__playing { opacity: 0; transition: opacity 0.3s ease; } deferred-media img { height: 100%; object-fit: cover; transition: opacity 0.3s ease; } deferred-media iframe { display: block; width: 100%; height: 100%; border: none; aspect-ratio: var(--size-style-aspect-ratio, auto); } deferred-media[data-media-loaded] img { opacity: 0; } deferred-media .deferred-media__poster-icon { position: absolute; top: 50%; left: 50%; /* stylelint-disable-line csstools/use-logical -- centring pair with a physical translate(-50%) */ transform: translate(-50%, -50%); border-radius: 50%; display: flex; align-items: center; justify-content: center; } deferred-media .deferred-media__poster-icon svg { width: var(--button-size); height: var(--button-size); color: var(--color-white); filter: drop-shadow(var(--shadow-button)); &:hover { color: rgb(var(--color-white-rgb) / var(--opacity-80)); } @media screen and (min-width: 750px) { width: 4rem; height: 4rem; } } deferred-media[class] :is(.deferred-media__poster-button img, .deferred-media__poster-button ~ video) { /* only apply this on the video block not product media */ object-fit: cover; height: 100%; aspect-ratio: var(--size-style-aspect-ratio, auto); } .video-interaction-hint { opacity: 0; transition: opacity 0.3s ease; z-index: var(--layer-flat); } .video-interaction-hint:hover { opacity: 1; } /* END_SNIPPET:deferred-media-video-styles */ /* START_SNIPPET:dialog-styles (INDEX:218) */ .dialog-modal { border: none; box-shadow: var(--shadow-popover); @media screen and (min-width: 750px) { border-radius: var(--style-border-radius-popover); max-width: var(--normal-content-width); } @media screen and (max-width: 749px) { max-width: 100%; max-height: 100%; height: 100dvh; width: 100dvw; /* Fullscreen dialog spans the physical viewport (viewport-fit=cover); keep its content clear of the status bar, notch, and home indicator */ padding: max(var(--padding-md), var(--safe-area-inset-top)) max(var(--padding-md), var(--safe-area-inset-right)) max(var(--padding-md), var(--safe-area-inset-bottom)) max(var(--padding-md), var(--safe-area-inset-left)); } } .dialog-modal::backdrop { transition: backdrop-filter var(--animation-speed) var(--animation-easing); backdrop-filter: brightness(1); background: rgb(var(--backdrop-color-rgb) / var(--backdrop-opacity)); } :where(.dialog-modal)[open] { animation: elementSlideInTop var(--animation-speed) var(--animation-easing) forwards; &::backdrop { animation: backdropFilter var(--animation-speed) var(--animation-easing) forwards; transition: opacity var(--animation-speed) var(--animation-easing); } } :where(.dialog-modal).dialog-closing { animation: elementSlideOutTop var(--animation-speed) var(--animation-easing) forwards; &::backdrop { opacity: 0; } } /* stylelint-disable value-keyword-case */ .dialog-drawer { --dialog-drawer-opening-animation: move-and-fade; --dialog-drawer-closing-animation: move-and-fade; } /* stylelint-enable value-keyword-case */ .dialog-drawer[open] { --start-x: var(--custom-transform-from, 100%); --end-x: var(--custom-transform-to, 0px); --start-opacity: 1; animation: var(--dialog-drawer-opening-animation) var(--animation-speed) var(--animation-easing) forwards; } .dialog-drawer[open].dialog-closing { --start-x: 0px; --end-x: 100%; --start-opacity: 1; --end-opacity: 1; animation: var(--dialog-drawer-closing-animation) var(--animation-speed) var(--animation-easing); } /* END_SNIPPET:dialog-styles */ /* START_SNIPPET:divider (INDEX:219) */ .divider { align-self: stretch; display: flex; align-items: center; justify-content: var(--divider-justify-content); } .divider__line { border-bottom: var(--divider-border-thickness) solid var(--color-border); border-inline-end: var(--divider-border-thickness) solid var(--color-border); border-radius: calc(var(--style-border-radius-sm) * var(--divider-border-rounded)); flex-basis: var(--divider-flex-basis); min-height: var(--divider-flex-basis); } /* END_SNIPPET:divider */ /* START_SNIPPET:editorial-blog-grid (INDEX:220) */ .editorial-blog__grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 1fr; gap: var(--gap-xl); .shopify-block { height: 100%; } } .editorial-blog__spacer { aspect-ratio: 1; } @media screen and (max-width: 749px) { .editorial-blog__grid { display: flex; flex-direction: column; gap: var(--gap-2xl); } .editorial-blog__spacer { display: none; } /* Mobile layout - also horizontally mirrored from collection grid */ .editorial-blog__item-0 { width: 66%; align-self: flex-end; /* Originally flex-start, now flex-end */ } .editorial-blog__item-1 { width: 83%; align-self: flex-start; /* Originally flex-end, now flex-start */ } .editorial-blog__item-2 { width: 83%; align-self: flex-end; /* Originally flex-start, now flex-end */ } .editorial-blog__item-3 { width: 100%; align-self: center; /* Stays centered */ } } /* END_SNIPPET:editorial-blog-grid */ /* START_SNIPPET:editorial-collection-grid (INDEX:221) */ .editorial-collection__grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 1fr; gap: var(--gap-xl); .resource-list__item, .collection-card { height: 100%; } } .editorial-collection__spacer { aspect-ratio: 1; } @media screen and (max-width: 749px) { .editorial-collection__grid { display: flex; flex-direction: column; gap: var(--gap-2xl); } .editorial-collection__spacer { display: none; } .editorial-collection__item-0 { width: 66%; align-self: flex-start; aspect-ratio: 4 / 5; } .editorial-collection__item-1 { width: 83%; align-self: flex-end; aspect-ratio: 5 / 5; } .editorial-collection__item-2 { width: 83%; align-self: flex-start; aspect-ratio: 8 / 6; } .editorial-collection__item-3 { width: 100%; align-self: center; aspect-ratio: 8 / 6; } } /* END_SNIPPET:editorial-collection-grid */ /* START_SNIPPET:editorial-product-grid (INDEX:222) */ .editorial-product__grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 1fr; gap: var(--gap-xl); /* Make the aspect ratio super high on width, then increase the height of * slideshow containers until they fill all the available space */ .card-gallery { /* stylelint-disable-next-line declaration-no-important */ --gallery-aspect-ratio: 99 !important; } .card-gallery, slideshow-component, slideshow-container, slideshow-slides, .product-media__image { height: 100%; } /* Single-media cards skip the slideshow wrappers, so stretch the plain * media container directly to fill the editorial cell. The multi-media * container sits under slideshow-component and is unaffected. */ .card-gallery > a > .product-media-container { height: 100%; } } .editorial-product__spacer { aspect-ratio: 1; } @media screen and (max-width: 749px) { .editorial-product__grid { display: flex; flex-direction: column; gap: var(--gap-2xl); } .editorial-product__spacer { display: none; } .editorial-product__item-0 { width: 83%; align-self: flex-start; aspect-ratio: 7 / 6; } .editorial-product__item-1 { width: 83%; align-self: flex-end; aspect-ratio: 4 / 5; } .editorial-product__item-2 { width: 66%; align-self: flex-start; aspect-ratio: 5 / 5; } .editorial-product__item-3 { width: 100%; aspect-ratio: 8 / 6; } } /* END_SNIPPET:editorial-product-grid */ /* START_SNIPPET:filter-remove-buttons (INDEX:223) */ /* Facets - Remove buttons */ .facets-remove { --variant-picker-swatch-width: 20px; --variant-picker-swatch-height: 20px; display: none; align-items: center; flex-wrap: wrap; gap: var(--gap-xs); padding: 0 var(--drawer-padding); margin: 0; @media screen and (min-width: 750px) { --variant-picker-swatch-width: 16px; --variant-picker-swatch-height: 16px; gap: var(--gap-2xs); } } .facets-remove:has(facet-remove-component) { display: flex; margin-block-start: var(--margin-2xs); margin-block-end: var(--margin-md); } .facets:not(.facets--drawer) .facets-remove--mobile-and-vertical { @media screen and (min-width: 750px) { padding: 0; } } .facets--horizontal .facets-remove--mobile-and-vertical { @media screen and (min-width: 750px) { display: none; } } .facets-remove__pill { .svg-wrapper, .swatch { flex-shrink: 0; } } .facets--horizontal .facets-remove { @media screen and (min-width: 750px) { display: none; } } /* END_SNIPPET:filter-remove-buttons */ /* START_SNIPPET:fly-to-cart-styles (INDEX:224) */ /* Fly to cart animation */ fly-to-cart { --offset-y: 10px; position: fixed; width: var(--width, 40px); height: var(--height, 40px); left: 0; top: 0; z-index: calc(infinity); pointer-events: none; border-radius: var(--style-border-radius-buttons-primary); overflow: hidden; object-fit: cover; background-size: cover; background-position: center; opacity: 0; background-color: var(--color-foreground); translate: var(--start-x, 0) var(--start-y, 0); transform: translate(-50%, -50%); animation-name: travel-x, travel-y, travel-scale; animation-timing-function: var(--x-timing), var(--y-timing), var(--scale-timing); animation-duration: 0.6s; animation-composition: accumulate; animation-fill-mode: both; } fly-to-cart.fly-to-cart--main { --x-timing: cubic-bezier(0.7, -5, 0.98, 0.5); --y-timing: cubic-bezier(0.15, 0.57, 0.9, 1.05); --scale-timing: cubic-bezier(0.85, 0.05, 0.96, 1); } fly-to-cart.fly-to-cart--quick { --x-timing: cubic-bezier(0, -0.1, 1, 0.32); --y-timing: cubic-bezier(0, 0.92, 0.92, 1.04); --scale-timing: cubic-bezier(0.86, 0.08, 0.98, 0.98); animation-duration: 0.6s; } fly-to-cart.fly-to-cart--sticky { --x-timing: cubic-bezier(0.98, -0.8, 0.92, 0.5); --y-timing: cubic-bezier(0.14, 0.56, 0.92, 1.04); --scale-timing: cubic-bezier(0.86, 0.08, 0.98, 0.98); --radius: var(--style-border-radius-buttons-primary); @media screen and (max-width: 749px) { --x-timing: cubic-bezier(0.98, -0.1, 0.92, 0.5); } animation-duration: 0.8s; } @keyframes travel-scale { 0% { opacity: var(--start-opacity, 1); } 5% { opacity: 1; } 100% { border-radius: 50%; opacity: 1; transform: translate(-50%, calc(-50% + var(--offset-y))) scale(0.25); } } @keyframes travel-x { to { translate: var(--travel-x, 0) 0; } } @keyframes travel-y { to { translate: 0 var(--travel-y, 0); } } /* END_SNIPPET:fly-to-cart-styles */ /* START_SNIPPET:gift-card-recipient-form-styles (INDEX:228) */ .recipient-form { --options-border-radius: var(--variant-picker-button-radius); --options-border-width: var(--variant-picker-button-border-width); display: flex; flex-direction: column; color: var(--color, var(--color-foreground)); padding-bottom: var(--padding-2xl); } .recipient-form__send-to { padding: 0; margin-block-end: var(--margin-xs); } .gift-card-form-option { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-sm); padding: 0; border: none; } .gift-card-form-option__button-label { display: flex; align-items: center; position: relative; padding-block: var(--padding-sm); padding-inline: var(--padding-lg); border: var(--style-border-width) solid var(--color-variant-border); border-radius: var(--options-border-radius); border-width: var(--options-border-width); overflow: clip; justify-content: center; min-width: auto; background-color: var(--color-variant-background); color: var(--color-variant-text); transition: background-color var(--animation-speed) var(--animation-easing), border-color var(--animation-speed) var(--animation-easing); &:hover { background-color: var(--color-variant-hover-background); border-color: var(--color-variant-hover-border); color: var(--color-variant-hover-text); } } .gift-card-form-option__button-label:has(:focus-visible) { --variant-picker-stroke-color: var(--color-foreground); border-color: var(--color-foreground); outline: var(--focus-outline-width) solid var(--color-foreground); outline-offset: var(--focus-outline-offset); } .gift-card-form-option__button-label:has(:checked) { color: var(--color-selected-variant-text); background-color: var(--color-selected-variant-background); border-color: var(--color-selected-variant-border); transition: background-color var(--animation-speed) var(--animation-easing), border-color var(--animation-speed) var(--animation-easing); &:hover { background-color: var(--color-selected-variant-hover-background); border-color: var(--color-selected-variant-hover-border); color: var(--color-selected-variant-hover-text); } } .gift-card-form-option__button-label input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; width: 100%; height: 100%; } .recipient-fields { display: flex; flex-direction: column; gap: var(--gap-sm); transition: opacity 0.3s var(--animation-easing); padding-block-start: var(--padding-xl); } .recipient-fields[hidden] { display: none; } .field--send-on { display: flex; flex-direction: column; } .recipient-form__message { display: flex; flex-direction: row; align-items: center; gap: var(--gap-sm); margin-top: var(--margin-sm); } .recipient-form-field-label { position: absolute; inset-inline-start: var(--padding-sm); bottom: var(--padding-sm); font-style: italic; color: var(--color-input-text); } .recipient-fields__textarea { min-height: 5.5rem; overflow-y: auto; /* Space for the character count */ padding-bottom: calc(var(--padding-sm) * 3); scroll-padding-bottom: calc(var(--padding-sm) * 3); } .recipient-fields__input { flex-grow: 1; padding: var(--input-padding); background-color: var(--color-input-background); color: var(--color-input-text); text-align: start; font-size: var(--font-paragraph--size); border: var(--style-border-width-inputs) solid var(--color-input-border); border-radius: var(--style-border-radius-inputs); &:autofill { background-color: var(--color-input-background); color: var(--color-input-text); } &:is(:focus) { outline-color: var(--color-input-background); } } /* Date picker calendar icon * Safari doesn't show the icon and Firefox correctly applies the color from the input field. * Webkit browsers need the mask-image trick to use the correct icon color. */ .field--send-on .recipient-fields__input::-webkit-calendar-picker-indicator { cursor: pointer; mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24' %3E%3Cg%3E%3Cpath d='M9 11H7v2h2v-2zm4 0h-2v2h2v-2zm4 0h-2v2h2v-2zm2-7h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); background-repeat: no-repeat; background-image: none; background-color: currentColor; mask-type: match-source; } /* For Webkit browsers - text cursor for input area */ .field--send-on .recipient-fields__input::-webkit-datetime-edit { cursor: text; } .field--send-on .recipient-fields__input::-webkit-datetime-edit-year-field, .field--send-on .recipient-fields__input::-webkit-datetime-edit-month-field, .field--send-on .recipient-fields__input::-webkit-datetime-edit-day-field { /* Override the disabled color */ color: var(--color-input-text); } /* Fallback for other browsers */ .field--send-on .recipient-fields__input { cursor: text; } /* For Firefox - entire field is clickable, so show pointer */ @supports (-moz-appearance: none) { .field--send-on .recipient-fields__input { cursor: pointer; } } /* END_SNIPPET:gift-card-recipient-form-styles */ /* START_SNIPPET:grid-density-controls (INDEX:230) */ .column-options-wrapper { --icon-offset: -3px; display: flex; gap: var(--gap-sm); min-width: fit-content; justify-content: flex-end; height: var(--minimum-touch-target); align-items: center; margin-inline-end: var(--icon-offset); } .column-options-wrapper:only-child { margin-inline-start: auto; } .facets__form-wrapper > .column-options-wrapper:first-child { margin-inline-start: auto; } .facets .column-options-wrapper { display: none; @media screen and (min-width: 750px) { display: flex; } } .column-options { display: flex; flex-wrap: wrap; gap: var(--gap-xs); margin: 0; padding: 0; border: none; @media screen and (min-width: 750px) { gap: var(--gap-2xs); } } .column-options__option { display: flex; position: relative; } .column-options__legend { padding: 0; margin: 0; } .column-options__option-input { /* this is a repeating pattern a bit with the variant picker buttons */ /* remove the checkbox from the page flow */ position: absolute; /* set the dimensions to match those of the label */ inset: 0; /* hide it */ opacity: 0; margin: 0; padding: 0; width: auto; height: auto; aspect-ratio: unset; border: none; border-radius: 0; background: transparent; appearance: auto; display: block; cursor: pointer; } .column-picker { color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-50)); padding: var(--padding-2xs); border-radius: var(--style-border-radius-xs); transition: background-color var(--animation-speed) ease, color var(--animation-speed) ease; } .column-options__option:hover .column-picker { background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5)); } .column-options__option-input:checked ~ .column-picker { color: rgb(var(--color-rgb, var(--color-foreground-rgb))); background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5)); } /* END_SNIPPET:grid-density-controls */ /* START_SNIPPET:group (INDEX:231) */ .group-block__link { position: absolute; inset: 0; } .group-block__link ~ :is(.group-block-content, .group-block__media-wrapper) { pointer-events: none; :is(a, button, input, textarea, select) { pointer-events: auto; } } /* Needs the .group-block__link ~ to be specific enough to take effect. */ .group-block__link ~ .group-block-content--design-mode { pointer-events: auto; } /* END_SNIPPET:group */ /* START_SNIPPET:header-actions (INDEX:232) */ .account-button { /* Remove the background color from the color scheme, we want to inherit the color of the header */ background: transparent; } .account-button__icon, .account-button__text { color: var(--color-account-icon); transition: color var(--header-content-transition-timing); -webkit-font-smoothing: antialiased; } shopify-account { --shopify-account-font-heading: var(--font-heading--family); --shopify-account-font-heading-weight: var(--font-heading--weight); --shopify-account-font-body: var(--font-body--family); --shopify-account-font-body-weight: var(--font-body--weight); --shopify-account-radius-base: var(--style-border-radius-popover); --shopify-account-radius-button: var(--style-border-radius-buttons-primary); --shopify-account-radius-button-small: var(--style-border-radius-buttons-primary); --shopify-account-radius-input: var(--style-border-radius-buttons-primary); --shopify-account-color-background: var(--color-background); --shopify-account-color-text: var(--color-foreground); --shopify-account-color-accent: var(--color-primary-button-background); --shopify-account-color-accent-text: var(--color-primary-button-text); --shopify-account-dialog-position-top: calc(var(--account-dialog-top, var(--header-height, 0px)) + 10px); &:not(:defined) { min-width: 44px; height: 44px; display: flex; justify-content: center; align-items: center; /* Match the line height of the other buttons */ line-height: normal; } } .account-button__fallback { width: 28px; height: 28px; border-radius: 50%; background-color: var(--shopify-account-color-accent, #0a142f); } .account-button--text shopify-account { color: inherit; } .cart-actions summary { padding-inline: 0; padding-block: var(--padding-sm); line-height: 1.2; min-height: var(--minimum-touch-target); } header-actions { display: flex; @media screen and (max-width: 749px) { justify-self: flex-end; } } @media screen and (min-width: 750px) { .header-actions--text { gap: var(--gap-xl); } .header-actions__text-style { font-size: var(--header-actions-font-size); font-family: var(--header-actions-font-family); font-weight: var(--header-actions-font-weight); text-transform: var(--header-actions-text-case); } } #header-component[data-menu-style='drawer'] header-actions { justify-self: flex-end; } .header__column--right header-actions { margin-inline-start: calc(var(--gap-md) * -1); } .header-actions__cart-icon { --cart-bubble-size: 20px; --cart-bubble-top: 4.5px; --cart-bubble-right: 2.5px; position: relative; } .header-actions__cart-icon .cart-bubble { position: absolute; width: var(--cart-bubble-size, 20px); top: var(--cart-bubble-top); inset-inline-end: var(--cart-bubble-right); } @media screen and (min-width: 750px) { .header-actions__cart-icon--text.header-actions__cart-icon .cart-bubble { position: relative; top: 0; } } .header-actions__cart-icon .cart-bubble__text { font-family: var(--font-paragraph--family); font-weight: var(--font-paragraph--weight); } .header-actions__cart-icon.header-actions__cart-icon--has-cart svg { /* Create donut mask where the cart bubble sits */ mask: radial-gradient( calc(var(--cart-bubble-size) + 2px) at calc(100% - var(--cart-bubble-right)) var(--cart-bubble-top), transparent 45.45%, #fff 45.45%, #fff 100% ); } /* Mask positions are physical; the bubble sits at the inline-end (left in RTL) */ [dir='rtl'] .header-actions__cart-icon.header-actions__cart-icon--has-cart svg { mask: radial-gradient( calc(var(--cart-bubble-size) + 2px) at var(--cart-bubble-right) var(--cart-bubble-top), transparent 45.45%, #fff 45.45%, #fff 100% ); } .cart-bubble.cart-bubble--animating .cart-bubble__background { animation: grow var(--animation-speed) var(--animation-easing); } .cart-bubble--animating .cart-bubble__text { --start-y: -1em; --start-opacity: 1; /* Set initial transform state before animation starts */ transform: translate(0, var(--start-y, -1em)); opacity: var(--start-opacity, 1); animation: move-and-fade var(--animation-speed) var(--animation-easing); } cart-icon:has(.cart-bubble__text-count:empty) { --cart-bubble-size: 10px; --cart-bubble-top: 9px; --cart-bubble-right: 9px; .svg-wrapper { --cart-bubble-top: 4px; --cart-bubble-right: 4px; } } @media screen and (min-width: 750px) { cart-icon.header-actions__cart-icon--text:has(.cart-bubble__text-count:empty) { --cart-bubble-right: 2.5px; } } .header-actions__text { display: flex; align-items: center; } @media screen and (min-width: 750px) { .header-actions__cart-icon--text { display: flex; align-items: center; gap: var(--gap-xs); } .header__column--right .header-actions--text { margin-inline-start: 0; } } /* END_SNIPPET:header-actions */ /* START_SNIPPET:header-drawer (INDEX:233) */ .icon-caret--forward svg { transform: rotate(-90deg); } .icon-caret--backward svg { transform: rotate(90deg); } /* Forward/backward carets follow reading direction */ [dir='rtl'] .icon-caret--forward svg { transform: rotate(90deg); } [dir='rtl'] .icon-caret--backward svg { transform: rotate(-90deg); } .header__icon--menu { position: initial; } .menu-drawer-container .header__icon--summary { color: var(--color-foreground); display: flex; justify-content: center; align-items: center; padding: var(--padding-lg); } .header__icon--summary .header-drawer-icon { margin: auto; width: var(--icon-size-xs); height: var(--icon-size-xs); } .menu-drawer__featured-content { z-index: var(--layer-base); container-type: inline-size; } .menu-drawer__featured-content--childlist { z-index: var(--layer-flat); } .menu-drawer__featured-content-list { display: flex; gap: 1em; overflow-x: auto; padding-block-end: var(--padding-lg); } .menu-drawer__featured-content-list-item { flex: 0 0 auto; } .menu-drawer__featured-content-list-item--product { width: 35cqi; } .menu-drawer__featured-content-list-item--collection img.resource-card__image { width: 80cqi; } .menu-drawer__featured-content-list-item:first-child { margin-inline-start: var(--margin-xl); } .menu-drawer__featured-content-list-item:last-child { margin-inline-end: var(--margin-xl); } .menu-drawer__navigation { padding: 0; @media screen and (min-width: 750px) { margin-top: var(--drawer-header-desktop-top); } } details:not(.menu-open) .header__icon--menu .header-drawer-icon--close { display: none; } details.menu-open .header__icon--menu .header-drawer-icon--close { @media screen and (min-width: 750px) { display: none; } } details.menu-open .header__icon--menu .header-drawer-icon--open { display: none; @media screen and (min-width: 750px) { display: flex; } } .menu-drawer { position: fixed; transform: translateX(-100%); visibility: hidden; height: var(--drawer-height); width: var(--drawer-width); max-width: var(--drawer-max-width); z-index: var(--layer-menu-drawer); inset-inline-start: 0; top: 0; /* Inline-start-anchored drawer spans the full physical viewport (viewport-fit=cover); keep its content clear of the status bar, side notch, and home indicator. Subtract the designed menu gutter so link text aligns with the page / hamburger, not inset twice. */ padding-block: var(--safe-area-inset-top) var(--safe-area-inset-bottom); padding-inline: max(0px, calc(var(--safe-area-inset-left) - var(--drawer-padding))) 0; background-color: var(--color-background); overflow: auto; display: flex; border-inline-end: var(--style-border-drawer); flex-direction: column; @media screen and (min-width: 750px) { width: 25rem; } } /* The drawer enters from the inline-start edge: the slide transforms and the physical safe-area notch flip in RTL */ [dir='rtl'] .menu-drawer { transform: translateX(100%); padding-inline-start: max(0px, calc(var(--safe-area-inset-right) - var(--drawer-padding))); } /* When opening a submenu we don't want the first-level menu to be scrollable, so we reset the overflow */ .menu-drawer.menu-drawer--has-submenu-opened { overflow: initial; } .menu-drawer__backdrop { position: fixed; top: 0; inset-inline-start: 0; width: 100vw; height: 100dvh; backdrop-filter: brightness(0.75); z-index: var(--layer-overlay); opacity: 0; transition: opacity var(--drawer-animation-speed) ease; .menu-open & { opacity: 1; } } .menu-drawer, details[open] > .menu-drawer__submenu { transition: transform var(--drawer-animation-speed) ease, visibility var(--drawer-animation-speed) ease, opacity var(--drawer-animation-speed) ease; } .menu-open > .menu-drawer, .menu-open > .menu-drawer__submenu:not(.menu-drawer__menu--childlist) { transform: translateX(0); visibility: visible; opacity: 1; display: flex; flex-direction: column; } .menu-drawer__inner-container { position: relative; height: 100%; } .menu-drawer__navigation-container { display: grid; grid-template-rows: 1fr auto; align-content: space-between; overflow-y: auto; height: 100%; } .menu-drawer__inner-submenu { display: flex; flex-direction: column; height: 100%; overflow-y: auto; @media screen and (min-width: 750px) { margin-top: var(--drawer-header-desktop-top); } } .menu-drawer__nav-buttons { display: flex; justify-content: space-between; align-items: center; } /* Submenu header with a centered, clickable title flanked by the back and close controls. */ .menu-drawer__nav-buttons--with-title { display: grid; grid-template-columns: 1fr auto 1fr; } .menu-drawer__title { justify-self: center; min-width: 0; padding: var(--padding-md) var(--padding-sm); color: var(--color-foreground); text-align: center; text-decoration: none; line-height: 1.2; } .menu-drawer__menu { --menu-drawer-inline-padding: calc(var(--padding-sm) + 7px); list-style: none; padding-inline: var(--drawer-padding); margin-inline: 0; margin-block-start: 0; } .menu-drawer__menu--grid { display: grid; width: 100%; grid-template-columns: 1fr 1fr; gap: var(--padding-sm); padding-inline-end: var(--menu-drawer-inline-padding); padding-block-start: var(--padding-xs); } .menu-drawer__menu--childlist:not(.menu-drawer__menu--grid) { flex-grow: 1; } .menu-drawer__menu.has-submenu, .menu-drawer__menu--childlist:not(:has(.menu-drawer__animated-element)) { margin-block-end: var(--margin-xs); @media screen and (min-width: 750px) { margin-block-end: 2.5rem; } } .menu-drawer__list-item--divider { border-block-end: 1px solid var(--color-border); } .menu-drawer__list-item--deep:not(.menu-drawer__list-item--divider) .menu-drawer__menu { margin-block-start: -0.3rem; } .menu-drawer__list-item--flat.menu-drawer__list-item--divider .menu-drawer__menu { margin-block-start: -0.4rem; } .menu-drawer__menu-container--divider { border-block-end: 1px solid var(--color-border); } .menu-drawer__menu > .menu-drawer__list-item { display: flex; min-height: calc(2 * var(--padding-lg) + var(--icon-size-xs)); } .menu-drawer__list-item--deep .menu-drawer__list-item, .menu-drawer__list-item--flat .menu-drawer__list-item { min-height: auto; } .menu-drawer__menu .menu-drawer__list-item--flat { display: flex; flex-direction: column; align-items: flex-start; margin-block-end: var(--margin-md); } .menu-drawer__menu--childlist .menu-drawer__list-item--flat { margin-block-end: var(--margin-sm); @media screen and (min-width: 750px) { margin-block-end: var(--margin-lg); } } .menu-drawer__menu--childlist .menu-drawer__list-item--flat.menu-drawer__list-item--divider { margin-block-end: 0; } .menu-drawer__list-item--flat .menu-drawer__menu--childlist { width: 100%; padding-inline: 0; } .menu-drawer-container[open] .menu-drawer__animated-element { animation: menu-drawer-nav-open var(--drawer-animation-speed) ease-in-out; animation-delay: calc(var(--drawer-animation-speed) + (var(--menu-drawer-animation-index) - 1) * 0.1s); animation-fill-mode: backwards; } [dir='rtl'] .menu-drawer-container[open] .menu-drawer__animated-element { animation-name: menu-drawer-nav-open-rtl; } .menu-drawer__menu accordion-custom .details-content--no-animation { animation: none; visibility: visible; opacity: 1; transform: translateX(0); transition: none; } .menu-drawer__menu details, .menu-drawer__menu-item, .menu-drawer__menu accordion-custom { width: 100%; } .menu-drawer__list-item--divider .menu-drawer__menu-item:not(.menu-drawer__menu-item--child) { min-height: calc(2 * var(--padding-lg) + var(--icon-size-xs)); } .menu-drawer__menu-item--mainlist { min-height: calc(2 * var(--padding-lg) + var(--icon-size-xs)); font-family: var(--menu-top-level-font-family); font-style: var(--menu-top-level-font-style); font-weight: var(--menu-top-level-font-weight); font-size: var(--menu-top-level-font-size); line-height: var(--menu-top-level-font-line-height); text-transform: var(--menu-top-level-font-case); color: var(--menu-top-level-font-color); justify-content: space-between; &:hover { color: var(--menu-top-level-font-color); } } .menu-drawer__menu-item--parent { font-family: var(--menu-parent-font-family); font-style: var(--menu-parent-font-style); font-weight: var(--menu-parent-font-weight); font-size: var(--menu-parent-font-size); line-height: var(--menu-parent-font-line-height); text-transform: var(--menu-parent-font-case); color: var(--menu-parent-font-color); &:hover { color: var(--menu-parent-font-color); } } .menu-drawer__menu-item--child { font-family: var(--menu-child-font-family); font-style: var(--menu-child-font-style); font-weight: var(--menu-child-font-weight); font-size: var(--menu-child-font-size); line-height: var(--menu-child-font-line-height); text-transform: var(--menu-child-font-case); color: var(--menu-child-font-color); &:hover { color: var(--menu-child-font-color); } } .menu-drawer__menu--childlist summary.menu-drawer__menu-item { display: flex; width: 100%; padding-inline-end: 0; } .menu-drawer__list-item--deep .menu-drawer__menu, .menu-drawer__menu--grandchildlist { padding-inline: 0; } .menu-drawer__list-item--deep .menu-drawer__menu { padding-block-end: 0.5rem; } .menu-drawer__list-item--deep.menu-drawer__list-item--divider .menu-drawer__menu { padding-block-end: 0.3rem; } .menu-drawer__list-item--flat.menu-drawer__list-item--divider .menu-drawer__menu--grandchildlist { padding-block-end: 0.5rem; } .menu-drawer__menu-item { display: flex; padding: var(--padding-2xs) 0; position: relative; text-decoration: none; justify-content: space-between; align-items: center; } .menu-drawer__menu-item:has(> .menu-drawer__link-image) { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; row-gap: var(--padding-3xs); padding: 0; } .menu-drawer__link-image { width: 100%; position: relative; aspect-ratio: 16 / 9; object-fit: cover; } /* Fix alignment for collection image mode links without images in drawer */ /* Target menu items in grids that have images */ .menu-drawer__menu--grid:has(.menu-drawer__link-image) .menu-drawer__menu-item:not(:has(> .menu-drawer__link-image)) { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; row-gap: var(--padding-3xs); padding: 0; } .menu-drawer__menu--grid:has(.menu-drawer__link-image) .menu-drawer__menu-item:not(:has(> .menu-drawer__link-image))::before { content: ''; display: block; width: 100%; aspect-ratio: 16 / 9; background-color: var(--color-foreground-muted); opacity: 0.1; border-radius: var(--menu-image-border-radius); } .menu-drawer__close-button { position: relative; inset-inline-end: auto; top: auto; width: fit-content; height: fit-content; color: inherit; padding: var(--padding-lg); } /* Match the specificity of the base [dir='rtl'] .close-button safe-area rule so the relatively positioned drawer button keeps inset-inline-end: auto in RTL */ [dir='rtl'] .menu-drawer__close-button { inset-inline-end: auto; } .menu-drawer__back-button { display: flex; width: 100%; padding: var(--padding-md) var(--padding-xl); border: none; align-items: center; color: var(--color-foreground); background-color: transparent; text-align: start; text-decoration: none; white-space: nowrap; overflow-x: hidden; line-height: 1.2; box-shadow: none; } /* Match the menu links' focus style: a rectangular outline in the current color. These buttons sit flush against the drawer edges, so inset the outline to keep it from being clipped. */ .menu-drawer__close-button.menu-drawer__close-button, .menu-drawer__back-button.menu-drawer__back-button { border-radius: 0; outline-offset: calc(var(--padding-2xs) * -1); } /* Safari < 16.4 draws the close focus ring via a pseudo-element; keep it rectangular there too. */ .menu-drawer__close-button:focus-visible::after { border-radius: 0; } .menu-drawer__nav-buttons--with-title .menu-drawer__back-button { width: fit-content; padding: var(--padding-lg); justify-self: start; } .menu-drawer__nav-buttons--with-title .menu-drawer__close-button { justify-self: end; } .menu-drawer__menu-item-text { overflow: hidden; text-overflow: ellipsis; } /** Styles when the country selector is hidden */ .menu-drawer .language-selector:not(.menu-drawer__submenu *) { width: fit-content; padding-inline-start: 0; .localization-form__select { text-align: start; } } .menu-drawer__menu-item > .svg-wrapper { width: fit-content; height: fit-content; margin: 0; padding-block: var(--padding-lg); padding-inline-start: var(--padding-xl); flex-shrink: 0; } .menu-drawer__list-item--divider .menu-drawer__menu-item > .svg-wrapper { padding-block: var(--padding-md); } .menu-drawer svg { width: var(--icon-size-xs); height: var(--icon-size-xs); } .menu-drawer__submenu { position: absolute; width: 100%; top: 0; height: 100dvh; inset-inline-start: 0; /* Submenus are absolutely positioned so they bypass the drawer's safe-area padding; apply the same insets directly */ padding-block: var(--safe-area-inset-top) var(--safe-area-inset-bottom); padding-inline: max(0px, calc(var(--safe-area-inset-left) - var(--drawer-padding))) 0; background-color: var(--color-background); z-index: var(--layer-flat); transform: translateX(-5%); visibility: hidden; overflow-y: auto; opacity: 0; } [dir='rtl'] .menu-drawer__submenu { transform: translateX(5%); padding-inline-start: max(0px, calc(var(--safe-area-inset-right) - var(--drawer-padding))); } .menu-drawer__back-button > .svg-wrapper { margin-inline-end: var(--padding-md); width: var(--icon-size-xs); height: var(--icon-size-xs); } .menu-drawer__utility-links { display: flex; flex-direction: column; padding: 0; margin-block: auto var(--padding-sm); margin-inline-start: var(--padding-xl); } .menu-drawer__account { display: inline-flex; align-items: center; gap: var(--gap-xs); text-decoration: none; height: 44px; font-size: 1.4rem; color: rgb(var(--color-foreground)); } .menu-drawer__account svg { height: var(--icon-size-sm); width: var(--icon-size-sm); } .menu-drawer__account shop-user-avatar { --shop-avatar-size: 2.4rem; margin-inline-end: 0.55rem; margin-inline-start: -0.45rem; } .menu-drawer__link-image, .menu-drawer__featured-product-image, .menu-drawer__featured-collection-image, .menu-drawer__featured-collection-link::before { border-radius: var(--menu-image-border-radius); } @keyframes menu-drawer-nav-open { 0% { visibility: hidden; opacity: 0; transform: translateX(-0.5rem); } 100% { visibility: visible; opacity: 1; transform: translateX(0); } } @keyframes menu-drawer-nav-open-rtl { 0% { visibility: hidden; opacity: 0; transform: translateX(0.5rem); } 100% { visibility: visible; opacity: 1; transform: translateX(0); } } @keyframes menu-drawer-subnav-open { 0% { visibility: visible; opacity: 1; transform: translateX(0); } 100% { visibility: hidden; opacity: 0; transform: translateX(-1rem); } } /* Drawer Localization Styles */ .drawer-localization__button .icon-flag { width: var(--menu-localization-font-size, var(--icon-size-sm)); height: var(--menu-localization-font-size, var(--icon-size-sm)); clip-path: circle(50%); /* stylelint-disable-line */ background-position: center; background-size: cover; margin-inline-end: 4px; position: relative; } .drawer-localization__button .icon-flag::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 var(--size-shadow) var(--color-shadow); border-radius: 50%; } .drawer-localization .country-filter { padding-block: 8px; } .drawer-localization .drawer-localization__button { display: flex; padding: 0; position: relative; text-decoration: none; height: 44px; &:hover { color: var(--color-foreground); } } .drawer-localization .drawer-localization__button .icon-caret { width: fit-content; height: fit-content; margin: 0; padding-block: var(--padding-xl); padding-inline: var(--padding-xs) var(--padding-xl); } .menu-drawer__localization:not(drawer-localization-component) .language-selector { font-family: var(--menu-localization-font); font-size: var(--menu-localization-font-size); } .menu-drawer__localization .language-selector.h5 { padding-inline-start: 0; } .drawer-localization { display: contents; color: var(--color-foreground); } .drawer-localization localization-form-component { position: relative; height: 100%; } .drawer-localization .mobile-localization, .drawer-localization .drawer-localization__button--label { display: flex; gap: var(--gap-xs); margin-block: 0; align-items: center; } .drawer-localization__button--label.h6 { font-family: var(--menu-localization-font); } .drawer-localization img { width: var(--icon-size-sm); } .drawer-localization .localization-button__icon, .drawer-localization .localization-button__icon svg { width: var(--icon-size-xs); height: var(--icon-size-xs); } .drawer-localization summary.is-disabled { pointer-events: none; } .drawer-localization .localization-wrapper { width: 100%; } .drawer-localization .localization-form { display: flex; flex-direction: column; position: absolute; inset: 0; width: 100%; height: 100%; } .drawer-localization .localization-form > * { padding-inline: var(--padding-xl); } .drawer-localization .language-selector .svg-wrapper.icon-caret { transform: translateY(-50%) rotate(0deg); inset-inline-end: 20px; } [dir='rtl'] .drawer-localization .language-selector .svg-wrapper.icon-caret { right: auto; /* stylelint-disable-line csstools/use-logical -- clearing an un-converted physical right in RTL */ } .drawer-localization .language-selector .svg-wrapper.icon-caret svg { transform: none; } /* END_SNIPPET:header-drawer */ /* START_SNIPPET:jumbo-text (INDEX:239) */ .jumbo-text__container { width: 100%; } footer .jumbo-text__container { pointer-events: none; } jumbo-text { display: block; font-family: var(--font-family, inherit); font-style: var(--font-style, normal); color: var(--color, inherit); font-weight: var(--font-weight, inherit); letter-spacing: var(--letter-spacing, -0.02em); line-height: var(--line-height, 1); opacity: 0; visibility: hidden; text-align: var(--text-align); text-box: var(--text-trim, trim-end cap text); text-transform: var(--text-transform, none); transition: opacity 0.3s ease; width: 100%; margin-inline-start: var(--margin-inline-start-nudge, 0); margin-inline-end: var(--margin-inline-end-nudge, 0); overflow: visible; } jumbo-text.ready { opacity: 1; visibility: visible; } jumbo-text[data-cap-text='true'] { /* stylelint-disable-next-line plugin/no-unsupported-browser-features */ text-box-edge: cap text; } .jumbo-text-line { display: inline-flex; white-space: pre; } @media (prefers-reduced-motion: no-preference) { /* Blur effect */ .ready[data-text-effect='blur'] { filter: blur(20px); opacity: 0.5; scale: 1.05; transition: filter 1.6s var(--animation-timing-fade-in), opacity 1.3s var(--animation-timing-fade-in), scale 1.6s var(--animation-timing-fade-in); } .jumbo-text-visible[data-text-effect='blur'] { filter: blur(0); opacity: 1; scale: 1; } /* Reveal effect */ .ready[data-text-effect='reveal'] { overflow: hidden; } .ready[data-text-effect='reveal'] .jumbo-text-line { transform: translateY(100%); } .jumbo-text-visible[data-text-effect='reveal'] .jumbo-text-line { transition: transform 0.5s var(--animation-timing-fade-in) calc(var(--line-index) * 0.05s); transform: translateY(0); } .jumbo-text-visible[data-text-effect='reveal'] { overflow: visible; transition: overflow 0s linear 0.75s; } } /* END_SNIPPET:jumbo-text */ /* START_SNIPPET:list-filter (INDEX:242) */ .facets__bubble { display: inline-flex; align-items: center; justify-content: center; height: calc(var(--variant-picker-swatch-height) / 1.5); min-width: 20px; padding: 0 6px; border-radius: 20px; font-family: var(--font-paragraph--family); font-size: var(--font-size--xs); font-weight: var(--font-paragraph--weight); color: var(--color-foreground); background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10-25)); } .facets__bubble svg { width: 12px; height: 12px; } .show-more__button { color: var(--color-foreground); cursor: pointer; } .show-more__button:hover { @media screen and (min-width: 750px) { color: rgb(var(--color-foreground-rgb) / var(--opacity-80)); } } .show-more__label { text-align: start; font-size: var(--font-size--body-md); font-family: var(--font-paragraph--family); } .show-more__button .svg-wrapper { width: var(--icon-size-xs); height: var(--icon-size-xs); } .show-more[data-expanded='true'] .show-more__label--more, .show-more[data-expanded='false'] .show-more__label--less { display: none; } .show-more__button .icon-plus :is(.horizontal, .vertical) { transition: transform var(--animation-speed) var(--animation-easing); transform: rotate(0deg); transform-origin: 50% 50%; opacity: 1; } .show-more:where([data-expanded='true']) .show-more__button .icon-plus .horizontal { transform: rotate(90deg); } .show-more:where([data-expanded='true']) .show-more__button .icon-plus .vertical { transform: rotate(90deg); opacity: 0; } .facets input:checked + label { font-weight: 500; } .facets .checkbox .icon-checkmark { transition: border-color 0.2s ease, background-color 0.2s ease; } .facets .checkbox:not(.checkbox--disabled):hover .icon-checkmark { border-color: rgb(var(--color-foreground-rgb) / var(--opacity-40-60)); background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5)); } /* Hover state for checked checkboxes - targeting via adjacent sibling */ .facets .checkbox:not(.checkbox--disabled):hover .checkbox__input:checked + .checkbox__label .icon-checkmark { background-color: var(--color-foreground-subdued); } .facets .checkbox:not(.checkbox--disabled) .checkbox__label-text { color: var(--color-foreground-subdued); } .facets .checkbox:not(.checkbox--disabled):hover .checkbox__label-text { color: var(--color-foreground-rgb); } .facets .checkbox .checkbox__label-text { transition: color 0.2s ease, font-weight 0.2s ease; } /* Pill style */ .facets__pill-label { --pill-label-padding-inline: var(--padding-xs); --pill-label-border-radius: var(--style-border-radius-md); --pill-label-border-width: var(--variant-picker-button-border-width); --pill-label-height: var(--button-size-md); --pill-label-focus-outline-color: var(--color-foreground); --pill-label-color: var(--color-foreground); --pill-label-color-rgb: var(--color-foreground-rgb); --pill-label-background-color: var(--color-background); --pill-label-background-color-rgb: var(--color-background-rgb); --pill-label-border-opacity: var(--facets-low-opacity); display: inline-flex; position: relative; align-items: center; justify-content: center; box-shadow: inset 0 0 0 var(--pill-label-border-width) rgb(var(--pill-label-color-rgb) / var(--opacity-10-25)); border-radius: var(--pill-label-border-radius); height: var(--pill-label-height); width: 100%; padding-inline: var(--pill-label-padding-inline); color: rgb(var(--pill-label-color-rgb)); background-color: rgb(var(--pill-label-background-color-rgb)); cursor: pointer; transition: color var(--animation-speed) var(--animation-easing), background-color var(--animation-speed) var(--animation-easing); outline-color: var(--pill-label-focus-outline-color); &:hover { --pill-label-border-opacity: 100%; } } .facets__pill-input:not(:checked) + .facets__pill-label:hover { --pill-label-color-rgb: var(--color-foreground-rgb); background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5)); } .facets__pill-input { &:checked + .facets__pill-label { --pill-label-color-rgb: var(--color-background-rgb); --pill-label-background-color-rgb: var(--color-foreground-rgb); --pill-label-border-opacity: 0; font-weight: 500; } &:disabled + .facets__pill-label { opacity: var(--disabled-opacity); cursor: not-allowed; &:hover { --pill-label-border-opacity: var(--facets-low-opacity); } } } .facets__status-wrapper { display: flex; align-items: center; } .facets--drawer .facets__status-wrapper { @media screen and (max-width: 749px) { gap: var(--gap-3xs); } } .facets--vertical .facets__status-wrapper { gap: var(--gap-xs); } .facets--horizontal .facets__status-wrapper { gap: 0; } .facets__pill-input:disabled + .facets__pill-label svg { position: absolute; top: 0; inset-inline-start: 0; border-radius: var(--style-border-radius-md); } .facets__pill-label svg line { stroke-width: 1.5px; stroke: rgb(var(--color-foreground-rgb) / var(--facets-low-opacity)); } .facets__pill-wrapper { position: relative; } .facets__pill-input { position: absolute; inset: 0; margin: 0; padding: 0; width: auto; height: auto; aspect-ratio: unset; border: none; border-radius: 0; background: transparent; appearance: auto; display: block; opacity: 0; cursor: pointer; } /* Swatches */ .facets__status--swatches { display: none; } .facets__swatch-wrapper { display: flex; } .variant-option__swatch-wrapper { position: relative; overflow: visible; border-radius: var(--options-border-radius); } .variant-option--swatches-disabled { pointer-events: none; cursor: not-allowed; } .variant-option--swatches-disabled .variant-option__swatch-wrapper { overflow: hidden; } .facets--horizontal .facets__status--swatches { @media screen and (min-width: 750px) { display: flex; } } .facets--horizontal .sorting-filter .facets__status { @media screen and (min-width: 750px) { display: none; } } .facets__status--swatches .swatch { width: calc(var(--variant-picker-swatch-width) / 1.5); height: calc(var(--variant-picker-swatch-height) / 1.5); } .facets__status--swatches .swatch + .swatch { margin-inline-start: calc(var(--variant-picker-swatch-width) / -3); outline: 1px solid rgb(var(--color-background-rgb)); } .facets__inputs-wrapper .facets__inputs-list--images { display: grid; grid-template-columns: repeat(var(--image-columns), 125px); gap: var(--gap-sm); } .facets--drawer .facets__inputs-wrapper .facets__inputs-list--images { grid-template-columns: repeat(3, 1fr); @media screen and (min-width: 750px) { grid-template-columns: repeat(4, 1fr); } } .facets--vertical .facets__inputs-wrapper .facets__inputs-list--images { grid-template-columns: repeat(2, 1fr); } .facets--drawer .facets__inputs-list--images { padding-top: var(--padding-xs); } .facets__image-wrapper { aspect-ratio: 1/1; width: 100%; padding: var(--padding-xs); position: relative; overflow: hidden; } .facets__image-wrapper img { height: 100%; width: 100%; object-fit: contain; border-radius: calc(var(--border-radius) / 2); } .facets__image-label { width: 100%; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-block-end: var(--padding-xs); cursor: pointer; } .facets__inputs-list-item--disabled .facets__image-label { cursor: not-allowed; } .facets__inputs-list-item:not(.facets__inputs-list-item--disabled) .facets__image-label:hover { font-weight: 500; } /* Filter-specific variant-option styles */ .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover .swatch { --focus-outline: var(--focus-outline-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-35-55)); outline: var(--focus-outline); outline-offset: var(--focus-outline-offset); } .facets__inputs-list--swatches-grid .variant-option__button-label:has(:focus-visible) .swatch { --focus-outline: var(--focus-outline-width) solid currentcolor; outline: var(--focus-outline); outline-offset: var(--focus-outline-offset); } .facets__inputs-list--swatches-grid .variant-option__button-label:has(:focus-visible) { outline: none; } .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover { outline: none; } .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:has(:checked) { --focus-outline: none; } .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:has(:checked) .swatch { outline: var(--focus-outline); outline-offset: var(--focus-outline-offset); } .facets__inputs-list--swatches .variant-option__button-label { --color-variant-text: var(--color-foreground); } .facets__inputs-list--swatches { --variant-picker-swatch-width: 32px; --variant-picker-swatch-height: 32px; @media screen and (min-width: 750px) { --variant-picker-swatch-width: 26px; --variant-picker-swatch-height: 26px; } } .facets--vertical .facets__inputs-wrapper .facets__inputs-list--swatches-grid { gap: var(--gap-sm); } .facets--vertical .facets__inputs-list--swatches .facets__inputs-list-item { display: flex; } .facets__inputs-wrapper .facets__inputs-list--swatches-grid { --columns: 2; display: grid; grid-template-columns: repeat(var(--columns), 1fr); } .facets__inputs-wrapper .facets__inputs-list--swatches-grid .variant-option--swatches { cursor: pointer; overflow: visible; } .facets__inputs-list-item--disabled .variant-option--swatches { cursor: not-allowed; } .facets__inputs-wrapper .facets__inputs-list--swatches-grid label { cursor: pointer; word-break: break-word; white-space: normal; } .facets__inputs-list--swatches-grid .facets__inputs-list-item--disabled label { cursor: not-allowed; } .facets__inputs-list-item--disabled .variant-option__button-label { cursor: not-allowed; } .facets__inputs-wrapper .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:has(input[type='checkbox']) { align-items: center; overflow: visible; justify-content: flex-start; display: flex; width: 100%; flex-basis: unset; gap: var(--gap-sm); } .facets__inputs-wrapper .facets__inputs-list--swatches-grid .variant-option__button-label:has(:checked) { color: rgb(var(--color-foreground-rgb)); background-color: rgb(var(--color-background-rgb)); font-weight: 500; transition: font-weight 0.2s ease; } .facets .variant-option--swatches { --options-border-radius: var(--variant-picker-swatch-radius); width: auto; } .facets__inputs-list-item:not(.facets__inputs-list-item--disabled) .variant-option__button-label:hover { font-weight: 500; } /* Variant option images (filters) */ .variant-option--images { --image-facet-border-width: var(--variant-picker-button-border-width); --image-facet-border-opacity: var(--facets-low-opacity); --image-facet-border-radius: var(--style-border-radius-xs); position: relative; border-radius: var(--image-facet-border-radius); box-shadow: inset 0 0 0 var(--image-facet-border-width) rgb(var(--color-foreground-rgb) / var(--image-facet-border-opacity)); &:hover { --image-facet-border-opacity: 100%; } &:has(input:checked) { font-weight: 500; transition: font-weight 0.2s ease; } &:has(input:checked):hover { --image-facet-border-width: calc(var(--variant-picker-button-border-width) + 0.5px); } &:has(input:focus-visible) { outline: var(--focus-outline-width) solid currentcolor; outline-offset: var(--focus-outline-offset); } } .variant-option--images input { /* remove the checkbox from the page flow */ position: absolute; /* set the dimensions to match those of the label */ inset: 0; /* hide it */ opacity: 0; margin: 0; padding: 0; width: 100%; height: 100%; aspect-ratio: unset; border: none; border-radius: 0; background: transparent; appearance: auto; display: block; cursor: pointer; } .facets__inputs-list-item--disabled .variant-option--images { --image-facet-border-opacity: 0; opacity: var(--disabled-opacity); cursor: not-allowed; &:hover { --image-facet-border-opacity: 0; } img { opacity: var(--disabled-opacity); } input, label, .facets__image-label { cursor: not-allowed; } .facets__image-wrapper { border: var(--style-border-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-30)); border-radius: var(--image-facet-border-radius); } } /* Position disabled-svg */ .variant-option--images svg { position: absolute; inset: 0; width: 100%; height: 100%; stroke-width: var(--border-width); stroke: rgb(var(--color-foreground-rgb) / var(--opacity-5)); } /* Position label text and handle overflow */ .facets__inputs-list-item, .variant-option--images { min-width: 0; } /* Safari < 16.4 outline border-radius workaround - filter-specific */ @supports not (background-color: rgb(from red 150 g b / alpha)) { .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover .swatch { outline: none; position: relative; overflow: visible; } .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover .swatch::after { content: ''; position: absolute; inset: calc(-1 * var(--focus-outline-offset)); border: var(--focus-outline); border-radius: var(--focus-outline-radius, 50%); background-color: transparent; display: inherit; } } /* END_SNIPPET:list-filter */ /* START_SNIPPET:localization-form (INDEX:243) */ /* Localization */ localization-form-component { display: flex; width: var(--width, auto); @media screen and (min-width: 750px) { position: relative; } } localization-form-component[data-show-filter='false'] .country-selector-form__wrapper { padding-block-start: var(--padding-xs); } .localization-form { width: 100%; } localization-form-component .button:is(:not(.country-filter__reset-button)) { --button-color: var(--color-foreground); --button-background-color: var(--language-button-background-color, var(--color-background)); --button-border-color: var(--language-button-border-color, var(--color-border)); text-decoration-color: transparent; text-decoration-thickness: 0.075em; text-underline-offset: 0.125em; transition: text-decoration-color var(--animation-speed) var(--animation-easing); } localization-form-component .button:is(:not(.country-filter__reset-button)):hover, .localization-form__list-item:hover, .localization-form__list-item:focus { --button-color: var(--color-foreground-subdued); background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8)); } .localization-form__list-item[aria-current='true'] { --button-color: var(--color-primary-active); background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10)); } .localization-form__list-item-disabled { pointer-events: none; } .localization-form__list-item:focus-visible { outline: none; } localization-form-component .localization-selector { display: flex; align-items: center; gap: var(--margin-2xs); } localization-form-component .country-filter__search-icon { inset-inline-start: 8px; inset-inline-end: auto; color: var(--color-foreground-muted); pointer-events: none; } .country-filter__search-icon .svg-wrapper svg { width: var(--icon-size-sm); height: var(--icon-size-sm); } .disclosure { width: 100%; } .localization-form__list { position: relative; width: 100%; padding-block: 0 var(--padding-xs); font-size: var(--font-size-lg); scroll-padding: var(--padding-xs) 0; overflow-y: auto; white-space: nowrap; /* Hide scrollbar which would cause extra right padding in Safari */ scrollbar-width: none; &::-webkit-scrollbar { display: none; } } .localization-form__list-item:not([hidden]) { margin-block-end: var(--margin-3xs); display: flex; gap: var(--margin-sm); padding: 8px; border-radius: 8px; line-height: var(--font-line-height-md); align-items: center; text-align: start; cursor: pointer; transition: background-color var(--animation-speed) var(--animation-easing); .country { flex: 1; color: var(--color-foreground); } &:hover { background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8)); } &[aria-current='true'] { .country { font-weight: 500; } } } .localization-form__list-item#no-results-message { grid-template-columns: 1fr; text-align: center; color: var(--color-foreground-subdued); } .is-searching .localization-form__list-item .country { color: var(--color-foreground-subdued); } .localization-form__list-item .country mark { font-weight: 500; background: none; color: var(--color-foreground); } .country-filter { position: relative; padding: var(--padding-xs); border-bottom: var(--style-border-width) solid transparent; transition: border-color var(--animation-values); } .country-filter.is-scrolled { border-color: var(--color-border); } .country-selector-form__wrapper { overflow-y: auto; max-height: 100%; flex-grow: 1; } .language-selector { display: flex; gap: var(--gap-xs); padding: var(--padding-md) var(--padding-lg); position: relative; align-items: center; justify-content: space-between; width: 100%; } .language-selector--top-shadow::before { content: ''; box-shadow: 0 0 10px var(--color-shadow); position: absolute; z-index: var(--layer-lowest); inset: 0; clip-path: inset(-50px 0 0 0); /* stylelint-disable-line */ } .language-selector__label { flex-shrink: 0; color: var(--color-foreground-subdued); } .localization-form__select { border: none; color: var(--color-foreground); appearance: none; background-color: var(--color-background); padding-block: var(--padding-3xs); padding-inline: var(--padding-xs) calc(var(--icon-size-xs) + var(--padding-xs)); text-align: end; cursor: pointer; max-width: 40vw; text-overflow: ellipsis; field-sizing: content; &:focus-visible { outline: var(--focus-outline-width) solid currentcolor; } &:focus { outline: none; } } #header-component[transparent] localization-form-component .localization-form .localization-form__select { background-color: transparent; } .localization-form__select option { background-color: var(--color-input-background); color: var(--color-input-text); } .language-selector .svg-wrapper.icon-caret { /* Match the select's token rather than inheriting. The header row paints color: var(--color, var(--color-foreground)) and only restates --color-foreground per state. */ color: var(--color-foreground); width: var(--icon-size-xs); height: var(--icon-size-xs); position: absolute; inset-inline-end: 12px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; } .language-selector--collapse-space { padding-inline-end: var(--padding-2xs); } .language-selector--collapse-space .localization-form__select { padding-inline-end: var(--icon-size-xs); } .language-selector--collapse-space .svg-wrapper.icon-caret { inset-inline-end: 0; } .localization-form .icon-checkmark { width: var(--icon-size-xs); height: var(--icon-size-xs); } .localization-form .svg-wrapper.icon-checkmark { visibility: hidden; } .localization-form__list-item[aria-current='true'] .svg-wrapper.icon-checkmark { visibility: visible; } .country-filter__input { width: 100%; height: 44px; font-size: var(--font-size-lg); padding-block: var(--padding-md); padding-inline: calc(var(--margin-md) + var(--padding-xl)) var(--padding-lg); border: 1px solid var(--color-foreground); color: var(--color-input-text); background-color: var(--color-input-background); outline-offset: -1px; @media screen and (min-width: 750px) { height: 36px; } } .country-filter__input::placeholder { color: inherit; } .country-filter .field { position: relative; } .country-filter .field__label { font-size: var(--font-size-lg); inset-inline-start: var(--margin-2xl); top: var(--margin-xl); pointer-events: none; position: absolute; } .country-filter__input:focus ~ .field__label, .country-filter__input:not(:placeholder-shown) ~ .field__label, .country-filter__input:-webkit-autofill ~ .field__label { font-size: var(--font-size-xs); top: var(--margin-xs); } .country-filter .field__button:not([hidden]) { display: flex; height: fit-content; position: absolute; padding: 0; inset-inline-end: 8px; top: 50%; transform: translateY(-50%); align-items: center; background-color: transparent; color: var(--color-input-text); border: 0; } input[type='search']::-webkit-search-cancel-button { appearance: none; } .country-selector__close-button { display: none; } /* END_SNIPPET:localization-form */ /* START_SNIPPET:media (INDEX:245) */ .media-block { overflow: hidden; position: relative; @media screen and (min-width: 750px) { min-height: var(--media-height); } } .media-block__media { height: var(--media-height-mobile, auto); object-fit: var(--image-position, 'cover'); object-position: center center; width: 100%; @media screen and (min-width: 750px) { height: 100%; position: absolute; } } deferred-media[class].media-block__media :is(.deferred-media__poster-button img, .deferred-media__poster-button ~ video) { object-fit: var(--video-position, 'cover'); } /* This is to support corner radius on video and align the video to the center of the block */ .media-block__placeholder { height: 100%; width: 100%; object-fit: cover; object-position: center center; overflow: hidden; position: relative; } .media-block__media--video { display: flex; align-items: center; justify-content: center; @media screen and (max-width: 749px) { --media-height-mobile: auto; } } /* END_SNIPPET:media */ /* START_SNIPPET:overlay (INDEX:250) */ .overlay { position: absolute; inset: 0; z-index: var(--overlay-layer); pointer-events: none; border-radius: var(--overlay-border-radius, 0); } .overlay--solid { background: var(--overlay-color); } .overlay--gradient { background: linear-gradient(var(--overlay-direction), var(--overlay-color), var(--overlay-color--end)); } /* END_SNIPPET:overlay */ /* START_SNIPPET:pagination-controls (INDEX:251) */ .pagination { --pagination-size: 36px; --pagination-inset: 2px; --pagination-radius: 6; display: flex; justify-content: center; padding: var(--padding-xl) var(--padding-sm); margin-top: var(--padding-xl); position: relative; isolation: isolate; } .pagination__list { display: flex; gap: 0; align-items: center; list-style: none; margin: 0; padding: 0; position: relative; } .pagination__item { width: var(--pagination-size); aspect-ratio: 1; display: grid; place-items: center; } .pagination__link { display: grid; place-items: center; color: var(--color-foreground); text-decoration: none; width: 100%; height: 100%; user-select: none; position: relative; outline-color: var(--color-foreground); -webkit-tap-highlight-color: transparent; font-size: var(--font-size--md); font-weight: var(--font-weight-normal); border-radius: calc(var(--pagination-radius) * 1px); transition: color var(--hover-transition-duration) var(--hover-transition-timing), opacity var(--hover-transition-duration) var(--hover-transition-timing); } .pagination__link:focus-visible { outline: 2px solid var(--color-foreground); outline-offset: 2px; } .pagination__link--current { color: var(--color-background); font-weight: var(--font-weight-medium); cursor: default; } .pagination__link--gap { cursor: default; pointer-events: none; } .pagination__link--arrow { display: flex; align-items: center; justify-content: center; } .pagination__link--disabled { opacity: 0.3; cursor: not-allowed; pointer-events: none; } .pagination__link svg { width: 0.5rem; height: 0.75rem; flex-shrink: 0; } /* Chevrons point toward reading direction, so they flip in RTL. */ [dir='rtl'] .pagination__link--arrow svg { transform: scaleX(-1); } .pagination__item--mobile-only { display: none; } /* Fallback for browsers without anchor positioning support */ @supports not (anchor-name: --pagination-active) { .pagination__link:not(.pagination__link--gap)::before { content: ''; position: absolute; inset: var(--pagination-inset); border-radius: calc(var(--pagination-radius) * 1px); background: rgb(var(--color-foreground-rgb) / var(--opacity-10)); z-index: -1; opacity: 0; transition: background var(--hover-transition-duration) var(--hover-transition-timing), opacity var(--hover-transition-duration) var(--hover-transition-timing); } .pagination__link[aria-current='page']::before { background: var(--color-foreground); opacity: 1; } .pagination__link:hover:not([aria-current='page'], .pagination__link--gap, .pagination__link--disabled)::before { opacity: 1; } } /* Modern approach with anchor positioning */ @supports (anchor-name: --pagination-active) { .pagination__list::before { content: ''; z-index: -1; position: absolute; width: calc(var(--pagination-size) - (2 * var(--pagination-inset))); aspect-ratio: 1; pointer-events: none; opacity: 0; border-radius: calc(var(--pagination-radius) * 1px); background: rgb(var(--color-foreground-rgb) / var(--opacity-10)); transition: inset-inline-start var(--hover-transition-duration) var(--hover-transition-timing), top var(--hover-transition-duration) var(--hover-transition-timing); } /* Hide hover indicator on touch devices */ @media (hover: none) and (pointer: coarse) { .pagination__list::before { content: unset; } } .pagination__list:has( .pagination__link:is(:hover, :focus-visible):not(.pagination__link--gap, .pagination__link--disabled) )::before { opacity: 1; } /* Style current page directly */ .pagination__link[aria-current='page']::before { content: ''; position: absolute; inset: var(--pagination-inset); border-radius: calc(var(--pagination-radius) * 1px); background: var(--color-foreground); z-index: -1; } .pagination__list .pagination__item:has( .pagination__link:is(:hover, :focus-visible):not(.pagination__link--gap, .pagination__link--disabled) ) { anchor-name: --pagination-hover; } /* Position hover indicator using anchor */ .pagination__list::before { position-anchor: --pagination-hover; inset-inline-start: calc(anchor(start) + var(--pagination-inset)); top: calc(anchor(top) + var(--pagination-inset)); } .pagination__item:has(+ .pagination__item--gap) .pagination__link::after, .pagination__item--gap + .pagination__item .pagination__link::after { position: absolute; content: ''; pointer-events: auto; } .pagination__item:has(+ .pagination__item--gap) .pagination__link::after { inset: 0 -50% 0 100%; } .pagination__item--gap + .pagination__item .pagination__link::after { inset: 0 100% 0 -50%; } } @media screen and (max-width: 749px) { .pagination { --pagination-size: 44px; --pagination-inset: 5px; padding: var(--padding-lg) var(--padding-sm); } .pagination__link { font-size: var(--font-size--sm); } .pagination__item--mobile-hide { display: none; } .pagination__item--mobile-only { display: grid; } .pagination__item:has(.pagination__link--gap) { width: calc(var(--pagination-size) * 0.5); } } /* END_SNIPPET:pagination-controls */ /* START_SNIPPET:password-layout-styles (INDEX:252) */ .password-main-content { flex: 1; display: flex; flex-direction: column; } .password-dialog { max-width: 100vw; max-height: 100svh; width: 100vw; height: 100svh; border: none; transition: opacity var(--animation-values), display var(--animation-speed) allow-discrete, overlay var(--animation-speed) allow-discrete; &::backdrop { display: none; } } .password-dialog[open] { opacity: 1; top: 0; inset-inline-start: 0; } @starting-style { .password-dialog[open] { opacity: 0; } } .password-dialog:not([open]) { opacity: 0; } @starting-style { .password-dialog:not([open]) { opacity: 1; } } .password-dialog__close-button { cursor: pointer; } .password-dialog__header { position: absolute; top: 0; inset-inline-end: 0; padding: var(--padding-lg); z-index: var(--layer-raised); } .password-dialog__content { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: var(--padding-lg); height: 100%; transition: transform var(--animation-values); } .password-dialog__content .email-signup__message { padding-block-start: var(--padding-xl); } .password-dialog[open] .password-dialog__content { transform: translateY(0); } @starting-style { .password-dialog[open] .password-dialog__content { transform: translateY(1em); } } .password-dialog:not([open]) .password-dialog__content { transform: translateY(1em); } @starting-style { .password-dialog:not([open]) .password-dialog__content { transform: translateY(0); } } .storefront-password-form { max-width: 400px; width: 100%; } .email-signup__input-group, .password-dialog__submit-button { width: 100%; @media screen and (min-width: 750px) { width: auto; } } /* END_SNIPPET:password-layout-styles */ /* START_SNIPPET:payment-terms-styles (INDEX:253) */ form.payment-terms { padding-top: 0.5em; font-size: min(0.85em, var(--font-paragraph--size)); font-weight: var(--font-paragraph--weight); color: var(--color, rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text))); } .installments:not(:has(shopify-payment-terms)) { display: none; } /* END_SNIPPET:payment-terms-styles */ /* START_SNIPPET:pills-styles (INDEX:254) */ /* Pills (used in facets and predictive search) */ .pills__pill { --pills-pill-background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5-15)); color: var(--color-foreground); display: flex; justify-content: space-between; align-items: center; gap: var(--gap-sm); min-width: 48px; padding: 6px 12px; border-radius: var(--style-border-radius-pills); cursor: pointer; background-color: var(--pills-pill-background-color); transition: background-color var(--animation-speed) var(--animation-easing); &:hover { --pills-pill-background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10-25)); } @media screen and (max-width: 749px) { padding: var(--padding-xs) var(--padding-md); } } .pills__pill > .svg-wrapper { --close-icon-opacity: 0.4; --icon-stroke-width: 1px; color: var(--color-foreground); } .pills__pill--swatch { @media screen and (max-width: 749px) { padding-inline-start: var(--padding-sm); } } .pills__pill--swatch .swatch { margin-inline-end: -4px; } .pills__pill--desktop-small { @media screen and (min-width: 750px) { font-size: var(--font-size--xs); } } /* END_SNIPPET:pills-styles */ /* START_SNIPPET:predictive-search-styles (INDEX:258) */ /* Shared predictive search styles (used by both predictive-search and predictive-search-empty sections) */ .predictive-search-dropdown { display: flex; flex-direction: column; position: relative; top: 0; inset-inline: 0; z-index: var(--layer-base); } .predictive-search-results__inner { flex-grow: 1; overflow-y: auto; padding-block: var(--padding-lg); container-type: inline-size; color: var(--color-foreground); } .predictive-search-results__title { display: flex; justify-content: space-between; align-items: center; font-size: var(--font-size--body-md); font-weight: 500; margin-block: var(--margin-sm) var(--margin-xs); width: 100%; text-transform: var(--title-case); &:first-of-type { margin-block-start: 0; } @media screen and (max-width: 749px) { margin-block: var(--margin-lg) var(--margin-sm); } } .predictive-search-results__no-results { animation-delay: 100ms; transition: opacity var(--animation-speed-medium) var(--animation-timing-fade-in); } .predictive-search-results__no-results:last-child { margin-block: var(--margin-lg); text-align: center; } /* Predictive search section styles */ input[type='search']::-webkit-search-decoration { -webkit-appearance: none; /* stylelint-disable-line */ } .search-action .predictive-search { z-index: calc(var(--layer-header-menu) + 2); } .search-action .search-modal .predictive-search { z-index: var(--layer-window-overlay); } .header__column--right .predictive-search-form__content-wrapper { inset-inline-end: 0; inset-inline-start: unset; } .search-modal .predictive-search-form__content-wrapper { width: 100%; @media screen and (min-width: 750px) { height: fit-content; } } .dialog-modal .predictive-search-form__header-inner { @media screen and (min-width: 750px) { border: 0; } } .search-modal__content .predictive-search-form__content { max-height: var(--modal-max-height); } .predictive-search:has(.predictive-search-dropdown) .search-input { outline-color: transparent; } .predictive-search:has(.predictive-search-dropdown) .predictive-search-form__header-inner:focus-within { border-top-color: transparent; border-inline-color: transparent; @media screen and (max-width: 749px) { border-bottom-color: transparent; } } .predictive-search:has(.predictive-search-dropdown[aria-expanded='true']) .predictive-search-form__header-inner:focus-within { border-top-color: transparent; border-inline-color: transparent; border-radius: var(--search-border-radius); @media screen and (max-width: 749px) { border-radius: var(--style-border-radius-inputs); } } .dialog-modal .predictive-search-form__header { border: 0; border-radius: 0; background-color: var(--color-background); border-bottom: var(--style-border-width) solid var(--color-border); @media screen and (min-width: 750px) { padding: var(--padding-2xs) var(--padding-2xs) 0; border-bottom: var(--search-border-width) solid var(--color-border); } @media screen and (max-width: 749px) { transition: box-shadow 0.2s ease; box-shadow: none; } } .search-action .predictive-search:has(.predictive-search-dropdown) .predictive-search-form__header:focus-within { border-radius: var(--search-border-radius) var(--search-border-radius) 0 0; transition: box-shadow var(--animation-speed) var(--animation-easing); background-color: var(--color-background); @media screen and (max-width: 749px) { border-radius: var(--style-border-radius-inputs) var(--style-border-radius-inputs) 0 0; } } @media screen and (max-width: 749px) { .dialog-modal .predictive-search__close-modal-button { padding-inline-start: var(--margin-xs); margin-inline-start: 0; } } .dialog-modal[open] { @media screen and (max-width: 749px) { border-radius: 0; } } .dialog-modal .predictive-search-form__header:has(.predictive-search-form__header-inner:focus-within) { @media screen and (min-width: 750px) { border-bottom-color: transparent; } } @media screen and (max-width: 749px) { .dialog-modal { .predictive-search__reset-button-icon { display: none; } .predictive-search__reset-button-text { display: block; } .predictive-search-form__content { /* The parent has overflow auto, we want to prevent a double scrollbar during animation */ max-height: 100%; } .predictive-search-form__content-wrapper { box-shadow: none; } .predictive-search-form__header { box-shadow: none; } .predictive-search-form__footer { padding-block: var(--padding-2xl); } } } .predictive-search-results__pill { font-weight: 500; white-space: nowrap; color: var(--color-foreground); transition: background-color var(--animation-speed-medium) var(--animation-timing-hover), box-shadow var(--animation-speed-medium) var(--animation-timing-bounce), transform var(--animation-speed-medium) var(--animation-timing-bounce); margin: 2px; &:hover { transform: scale(1.03); box-shadow: 0 2px 5px rgb(0 0 0 / var(--opacity-8)); } } .predictive-search-results__pill mark { background-color: transparent; font-weight: 200; color: var(--color-foreground-subdued); } .predictive-search-results__pill:focus, .predictive-search-results__pill:hover, .predictive-search-results__card--query:is([aria-selected='true'], :focus-within) .predictive-search-results__pill { --pill-background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8)); background-color: var(--pill-background-color); outline: var(--border-width-sm) solid var(--color-border); border: var(--border-width-sm); text-decoration: none; } .predictive-search-results__wrapper.predictive-search-results__wrapper-queries { margin-bottom: var(--margin-lg); padding-inline: var(--padding-xl); gap: var(--gap-2xs); } .predictive-search-results__card { --title-font-size: var(--font-size--md); --title-margin-block: var(--margin-xs); flex: 0 0 auto; scroll-snap-align: start; scroll-margin-block: calc(var(--title-font-size) + var(--title-margin-block) + var(--padding-sm)) calc(var(--padding-xl) + var(--button-padding-block) * 2); transition: transform var(--animation-speed-medium) var(--animation-timing-default), background-color var(--animation-speed-medium) var(--animation-timing-hover), border-color var(--animation-speed-medium) var(--animation-timing-hover); &:nth-last-child(3) { scroll-snap-align: end; } &:active { transform: scale(0.97); transition: transform 100ms var(--animation-timing-active); } } .recently-viewed-wrapper .predictive-search-results__card { opacity: 1; transform: translateY(0); transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1); } .recently-viewed-wrapper.removing .predictive-search-results__card { opacity: 0; transform: translateY(-10px); pointer-events: none; } .predictive-search-results__card--product, .recently-viewed-wrapper .predictive-search-results__card--product { &:active { transform: scale(0.97); transition: transform 100ms var(--animation-timing-active); } &:hover { background-color: var(--card-bg-hover); border-radius: var(--product-corner-radius); padding: calc(var(--padding-2xs) + 2px); margin: calc((var(--padding-2xs) + 2px) * -1); } &:is([aria-selected='true'].keyboard-focus, &:focus-visible, &:has(.resource-card:focus-visible)) { background-color: var(--card-bg-hover); padding: calc(var(--padding-2xs) + 1px); margin: calc((var(--padding-2xs) + 1px) * -1); outline: var(--border-width-sm) solid var(--color-border); border-radius: calc(var(--product-corner-radius) + 1px); border-color: var(--card-border-focus); } } .predictive-search-results__card:not(.predictive-search-results__card--product) { padding: var(--padding-sm); border: var(--border-width-sm) solid var(--color-border); border-radius: var(--card-corner-radius); width: 60cqi; content-visibility: visible; @media screen and (min-width: 750px) { width: 27.5cqi; } &:hover { border-color: var(--card-border-hover); background-color: var(--card-bg-hover); } &[aria-selected='true'].keyboard-focus { border-color: var(--card-border-hover); background-color: var(--card-bg-hover); } &:active { transform: scale(0.97); transition: transform var(--animation-speed-medium) var(--animation-timing-active); } } @keyframes search-element-scale-in { 0% { transform: scale(0.95); opacity: 0; } 40% { opacity: 1; } 100% { transform: scale(1); opacity: 1; } } @keyframes search-element-scale-out { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(0.95); opacity: 0; } } @keyframes search-element-slide-in-top { from { margin-top: calc(var(--modal-top-margin) + var(--padding-sm)); opacity: 0; } to { margin-top: var(--modal-top-margin); opacity: 1; } } @keyframes search-element-slide-out-top { from { margin-top: var(--modal-top-margin); opacity: 1; } to { margin-top: calc(var(--modal-top-margin) + var(--padding-sm)); opacity: 0; } } @keyframes content-slide { from { transform: translateY(var(--slide-from, 0)); opacity: var(--slide-opacity-from, 1); } to { transform: translateY(var(--slide-to, 0)); opacity: var(--slide-opacity-to, 1); } } .predictive-search-results__list { --slide-width: 27.5%; --slideshow-gap: var(--gap-md); /* Make space for the outline to be visible */ padding-block-start: var(--border-width-sm); } .predictive-search-results__list slideshow-arrows { @media screen and (max-width: 749px) { display: none; } } .predictive-search-results__no-results, .predictive-search-results__wrapper, .predictive-search-results__wrapper-products .predictive-search-results__card { animation: search-element-slide-up var(--animation-speed-medium) var(--animation-timing-bounce) backwards; } slideshow-slide .resource-card { /* stylelint-disable-next-line declaration-no-important */ animation-delay: 0ms !important; } .predictive-search-results__list, .predictive-search-results__wrapper { animation-duration: var(--animation-speed-medium); } .predictive-search-results__wrapper-queries { animation-delay: 50ms; } .predictive-search-results__list:nth-of-type(2) { animation-delay: 150ms; } .predictive-search-results__list:nth-of-type(3) { animation-delay: 200ms; } .predictive-search-results__list:nth-of-type(4) { animation-delay: 250ms; } .predictive-search-results__list:last-child { margin-block-end: 0; } [data-resource-type] { /* stylelint-disable-next-line declaration-no-important */ animation-delay: 0ms !important; } .predictive-search-results__no-results.removing, .predictive-search-results__wrapper.removing { animation: search-element-slide-down var(--animation-speed-medium) var(--animation-timing-fade-out) forwards; } .predictive-search-results__card.removing { animation: fadeOut var(--animation-speed-medium) var(--animation-timing-fade-out) forwards; } .predictive-search-results__wrapper { transition: opacity var(--animation-speed-medium) var(--animation-timing-fade-in); } @keyframes search-element-slide-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @keyframes search-element-slide-down { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(8px); } } .predictive-search-results__card--query { transition: transform var(--animation-speed-medium) var(--animation-timing-bounce); transform-origin: center; &:active { transform: scale(0.97); } } /* Products list styles */ .predictive-search-results__products { padding-inline: var(--padding-xl); } .recently-viewed-wrapper { display: grid; grid-template-rows: auto auto; max-height: 1000px; opacity: 1; overflow: visible; transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1); transform-origin: top center; transform: translateY(0); } .recently-viewed-wrapper.removing { max-height: 0; opacity: 0; transform: translateY(-10px); transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1); pointer-events: none; } .predictive-search-results__clear.button-unstyled { color: var(--color-foreground); opacity: 0.68; transition: opacity var(--animation-speed-medium) var(--animation-easing); padding: 0; margin-inline-start: var(--margin-sm); &:hover { opacity: 1; } } .recently-viewed-wrapper.removing .predictive-search-results__card { transition: none; transform: none; opacity: 1; } .recently-viewed-wrapper > * { transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1); } .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(1) { animation-delay: 30ms; } .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(2) { animation-delay: 60ms; } .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(3) { animation-delay: 90ms; } .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(4) { animation-delay: 120ms; } .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(n + 5) { animation-delay: 150ms; } .predictive-search-results__wrapper-products { animation-delay: 50ms; } /* Resource carousel styles */ .predictive-search-results__wrapper { display: flex; overflow-x: auto; overflow-y: hidden; padding-block-end: var(--padding-sm); padding-inline: 0; scroll-snap-type: x mandatory; scroll-padding: 0 var(--padding-xl); scrollbar-width: none; -ms-overflow-style: none; &::-webkit-scrollbar { display: none; } } .predictive-search-results__wrapper slideshow-slides { --gutter-slide-width: var(--padding-xl); /* Add padding to prevent hover animations from being clipped in slideshow 15px accommodates: - Scale effect (9px on each side from 1.03 scale) - Lift effect (4px upward movement) - Shadow (15px spread with -5px offset) Using 16px for better alignment with our spacing scale */ padding-block: var(--padding-xl); margin-block: calc(-1 * var(--padding-xl)); gap: var(--gap-md); } .predictive-search-results__resource-header { display: flex; padding-inline: var(--padding-xl); justify-content: space-between; align-items: center; height: 32px; } .predictive-search-results__resource-header .svg-wrapper { width: var(--icon-size-xs); } .predictive-search-results__wrapper-products { display: grid; grid-template-columns: repeat(2, 1fr); padding-block-end: var(--padding-sm); gap: var(--gap-md); transition: height var(--animation-speed-medium) var(--animation-easing); @container (min-width: 550px) { grid-template-columns: repeat(4, 1fr); } } .predictive-search-results__wrapper-products:last-child { padding-block-end: var(--padding-lg); @media screen and (min-width: 750px) { padding-block-end: var(--padding-sm); } } .predictive-search-results__resource-header .predictive-search-results__title { margin-block-end: 0; } .predictive-search-results__resource-header:has(slideshow-controls) .predictive-search-results__title { margin-block-end: 0; } .predictive-search-results__resource-header slideshow-controls { @media screen and (max-width: 749px) { display: none; } } /* END_SNIPPET:predictive-search-styles */ /* START_SNIPPET:price-filter (INDEX:259) */ /* Price filter */ .price-facet { container-type: inline-size; display: flex; flex-direction: column; } .price-facet--horizontal { min-width: 360px; } .price-facet__inputs-wrapper { display: flex; flex-direction: row; padding: var(--style-border-width-inputs); gap: calc(var(--gap-sm) + (var(--style-border-width-inputs) * 2)); } @container (max-width: 199px) { .price-facet__inputs-wrapper { flex-wrap: wrap; } } .price-facet__input { width: 100%; text-align: end; padding-inline-start: calc(2.5 * var(--input-padding-x)); } .price-facet__input::placeholder { color: var(--facets-input-label-color); } .price-facet__separator { display: flex; align-items: center; justify-content: center; font-size: var(--font-paragraph--size); } .price-facet__highest-price { color: var(--color-foreground-muted); padding: var(--padding-xs) 0 var(--padding-sm); } .price-facet__highest-price--horizontal { padding: 0 var(--padding-md) var(--padding-xs); } .price-facet__label { top: 0; inset-inline-start: 0; color: var(--facets-input-label-color); padding: var(--input-padding-y) var(--input-padding-x); transform: none; } /* END_SNIPPET:price-filter */ /* START_SNIPPET:price-styles (INDEX:260) */ .price, .compare-at-price, .unit-price { white-space: nowrap; } .unit-price { display: block; font-size: min(0.85em, var(--font-paragraph--size)); color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text)); } .tax-note.tax-note.tax-note { font-size: min(0.85em, var(--font-paragraph--size)); font-weight: var(--font-paragraph--weight); color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text)); } .tax-note:empty { display: none; } product-price.text-block:is(.h1, .h2, .h3, .h4, .h5, .h6) > *:not(.tax-note) { margin-block: 0; } /* Volume pricing note should match unit-price styling (small, grey text) */ product-price .volume-pricing-note, product-price.text-block:is(.h1, .h2, .h3, .h4, .h5, .h6) .volume-pricing-note { display: block; font-family: var(--font-body--family); font-weight: normal; font-size: var(--font-size--xs); line-height: normal; letter-spacing: normal; text-transform: none; color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text)); } .compare-at-price { color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text)); text-decoration-line: line-through; text-decoration-thickness: 1.5px; text-decoration-color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-30)); } .price-item__group { display: inline-block; } /* END_SNIPPET:price-styles */ /* START_SNIPPET:product-badges-styles (INDEX:262) */ .product-badges { --badge-inset: max(var(--padding-xs), calc((var(--border-radius) + var(--padding-xs)) * (1 - cos(45deg)))); position: absolute; z-index: var(--layer-flat); } .product-badges--bottom-left { bottom: calc(var(--badge-inset) + var(--padding-block-start)); inset-inline-start: calc(var(--badge-inset) + var(--padding-inline-start)); } .product-badges--top-left { top: calc(var(--badge-inset) + var(--padding-block-start)); inset-inline-start: calc(var(--badge-inset) + var(--padding-inline-start)); } .product-badges--top-right { top: calc(var(--badge-inset) + var(--padding-block-start)); inset-inline-end: calc(var(--badge-inset) + var(--padding-inline-end)); } .product-badges__badge { --badge-font-size: var(--font-size--xs); display: flex; align-items: center; justify-content: center; text-align: center; color: var(--color-foreground); background: var(--color-background); font-size: var(--badge-font-size); font-family: var(--badge-font-family); font-weight: var(--badge-font-weight); text-transform: var(--badge-text-transform); border-radius: var(--badge-border-radius); } .product-badges__badge--rectangle { padding-block: var(--badge-rectangle-padding-block); padding-inline: var(--badge-rectangle-padding-inline); } /* END_SNIPPET:product-badges-styles */ /* START_SNIPPET:product-card-gallery-zoom-details-styles (INDEX:263) */ .product-grid-view-zoom-out--details { display: none; } @media screen and (min-width: 750px) { ul[product-grid-view='zoom-out'] .product-grid-view-zoom-out--details { font-size: var(--font-size--xs); font-family: var(--font-paragraph--family); font-weight: 400; line-height: 1.3; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 3; } } /* END_SNIPPET:product-card-gallery-zoom-details-styles */ /* START_SNIPPET:product-card-styles (INDEX:264) */ .product-grid__card.product-grid__card { display: flex; flex-flow: column nowrap; gap: var(--product-card-gap); align-items: var(--product-card-alignment); text-decoration: none; color: var(--color, var(--color-foreground)); padding-block: var(--padding-block-start) var(--padding-block-end); padding-inline: var(--padding-inline-start) var(--padding-inline-end); overflow: hidden; } .product-grid__card swatches-variant-picker-component overflow-list::part(list) { flex-wrap: wrap; } /* Product cards are narrow, so group content stacks on mobile. A group that turns "vertical on mobile" off renders without .mobile-column and keeps the horizontal direction it was given. */ .product-grid__card .group-block > :is(.mobile-column, :not(.layout-panel-flex--row)) { @media screen and (max-width: 749px) { flex-direction: column; } } /* Collection and product list cards have equal heights */ :is(.product-grid__item, .resource-list__item) .product-card { display: grid; height: 100%; } /* Product card title truncation - applied on mobile regardless of view */ @media screen and (max-width: 749px) { :is(.product-card, .product-grid__card) :is(h4, .h4) { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 3; } } .product-card__placeholder-image svg { height: 100%; } .product-card__content slideshow-component { --cursor: pointer; } @media screen and (max-width: 749px) { .product-card slideshow-arrows .slideshow-control { display: none; } } /* END_SNIPPET:product-card-styles */ /* START_SNIPPET:product-grid (INDEX:266) */ /* Product grid */ .product-grid-container { display: block; width: 100%; padding-block: var(--padding-block-start) var(--padding-block-end); @media screen and (min-width: 750px) { display: grid; } } [product-grid-view='default'] { --product-grid-gap: 16px; --padding-block-start: 24px; --padding-block-end: 24px; --padding-inline-start: 0px; --padding-inline-end: 0px; } .product-grid { --product-grid-gap: var(--product-grid-gap-mobile); --mobile-columns: 2; /* Default value */ display: grid; grid-template-columns: 1fr 1fr; gap: var(--product-grid-gap); margin: auto; padding: 0; list-style: none; isolation: isolate; @media screen and (min-width: 750px) { --product-grid-gap: var(--product-grid-gap-desktop); grid-template-columns: var(--product-grid-columns-desktop); } } .product-grid :is(h3, p) { margin: 0; } .product-grid__item { border: var(--product-card-border-width) solid rgb(var(--color-border-rgb) / var(--product-card-border-opacity)); } [product-grid-view='default'] .product-grid__item { padding-block: 0; } .product-grid--organic[product-grid-view='default'] .product-grid__item { height: fit-content; } [product-grid-view='zoom-out'] .product-grid__card.product-grid__card { row-gap: var(--padding-xs); } [product-grid-view='mobile-single'], .product-grid-mobile--large { @media screen and (max-width: 749px) { grid-template-columns: 1fr; } } [product-grid-view='zoom-out'] .product-grid__card > * { display: none; } [product-grid-view='zoom-out'] { --product-grid-columns-desktop: repeat( 10, minmax(clamp(50px, calc(100% - 9 * var(--product-grid-gap)) / 10, 80px), 1fr) ); } @media (prefers-reduced-motion: no-preference) { :root:active-view-transition-type(product-grid) { details[open] floating-panel-component { view-transition-name: panel-content; .checkbox *, .facets__pill-label { transition: none; } .facets--vertical & { view-transition-name: none; } } .product-grid { view-transition-name: product-grid; } footer { view-transition-name: footer; } .product-grid__item, floating-panel-component { transition: none; } } } ::view-transition-group(panel-content) { z-index: 1; } ::view-transition-new(product-grid) { animation-delay: 150ms; animation-name: fadeInUp; animation-duration: var(--animation-speed); animation-timing-function: var(--animation-easing); } results-list[initialized] { .product-grid__item { transition: opacity var(--animation-speed) var(--animation-easing), transform var(--animation-speed) var(--animation-easing); @starting-style { opacity: 0; transform: translateY(10px); } } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .product-grid slideshow-arrows .slideshow-control { display: none; @media screen and (min-width: 750px) { display: grid; } } /* This triggers iOS < 16.4 */ @supports not (background-color: rgb(from red 150 g b / alpha)) { /* Force aspect ratio to auto for iOS < 16.4 since it's not compatible with the infinite pagination */ .product-grid .product-media, .product-grid .product-media-container { aspect-ratio: auto; } } .main-collection-grid { grid-column: var(--grid-column--mobile); padding: var(--grid--margin--mobile); @media screen and (min-width: 750px) { grid-column: var(--grid-column--desktop); padding: var(--padding-block-start) var(--padding-inline-end) var(--padding-block-end) var(--padding-inline-start); } } .main-collection-grid__empty { padding-block: var(--padding-6xl); padding-inline: var(--page-margin); display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--padding-sm); } .main-collection-grid__empty-title { margin: 0; } /* END_SNIPPET:product-grid */ /* START_SNIPPET:product-information-content (INDEX:267) */ .product-information { gap: var(--gap) 0; } /* Base grid layout */ .product-information__grid { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; } /* Default column positions */ .product-details { order: 1; } .product-information__media { order: 0; width: 0; min-width: 100%; } .product-information__media .product-media-gallery__placeholder-image { width: 100%; height: 100%; } /* Mobile styles */ @media screen and (max-width: 749px) { .product-information__media { grid-column: 1 / -1; } .product-details { grid-column: 2 / 3; } } /* Desktop styles */ @media screen and (min-width: 750px) { .product-information__grid { grid-column: 2; } /* Position when there is no media */ .product-information__grid.product-information--media-none { .product-details { width: var(--narrow-content-width); margin: 0 auto; } } /* Position when there is media. Gap paddings are logical properties to respect reading direction */ .product-information__grid:not(.product-information--media-none) { &.product-information--media-left { grid-template-columns: 1fr min(50vw, var(--sidebar-width)); .product-information__media { padding-inline-end: calc(var(--gap, 0) / 2); } .product-details { padding-inline-start: calc(var(--gap, 0) / 2); } &:has(.media-gallery--extend) { grid-column: 1 / 3; } } &.product-information--media-right { grid-template-columns: min(50vw, var(--sidebar-width)) 1fr; .product-information__media { padding-inline-start: calc(var(--gap, 0) / 2); order: 1; } .product-details { padding-inline-end: calc(var(--gap, 0) / 2); order: 0; } &:has(.media-gallery--extend) { grid-column: 2 / -1; } } /* Equal width columns */ &.product-information__grid--half, &.product-information__grid--half:has(.media-gallery--extend) { grid-column: 1 / -1; grid-template-columns: var(--full-page-grid-margin) calc(var(--full-page-grid-central-column-width) / 2) calc( var(--full-page-grid-central-column-width) / 2 ) var(--full-page-grid-margin); &.product-information--media-left { .product-information__media { grid-column: 2 / 3; &:has(.media-gallery--extend) { grid-column: 1 / 3; } } .product-details { grid-column: 3 / 4; } } &.product-information--media-right { .product-information__media { grid-column: 3 / 4; &:has(.media-gallery--extend) { grid-column: 3 / -1; } } .product-details { grid-column: 2 / 3; } } } } /* Handle full width section */ .section--full-width { .product-information__grid:not(.product-information--media-none) { &.product-information--media-left, &.product-information--media-right { grid-column: 1 / -1; } &.product-information--media-left .product-details { padding-inline-end: var(--padding-lg); } &.product-information--media-right .product-details { padding-inline-start: var(--padding-lg); } &.product-information__grid--half.product-information--media-left { .product-information__media { grid-column: 1 / 3; } .product-details { grid-column: 3 / -1; } } &.product-information__grid--half.product-information--media-right { .product-information__media { grid-column: 3 / -1; } .product-details { grid-column: 1 / 3; } } } } } /* Wider sidebar for large screens */ @media screen and (min-width: 1200px) { .product-information__grid:not( .product-information__grid--half, .product-information--media-none ).product-information--media-left { grid-template-columns: 2fr 1fr; } .product-information__grid:not( .product-information__grid--half, .product-information--media-none ).product-information--media-right { grid-template-columns: 1fr 2fr; } } .product-information__grid--limit-details .product-details > .group-block { --details-max-width: var(--sidebar-width); max-width: var(--details-max-width); } @media screen and (min-width: 1600px) { .product-information__grid--limit-details .product-details > .group-block { --details-max-width: 32rem; } } /* If the header is sticky, make product details content stick underneath the header. Header-dependent page rules use #header-group as the :has() subject and reach the page with `~`. With body as the subject, every [open] or [aria-expanded] change in the header restyles the whole page. */ #header-group:has(> .header-section > #header-component[data-sticky-state='active']) ~ * .product-details.sticky-content--desktop, quick-add-dialog[header-sticky-active] .product-details.sticky-content--desktop { --sticky-header-offset: var(--header-height); } /* END_SNIPPET:product-information-content */ /* START_SNIPPET:product-media-container-styles (INDEX:268) */ :where(:not(.dialog-zoomed-gallery)) > .product-media-container { --slide-width: 100%; display: flex; aspect-ratio: var(--gallery-aspect-ratio, var(--media-preview-ratio)); max-height: var(--constrained-height); width: var(--slide-width, 100%); /* Relative position needed for video and 3d models */ position: relative; overflow: hidden; &:where(.constrain-height) { /* arbitrary offset value based on average theme spacing and header height */ --viewport-offset: 400px; --constrained-min-height: 300px; --constrained-height: max(var(--constrained-min-height), calc(100vh - var(--viewport-offset))); margin-inline: auto; } @supports (--test: round(up, 100%, 1px)) { /* width and overflow forces children to shrink to parent width */ --slide-width: round(up, 100%, 1px); } } @media screen and (max-width: 749px) { .product-media-container.constrain-height { max-height: none; } } @media screen and (min-width: 750px) { .product-media-container.constrain-height { --viewport-offset: var(--header-height, 100px); --constrained-min-height: 500px; } /* Header-dependent page rules use #header-group as the :has() subject and reach the page with `~`. With body as the subject, every [open] or [aria-expanded] change in the header restyles the whole page. */ #header-group:has(> .header-section > header-component[transparent]) ~ * .product-media-container.constrain-height, quick-add-dialog[header-transparent] .product-media-container.constrain-height { --viewport-offset: 0px; } } .product-media-container img { aspect-ratio: inherit; object-fit: contain; } .product-media-container.media-fit-contain img { object-position: center center; } .product-media-container.media-fit { --product-media-fit: cover; img { object-fit: var(--product-media-fit); } } /* END_SNIPPET:product-media-container-styles */ /* START_SNIPPET:product-media-gallery-content-styles (INDEX:269) */ /* Product Media */ media-gallery { display: block; width: 100%; } :where(media-gallery, .product-grid__item) { .media-gallery__grid { grid-template-columns: 1fr; gap: var(--image-gap); } } @media screen and (min-width: 750px) { .media-gallery--large-first-image .product-media-container:first-child, .media-gallery--two-column .product-media-container:only-child { /* First child spans 2 columns */ grid-column: span 2; } } media-gallery:where(.media-gallery--grid) .media-gallery__grid { display: none; } media-gallery.media-gallery--grid .media-gallery__grid .product-media-container { /* Needed for safari to stretch to full grid height */ height: 100%; } @media screen and (min-width: 750px) { .media-gallery--two-column .media-gallery__grid { grid-template-columns: repeat(2, 1fr); } /* Display grid view as a carousel on mobile, grid on desktop */ media-gallery:is(.media-gallery--grid) slideshow-component { display: none; } media-gallery:where(.media-gallery--grid) .media-gallery__grid { display: grid; } } zoom-dialog dialog { width: 100vw; height: 100vh; border: none; margin: 0; padding: 0; max-width: 100%; max-height: 100%; background: #fff; opacity: 0; transition: opacity var(--animation-speed) var(--animation-easing); scrollbar-width: none; &[open] { opacity: 1; } @media (prefers-reduced-motion: no-preference) { scroll-behavior: smooth; } &::backdrop { background: transparent; } } .product-media-container__zoom-button { position: absolute; width: 100%; height: 100%; z-index: var(--layer-flat); cursor: zoom-in; background-color: transparent; &:hover { background-color: transparent; } } slideshow-slide.product-media-container--tallest { content-visibility: visible; } .product-media__drag-zoom-wrapper { aspect-ratio: inherit; min-height: inherit; min-width: inherit; display: inherit; flex: inherit; } .media-gallery__mobile-controls { grid-area: auto; } .product-media-container--zoomable.product-media-container--image { cursor: zoom-in; } /* END_SNIPPET:product-media-gallery-content-styles */ /* START_SNIPPET:product-media-gallery-content (INDEX:270) */ .dialog-thumbnails-list-container { position: fixed; width: 100%; bottom: 0; display: flex; z-index: var(--layer-raised); /* Container touches the physical viewport edges (viewport-fit=cover); keep the thumbnails clear of the home indicator and side notch */ padding-block-end: var(--safe-area-inset-bottom); padding-inline: var(--safe-area-inset-left) var(--safe-area-inset-right); } .dialog-thumbnails-list { --active-thumbnail-border-color: rgb(var(--color-border-rgb) / var(--media-border-opacity)); position: relative; display: inline-flex; flex-direction: row; gap: 8px; bottom: 0; overflow-x: auto; opacity: 0; padding: var(--padding-lg); margin-inline: auto; scrollbar-width: none; animation: thumbnailsSlideInBottom calc(var(--animation-speed) * 0.75) var(--animation-easing) forwards; animation-delay: calc(var(--animation-speed) * 1.5); } .dialog--closed .dialog-thumbnails-list { animation: thumbnailsSlideOutBottom var(--animation-speed) var(--animation-easing) forwards; } @media screen and (min-width: 750px) { .dialog-thumbnails-list { position: fixed; flex-direction: column; inset-block: 50% auto; inset-inline: auto var(--margin-lg); /* Keep the inline-end-anchored thumbnail rail clear of the side notch (viewport-fit=cover) */ inset-inline-end: var(--safe-area-inset-right); max-height: calc(100vh - 200px); overflow-y: auto; animation: thumbnailsSlideInTop var(--spring-d220-b0-duration) var(--spring-d220-b0-easing) forwards; animation-delay: calc(var(--spring-d220-b0-duration) * 0.5); } /* Safe-area env() values are physical; in RTL the rail sits by the left-side notch */ [dir='rtl'] .dialog-thumbnails-list { inset-inline-end: var(--safe-area-inset-left); } .dialog--closed .dialog-thumbnails-list { animation: thumbnailsSlideOutTop var(--animation-speed) var(--animation-easing) forwards; } } .dialog-thumbnails-list__thumbnail { width: var(--thumbnail-width); height: auto; transition: transform var(--animation-speed) var(--animation-easing); flex-shrink: 0; border-radius: var(--media-radius); img { height: 100%; object-fit: cover; border-radius: var(--media-radius); aspect-ratio: var(--aspect-ratio); } &:is([aria-selected='true']) { outline: var(--focus-outline-width) solid currentcolor; outline-offset: calc(var(--focus-outline-offset) / 2); border: var(--style-border-width) solid var(--active-thumbnail-border-color); } } @supports (anchor-name: --test) { .dialog-thumbnails-list:has(.dialog-thumbnails-list__thumbnail:is([aria-selected='true']))::after { --inset-offset: calc(var(--focus-outline-offset) / 2); content: ''; position: absolute; inset: anchor(top) anchor(right) anchor(bottom) anchor(left); position-anchor: --selected-thumbnail; outline: var(--focus-outline-width) solid currentcolor; outline-offset: calc(var(--focus-outline-offset) / 2); border: var(--style-border-width) solid var(--active-thumbnail-border-color); border-radius: var(--media-radius); z-index: var(--layer-raised); } @media (prefers-reduced-motion: no-preference) { .dialog-thumbnails-list:has(.dialog-thumbnails-list__thumbnail:is([aria-selected='true']))::after { transition-property: inset; transition-duration: var(--spring-d180-b0-duration); transition-timing-function: var(--spring-d180-b0-easing); } } .dialog-thumbnails-list__thumbnail:is([aria-selected='true']) { outline: none; border: none; anchor-name: --selected-thumbnail; } } .dialog-zoomed-gallery .shopify-model-viewer-ui__controls-area.shopify-model-viewer-ui__controls-area { /* Move the controls above the thumbnails. Need to calculate the height of the thumbnails list */ bottom: calc(var(--thumbnail-width) / var(--media-preview-ratio) + var(--padding-lg) * 2); inset-inline-end: var(--padding-lg); } /* The external model-viewer UI stylesheet positions the controls with a physical right; inset-inline-end maps to left in RTL, so clear the stale right to stop the auto-width controls being constrained on both sides */ [dir='rtl'] .dialog-zoomed-gallery .shopify-model-viewer-ui__controls-area.shopify-model-viewer-ui__controls-area { right: auto; /* stylelint-disable-line csstools/use-logical -- clearing an external physical right in RTL */ } @media screen and (min-width: 750px) { .dialog-zoomed-gallery .shopify-model-viewer-ui__controls-area.shopify-model-viewer-ui__controls-area { /* Move the controls up to match the padding on the thumbnails */ bottom: var(--padding-lg); /* Move the controls beside the inline-end thumbnails list */ inset-inline-end: calc(var(--thumbnail-width) + var(--padding-lg) * 2); } } @media screen and (max-width: 749px) { /* Media gallery has a peeking slide on the right side always, and on the left side when the current slide is the last one */ .media-gallery--hint :is( slideshow-slide:has(+ slideshow-slide[aria-hidden='false']:last-of-type), slideshow-slide[aria-hidden='false'] + slideshow-slide ) { content-visibility: auto; slideshow-component[actioned] & { content-visibility: visible; } } } .dialog-zoomed-gallery__dialog { background-color: var(--color-background); view-transition-name: zoom-dialog-ui; } .dialog-zoomed-gallery { cursor: zoom-out; } .dialog--preloading { opacity: 0; } @media screen and (max-width: 749px) { .dialog-zoomed-gallery { /* Prevent scroll wheel or swipe scrolling */ overscroll-behavior: none; scrollbar-width: none; display: flex; scroll-snap-type: x mandatory; overflow-x: hidden; scroll-behavior: smooth; height: 100%; &::-webkit-scrollbar { display: none; } } .dialog-zoomed-gallery .product-media-container { flex: 0 0 100%; scroll-snap-align: start; position: relative; } .dialog-zoomed-gallery .product-media-container--image .product-media { aspect-ratio: auto; height: 100%; width: 100%; overflow: hidden; } .dialog-zoomed-gallery .product-media-container--video, .dialog-zoomed-gallery .product-media-container--external_video { align-content: center; } .dialog-zoomed-gallery :is(.product-media-container--video, .product-media-container--external_video, .product-media-container--model) .product-media { aspect-ratio: auto; align-items: center; height: 100%; .product-media__image { height: 100%; } } .product-media__drag-zoom-wrapper { display: flex; aspect-ratio: auto; height: 100%; width: 100%; overflow: scroll; scrollbar-width: none; justify-content: center; &::-webkit-scrollbar { display: none; } } .product-media__drag-zoom-wrapper .product-media__image { --product-media-fit: contain; object-fit: var(--product-media-fit); overflow: hidden; transform: scale(var(--drag-zoom-scale)) translate(var(--drag-zoom-translate-x, 0), var(--drag-zoom-translate-y, 0)); } .media-gallery--hint { --slideshow-gap: var(--gap-2xs); :not(.dialog-zoomed-gallery) > .product-media-container:not(:only-child) { width: 90%; .product-media img { object-fit: cover; } } } } .dialog-zoomed-gallery__close-button { color: #fff; mix-blend-mode: difference; z-index: var(--layer-raised); } /* Mobile thumbnails styling */ @media screen and (max-width: 749px) { .media-gallery__mobile-controls[thumbnails] { --thumbnail-width: 44px; } .media-gallery__mobile-controls[thumbnails] .slideshow-controls__thumbnail { width: var(--thumbnail-width); height: auto; } } .dialog-zoomed-gallery .product-media-container--zoomable.product-media-container--image { cursor: zoom-out; } .dialog-zoomed-gallery .product-media-container--video deferred-media, .dialog-zoomed-gallery .product-media-container--external_video deferred-media { height: auto; aspect-ratio: var(--ratio); } .dialog-zoomed-gallery .product-media-container--model .product-media__image { /* Make the height match the height of the model-viewer */ height: 100vh; } :root:active-view-transition .dialog-zoomed-gallery__dialog { background-color: transparent; } ::view-transition-group(zoom-dialog-ui) { z-index: calc(var(--layer-overlay) + 1); } ::view-transition-old(gallery-item-open), ::view-transition-new(gallery-item-open) { animation-timing-function: step-start; } ::view-transition-old(gallery-item-close), ::view-transition-new(gallery-item-close) { animation-timing-function: step-end; } @media screen and (min-width: 750px) { :root:active-view-transition .product-media__image { background-color: transparent; } } ::view-transition-group(gallery-item-open), ::view-transition-group(gallery-item-close) { z-index: var(--layer-overlay); border-radius: var(--gallery-media-border-radius); overflow: clip; } ::view-transition-group(gallery-item-open) { animation-timing-function: var(--spring-d300-b0-easing); animation-duration: var(--spring-d300-b0-duration); } ::view-transition-group(gallery-item-close) { animation-timing-function: var(--spring-d220-b0-easing); animation-duration: var(--spring-d220-b0-duration); } @media screen and (max-width: 749px) { ::view-transition-group(gallery-item-open), ::view-transition-group(gallery-item-close) { animation-timing-function: step-start; animation-duration: 0.1s; } ::view-transition-new(gallery-item-open) { animation: fade-in var(--spring-d180-b0-duration) var(--spring-d180-b0-easing) forwards; animation-timing-function: var(--spring-d180-b0-easing); animation-duration: var(--spring-d180-b0-duration); } ::view-transition-old(gallery-item-close) { animation: fade-out 0.08s linear forwards; } } @keyframes fade-in { from { scale: 0.98; opacity: 0.8; } } @keyframes fade-out { to { opacity: 0; } } /* * Product media gallery slideshow context styles */ .product-media-gallery__slideshow--single-media slideshow-container { @media screen and (max-width: 749px) { grid-area: unset; } } /* Display grid view as a carousel on mobile, grid on desktop */ media-gallery:is(.media-gallery--grid) slideshow-component { @media screen and (min-width: 750px) { display: none; } } @media screen and (max-width: 749px) { /* Media gallery has a peeking slide on the right side always, and on the left side when the current slide is the last one */ .media-gallery--hint :is( slideshow-slide:has(+ slideshow-slide[aria-hidden='false']:last-of-type), slideshow-slide[aria-hidden='false'] + slideshow-slide ) { content-visibility: auto; slideshow-component[actioned] & { content-visibility: visible; } } } @media screen and (min-width: 750px) { .media-gallery--carousel slideshow-component:has(slideshow-controls[thumbnails]) { &:has(slideshow-controls[pagination-position='right']) { display: grid; grid-template: 'container controls' auto 'arrows controls' min-content / 1fr auto; } &:has(slideshow-controls[pagination-position='left']) { display: grid; grid-template: 'controls container' auto 'controls arrows' min-content / auto 1fr; } slideshow-controls[pagination-position='left'] { order: -1; } } } .media-gallery--carousel slideshow-arrows .slideshow-control { padding-inline: 0 var(--padding-md); opacity: 1; } /* The end-side padding reads as edge spacing only through the previous control's flip-x mirror; RTL swaps which control is mirrored, so swap the padding side too */ [dir='rtl'] .media-gallery--carousel slideshow-arrows .slideshow-control { padding-inline: var(--padding-md) 0; } @media screen and (max-width: 749px) { slideshow-component:has(:not(.mobile\:hidden) :is(.slideshow-controls__dots, .slideshow-controls__counter)) .shopify-model-viewer-ui__controls-area { /* Position the controls just above the counter */ bottom: calc(var(--minimum-touch-target) + var(--padding-sm)); } } @media screen and (min-width: 750px) { slideshow-component:has(:not(.desktop\:hidden) :is(.slideshow-controls__dots, .slideshow-controls__counter)) .shopify-model-viewer-ui__controls-area { /* Position the controls just above the counter */ bottom: calc(var(--minimum-touch-target) + var(--padding-sm)); } } slideshow-slide.product-media-container--tallest { content-visibility: visible; } /* END_SNIPPET:product-media-gallery-content */ /* START_SNIPPET:product-recommendations-styles (INDEX:272) */ .product-recommendations { display: block; } .product-recommendations__skeleton-item { aspect-ratio: 3 / 4; background-color: var(--color-foreground); opacity: var(--skeleton-opacity); border-radius: 4px; } @media screen and (max-width: 749px) { .product-recommendations__skeleton-item:nth-child(2n + 1) { display: none; } } product-recommendations:has([data-has-recommendations='false']) { display: none; } /* END_SNIPPET:product-recommendations-styles */ /* START_SNIPPET:quantity-selector-styles (INDEX:273) */ /* Quantity selector */ .quantity-selector { --quantity-selector-width: 124px; display: flex; justify-content: space-between; align-items: center; color: var(--color-input-text); background-color: var(--color-input-background); border: var(--style-border-width-inputs) solid var(--color-input-border); border-radius: var(--style-border-radius-inputs); flex: 1 1 var(--quantity-selector-width); align-self: stretch; } .product-form-buttons:has(.add-to-cart-button.button-secondary) .quantity-selector { border-radius: var(--style-border-radius-buttons-secondary); } .quantity-selector :is(.quantity-minus, .quantity-plus) { /* Unset button styles */ padding: 0; background: transparent; box-shadow: none; display: flex; justify-content: center; align-items: center; cursor: pointer; width: var(--minimum-touch-target); height: var(--minimum-touch-target); flex-shrink: 0; color: var(--color-input-text); } .quantity-selector .quantity-minus { border-start-start-radius: var(--style-border-radius-inputs); border-end-start-radius: var(--style-border-radius-inputs); } .quantity-selector .quantity-plus { border-start-end-radius: var(--style-border-radius-inputs); border-end-end-radius: var(--style-border-radius-inputs); } .product-details .quantity-selector, .quick-add-modal .quantity-selector { border-radius: var(--style-border-radius-buttons-primary); } .product-details .quantity-selector .quantity-minus, .quick-add-modal .quantity-selector .quantity-minus { border-start-start-radius: var(--style-border-radius-buttons-primary); border-end-start-radius: var(--style-border-radius-buttons-primary); } .product-details .quantity-selector .quantity-plus, .quick-add-modal .quantity-selector .quantity-plus { border-start-end-radius: var(--style-border-radius-buttons-primary); border-end-end-radius: var(--style-border-radius-buttons-primary); } .quantity-selector .svg-wrapper { transition: transform var(--animation-speed) var(--animation-easing); } .quantity-selector svg { width: var(--icon-size-xs); height: var(--icon-size-xs); } :is(.quantity-minus, .quantity-plus):active .svg-wrapper { transform: scale(0.9); } .quantity-selector input[type='number'] { margin: 0; width: calc(var(--quantity-selector-width) - var(--minimum-touch-target) * 2); min-width: 3ch; padding-inline: 0; text-align: center; border: none; appearance: none; border-radius: var(--style-border-radius-buttons); color: var(--color-input-text); background-color: transparent; } /* Chrome, Safari, Edge, Opera */ .quantity-selector input[type='number']::-webkit-inner-spin-button, .quantity-selector input[type='number']::-webkit-outer-spin-button { appearance: none; } /* Firefox */ .quantity-selector input[type='number'] { appearance: textfield; } /* END_SNIPPET:quantity-selector-styles */ /* START_SNIPPET:quantity-selector (INDEX:274) */ .quantity-selector-wrapper { display: flex; align-items: center; flex-wrap: wrap; gap: calc(var(--gap-sm) / 2); @media screen and (min-width: 750px) { gap: var(--gap-sm); } } .price-per-item { display: block; color: var(--color-foreground); font-size: var(--font-size--sm); font-weight: normal; } /* END_SNIPPET:quantity-selector */ /* START_SNIPPET:quick-add-modal-styles (INDEX:275) */ #quick-add-dialog { display: contents; } /* Inputs inside the quick-add modal use the global Input Fields settings, not any per-block overrides set on the product page. */ .quick-add-modal .quantity-selector-wrapper { --color-input-background: inherit; --color-input-text: inherit; --color-input-text-rgb: inherit; --color-input-border: inherit; --style-border-width-inputs: inherit; --style-border-radius-inputs: inherit; --style-border-radius-buttons-primary: var(--style-border-radius-inputs); --style-border-radius-buttons-secondary: var(--style-border-radius-inputs); } .quick-add-modal .product-details .quantity-selector { border-radius: var(--style-border-radius-inputs); } @media screen and (min-width: 750px) { .quick-add-modal { width: var(--quick-add-modal-width); height: var(--quick-add-modal-height); max-width: none; } } .quick-add-modal { padding: 0; border: var(--style-border-popover); overflow: hidden; box-shadow: 0 5px 30px rgb(0 0 0 / var(--opacity-15)); @media screen and (max-width: 749px) { position: fixed; margin: auto 0 0 0; min-height: unset; max-width: 100%; border-radius: 0; overflow: clip; height: fit-content; /* Bottom sheet touches the physical bottom edge (viewport-fit=cover); keep the buy buttons above the home indicator while the background fills the safe area */ padding-block-end: var(--safe-area-inset-bottom); } } .quick-add-modal[open] { @media screen and (max-width: 750px) { border-start-start-radius: var(--style-border-radius-popover); border-start-end-radius: var(--style-border-radius-popover); } } .quick-add-modal[open] { @media screen and (min-width: 750px) { display: flex; } } .quick-add-modal .view-more-details__wrapper { @media screen and (max-width: 749px) { display: none; } } .quick-add-modal[open] { animation: modalSlideInTop var(--animation-speed) var(--animation-easing) forwards; } .quick-add-modal.dialog-closing { animation: modalSlideOutTop var(--animation-speed) var(--animation-easing) forwards; } .quick-add-modal__close { position: absolute; top: var(--margin-2xs); inset-inline-end: var(--margin-2xs); transition: transform 0.15s var(--animation-timing-bounce); z-index: var(--layer-raised); overflow: visible; transform-origin: center; } /* Match the specificity of the base [dir='rtl'] .close-button safe-area rule so the absolutely positioned modal button keeps its own corner inset in RTL */ [dir='rtl'] .quick-add-modal__close { inset-inline-end: var(--margin-2xs); } .quick-add-modal__close:active { transform: scale(0.99) translateY(1px); } .quick-add-modal__close { &:focus-visible { outline: none; } &:focus-visible::after { content: ''; position: absolute; inset: 0; border-radius: calc(var(--style-border-radius-popover) - var(--margin-2xs)); outline: var(--focus-outline-width) solid currentColor; } } .quick-add-modal__content { display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: 100% 1fr; position: relative; overflow-y: auto; max-height: 100vh; flex-grow: 1; @media screen and (max-width: 749px) { grid-template-columns: repeat(4, 1fr); grid-template-rows: auto; padding-inline: var(--padding-xl); padding-block: var(--padding-xl); gap: var(--gap-lg); flex: 1; min-height: 0; overflow-y: auto; height: auto; /* Prevent a bug in Safari where height:fit-content is not respected */ max-height: 100vh; } } .quick-add-modal__content .media-gallery--grid .media-gallery__grid { grid-template-columns: 1fr; } .quick-add-modal__content .media-gallery--grid.media-gallery--two-column .product-media-container:first-child { grid-column: auto; } .quick-add-modal__content { /* One column */ .media-gallery--grid:not(.media-gallery--two-column) .product-media > *, /* Two column, small first image */ .media-gallery--grid.media-gallery--two-column:not(.media-gallery--large-first-image) .product-media-container:nth-of-type(odd) .product-media > *, /* Two column, large first image */ .media-gallery--grid.media-gallery--two-column.media-gallery--large-first-image .product-media-container:is(:first-of-type, :nth-of-type(even)) .product-media > *, /* Carousel */ .media-gallery--carousel slideshow-container { border-start-start-radius: 0; border-end-start-radius: 0; } } .quick-add-modal__content .view-more-details__wrapper { display: flex; justify-content: flex-start; width: 100%; } .view-more-details__wrapper .view-more-details { display: flex; align-items: center; width: fit-content; } .quick-add-modal__content .product-header { @media screen and (max-width: 749px) { display: flex; flex-direction: column; grid-column: 2 / -1; grid-row: 1; padding-inline-end: var(--padding-2xl); } } .quick-add-modal__content .product-header a:not(product-price *) { @media screen and (max-width: 749px) { font-size: var(--font-size--md); font-weight: 500; color: inherit; width: fit-content; } } .quick-add-modal__content variant-picker, .quick-add-modal__content product-form-component { @media screen and (max-width: 749px) { grid-column: 1 / -1; } } .quick-add-modal__content .product-media-container__zoom-button { cursor: default; } .quick-add-modal__content .product-details { grid-column: 4 / -1; grid-row: 1 / span 2; display: flex; flex-direction: column; justify-content: stretch; height: 100%; min-height: 0; overflow-y: auto; position: relative; dialog[open] & { animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both; animation-delay: 0.1s; } @media screen and (max-width: 749px) { grid-column: 2 / span 2; grid-row: span 1; max-height: 100%; height: 100%; } } @property --quick-add-modal-mask-start { syntax: ''; initial-value: 0px; inherits: false; } @property --quick-add-modal-mask-end { syntax: ''; initial-value: 0px; inherits: true; } @keyframes detect-scroll { from, to { --can-scroll: ; } } @supports (animation-timeline: scroll(self)) { dialog[open] .quick-add-modal__content .product-details { mask-image: linear-gradient(to bottom, transparent 0%, #000 var(--quick-add-modal-mask-start), #000 100%); animation: 0.3s var(--animation-timing-fade-in) 0.1s both fadeSlideIn, scrollStart 1s linear both, scrollEnd 1s linear both, detect-scroll 1ms linear none; animation-timeline: auto, scroll(self), scroll(self), scroll(self); animation-range: normal, 0px 48px, calc(100% - 48px) 100%, 0% 100%; } } @keyframes scrollStart { from { --quick-add-modal-mask-start: 0px; } to { --quick-add-modal-mask-start: 48px; } } @keyframes scrollEnd { from { --quick-add-modal-mask-end: 0px; } to { --quick-add-modal-mask-end: 48px; } } .quick-add-modal__content .product-details > .group-block { flex-grow: 1; width: auto; } .quick-add-modal__content > * { min-height: 0; } .quick-add-modal__content .product-details :is(.view-product-title, .buy-buttons-block) { flex: 0 0 auto; } .quick-add-modal__content .product-details :is(.buy-buttons-block) { margin-top: auto; position: sticky; bottom: 0; padding-bottom: var(--padding-3xl); background-color: var(--color-background); z-index: var(--layer-raised); &::before { --quick-add-modal-mask-end-progressive-enhanced: 0px; position: absolute; content: ''; display: block; inset: auto 0 100% 0; pointer-events: none; height: min(var(--gap-2xl), var(--gap)); background-color: inherit; mask-image: linear-gradient( to top, #000 0%, #000 calc(var(--gap-2xs)), transparent calc(100% - var(--quick-add-modal-mask-end-progressive-enhanced)), transparent ); } } .quick-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form) { position: static; padding-bottom: 0; flex-grow: 1; display: flex; flex-direction: column; } .quick-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form) > product-form-component { flex-grow: 1; display: flex; flex-direction: column; } .quick-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form) form { flex-grow: 1; display: flex; flex-direction: column; } .quick-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form)::before { display: none; } .quick-add-modal__content .product-details .buy-buttons-block__bar { display: block; position: sticky; bottom: 0; margin-top: auto; padding-block: var(--gap-md) var(--padding-3xl); background-color: var(--color-background); z-index: var(--layer-raised); &::before { --quick-add-modal-mask-end-progressive-enhanced: 0px; position: absolute; content: ''; display: block; inset: auto 0 100% 0; pointer-events: none; height: min(var(--gap-2xl), var(--gap)); background-color: inherit; mask-image: linear-gradient( to top, #000 0%, #000 calc(var(--gap-2xs)), transparent calc(100% - var(--quick-add-modal-mask-end-progressive-enhanced)), transparent ); } } @supports (animation-timeline: scroll(self)) { .quick-add-modal__content .product-details :is(.buy-buttons-block)::before, .quick-add-modal__content .product-details .buy-buttons-block__bar::before { --mask-if-scroll: var(--can-scroll) var(--quick-add-modal-mask-end); --mask-if-no-scroll: 48px; --quick-add-modal-mask-end-progressive-enhanced: var(--mask-if-scroll, var(--mask-if-no-scroll)); height: calc(var(--gap-2xs) + 48px); } } .quick-add-modal__content .product-details .variant-picker { flex: 0 0 auto; padding-block: min(var(--gap-2xl), var(--gap)); margin-block-end: calc(var(--focus-outline-offset) + var(--focus-outline-width)); } .quick-add-modal__content .variant-option--swatches { padding-inline-start: var(--padding-2xs); } .quick-add-modal__content .variant-option--swatches legend { margin-inline-start: calc(-1 * var(--padding-2xs)); } .quick-add-modal__content:not(:has(.product-information__media)) .product-details { grid-column: 1 / -1; } .quick-add-modal__content .view-product-title { display: flex; padding-block: 0; margin-block-end: 12px; /* Prevent overlap between title and close button */ padding-inline-end: calc(var(--padding-2xl) + calc(var(--minimum-touch-target) / 2)); } .quick-add-modal__content .view-product-title a { color: inherit; text-decoration: none; text-align: start; font-size: var(--font-size--2xl); font-weight: 600; line-height: 1.2; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; transition: color 0.2s var(--animation-easing); } .quick-add-modal__content .product-details product-price { --text-align: start; } .quick-add-modal__content .product-details product-price.text-block--align-center { margin-inline: 0; } .quick-add-modal__content .product-details product-price.text-center { --text-align: start; } .quick-add-modal__content .product-details product-price > * { text-align: start; } .quick-add-modal__content .product-details *:not( .group-block, .group-block-content, .buy-buttons-block, .buy-buttons-block *, .view-product-title, .view-product-title *, variant-picker, variant-picker *, product-price, product-price *, product-inventory, product-inventory *, .view-more-details__wrapper, .view-more-details__wrapper * ) { @media screen and (min-width: 750px) { /* stylelint-disable-next-line declaration-no-important */ display: none !important; } } .quick-add-modal__content .group-block:not( :has( .buy-buttons-block, .buy-buttons-block *, .view-product-title, .view-product-title *, variant-picker, variant-picker *, product-price, product-price *, product-inventory, product-inventory *, .view-more-details__wrapper, .view-more-details__wrapper * ), .buy-buttons-block ) { display: none; } @media screen and (min-width: 750px) { .quick-add-modal__content .group-block-content { gap: 0; } .quick-add-modal__content .media-gallery__grid { gap: min(var(--gap-2xs), var(--image-gap)); border-radius: var(--style-border-radius-popover, 0); } .quick-add-modal__content .media-gallery--grid .product-media img { border-radius: 0; } } .quick-add-modal__content .product-details > .group-block { padding-block: var(--padding-3xl) 0; } .quick-add-modal__content :where(.product-details > .group-block > .group-block-content > *) { padding-inline: var(--padding-3xl); } .quick-add-modal__content slideshow-slide:not([aria-hidden='false']) { content-visibility: auto; } .quick-add-modal__content .product-information__media { width: 100%; grid-column: 1 / span 1; grid-row: 1; position: relative; top: 0; animation: fadeIn 0.4s var(--animation-timing-fade-in) both; @media screen and (min-width: 750px) { position: sticky; grid-column: 1 / 4; width: var(--quick-add-modal-gallery-width); overflow-y: auto; -ms-overflow-style: none; scrollbar-width: none; } &::-webkit-scrollbar { display: none; } } .quick-add-modal__content .product-information__media media-gallery { pointer-events: none; @media screen and (min-width: 750px) { position: absolute; inset: 0; } } .quick-add-modal media-gallery { padding: 0; } .quick-add-modal__content .product-information__media slideshow-arrows { display: none; } .quick-add-modal__content .product-information__media slideshow-container { display: block; } .quick-add-modal__content .product-information__media slideshow-slides { display: flex; flex-direction: column; gap: var(--gap-2xs); overflow: visible; scroll-snap-type: none; } .quick-add-modal__content .product-information__media slideshow-slide { width: 100%; flex: none; scroll-snap-align: unset; position: relative; transform: none; opacity: 1; visibility: visible; transition: opacity 0.3s var(--animation-easing); } .quick-add-modal__content .product-information__media slideshow-slide[aria-hidden='true'] { @media screen and (max-width: 749px) { display: none; } } .quick-add-modal__content .product-information__media slideshow-slide:nth-child(1) { animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both; } .quick-add-modal__content .product-information__media slideshow-slide:nth-child(2) { animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both; animation-delay: 0.05s; } .quick-add-modal__content .product-information__media slideshow-slide:nth-child(3) { animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both; animation-delay: 0.1s; } .quick-add-modal__content .product-information__media :is(slideshow-controls, slideshow-controls[thumbnails]) { display: none; } .quick-add-modal__content .sticky-content, .quick-add-modal__content .sticky-content--desktop { top: 0; } .quick-add-modal__content .text-block.rte:not(product-price), .quick-add-modal__content .view-more-details__wrapper { display: none; } @keyframes fadeSlideIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* END_SNIPPET:quick-add-modal-styles */ /* START_SNIPPET:quick-add-styles (INDEX:277) */ /* Quick Add */ .quick-add { --quick-add-offset: var(--padding-sm); --quick-add-right: calc(var(--quick-add-offset) + var(--padding-inline-end)); --quick-add-bottom: calc(var(--quick-add-offset) + var(--padding-block-end)); --quick-add-inset-inline-end: max( var(--quick-add-right), calc((var(--border-radius) + var(--quick-add-right)) * (1 - cos(45deg))) ); --quick-add-inset-block-end: max( var(--quick-add-bottom), calc((var(--border-radius) + var(--quick-add-bottom)) * (1 - cos(45deg))) ); position: absolute; inset: 0; z-index: var(--layer-raised); pointer-events: none; @media screen and (min-width: 750px) { --quick-add-offset: var(--padding-md); } } .quick-add .variant-option__button-label input[data-option-available='false'] { cursor: not-allowed; } /* Hide "Add" button when "Choose" button is shown */ [data-quick-add-button='choose'] add-to-cart-component { display: none; } /* Hide "Choose" button when "Add" button is shown */ [data-quick-add-button='add'] .quick-add__button--choose { display: none; } product-card:is(:hover, :focus-within) .quick-add__button { opacity: 1; &:disabled { opacity: var(--opacity-muted-text); } } button.quick-add__button { --quick-add-collapsed-width: var(--button-size-md); --quick-add-icon-width: calc(var(--button-size-md) - 4px); --quick-add-expanded-width: max-content; display: var(--quick-add-mobile-display, none); align-items: center; justify-content: flex-start; gap: 0; background: linear-gradient(var(--quick-add-background, var(--color-background)) 0 100%) padding-box; padding: 0; border-radius: 50px; border: 2px solid hsl(0 0% 0% / 0.15); height: var(--button-size-md); width: var(--quick-add-collapsed-width); cursor: pointer; opacity: var(--quick-add-mobile-opacity, 0); overflow: hidden; color: var(--quick-add-foreground, var(--color-foreground)); pointer-events: all; position: absolute; inset-inline-end: var(--quick-add-inset-inline-end); inset-block-end: var(--quick-add-inset-block-end); max-inline-size: calc(100% - var(--quick-add-inset-inline-end)); min-inline-size: 0; white-space: nowrap; backdrop-filter: blur(20px) saturate(180%); interpolate-size: allow-keywords; &:hover { scale: 1.03; /* Hover stabilizer: extends hit area to maintain hover state */ &::before { content: ''; position: absolute; inset: -10px; z-index: -1; } } &:active { scale: 0.99; } .quick-add[stay-visible] & { display: flex; } @media screen and (min-width: 750px) { display: var(--quick-add-display, flex); opacity: 0; /* Explicit "disabled" rule is needed to beat the `.button:disabled { opacity: 0.5 }` rule in base.css */ &:disabled { opacity: 0; } } } .quick-add__button.add-to-cart-button { height: var(--button-size-md); } .quick-add__button .svg-wrapper .checkmark-burst { width: 22px; height: 22px; } .quick-add__button > .add-to-cart-icon { flex-shrink: 0; width: var(--quick-add-icon-width); height: 100%; } .quick-add__product-form-component { height: 100%; } .quick-add__product-form-component .shopify-product-form { display: flex; justify-content: flex-end; align-items: flex-end; container-type: inline-size; height: 100%; } .quick-add-modal .product-media { width: 100%; height: 100%; } .quick-add-modal deferred-media { display: none; } .quick-add-modal .media-gallery--carousel slideshow-component { --cursor: default; } @media screen and (min-width: 750px) { .quick-add__button:is(:hover, :focus-visible) { width: var(--quick-add-expanded-width); padding-inline-end: var(--padding-sm); } } .quick-add__button[data-added='true'] { width: var(--quick-add-collapsed-width); color: transparent; } .quick-add__button[data-added='true'] > .add-to-cart-icon { opacity: 0; } .quick-add__button[data-added='true'] .add-to-cart__added { color: var(--quick-add-foreground, var(--color-foreground)); } @media (prefers-reduced-motion: no-preference) { button.quick-add__button { transition-property: scale, translate, opacity, width; transition-duration: var(--animation-speed); transition-timing-function: var(--ease-out-cubic); } } /* END_SNIPPET:quick-add-styles */ /* START_SNIPPET:resource-card (INDEX:280) */ .resource-card__wrapper { display: block; height: 100%; } .resource-card { --resource-card-secondary-image-opacity: 0; --resource-card-primary-image-opacity: calc(1 - var(--resource-card-secondary-image-opacity)); display: flex; flex-direction: column; row-gap: var(--padding-xs); position: relative; text-decoration: none; height: 100%; opacity: 0; animation: fadeIn var(--animation-speed-medium) var(--animation-timing-fade-in) forwards; } .resource-card__link { position: absolute; inset: 0; z-index: 1; } .resource-card__content { display: flex; flex-direction: column; color: var(--color-foreground); gap: var(--padding-3xs); .price { font-weight: 500; } .volume-pricing-note { display: block; margin-top: var(--padding-3xs); font-family: var(--font-body--family); font-weight: normal; font-size: min(0.85em, var(--font-paragraph--size)); line-height: normal; letter-spacing: normal; text-transform: none; color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text)); } } .resource-card[data-resource-type='article'] .resource-card__content, .resource-card[data-resource-type='page'] .resource-card__content { gap: var(--padding-xs); } .resource-card__image { aspect-ratio: var(--resource-card-aspect-ratio, auto); object-fit: cover; border-radius: var(--resource-card-corner-radius); opacity: var(--resource-card-primary-image-opacity); } .resource-card__image--secondary { position: absolute; top: 0; opacity: var(--resource-card-secondary-image-opacity); border-radius: var(--resource-card-corner-radius); } .resource-card__media:empty { display: none; } .resource-card__image-placeholder { padding: var(--padding-sm); font-size: var(--font-size--lg); line-height: var(--line-height--display-loose); word-break: break-word; background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5)); aspect-ratio: var(--resource-card-aspect-ratio, auto); border-radius: var(--resource-card-corner-radius); color: var(--color-foreground); } .resource-card__title { margin-block: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; line-height: 1.3; word-break: break-word; overflow-wrap: break-word; } .resource-card__title.paragraph { line-height: 1.3; } .resource-card--overlay { height: 100%; &::before { content: ''; position: absolute; inset: 50% 0 0; background: var(--gradient-image-overlay); border-radius: var(--resource-card-corner-radius); pointer-events: none; z-index: var(--layer-flat); } } .resource-card--overlay .resource-card__image { height: 100%; } .resource-card--overlay .resource-card__content { position: absolute; inset: auto 0 0; padding: var(--padding-lg) var(--padding-lg) var(--padding-sm); z-index: var(--layer-raised); } .resource-card--overlay .resource-card__title { color: var(--color-white); } /* Collection images */ .resource-card__image-wrapper { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-2xs); } .resource-card__collection-image { aspect-ratio: 1 / 1; object-fit: cover; border-radius: calc(var(--card-corner-radius) - (var(--padding-xs) / 2)); } .resource-card__subtext { color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text)); margin-block-start: 0; } .resource-card__subtext.paragraph { font-size: var(--font-size--body-sm); line-height: var(--line-height--body-tight); color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text)); } .resource-card:has(.resource-card__image--secondary) { &:hover, &:focus { --resource-card-secondary-image-opacity: 1; } } /* END_SNIPPET:resource-card */ /* START_SNIPPET:resource-image (INDEX:281) */ .resource-image { position: relative; display: flex; width: 100%; height: 100%; z-index: var(--layer-base); overflow: hidden; max-width: 100%; max-height: 100%; aspect-ratio: var(--ratio); } .resource-image__image { object-fit: cover; aspect-ratio: var(--ratio); width: 100%; height: 100%; } .resource-image--placeholder { width: 100%; height: 100%; } /* END_SNIPPET:resource-image */ /* START_SNIPPET:resource-list-carousel (INDEX:282) */ .resource-list__carousel { --slide-width: 60vw; width: 100%; position: relative; container-type: inline-size; container-name: resource-list-carousel; .slideshow-control[disabled] { display: none; } .slideshow-control--next { margin-inline-start: auto; } } @container resource-list-carousel (max-width: 749px) { .resource-list__carousel .resource-list__slide { --slide-width: clamp(150px, var(--mobile-card-size, 60cqw), var(--slide-width-max)); } } @container resource-list-carousel (min-width: 750px) { .resource-list__carousel .resource-list__slide { --section-slide-width: calc( (100% - (var(--resource-list-column-gap) * (var(--column-count) - 1)) - var(--peek-next-slide-size)) / var(--column-count) ); --fallback-slide-width: clamp(150px, var(--mobile-card-size, 60cqw), var(--slide-width-max)); --slide-width: var(--section-slide-width, var(--fallback-slide-width)); } } .resource-list__carousel > slideshow-container > slideshow-slides { gap: var(--resource-list-column-gap); cursor: default; /* Add padding to prevent hover animations from being clipped in slideshow 15px accommodates: - Scale effect (9px on each side from 1.03 scale) - Lift effect (4px upward movement) - Shadow (15px spread with -5px offset) Using 16px for better alignment with our spacing scale */ margin-block: -16px; padding-block: 16px; } .resource-list__carousel slideshow-arrows { padding-inline: var(--util-page-margin-offset); } .resource-list__carousel .resource-list__slide { width: var(--slide-width); flex: 0 0 auto; scroll-snap-align: start; min-width: 0; } .resource-list__carousel > slideshow-container > slideshow-slides > .resource-list__slide { cursor: var(--cursor); } .resource-list__carousel .product-card__content { cursor: var(--cursor); } /* Card media links and nested slideshows follow the outer carousel's drag cursor. */ .resource-list__carousel .card-gallery > a { cursor: var(--cursor); } .resource-list__carousel .product-card__content slideshow-component { --cursor: inherit; } /* * Resource list carousels have peeking slides on both sides. * We try to kick load them beforehand (they are lazy loaded otherwise). */ .resource-list__carousel :is( slideshow-slide:has(+ slideshow-slide[aria-hidden='false']), slideshow-slide[aria-hidden='false'] + slideshow-slide ) { content-visibility: auto; slideshow-component[actioned] & { content-visibility: visible; } } /* END_SNIPPET:resource-list-carousel */ /* START_SNIPPET:resource-list-styles (INDEX:283) */ .resource-list { --resource-list-mobile-gap-max: 9999px; --resource-list-column-gap: min(var(--resource-list-column-gap-desktop), var(--resource-list-mobile-gap-max)); --resource-list-row-gap: min(var(--resource-list-row-gap-desktop), var(--resource-list-mobile-gap-max)); width: 100%; @media screen and (max-width: 749px) { --resource-list-mobile-gap-max: 12px; } @container resource-list (max-width: 749px) { --resource-list-mobile-gap-max: 12px; } } .resource-list--grid { display: grid; gap: var(--resource-list-row-gap) var(--resource-list-column-gap); grid-template-columns: var(--resource-list-columns-mobile); @media screen and (min-width: 750px) { grid-template-columns: var(--resource-list-columns); } @container resource-list (max-width: 449px) { grid-template-columns: var(--resource-list-columns-mobile); } @container resource-list(min-width: 450px) and (max-width: 749px) { --resource-list-columns-per-row: 3; grid-template-columns: repeat(var(--resource-list-columns-per-row), 1fr); /* Avoid orphan in last row when there are 4, 7, or 10 items */ &:has(.resource-list__item:first-child:nth-last-child(3n + 1)), /* Clean two full rows when there are 8 items */ &:has(.resource-list__item:first-child:nth-last-child(8n)) { --resource-list-columns-per-row: 4; } } @container resource-list (min-width: 750px) { grid-template-columns: repeat(var(--resource-list-columns-per-row), 1fr); &:has(.resource-list__item:first-child:nth-last-child(n + 9)) { --resource-list-columns-per-row: 5; } &:has(.resource-list__item:first-child:nth-last-child(n + 7):nth-last-child(-n + 8)) { --resource-list-columns-per-row: 4; } &:has(.resource-list__item:first-child:nth-last-child(6)) { --resource-list-columns-per-row: 3; } &:has(.resource-list__item:first-child:nth-last-child(5)) { --resource-list-columns-per-row: 5; } &:has(.resource-list__item:first-child:nth-last-child(-n + 4)) { --resource-list-columns-per-row: 4; } } @container resource-list (min-width: 1200px) { &:has(.resource-list__item:first-child:nth-last-child(6)) { --resource-list-columns-per-row: 6; } } } /* * Grid tracks floor at their items' min-content width, so a card whose child * sets an aspect-ratio can push its item wider than its track and make the * whole grid overflow the page. */ .resource-list--grid .resource-list__item { min-width: 0; } .resource-list__item { height: 100%; color: var(--color-foreground); text-decoration: none; } /* END_SNIPPET:resource-list-styles */ /* START_SNIPPET:search-modal (INDEX:286) */ /* Search modal style */ .search-modal { --search-border-radius: var(--style-border-radius-popover); --search-border-width: var(--style-border-width); } .search-modal__content { /* Approx set the top so when the content is at max height, the modal is centered */ --modal-top-margin: calc(50dvh - var(--modal-max-height) / 2 - 2rem); --modal-width: 66dvw; padding: 0; border: var(--style-border-popover); @media screen and (min-width: 750px) { width: var(--modal-width); margin-block-start: var(--modal-top-margin); overflow: hidden; } } /* Hide the default dialog backdrop on small screens */ @media screen and (max-width: 749px) { .search-modal__content::backdrop { display: none; } } .dialog-modal[open].search-modal__content { transform-origin: bottom center; animation: search-element-slide-in-bottom 300ms var(--ease-out-quad) forwards; border-radius: var(--search-border-radius); box-shadow: var(--shadow-popover); @media screen and (max-width: 749px) { border-radius: 0; } } .dialog-modal.search-modal__content.dialog-closing { animation: search-element-slide-out-bottom 200ms var(--ease-out-quad) forwards; } .search-modal__content[open] { display: flex; } .search-modal__content :is(.predictive-search-dropdown, .predictive-search-form__content-wrapper) { position: relative; } .dialog-modal .predictive-search-form__header:has( .predictive-search__reset-button:not(.predictive-search__reset-button[hidden]) )::before { content: ''; position: absolute; inset-inline-end: calc(var(--padding-sm) + var(--minimum-touch-target)); top: 0; bottom: 0; width: var(--border-width-sm); background-color: var(--color-border); } .dialog-modal .predictive-search-form__header:has(.predictive-search__reset-button:not(.predictive-search__reset-button[hidden])) > .predictive-search__close-modal-button { &::before { content: none; } } @media screen and (min-width: 750px) { .dialog-modal .predictive-search-form__header:has( .predictive-search__reset-button:not(.predictive-search__reset-button[hidden]) )::before { inset-inline-end: calc(var(--padding-2xl) * 2); } } predictive-search-component { --resource-card-corner-radius: var(--product-corner-radius); display: flex; width: 100%; position: relative; margin-inline: auto; align-items: center; background-color: var(--color-background); z-index: var(--layer-heightened); } .predictive-search-form__footer { display: none; position: absolute; bottom: 0; inset-inline: 0; @media screen and (min-width: 750px) { --to-top-gradient-background: linear-gradient( to top, rgb(var(--color-background-rgb) / var(--opacity-90)), rgb(var(--color-background-rgb) / var(--opacity-80)), rgb(var(--color-background-rgb) / var(--opacity-40)), transparent ); padding-block: var(--padding-xs) var(--padding-lg); background-image: var(--to-top-gradient-background); } } predictive-search-component:has([data-search-results]):not(:has(.predictive-search-results__no-results)) .predictive-search-form__footer { display: block; } .predictive-search-form { position: relative; width: 100%; align-self: flex-start; } .predictive-search-form__content { max-height: 50dvh; overflow-y: auto; background-color: var(--color-background); /* Firefox */ scrollbar-width: none; /* Webkit browsers */ &::-webkit-scrollbar { display: none; } } .predictive-search-form__content-wrapper { position: absolute; top: 100%; width: 100%; inset-inline-start: 0; z-index: var(--layer-raised); display: flex; flex-direction: column; border-radius: 0 0 var(--search-border-radius) var(--search-border-radius); transition: box-shadow var(--animation-speed) var(--animation-easing); transform: translateZ(0); overflow: hidden; @media screen and (max-width: 749px) { border-radius: 0; } @media screen and (min-width: 750px) { max-height: var(--modal-max-height); } } /* Add new rule to apply bottom padding only when search button exists */ .predictive-search-form__content-wrapper:has([data-search-results]):not(:has(.predictive-search-results__no-results)) > .predictive-search-form__content { padding-block-end: var(--padding-6xl); } .predictive-search-form__header-inner { background: var(--color-background); border: var(--search-border-width) solid var(--color-border); color: var(--color-foreground); border-radius: var(--style-border-radius-popover); display: flex; align-items: center; justify-content: space-between; width: 100%; @media screen and (max-width: 749px) { border-radius: var(--style-border-radius-inputs); border: none; } } .predictive-search-form__header-inner:focus-within { outline-offset: var(--focus-outline-offset); @media screen and (min-width: 750px) { outline: var(--focus-outline-width) solid var(--color-foreground); } } .predictive-search-form__header { display: flex; position: sticky; top: 0; z-index: var(--layer-heightened); width: 100%; align-items: center; background-color: var(--color-input-background); border: var(--search-border-width) solid var(--color-border); border-radius: var(--style-border-radius-inputs); @media screen and (max-width: 749px) { padding: var(--padding-2xs) var(--padding-sm); } } .predictive-search-form__header:focus-within, .predictive-search-form__header-inner:focus-within, .predictive-search-form__header-inner:has(.search-input:is(:focus, :focus-visible)) { outline: none; box-shadow: none; /* stylelint-disable-next-line declaration-no-important */ border-color: var(--color-border) !important; } input.search-input { border-radius: var(--style-border-radius-inputs); padding-block: var(--padding-sm); font-size: var(--font-size--md); width: 100%; color: var(--color-foreground); padding-inline: calc(var(--margin-lg) + var(--icon-size-lg)) 0; background: transparent; text-overflow: ellipsis; overflow: hidden; outline: none; border: 0; } input.search-input::placeholder { color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-muted-text)); } input.search-input, input.search-input:is(:focus, :focus-visible, :focus-within), .predictive-search-form__header *:is(:focus, :focus-visible) { outline: none; box-shadow: none; } input.search-input:hover { background-color: transparent; } .predictive-search__icon { position: absolute; inset-inline-start: var(--margin-xl); top: auto; width: var(--icon-size-lg); height: var(--icon-size-lg); color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-60)); @media screen and (min-width: 750px) { inset-inline-start: var(--margin-md); } } .predictive-search__icon > svg { width: var(--icon-size-md); height: var(--icon-size-md); } .predictive-search__reset-button { cursor: pointer; display: flex; align-items: center; justify-content: center; min-width: var(--minimum-touch-target); height: var(--minimum-touch-target); padding: 0; margin-inline-end: var(--margin-md); background: transparent; color: var(--color-foreground); opacity: 0.68; transition: opacity var(--animation-speed-medium) var(--animation-timing-fade-out), visibility var(--animation-speed-medium) var(--animation-timing-fade-out); &:hover { color: var(--color-foreground); } &:active { transform: scale(0.9); transition: transform 100ms var(--animation-timing-active); } @media screen and (min-width: 750px) { margin-inline-end: var(--margin-2xs); } } .predictive-search__reset-button[hidden] { opacity: 0; pointer-events: none; visibility: hidden; } .predictive-search__reset-button-icon { display: flex; align-items: center; justify-content: center; width: var(--icon-size-lg); height: var(--icon-size-lg); transition: background-color var(--animation-speed-medium) ease-in-out, transform var(--animation-speed-medium) var(--animation-timing-bounce); border-radius: 50%; &:hover { background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8)); } } .predictive-search__reset-button:active .predictive-search__reset-button-icon { transform: scale(0.85); transition-timing-function: var(--animation-timing-active); transition-duration: 100ms; } .predictive-search__reset-button svg { width: var(--icon-size-md); height: var(--icon-size-md); } .predictive-search__reset-button-text { display: none; } .predictive-search__search-button { margin: auto; z-index: var(--layer-raised); transition: transform var(--animation-speed-medium) var(--animation-timing-bounce), box-shadow var(--animation-speed-medium) var(--animation-timing-hover); transform-origin: center; &:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgb(0 0 0 / var(--opacity-5)); } &:active { transform: scale(0.97); transition: transform 100ms var(--animation-timing-active); box-shadow: none; } } .predictive-search__close-modal-button { --button-color: var(--color-foreground); --button-background-color: transparent; display: flex; justify-content: center; align-items: center; width: var(--minimum-touch-target); height: var(--minimum-touch-target); margin-inline-start: var(--margin-sm); padding: 0; box-shadow: none; &:active { transform: scale(0.8); transition: transform 100ms var(--animation-timing-active); } .svg-wrapper, svg { width: var(--icon-size-xs); height: var(--icon-size-xs); } } .predictive-search__close-modal-button:hover { --button-color: var(--color-foreground); --button-background-color: transparent; } /* END_SNIPPET:search-modal */ /* START_SNIPPET:search (INDEX:287) */ .search-action { --search-border-radius: var(--style-border-radius-inputs); --search-border-width: var(--style-border-width-inputs); display: flex; } @media screen and (max-width: 749px) { .search-action--hidden-on-drawer { display: none; } } @media screen and (min-width: 750px) { [data-menu-style='drawer'] .search-action--hidden-on-drawer { display: none; } [data-menu-style='menu'] .search-action--hidden-on-menu { display: none; } } [data-menu-style='menu'] .header__column--left .search-action { @media screen and (min-width: 750px) { margin-inline: calc(var(--padding-lg) * -1); } } .header__column--right .search-action { @media screen and (min-width: 750px) { margin-inline: calc(var(--gap-md) * -1) calc(var(--gap-xs) * -1); } } @media screen and (min-width: 750px) { .header__column--right .search-action--text { margin-inline: 0; } [data-menu-style='menu'] .header__column--left .search-action--text { margin-inline: 0; } } /* END_SNIPPET:search */ /* START_SNIPPET:section (INDEX:288) */ .section-wrapper { --section-height-offset: 0px; } .section[data-shopify-visual-preview] { min-height: var(--section-preview-height); padding-top: 0; } .section[data-shopify-visual-preview] .custom-section-background { display: none; } /* Header-dependent page rules use #header-group as the :has() subject and reach the page with `~`. With body as the subject, every [open] or [aria-expanded] change in the header restyles the whole page. */ #header-group:has(> .header-section > #header-component[transparent]):not(:has(> .header-section + .shopify-section)) ~ #MainContent > .section-wrapper:first-child { --section-height-offset: var(--header-group-height, 0); } .custom-section-background { grid-column: 1 / -1; } .custom-section-content { z-index: var(--layer-flat); } /* END_SNIPPET:section */ /* START_SNIPPET:skip-to-content-link (INDEX:290) */ .skip-to-content-link { position: absolute; inset-inline-start: -99999px; } .skip-to-content-link:focus { z-index: var(--layer-temporary); overflow: auto; width: auto; height: auto; padding: var(--padding-lg) var(--padding-4xl); inset-inline-start: var(--margin-lg); top: var(--margin-lg); background-color: var(--color-background); box-shadow: 0 0 0 var(--focus-outline-offset) var(--color-background); } /* END_SNIPPET:skip-to-content-link */ /* START_SNIPPET:slideshow-arrow (INDEX:292) */ .slideshow-control--large { .icon-caret { --icon-stroke-width: 1px; } .icon-caret { --icon-stroke-width: 1px; } .svg-wrapper, svg { width: var(--slideshow-controls-icon); height: var(--slideshow-controls-icon); } } /* Slideshow control shape styles */ .slideshow-control.slideshow-control--shape-square, .slideshow-control.slideshow-control--shape-circle { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; background-color: var(--color-primary-button-background); color: var(--color-primary-button-text); } .slideshow-control.slideshow-control--shape-circle { border-radius: 50%; } .slideshow-control.slideshow-control--shape-square { border-radius: 0; } .slideshow-control .icon-caret { rotate: -90deg; } /* Forward/backward arrows follow reading direction: mirror next, and undo the previous control's flip-x */ [dir='rtl'] .slideshow-control--next { scale: -1 1; } [dir='rtl'] .slideshow-control--previous { scale: 1 1; } /* END_SNIPPET:slideshow-arrow */ /* START_SNIPPET:slideshow-arrows (INDEX:293) */ slideshow-arrows { --cursor-previous: w-resize; --cursor-next: e-resize; position: absolute; inset: 0; display: flex; z-index: var(--layer-heightened); pointer-events: none; mix-blend-mode: difference; align-items: flex-end; &[position='left'] { justify-content: flex-start; padding-inline: var(--padding-xs); } &[position='right'] { justify-content: flex-end; padding-inline: var(--padding-xs); } &[position='center'] { justify-content: space-between; align-items: center; } } slideshow-arrows:has(.slideshow-control--shape-square), slideshow-arrows:has(.slideshow-control--shape-circle) { mix-blend-mode: normal; } slideshow-component[disabled='true'] slideshow-arrows { display: none; } slideshow-arrows .slideshow-control { pointer-events: auto; opacity: 0; min-height: var(--minimum-touch-target); min-width: var(--minimum-touch-target); padding: 0 var(--padding-xs); color: var(--color-white); } slideshow-arrows .slideshow-control.slideshow-control--style-none { display: none; } /* END_SNIPPET:slideshow-arrows */ /* START_SNIPPET:slideshow-controls (INDEX:294) */ slideshow-controls { flex-shrink: 0; display: flex; justify-content: space-between; scrollbar-width: none; min-height: var(--minimum-touch-target); grid-area: controls; &[controls-on-media] { position: absolute; bottom: 0; } } slideshow-controls::-webkit-scrollbar { display: none; } slideshow-controls button { --color: rgb(var(--color-foreground-rgb) / var(--opacity-30)); --color-active: var(--color-foreground); --color-hover: rgb(var(--color-foreground-rgb) / var(--opacity-50)); display: inline-block; height: var(--minimum-touch-target); width: var(--minimum-touch-target); cursor: pointer; } slideshow-controls .icon { width: var(--icon-size-sm); height: var(--icon-size-xs); } slideshow-controls[pagination-position='center'] { align-items: center; justify-content: center; } slideshow-controls[pagination-position='center'][thumbnails] { width: 100%; } slideshow-controls[pagination-position='center']:not([controls-on-media], [thumbnails], [icons-on-media]) { justify-content: space-between; } @media screen and (min-width: 750px) { slideshow-controls[thumbnails]:is([pagination-position='right'], [pagination-position='left']) { display: flex; flex-direction: column; height: 0; min-height: 100%; .slideshow-controls__thumbnails-container { overflow: hidden auto; } &:not([controls-on-media]) { .slideshow-controls__thumbnails-container { position: sticky; top: var(--sticky-header-offset, 0); } .slideshow-controls__thumbnails { padding-block-start: var(--focus-outline-offset); } } } slideshow-controls:is([pagination-position='right'], [pagination-position='left']) .slideshow-controls__thumbnails { flex-direction: column; } slideshow-controls:not([controls-on-media]) { &:is([pagination-position='left'], [pagination-position='right']) .slideshow-controls__thumbnails { padding-block: var(--padding-2xs); } &[pagination-position='right'] .slideshow-controls__thumbnails { padding-inline-end: var(--slideshow-thumbnails-padding-inline, var(--focus-outline-offset)); } &[pagination-position='left'] .slideshow-controls__thumbnails { padding-inline-start: var(--slideshow-thumbnails-padding-inline, var(--focus-outline-offset)); } } } slideshow-controls:not([controls-on-media])[icons-on-media] { &[pagination-position='right'] { justify-content: flex-end; } &[pagination-position='left'] { justify-content: flex-start; } } slideshow-controls[controls-on-media] { z-index: var(--layer-raised); &:has(.slideshow-controls__dots, .slideshow-controls__counter) { --color-foreground: #fff; --color-foreground-rgb: var(--color-white-rgb); } &[pagination-position='right'] { inset-inline-end: 0; } &[pagination-position='left'] { inset-inline-start: 0; } &[pagination-position='center'] { width: 100%; } &:not([thumbnails])[pagination-position='left'] { width: fit-content; align-self: flex-start; } &:not([thumbnails])[pagination-position='right'] { width: fit-content; align-self: flex-end; } } .slideshow-controls__arrows { display: flex; justify-content: space-between; height: var(--minimum-touch-target); grid-area: arrows; button { padding: 0 var(--padding-xs); } } .slideshow-controls__dots, .slideshow-controls__counter { display: inline-flex; justify-content: center; align-items: center; margin: 0; list-style: none; button { --color: rgb(var(--color-foreground-rgb) / var(--opacity-30)); --color-active: var(--color-foreground); --color-hover: rgb(var(--color-foreground-rgb) / var(--opacity-50)); } } slideshow-controls:has(.slideshow-controls__dots), slideshow-component[autoplay] slideshow-controls { mix-blend-mode: difference; } .slideshow-controls__dots { gap: 0.6rem; padding: var(--padding-sm) var(--padding-lg); border-radius: 3rem; overflow: hidden; button { --size: 0.56rem; display: flex; align-items: center; justify-content: center; width: calc(var(--size) * 2); height: calc(var(--size) * 2); margin: calc(var(--size) / -2); font-size: 0; border-radius: calc(var(--size)); &::after { content: ''; display: block; background-color: var(--color); height: var(--size); width: var(--size); border-radius: calc(var(--size) / 2); box-shadow: inset 0 0 0 1.5px hsl(0 0% 0% / 0.15); @supports not (view-timeline-axis: inline) { &[aria-selected='true'] { --color: var(--color-active); } } &:hover { --color: var(--color-hover); } } &[aria-selected='true'] { --color: var(--color-active); &::after { box-shadow: inset 0 0 0 1.5px hsl(0 0% 0% / 0.4); } } } } .slideshow-controls__dots, .slideshow-controls__counter { &:only-child { margin-inline: auto; } } .slideshow-controls__counter { color: var(--color-foreground); background-color: rgb(0 0 0 / 40%); width: auto; border-radius: 2rem; padding: 0.3rem var(--padding-sm); margin-inline: var(--margin-sm); backdrop-filter: blur(10px); font-variant-numeric: tabular-nums; font-size: var(--font-size--xs); .slash { color: rgb(var(--color-foreground-rgb) / var(--opacity-40)); padding-inline: var(--padding-2xs); margin-block-start: -0.1rem; } } .slideshow-control[disabled] { opacity: 0.5; cursor: not-allowed; } /* Slideshow Thumbnails */ .slideshow-controls__thumbnails-container { display: flex; width: 100%; max-height: 100%; overflow-x: scroll; scrollbar-width: none; } .slideshow-controls__thumbnails { display: inline-flex; padding-inline: var(--slideshow-thumbnails-padding-inline, var(--padding-sm)); padding-block: var(--slideshow-thumbnails-padding-block, var(--padding-sm)); gap: var(--gap-xs); margin-inline: auto; height: fit-content; .slideshow-control { border-radius: var(--thumbnail-radius, var(--media-radius)); width: clamp(44px, 7vw, var(--thumbnail-width)); height: auto; aspect-ratio: var(--aspect-ratio); img { height: 100%; object-fit: cover; border-radius: var(--thumbnail-radius, var(--media-radius)); } &:is([aria-selected='true']) { outline: var(--focus-outline-width) solid currentcolor; outline-offset: calc(var(--focus-outline-offset) / 2); border: var(--style-border-width) solid rgb(var(--color-border-rgb) / var(--media-border-opacity)); } } } .slideshow-controls__thumbnail { position: relative; } .slideshow-controls__thumbnail-badge { position: absolute; top: var(--padding-2xs); inset-inline-end: var(--padding-2xs); width: clamp(16px, 10%, 20px); height: clamp(16px, 10%, 20px); background-color: var(--color-background); border-radius: var(--style-border-radius-xs); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 1px rgb(var(--color-foreground-rgb) / var(--opacity-5)); } .slideshow-controls__thumbnail-badge svg { width: 60%; height: 60%; fill: var(--color-foreground); opacity: 0.6; } /* Slideshow Play/Pause */ .slideshow-control:is(.icon-pause, .icon-play) { color: var(--color-active); &:hover { color: var(--color-hover); } svg { display: none; } } slideshow-component:is([autoplay]) { &:is([paused]) { .icon-play > svg { display: block; } } &:not([paused]) { .icon-pause > svg { display: block; } } } /* END_SNIPPET:slideshow-controls */ /* START_SNIPPET:slideshow-styles (INDEX:296) */ /* * Slideshow Component */ slideshow-component { --cursor: grab; --slide-offset: 6px; position: relative; display: flex; flex-direction: column; timeline-scope: var(--slideshow-timeline); } .slideshow--single-media { --cursor: default; } a slideshow-component { --cursor: pointer; } slideshow-component [data-placeholder='true'] * { cursor: grab; } /* * Slideshow Slides */ slideshow-slides { width: 100%; position: relative; display: flex; overflow-x: scroll; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-color: transparent transparent; scrollbar-width: none; gap: var(--slideshow-gap, 0); cursor: var(--cursor); min-height: var(--slide-min-height); align-items: var(--slideshow-align-items, normal); @media (prefers-reduced-motion) { scroll-behavior: auto; } &::-webkit-scrollbar { width: 0; } &::-webkit-scrollbar-track { background: transparent; } &::-webkit-scrollbar-thumb { background: transparent; border: none; } @media screen and (min-width: 750px) { min-height: var(--slide-min-height-desktop); } } .slideshow--stretch-content slideshow-slides > * { height: auto; } slideshow-component[disabled='true'] slideshow-slides { overflow: hidden; } /** * By default, slideshows have overflow: hidden (no compositor layer). * When the slideshow enters the viewport, JavaScript adds [in-viewport] which enables scrolling. */ slideshow-component:not([in-viewport]) slideshow-slides { overflow: hidden; } slideshow-component[mobile-disabled] slideshow-slides { @media screen and (max-width: 749px) { overflow: hidden; } } slideshow-slides[gutters*='start'] { padding-inline-start: var(--gutter-slide-width, 0); scroll-padding-inline-start: var(--gutter-slide-width, 0); } slideshow-slides[gutters*='end'] { padding-inline-end: var(--gutter-slide-width, 0); } slideshow-component[dragging] { --cursor: grabbing; * { pointer-events: none; } } slideshow-component[dragging] slideshow-arrows { display: none; } slideshow-container { width: 100%; display: block; position: relative; grid-area: container; container-type: inline-size; background-color: var(--color-background); /* Prevents the sliding-in arrows from overflowing and flashing a horizontal scrollbar */ overflow-x: clip; } /* * Be specific about HTML children structure to avoid targeting nested slideshows. * Ensure that the content is 'visible' while scrolling instead of 'auto' to avoid issues in Safari. */ slideshow-component:is([dragging], [transitioning], :hover) > slideshow-container > slideshow-slides > slideshow-slide { content-visibility: visible; } @keyframes slide-reveal { 0% { translate: calc(var(--slideshow-slide-offset, 6) * 1rem) 0; opacity: 0; } 50% { opacity: 1; } 100% { translate: calc(var(--slideshow-slide-offset, 6) * -1rem) 0; opacity: 0; } } /* * Slideshow Slide */ slideshow-slide { position: relative; scroll-snap-align: center; width: var(--slide-width, 100%); max-height: 100%; flex-shrink: 0; view-timeline-name: var(--slideshow-timeline); view-timeline-axis: inline; content-visibility: auto; contain-intrinsic-size: auto none; border-radius: var(--corner-radius, 0); overflow: hidden; slideshow-component[actioned] &, &[aria-hidden='false'] { content-visibility: visible; } slideshow-component slideshow-slide:not([aria-hidden='false']) { content-visibility: hidden; } &[hidden]:not([reveal]) { display: none; } /* Make inactive slides appear clickable */ &[aria-hidden='true'] { cursor: pointer; } } slideshow-slide .shopify-model-viewer-ui__controls-area.shopify-model-viewer-ui__controls-area { bottom: var(--padding-sm); inset-inline-end: var(--padding-sm); } /* The external model-viewer UI stylesheet positions the controls with a physical right; inset-inline-end maps to left in RTL, so clear the stale right to stop the auto-width controls being constrained on both sides */ [dir='rtl'] slideshow-slide .shopify-model-viewer-ui__controls-area.shopify-model-viewer-ui__controls-area { right: auto; /* stylelint-disable-line csstools/use-logical -- clearing an external physical right in RTL */ } slideshow-component.slideshow--content-below-media slideshow-slide { display: grid; } .slideshow--content-below-media slideshow-slide .slide__content { position: static; } /* * The media container has to leave the absolute positioning used by the on-media layout so it * occupies its own grid row, but it must stay a positioned ancestor. Its absolutely positioned * children (the video poster and the media overlay) would otherwise resolve against * slideshow-slide and stretch across the content row as well. */ .slideshow--content-below-media slideshow-slide .slide__image-container { position: relative; } .slideshow--content-below-media slideshow-slide { grid-template-rows: var(--grid-template-rows); @media screen and (min-width: 750px) { grid-template-rows: var(--grid-template-rows-desktop); } } /* END_SNIPPET:slideshow-styles */ /* START_SNIPPET:sorting (INDEX:298) */ .sorting-filter__container { display: flex; align-items: center; justify-content: space-between; padding-inline: var(--drawer-padding) 0; padding-block: var(--padding-sm); margin-inline-end: var(--margin-md); position: relative; } .sorting-filter__container .facets__label { font-size: var(--font-h4--size); } .sorting-filter__select-wrapper { display: flex; position: relative; border-radius: var(--variant-picker-button-radius); align-items: center; overflow: clip; padding: var(--padding-2xs) var(--padding-xs); } .sorting-filter__select-wrapper:has(:focus-visible) { outline: var(--focus-outline-width) solid currentcolor; outline-offset: var(--focus-outline-offset); } .sorting-filter__select-wrapper:has(:focus-visible) .sorting-filter__select { outline: none; } .sorting-filter__container .sorting-filter__select { appearance: none; border: 0; margin: 0; cursor: pointer; width: 100%; padding-inline-end: var(--icon-size-2xs); text-align: end; /* Needed for Safari */ text-align-last: end; } .sorting-filter__select .icon { position: absolute; inset-inline-end: var(--padding-md); top: 50%; transform: translateY(-50%); width: var(--icon-size-2xs); height: var(--icon-size-2xs); pointer-events: none; } .sorting-filter { @media screen and (min-width: 750px) { z-index: var(--facets-upper-z-index); } } .sorting-filter__options { display: grid; grid-template-rows: 0fr; opacity: 0; position: absolute; top: 100%; inset-inline-end: 0; color: var(--color-foreground); z-index: var(--facets-upper-z-index); box-shadow: var(--shadow-popover); border: var(--style-border-popover); background-color: var(--color-background); border-radius: var(--style-border-radius-popover); width: max-content; min-width: var(--facets-panel-min-width); min-height: 0; transition: grid-template-rows var(--animation-speed-slow) var(--animation-easing), opacity var(--animation-speed-slow) var(--animation-easing); } details[open] .sorting-filter__options { opacity: 1; grid-template-rows: 1fr; } .sorting-filter__options-inner { display: flex; flex-direction: column; grid-row: 1 / span 2; gap: var(--gap-sm); padding: calc(var(--drawer-padding) / 2); color: var(--color-foreground); overflow: clip; scrollbar-width: none; -ms-overflow-style: none; &::-webkit-scrollbar { display: none; } @media screen and (min-width: 750px) { gap: 0; } } .sorting-filter__option { cursor: pointer; display: grid; grid-template-columns: var(--icon-size-sm) 1fr; gap: var(--margin-2xs); align-items: center; min-width: 180px; max-width: 16em; padding: var(--padding-2xs) calc(var(--drawer-padding) / 2) var(--padding-2xs) var(--padding-2xs); &:hover { border-radius: calc(var(--style-border-radius-popover) / 2); background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8)); } &:focus { border-radius: calc(var(--style-border-radius-popover) / 2); } } .sorting-filter__input { display: none; &:checked + .sorting-filter__checkmark + .sorting-filter__label { font-weight: 500; } } .sorting-filter__checkmark { visibility: hidden; } *:checked ~ .sorting-filter__checkmark { visibility: visible; } .sorting-filter__label { cursor: pointer; pointer-events: none; } .facets-toggle--no-filters .sorting-filter__select-wrapper { @media screen and (max-width: 749px) { padding-inline-start: 0; } } .facets-mobile-wrapper .sorting-filter .facets__panel { padding-inline: 0; position: relative; } .facets-mobile-wrapper .sorting-filter .facets__status { display: none; } .facets-mobile-wrapper:has(> :nth-child(2)) .sorting-filter .sorting-filter__options { inset-inline-start: 0; inset-inline-end: unset; } .facets-mobile-wrapper .sorting-filter .facets__label { margin-inline-end: var(--margin-2xs); font-size: var(--font-paragraph--size); color: var(--color-foreground-muted); } .facets-toggle .sorting-filter__container { @media screen and (max-width: 749px) { padding: 0; } } .facets-toggle .sorting-filter__container .facets__label { @media screen and (max-width: 749px) { display: none; } } .facets-toggle .sorting-filter::before { @media screen and (max-width: 749px) { display: none; } } .facets--drawer .sorting-filter { @media screen and (min-width: 750px) { display: none; } } /* END_SNIPPET:sorting */ /* START_SNIPPET:summary-icon-styles (INDEX:304) */ details[open] > summary .icon-animated > svg { transform: rotate(180deg); } summary .svg-wrapper { margin-inline-start: auto; height: var(--icon-size-xs); width: var(--icon-size-xs); transition: transform var(--animation-speed) var(--animation-easing); } /* Shared plus/minus icon animations */ summary .icon-plus :is(.horizontal, .vertical) { transition: transform var(--animation-speed) var(--animation-easing); transform: rotate(0deg); transform-origin: 50% 50%; opacity: 1; } details[open] > summary .icon-plus .horizontal { transform: rotate(90deg); } details[open] > summary .icon-plus .vertical { transform: rotate(90deg); opacity: 0; } /* END_SNIPPET:summary-icon-styles */ /* START_SNIPPET:swatch-styles (INDEX:305) */ /* Swatches */ .swatch { --color-border: rgb(var(--color-foreground-rgb) / var(--style-border-swatch-opacity)); --min-width-unitless: 15.9999; /* want to avoid division by 0 */ --min-height-unitless: 15.9999; /* want to avoid division by 0 */ --min-height: 16px; --min-width: 16px; /* mobile values */ --scaling-factor: 0.5; --max-swatch-size: 28px; --max-pill-size: 20px; --max-filter-size: 32px; /* From the settings */ --offset-swatch-width: calc(var(--variant-picker-swatch-width-unitless) - var(--min-width-unitless)); --offset-swatch-height: calc(var(--variant-picker-swatch-height-unitless) - var(--min-height-unitless)); /** Offset values are obtained from the following formulas: offset-width = width - min-width offset-height = height - min-height The offset-scaled-width and heigth are obtained by extending the line from [min,min] to [W,H] and taking the intersection with a square that starts at [min,min] and ends at [max,max]. The extending line forms right angle triangles with the [min,min]->[max,max] box that enable us to derive the following formulas We also want the result to always be smaller than the input (pdp > everywhere else) by some scaling factor. */ --offset-scaled-width: calc( var(--scaling-factor) * var(--offset-swatch-width) / var(--offset-swatch-height) * var(--offset-max-swatch-size) ); --offset-scaled-height: calc( var(--scaling-factor) * var(--offset-swatch-height) / var(--offset-swatch-width) * var(--offset-max-swatch-size) ); --offset-max-swatch-size: calc(var(--max-swatch-size) - var(--min-width)); /* width = min(m + sU, (m + s * W'/H' * M'), M) */ --swatch-width: min( calc(var(--min-width) + var(--scaling-factor) * var(--offset-swatch-width) * 1px), calc(var(--min-width) + var(--offset-scaled-width)), var(--max-swatch-size) ); /* height = min(m + sV, (m + s * H'/W' * M'), M) */ --swatch-height: min( calc(var(--min-height) + var(--scaling-factor) * var(--offset-swatch-height) * 1px), calc(var(--min-height) + var(--offset-scaled-height)), var(--max-swatch-size) ); display: block; background: var(--swatch-background); background-position: var(--swatch-focal-point, center); border-radius: var(--variant-picker-swatch-radius); border: var(--style-border-swatch-width) var(--style-border-swatch-style) var(--color-border); width: var(--swatch-width); height: var(--swatch-height); /* This is different than `background-size: cover` because we use `box-sizing: border-box`, * doing it like makes the background clip under the border without repeating. */ background-size: var(--swatch-width) var(--swatch-height); &.swatch--unavailable { border-style: dashed; } &.swatch--unscaled { /* for when you want fixed sizing (e.g. pdp) */ --swatch-width: var(--variant-picker-swatch-width); --swatch-height: var(--variant-picker-swatch-height); } &.swatch--filter { --swatch-width: var(--max-filter-size); --swatch-height: var(--max-filter-size); border-radius: var(--variant-picker-swatch-radius); } &.swatch--pill { --swatch-width: var(--max-pill-size); --swatch-height: var(--max-pill-size); border-radius: var(--variant-picker-swatch-radius); } /* swatches in filters and pills always have a border */ &.swatch--filter, &.swatch--pill { --style-border-swatch-width: var(--variant-picker-border-width); --style-border-swatch-style: var(--variant-picker-border-style); --color-border: rgb(var(--color-foreground-rgb) / var(--variant-picker-border-opacity)); } &.swatch--variant-image { background-size: cover; } @media screen and (min-width: 750px) { /* desktop values */ --max-swatch-size: 32px; --max-pill-size: 16px; --max-filter-size: 28px; --scaling-factor: 0.65; } } /* END_SNIPPET:swatch-styles */ /* START_SNIPPET:text-block-styles (INDEX:308) */ .text-block { width: var(--width, 100%); } .text-block--align-center, .text-block--align-center > * { margin-inline: auto; } .text-block--align-right, .text-block--align-right > * { margin-inline-start: auto; } .text-block--background { background-color: var(--text-background-color); border-radius: var(--text-corner-radius); /* To avoid text being cropped when using a border radius we add a minimum padding. */ padding-block-start: max(var(--text-padding), var(--padding-block-start, 0)); padding-block-end: max(var(--text-padding), var(--padding-block-end, 0)); padding-inline-start: max(var(--text-padding), var(--padding-inline-start, 0)); padding-inline-end: max(var(--text-padding), var(--padding-inline-end, 0)); } .custom-color, .custom-color > :is(h1, h2, h3, h4, h5, h6, p, *) { color: var(--color); } .text-block:not(.text-block--full-width).rte, .text-block:not(.text-block--full-width).paragraph { /* Safari doesn't support pretty, so fallback to balance */ text-wrap: balance; text-wrap: pretty; } .text-block:not(.text-block--full-width):is(.h1, .h2, .h3, .h4, .h5, .h6) { text-wrap: balance; } /* Hide underline unless text is using paragraph styles. The doubled class beats the global paragraph-link styles in base.css. */ .text-block.text-block:is(.h1, .h2, .h3, .h4, .h5, .h6) a { text-decoration-line: none; color: currentColor; &:hover { text-decoration-line: none; color: currentColor; } } .text-block h1, .text-block.h1 > * { margin-block: var(--font-h1--spacing); } .text-block h2, .text-block.h2 > * { margin-block: var(--font-h2--spacing); } .text-block h3, .text-block.h3 > * { margin-block: var(--font-h3--spacing); } .text-block h4, .text-block.h4 > * { margin-block: var(--font-h4--spacing); } .text-block h5, .text-block.h5 > * { margin-block: var(--font-h5--spacing); } .text-block h6, .text-block.h6 > * { margin-block: var(--font-h6--spacing); } .text-block p, .text-block.p > * { margin-block: var(--font-paragraph--spacing); } /* The doubled class lets these edge resets beat heading/paragraph margins without relying on source order. */ .text-block.text-block > *:last-child, .text-block.text-block > *:has(+ *:last-child:empty) { margin-block-end: 0; } .text-block.text-block > style + *, .text-block.text-block > *:first-child, .text-block.text-block > *:first-child:empty + * { margin-block-start: 0; } /* END_SNIPPET:text-block-styles */ /* START_SNIPPET:text-component-shimmer-styles (INDEX:309) */ text-component { --shimmer-text-color: rgb(var(--color-foreground-rgb) / var(--opacity-50)); --shimmer-color-light: rgb(var(--color-foreground-rgb) / var(--opacity-10)); --shimmer-speed: 1.25s; display: inline-block; position: relative; transition: color var(--animation-speed-slow) ease; line-height: 1; &::after { /* Empty alt text: the pseudo-element is a visual shimmer overlay, not announceable content. Without this, VoiceOver reads attr(value) in addition to the inner text node, doubling the announcement. */ content: attr(value) / ''; unicode-bidi: plaintext; position: absolute; inset: 0; color: transparent; opacity: 0; transition: opacity var(--animation-speed-slow) var(--animation-easing); pointer-events: none; background-image: linear-gradient( -85deg, var(--shimmer-text-color) 10%, var(--shimmer-color-light) 50%, var(--shimmer-text-color) 90% ); background-clip: text; background-size: 200% 100%; background-position: 100% 0; place-content: center; } &[shimmer] { color: transparent; &::after { opacity: 1; animation: text-shimmer var(--shimmer-speed) infinite linear; } } } @keyframes text-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } } /* END_SNIPPET:text-component-shimmer-styles */ /* START_SNIPPET:text (INDEX:310) */ :root { --text-align-default: start; } /* Base text-block sizing, spacing, wrapping, and helper classes live in text-block-styles.liquid. */ .text-block { max-width: 100%; display: flex; flex-direction: column; align-items: var(--horizontal-alignment); color: var(--color, var(--color-foreground)); } [style*='--horizontal-alignment: center'] .text-block { --text-align-default: center; } [style*='--horizontal-alignment: flex-end'] .text-block { --text-align-default: end; } [style*='--horizontal-alignment: flex-start'] > .text-block { --text-align-default: start; } [style*='--horizontal-alignment: center'] > .text-block { --text-align-default: center; } [style*='--horizontal-alignment: flex-end'] > .text-block { --text-align-default: end; } .text-block > * { width: var(--width, 100%); max-inline-size: min(100%, var(--max-width, 100%)); text-align: var(--text-align, var(--text-align-default)); text-wrap: var(--text-wrap); } /* END_SNIPPET:text */ /* START_SNIPPET:theme-drawer-styles (INDEX:312) */ theme-drawer { display: contents; } .theme-drawer__dialog { --theme-drawer-padding: var(--padding-xl); z-index: calc(var(--layer-sticky) + var(--drawer-stack-order, 0)); position: fixed; inset: unset; top: 0; inset-inline-end: calc(-1 * var(--theme-drawer-width, var(--sidebar-width))); flex-direction: column; width: var(--theme-drawer-width, var(--sidebar-width)); max-width: 100%; max-height: none; height: 100dvh; /* Inline-end-anchored drawer spans the full physical viewport (viewport-fit=cover); keep its content clear of the status bar, side notch, and home indicator */ padding-block: var(--safe-area-inset-top) var(--safe-area-inset-bottom); padding-inline: 0 var(--safe-area-inset-right); border: none; border-inline-start: var(--style-border-drawer); background-color: var(--color-background); color: var(--color-foreground); } .theme-drawer__dialog[open] { display: flex; inset-inline-end: 0; } /* Safe-area env() values are physical; in RTL the drawer anchors to the left edge */ [dir='rtl'] .theme-drawer__dialog { padding-inline-end: var(--safe-area-inset-left); } .theme-drawer__dialog--opening { animation: drawer-slide-in var(--animation-speed) var(--animation-timing-fade-in); } .theme-drawer__dialog--opening-inline-start { animation: drawer-slide-in-inline-start var(--animation-speed) var(--animation-timing-fade-in); } .theme-drawer__dialog--closing { animation: drawer-slide-out var(--animation-speed) var(--animation-timing-fade-out) forwards; } .theme-drawer__dialog-instant { animation: none; } @keyframes drawer-slide-in { from { inset-inline-end: calc(-1 * var(--theme-drawer-width, var(--sidebar-width))); } } @keyframes drawer-slide-in-inline-start { from { inset-inline-end: calc(var(--theme-drawer-width, var(--sidebar-width)) / 2); } } @keyframes drawer-slide-out { to { inset-inline-end: calc(-1 * var(--theme-drawer-width, var(--sidebar-width))); } } .theme-drawer__dialog::backdrop { background: rgb(var(--backdrop-color-rgb) / var(--backdrop-opacity)); } /* Exclude open drawers from the page navigation cross-fade so they stay frozen (visually unchanged) while the rest of the page transitions. */ html:active-view-transition-type(page-navigation) .theme-drawer__dialog[open] { view-transition-name: theme-drawer; } ::view-transition-old(theme-drawer), ::view-transition-new(theme-drawer) { animation: none; } .theme-drawer__header { display: flex; align-items: center; justify-content: space-between; padding: var(--theme-drawer-padding); flex-shrink: 0; color: var(--color-foreground); } .theme-drawer__title { display: flex; align-items: center; gap: var(--gap-xs); margin: 0; } .theme-drawer__badge { display: flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; flex-shrink: 0; border-radius: var(--style-border-radius-lg); background-color: rgb(var(--color-foreground-rgb) / 0.1); font-family: var(--font-paragraph--family); font-weight: var(--font-paragraph--weight); color: var(--color-foreground); font-size: clamp(var(--font-size--3xs), 0.75em, var(--font-size--xs)); padding-inline: 0.5em; line-height: 1; } .theme-drawer__badge[data-maintain-ratio] { aspect-ratio: 1 / 1; padding-inline: 0.2em; } .theme-drawer__close-button { --private-button-size: 34px; --private-focus-ring-size: 2px; --private-motion-speed: 150ms; --private-motion-ease: cubic-bezier(0.25, 0, 0.1, 1); --private-border-width: 1px; --private-button-border-color: rgb(0, 0, 0, 0.06); --private-button-shadow: 0 2px 6px 0 var(--private-button-border-color); cursor: pointer; display: flex; align-items: center; justify-content: center; margin-inline-start: auto; width: var(--private-button-size); height: var(--private-button-size); border-radius: var(--private-button-size); background-color: var(--color-background); outline: var(--private-focus-ring-size) solid transparent; outline-offset: var(--private-focus-ring-size); transition-property: color, outline-color, background-color; transition-duration: var(--private-motion-speed); transition-timing-function: var(--private-motion-ease); /* Legacy non-contrast-aware color scheme */ --button-icon-opacity: 0.8; color: var(--color-foreground); border: var(--private-border-width) solid var(--private-button-border-color); box-shadow: var(--private-button-shadow); &:hover:not(:active) { /* Legacy non-contrast-aware color scheme */ --button-icon-opacity: 1; } &:focus-visible { outline-color: var(--color-foreground); } } @supports (color: oklch(from red l c h)) { .theme-drawer__close-button { --contrast-color: oklch(from var(--color-background) clamp(0, (0.6 / l - 1) * infinity, 1) 0 0); --button-icon-opacity: 1; --private-button-border-color: color-mix(in srgb, var(--contrast-color) 6%, transparent); --private-button-shadow: 0 2px 6px 0 var(--private-button-border-color); color: color-mix(in srgb, var(--contrast-color) 50%, transparent); &:hover:not(:active) { color: color-mix(in srgb, var(--contrast-color) 70%, transparent); } } .theme-drawer__close-button:hover:not(:active) { background-color: color-mix(in srgb, var(--contrast-color) 6%, var(--color-background)); } } /* END_SNIPPET:theme-drawer-styles */ /* START_SNIPPET:variant-picker-styles (INDEX:325) */ /* Variant picker container styles - unique to main variant picker */ .variant-picker { width: 100%; } .variant-picker__form { width: 100%; } .variant-picker[data-shopify-visual-preview] { min-width: 300px; padding-inline-start: max(4px, var(--padding-inline-start)); } /* Dropdown variant option styles */ .variant-option__select-wrapper { display: flex; position: relative; border: var(--style-border-width-inputs) solid var(--color-variant-border); border-radius: var(--style-border-radius-inputs); align-items: center; margin-top: var(--margin-2xs); overflow: clip; color: var(--color-variant-text); } .variant-option__select-wrapper:has(.swatch) { --variant-picker-swatch-width: 20px; --variant-picker-swatch-height: 20px; } .variant-option__select-wrapper:hover { border-color: var(--color-variant-hover-border); color: var(--color-variant-hover-text); } .variant-option__select-wrapper:hover .variant-option__select { background-color: var(--color-variant-hover-background); } .variant-option__select:focus-visible { outline: var(--focus-outline-width) solid currentcolor; outline-offset: var(--focus-outline-offset); } .variant-option__select { padding-block: var(--padding-md); padding-inline: var(--padding-lg) calc(var(--padding-lg) + var(--icon-size-2xs)); appearance: none; background-color: var(--color-variant-background); color: inherit; border: 0; width: 100%; margin: 0; cursor: pointer; } .variant-option__select-wrapper .icon { position: absolute; inset-inline-end: var(--padding-md); top: 50%; transform: translateY(-50%); width: var(--icon-size-2xs); height: var(--icon-size-2xs); pointer-events: none; } .variant-option__select--has-swatch { padding-inline-start: calc((2 * var(--padding-sm)) + var(--variant-picker-swatch-width)); } .variant-option__select-wrapper .swatch { position: absolute; top: 50%; inset-inline-start: var(--padding-md); transform: translateY(-50%); } /* Variant picker alignment modifiers */ .variant-picker--center, .variant-picker--center .variant-option { text-align: center; align-items: center; justify-content: center; width: 100%; } .variant-picker--right, .variant-picker--right .variant-option { text-align: end; justify-content: flex-end; } .variant-picker .variant-option--buttons label:has(.swatch) { border-radius: var(--variant-picker-swatch-radius); } /* Variant option component */ .variant-option { --options-border-radius: var(--variant-picker-button-radius); --options-border-width: var(--variant-picker-button-border-width); --variant-option-padding-inline: var(--padding-md); } .variant-option + .variant-option { margin-top: var(--padding-lg); } .variant-option--swatches { --options-border-radius: var(--variant-picker-swatch-radius); width: 100%; overflow-list::part(list) { padding-block: var(--overflow-list-padding-block, 0); padding-inline: var(--overflow-list-padding-inline, 0); } } .variant-option--swatches > overflow-list { justify-content: var(--product-swatches-alignment); @media screen and (max-width: 749px) { justify-content: var(--product-swatches-alignment-mobile); } } .variant-option--buttons { display: flex; flex-wrap: wrap; gap: var(--gap-sm); margin: 0; padding: 0; border: none; } .variant-option--buttons legend { padding: 0; margin-block-end: var(--margin-xs); } .variant-option--buttons legend, .variant-option--dropdowns > label, .variant-option[data-testid='variant-option-single'] { color: var(--variant-option-label-color, var(--color-foreground)); } .variant-option__swatch-value { padding-inline-start: var(--padding-xs); color: var(--variant-option-label-color-subdued, var(--color-foreground-subdued)); } @media (prefers-reduced-motion: no-preference) { .variant-option__button-label, .variant-option__select-wrapper, .variant-option__button-label::before, .variant-option__button-label::after, .variant-option__button-label:has([data-previous-checked='true'], [data-current-checked='true']) .variant-option__button-label__pill { transition-duration: var(--animation-speed); transition-timing-function: var(--animation-easing); } .variant-option__button-label__pill { transition-property: transform; } .variant-option__button-label:has([data-previous-checked='true'], [data-current-checked='true']) .variant-option__button-label__pill { transition-property: transform; } .variant-option__button-label::after { transition-property: clip-path; } .variant-option__button-label::before { transition-property: border-color; } .variant-option__select-wrapper, .variant-option__button-label { transition-property: background-color, border-color, color; } } .variant-option__button-label { --variant-picker-stroke-color: var(--color-variant-border); cursor: pointer; display: flex; flex: 0 0 3.25em; align-items: center; position: relative; padding-block: var(--padding-sm); padding-inline: var(--padding-lg); border: var(--options-border-width) solid var(--color-variant-border); border-radius: var(--options-border-radius); overflow: clip; justify-content: center; min-height: 3.25em; min-width: fit-content; white-space: nowrap; background-color: var(--color-variant-background); color: var(--color-variant-text); gap: 0; &:hover, &:hover:has([aria-disabled='true']):has([data-option-available='false']) { --variant-picker-stroke-color: var(--color-variant-hover-border); background-color: var(--color-variant-hover-background); border-color: var(--color-variant-hover-border); color: var(--color-variant-hover-text); } /* we need something like overflow-clip-margin to use the pseudoelement but it doesn't work in Safari */ /* so instead use the layered background image trick */ &:not(.variant-option__button-label--has-swatch):has([data-option-available='false']) { border-width: 0; } /* ::after/::before act as a fake border for the button style variant */ /* ::after is the unavailable variant border that clips in */ &:not(.variant-option__button-label--has-swatch)::before, &:has([data-option-available='false']):not(.variant-option__button-label--has-swatch)::after { content: ''; position: absolute; inset: 0; border: var(--options-border-width) solid var(--color-selected-variant-border); border-radius: inherit; pointer-events: none; z-index: 2; /* stylelint-disable-next-line plugin/no-unsupported-browser-features */ clip-path: inset(var(--clip, 0 0 0 0)); } &:has([data-option-available='false']):not(.variant-option__button-label--has-swatch)::before { inset: 0; } &:not(.variant-option__button-label--has-swatch)::before { /* stylelint-disable-next-line plugin/no-unsupported-browser-features */ clip-path: inset(0 0 0 0); border-color: var(--color-variant-border); inset: calc(var(--options-border-width) * -1); } &:has(:checked):not(.variant-option__button-label--has-swatch, :has([data-option-available='false']))::before { border-color: var(--color-selected-variant-border); } /* setting left/right accounts for variant buttons of different widths */ &:not(:has(:checked)):has(~ label > :checked), &:has(:checked):has(~ label > [data-previous-checked='true']) { .variant-option__button-label__pill { inset-inline-end: 0; inset-inline-start: unset; } } &:has([data-previous-checked='true']) ~ label:has([data-current-checked='true']), &:has(:checked) ~ label { .variant-option__button-label__pill { inset-inline-start: 0; inset-inline-end: unset; } } &:not(:has(:checked)):has(~ label > :checked) { --pill-offset: calc(100% + 1px); } &:has(:checked) ~ label { --pill-offset: calc(-100% - 1px); } &:has([data-current-checked='true']):first-of-type ~ label:last-of-type:not(.variant-option__button-label--has-swatch), &:not(:has(:checked)):has(~ label > :checked):not(.variant-option__button-label--has-swatch) { --clip: 0 0 0 100%; } &:not(:has([data-current-checked='true'])):first-of-type:has(~ label:last-of-type > :checked):not( .variant-option__button-label--has-swatch ), &:has(:checked) ~ label:not(.variant-option__button-label--has-swatch) { --clip: 0 100% 0 0; } &:has([data-previous-checked='true'], [data-current-checked='true']) .variant-option__button-label__pill { width: max(var(--pill-width-current, 100%), var(--pill-width-previous, 100%)); } @media screen and (min-width: 750px) { padding: var(--padding-xs) var(--variant-option-padding-inline); } } /* wrap around only for 3 or more variants in a row */ /* the more complex selector rules here produce the wrap around effect for first/last variants */ .variant-option--buttons:has(:nth-of-type(3)) { .variant-option__button-label:has([data-current-checked='true']):first-of-type ~ label:last-of-type { --pill-offset: calc(100% + 1px); } .variant-option__button-label:not(:has([data-current-checked='true'])):first-of-type:has( ~ label:last-of-type > :checked ) { --pill-offset: calc(-100% - 1px); } } .variant-option__button-label__pill { background: var(--color-selected-variant-background); position: absolute; top: calc(var(--options-border-width) * -1); bottom: calc(var(--options-border-width) * -1); border-radius: inherit; pointer-events: none; width: 100%; transform: translateX(var(--pill-offset, 0)); } /* The pill travels along the inline axis; translateX is physical, so the sign inverts in RTL */ [dir='rtl'] .variant-option__button-label__pill { transform: translateX(calc(-1 * var(--pill-offset, 0px))); } .variant-option__button-label__text { pointer-events: none; text-align: start; text-wrap: auto; z-index: 2; } .variant-option--equal-width-buttons { --variant-min-width: clamp(44px, calc(var(--variant-option-padding-inline) * 2 + var(--variant-ch)), 100%); display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--variant-min-width), 1fr)); .variant-option__button-label { min-width: var(--variant-min-width); } .variant-option__button-label__text { text-align: center; text-wrap: balance; } } .variant-option__button-label:has(:focus-visible) { --variant-picker-stroke-color: var(--color-foreground); border-color: var(--color-foreground); outline: var(--focus-outline-width) solid var(--color-foreground); outline-offset: var(--focus-outline-offset); } .variant-option__button-label--has-swatch { --focus-outline-radius: var(--variant-picker-swatch-radius); padding: 0; border: none; flex-basis: auto; min-height: auto; } .variant-option__button-label:has(:checked) { --variant-picker-stroke-color: var(--color-selected-variant-border); color: var(--color-selected-variant-text); border-color: var(--color-selected-variant-border); } .variant-option__button-label:has(:checked):hover { border-color: var(--color-selected-variant-hover-border); color: var(--color-selected-variant-hover-text); .variant-option__button-label__pill { background-color: var(--color-selected-variant-hover-background); } } .variant-option__button-label:has([data-option-available='false']) { color: rgb(var(--color-variant-text-rgb) / var(--opacity-60)); } .variant-option__button-label--has-swatch:hover { outline: var(--focus-outline-width) solid var(--color-variant-hover-border); outline-offset: var(--focus-outline-offset); } .variant-option__button-label--has-swatch:has([data-option-available='false']) svg, .variant-option__button-label--has-swatch:has([data-option-available='false']) .swatch { stroke: rgb(var(--color-variant-text-rgb) / var(--opacity-subdued-text)); } /* Disable the duplicate overlay line so the subdued stroke doesn't double up */ .variant-option__button-label--has-swatch:has([data-option-available='false']) svg line:last-of-type { stroke: none; } .variant-option__button-label--has-swatch:has(:checked) { --focus-outline: var(--focus-outline-width) solid var(--color-selected-variant-border); outline: var(--focus-outline); outline-offset: var(--focus-outline-offset); } /* This triggers iOS < 16.4. The outline bug is not recognized as a lack of @supports */ @supports not (background-color: rgb(from red 150 g b / alpha)) { /** There is a bug in safari < 16.4 that causes the outline to not follow the elements border radius. This is a workaround. **/ .variant-option__button-label--has-swatch:has(:checked), .variant-option__button-label:has(:focus-visible) .swatch { outline: none; position: relative; overflow: visible; } .variant-option__button-label--has-swatch:has(:checked)::after, .variant-option__button-label:has(:focus-visible) .swatch::after { content: ''; position: absolute; inset: calc(-1 * var(--focus-outline-offset)); border: var(--focus-outline); border-radius: var(--focus-outline-radius, 50%); background-color: transparent; display: inherit; } } .variant-option__button-label:has([data-option-available='false']):has(:checked) { --variant-strikethrough-color: rgb(var(--color-selected-variant-text-rgb) / var(--opacity-subdued-text)); background-color: var(--color-selected-variant-background); color: rgb(var(--color-selected-variant-text-rgb) / var(--opacity-subdued-text)); } .variant-option__button-label:has([data-option-available='false']):has(:checked):hover { background-color: var(--color-selected-variant-hover-background); color: var(--color-selected-variant-hover-text); } .variant-option__button-label input { /* remove the checkbox from the page flow */ position: absolute; /* set the dimensions to match those of the label */ inset: 0; /* hide it */ opacity: 0; margin: 0; padding: 0; width: 100%; height: 100%; aspect-ratio: unset; border: none; border-radius: 0; background: transparent; appearance: auto; display: block; cursor: pointer; } .variant-option__button-label svg { position: absolute; inset-inline-start: var(--options-border-width); top: var(--options-border-width); height: calc(100% - (var(--options-border-width) * 2)); width: calc(100% - (var(--options-border-width) * 2)); cursor: pointer; pointer-events: none; stroke-width: var(--style-border-width); stroke: var(--variant-picker-stroke-color); } .variant-option__button-label:not(.variant-option__button-label--has-swatch) svg { stroke: var(--variant-strikethrough-color, rgb(var(--color-variant-text-rgb) / var(--opacity-60))); line { stroke-width: var(--options-border-width); } /* The second stroke line exists for "motion overlay". Disabled for swatches, remove line to avoid overlapping lines */ line:last-of-type { stroke: none; } } /* The strike diagonal and its clip-path reveal are drawn in physical coordinates; mirror both in RTL */ [dir='rtl'] .variant-option__strikethrough { transform: scaleX(-1); } [dir='rtl'] .variant-option__button-label:has([data-option-available='false'])::after { transform: scaleX(-1); } /* Override for swatch labels to maintain block display */ .variant-option__button-label--has-swatch:has(input[type='radio']) { display: block; } /* Swatches do not take a background-color since a transparent or missing swatch would end up filled */ .variant-option__button-label--has-swatch:has([data-option-available='false']):has(:checked), .variant-option__button-label--has-swatch:has([data-option-available='false']):has(:checked):hover { background-color: inherit; } /* END_SNIPPET:variant-picker-styles */ /* START_SNIPPET:variant-swatches (INDEX:326) */ swatches-variant-picker-component { display: flex; width: 100%; flex-direction: row; justify-content: var(--product-swatches-alignment-mobile); @media screen and (min-width: 750px) { justify-content: var(--product-swatches-alignment); } --overflow-list-padding-block: calc( var(--product-swatches-padding-block-start) + var(--focus-outline-offset) + var(--focus-outline-width) ) calc(var(--product-swatches-padding-block-end) + var(--focus-outline-offset) + var(--focus-outline-width)); --overflow-list-padding-inline: calc( var(--product-swatches-padding-inline-start) + var(--focus-outline-offset) + (1.5 * var(--focus-outline-width)) ) calc(var(--product-swatches-padding-inline-end) + var(--focus-outline-offset) + var(--focus-outline-width)); overflow-list::part(list) { gap: var(--gap-sm); } } swatches-variant-picker-component overflow-list[disabled='true'] { --overflow-list-padding-block: 0px; margin-block-start: calc( var(--product-swatches-padding-block-start) + var(--focus-outline-offset) + var(--focus-outline-width) ); margin-block-end: calc( var(--product-swatches-padding-block-end) + var(--focus-outline-offset) + var(--focus-outline-width) ); } .hidden-swatches__count { display: flex; align-self: center; align-items: center; justify-content: center; color: rgb(var(--color-foreground-rgb) / var(--opacity-40-60)); background-color: transparent; padding: 0; border: 0; border-radius: 0; &::before { /* This doesn't work in Safari without the counter-reset. https://stackoverflow.com/a/40179718 */ counter-reset: overflow-count var(--overflow-count); content: '+' counter(overflow-count); line-height: 1; cursor: pointer; } } .hidden-swatches__count:hover { color: var(--color-foreground-rgb); } /* END_SNIPPET:variant-swatches */ /* START_SNIPPET:video-background-styles (INDEX:327) */ .video-background, .video-background * { position: absolute; top: 0; inset-inline-start: 0; width: 100%; height: 100%; overflow: hidden; } .video-background--cover * { object-fit: cover; } .video-background--contain * { object-fit: contain; } @media (prefers-reduced-motion: reduce) { video-background-component video { display: none; } } /* END_SNIPPET:video-background-styles */ /* START_SNIPPET:video-placeholder-styles (INDEX:328) */ .video-placeholder-wrapper { position: relative; width: 100%; height: 100%; aspect-ratio: var(--size-style-aspect-ratio, auto); } :not(deferred-media) > .video-placeholder-wrapper { width: var(--video-placeholder-width); } .video-placeholder-wrapper > * { width: 100%; height: 100%; object-fit: cover; object-position: center; } .video-placeholder-wrapper.border-style { /* Apply the border radius to the video */ overflow: hidden; } .video-placeholder-wrapper__poster-icon { position: absolute; top: 50%; left: 50%; /* stylelint-disable-line csstools/use-logical -- centring pair with a physical translate(-50%) */ transform: translate(-50%, -50%); border-radius: 50%; display: flex; align-items: center; justify-content: center; } .video-placeholder-wrapper__poster-icon svg { width: var(--button-size); height: var(--button-size); color: var(--color-white); filter: drop-shadow(var(--shadow-button)); &:hover { color: rgb(var(--color-white-rgb) / var(--opacity-80)); } @media screen and (min-width: 750px) { width: 4rem; height: 4rem; } } /* END_SNIPPET:video-placeholder-styles */ /* START_SNIPPET:volume-pricing-info (INDEX:331) */ .volume-pricing-info { display: inline-flex; } .volume-pricing-info__button { display: inline-flex; align-items: center; justify-content: center; width: var(--minimum-touch-target); height: var(--minimum-touch-target); color: var(--color-foreground-secondary); cursor: pointer; transition: color var(--animation-speed) var(--animation-easing); flex-shrink: 0; } .volume-pricing-info__button:hover { color: var(--color-foreground); } .volume-pricing-info__button .svg-wrapper { width: var(--icon-size-sm); height: var(--icon-size-sm); } .volume-pricing-info__button--with-label { width: auto; gap: var(--gap-sm); } .volume-pricing-info__popover { --volume-pricing-popover-max-width: 320px; --volume-pricing-popover-spacing: 8px; --volume-pricing-popover-viewport-margin: 16px; min-inline-size: 280px; max-inline-size: var(--volume-pricing-popover-max-width); background: var(--color-background); border: var(--style-border-popover); border-radius: var(--style-border-radius-popover, 0); box-shadow: var(--shadow-popover); overflow: hidden; padding: 0; margin: 0; transition-property: display, opacity, translate; transition-duration: 0.3s; transition-timing-function: var(--ease-out-quad); transition-behavior: allow-discrete; translate: 0 20px; opacity: 0; } /* Native anchor positioning for supported browsers */ .volume-pricing-info__popover { inset: unset; top: calc(anchor(bottom) + var(--volume-pricing-popover-spacing)); inset-inline-start: anchor(start); } @supports (position-try-fallbacks: --top-left) { .volume-pricing-info__popover { position-try-fallbacks: --top-left; } @position-try --top-left { top: calc(anchor(top) - var(--volume-pricing-popover-spacing)); bottom: auto; transform: translateY(-100%); } } /* Fallback positioning using custom properties */ @supports not (position-anchor: --volume-pricing-trigger) { .volume-pricing-info__popover { position: fixed; top: calc(var(--anchor-bottom) * 1px + var(--volume-pricing-popover-spacing)); inset-inline-start: max( var(--volume-pricing-popover-viewport-margin), min( var(--anchor-inline-start) * 1px, 100vw - var(--volume-pricing-popover-max-width) - var(--volume-pricing-popover-viewport-margin) ) ); } } .volume-pricing-info__popover:popover-open { translate: 0 0; opacity: 1; } @starting-style { .volume-pricing-info__popover:popover-open { translate: 0 20px; opacity: 0; } } .volume-pricing-info__rules { display: flex; flex-direction: column; gap: var(--gap-2xs); padding: var(--padding-md); font-size: var(--font-size--xs); } .volume-pricing-info__rules, .volume-pricing-info__rules > span { color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text)); } .volume-pricing-info__table { display: flex; flex-direction: column; } .volume-pricing-info__row { display: flex; justify-content: space-between; align-items: center; padding: var(--padding-sm) var(--padding-md); font-size: var(--font-size--sm); background: var(--color-background); border-inline-start: 3px solid transparent; transition: border-color var(--animation-speed) var(--animation-easing); } .volume-pricing-info__row:nth-child(odd) { background: rgb(var(--color-foreground-rgb) / var(--opacity-5)); } .volume-pricing-info__row--active { border-inline-start-color: var(--color-foreground); font-weight: var(--font-weight-medium); } .volume-pricing-info__quantity { color: var(--color-foreground); } .volume-pricing-info__price { display: flex; align-items: center; color: var(--color-foreground); } .volume-pricing-info__checkmark { display: none; width: var(--icon-size-sm); height: var(--icon-size-sm); color: var(--color-foreground); } .volume-pricing-info__row--active .volume-pricing-info__checkmark { display: inline-flex; align-items: center; justify-content: center; } /* END_SNIPPET:volume-pricing-info */