/** Shopify CDN: Minification failed Line 142:13 Expected identifier but found whitespace Line 142:15 Unexpected "{" Line 142:31 Expected ":" Line 142:47 Expected ":" Line 304:15 Expected identifier but found whitespace Line 304:17 Unexpected "{" Line 304:33 Expected ":" Line 304:49 Expected ":" **/ /* START_SECTION:product-information (INDEX:32) */ @media screen and (min-width:990px){.product-information,.product-information__grid{overflow:visible !important;contain:none !important;}.product-information__grid{align-items:start !important;column-gap:40px !important;row-gap:0 !important;grid-template-columns:minmax(0,60%) minmax(0,40%) !important;}.product-information__grid.product-information--media-left .product-information__media{position:relative !important;top:auto !important;align-self:start !important;max-height:none !important;height:auto !important;overflow:visible !important;z-index:1 !important;}.product-information__media product-media-gallery,.product-information__media .product-media-gallery,.product-information__media media-gallery{width:100% !important;max-width:none !important;}.product-information__media .product-media-gallery__grid,.product-information__media .product-media-gallery__media-list,.product-information__media .media-gallery__grid,.product-information__media ul[role='list']{display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:12px !important;align-items:start !important;}.product-information__media .product-media-container,.product-information__media .product-media-gallery__media,.product-information__media .media-gallery__item,.product-information__media li[data-media-id]{width:100% !important;max-width:none !important;margin:0 !important;padding:0 !important;grid-column:auto !important;}.product-information__media .product-media,.product-information__media .product-media-container,.product-information__media .product-media-gallery__media,.product-information__media .media-gallery__item{background:#fafafa !important;border:1px solid #e7e7e7 !important;border-radius:8px !important;overflow:hidden !important;}.product-information__media .product-media img,.product-information__media .product-media-container img,.product-information__media .product-media-gallery__media img,.product-information__media .media-gallery__item img{display:block !important;width:100% !important;height:auto !important;aspect-ratio:1 / 1 !important;object-fit:contain !important;object-position:center !important;margin:0 !important;}.product-information__media video,.product-information__media iframe,.product-information__media model-viewer{width:100% !important;aspect-ratio:1 / 1 !important;object-fit:contain !important;}.product-information__media .slideshow-controls,.product-information__media .slideshow-control,.product-information__media .slider-buttons,.product-information__media .thumbnail-list,.product-information__media .product-media-gallery__thumbnails{display:none !important;}.product-information__grid.product-information--media-left .product-details{width:100% !important;max-width:none !important;padding-inline:8px !important;box-sizing:border-box !important;position:sticky !important;position:-webkit-sticky !important;top:auto !important;bottom:20px !important;align-self:start !important;max-height:none !important;overflow:visible !important;transform:none !important;}.product-information__grid.product-information--media-left .product-details>.group-block{position:relative !important;top:auto !important;max-height:none !important;overflow:visible !important;transform:none !important;}}@media screen and (min-width:750px) and (max-width:989px){.product-information,.product-information__grid{overflow:visible !important;contain:none !important;}.product-information__grid{align-items:start !important;column-gap:28px !important;}.product-information__media{position:relative !important;top:auto !important;max-height:none !important;overflow:visible !important;}.product-information__media .product-media-gallery__grid,.product-information__media .product-media-gallery__media-list,.product-information__media .media-gallery__grid,.product-information__media ul[role='list']{display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:10px !important;}.product-information__media .product-media,.product-information__media .product-media-container,.product-information__media .product-media-gallery__media,.product-information__media .media-gallery__item{background:#fafafa !important;border:1px solid #e7e7e7 !important;border-radius:8px !important;overflow:hidden !important;}.product-information__media img{width:100% !important;height:auto !important;aspect-ratio:1 / 1 !important;object-fit:contain !important;}.product-information__grid.product-information--media-left .product-details{width:100% !important;max-width:none !important;padding-inline:8px !important;box-sizing:border-box !important;position:sticky !important;top:auto !important;bottom:16px !important;align-self:start !important;}}@media screen and (max-width:749px){.product-information__media,.product-information__grid .product-details,.product-information__grid .product-details>.group-block{position:static !important;top:auto !important;left:auto !important;right:auto !important;bottom:auto !important;max-height:none !important;overflow:visible !important;transform:none !important;}}.sticky-add-to-cart__bar{position:fixed;bottom:20px;left:50%;opacity:0;transform:translateX(-50%) translateY(calc(100% + 40px));z-index:calc(var(--layer-sticky) - 1);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);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-left: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;}.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;}@media screen and (max-width:749px){.sticky-add-to-cart__bar{bottom:0;width:100%;max-width:none;border-radius:0;&::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-left: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;}}@media screen and (max-width:389px){.sticky-add-to-cart__bar{.compare-at-price{display:none;}}.sticky-add-to-cart__title{display:none;}.sticky-add-to-cart__info[data-singleton='true'] .sticky-add-to-cart__title{display:block;}.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;}}@media screen and (min-width:990px){.product-information__grid.product-information--media-left{grid-template-columns:minmax(0,60%) minmax(0,40%) !important;column-gap:32px !important;align-items:start !important;}.product-information__grid.product-information--media-left .product-information__media{width:100% !important;min-width:0 !important;}.product-information__media .product-media-gallery__grid,.product-information__media .product-media-gallery__media-list,.product-information__media .media-gallery__grid,.product-information__media ul[role='list']{display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:12px !important;width:100% !important;margin:0 !important;padding:0 !important;}.product-information__media .product-media-container,.product-information__media .product-media-gallery__media,.product-information__media .media-gallery__item,.product-information__media li[data-media-id]{width:100% !important;min-width:0 !important;max-width:none !important;margin:0 !important;padding:0 !important;grid-column:auto !important;aspect-ratio:1/1 !important;background:#fafafa !important;border:1px solid #e7e7e7 !important;border-radius:8px !important;overflow:hidden !important;}.product-information__media .product-media,.product-information__media .product-media-container>*,.product-information__media .product-media-gallery__media>*,.product-information__media .media-gallery__item>*{width:100% !important;height:100% !important;min-height:0 !important;}.product-information__media img,.product-information__media video,.product-information__media iframe,.product-information__media model-viewer{display:block !important;width:100% !important;height:100% !important;aspect-ratio:1/1 !important;object-fit:contain !important;object-position:center !important;margin:0 !important;}.product-information__grid.product-information--media-left .product-details{width:100% !important;max-width:none !important;min-width:0 !important;box-sizing:border-box !important;}}@media screen and (min-width:990px){.product-information,.product-information__grid,.product-information__grid.product-information--media-left{overflow:visible!important;overflow-x:visible!important;overflow-y:visible!important;contain:none!important;}.product-information__grid.product-information--media-left{display:grid!important;grid-template-columns:minmax(0,calc(60% - 16px)) minmax(0,calc(40% - 16px))!important;column-gap:32px!important;align-items:start!important;position:relative!important;}.product-information__grid.product-information--media-left .product-information__media{width:100%!important;min-width:0!important;}.product-information__grid.product-information--media-left .product-details{position:-webkit-sticky!important;position:sticky!important;top:20px!important;bottom:auto!important;left:auto!important;right:auto!important;align-self:start!important;width:100%!important;min-width:0!important;max-width:100%!important;margin:0!important;padding-left:0!important;padding-right:0!important;box-sizing:border-box!important;transform:none!important;translate:none!important;scale:1!important;transition:none!important;animation:none!important;will-change:auto!important;z-index:10!important;}.product-information__grid.product-information--media-left .product-details>.group-block{position:static!important;width:100%!important;min-width:0!important;max-width:100%!important;margin:0!important;box-sizing:border-box!important;transform:none!important;translate:none!important;scale:1!important;transition:none!important;animation:none!important;}.sgj-lock-placeholder,.sgj-details-placeholder{display:none!important;}}@media screen and (min-width:990px){.sgj-hard-placeholder{display:none!important;}.product-information__grid.product-information--media-left .product-details{position:-webkit-sticky!important;position:sticky!important;top:20px!important;bottom:auto!important;overflow-anchor:none!important;}.product-information__grid.product-information--media-left .product-details>.group-block{overflow-anchor:none!important;}}@media screen and (max-width:749px){.product-information__media.sgj-mobile-ready>*:not(.sgj-mobile-gallery){display:none!important}.product-information__media.sgj-mobile-ready{display:block!important;margin:0 0 8px!important;padding:0!important;overflow:visible!important}.sgj-mobile-gallery{display:block!important;width:100%!important;margin:0!important;padding:0 9px!important;box-sizing:border-box!important}.sgj-mobile-main{position:relative!important;display:flex!important;width:100%!important;aspect-ratio:1/1!important;align-items:center!important;justify-content:center!important;overflow:hidden!important;background:#fafafa!important;border:1px solid #e7e7e7!important;border-radius:8px!important;touch-action:pan-y!important;cursor:zoom-in!important}.sgj-mobile-main img{display:block!important;width:100%!important;height:100%!important;object-fit:contain!important;object-position:center!important;transform:translate3d(0,0,0) scale(1);transform-origin:center center;transition:transform .18s ease;will-change:transform}.sgj-mobile-main.sgj-zoomed{touch-action:none!important;cursor:zoom-out!important}.sgj-mobile-main.sgj-zoomed img{transition:none}.sgj-mobile-zoom-icon{position:absolute;right:10px;bottom:10px;width:34px;height:34px;border:0;border-radius:50%;background:rgba(255,255,255,.94);box-shadow:0 1px 5px rgba(0,0,0,.16);display:flex;align-items:center;justify-content:center;font-size:19px;z-index:5;pointer-events:none}.sgj-mobile-thumbs-wrap{position:relative!important;width:82%!important;margin:8px auto 0!important;padding:0!important}.sgj-mobile-thumbs{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:6px!important;width:100%!important}.sgj-mobile-thumb{display:none!important;width:100%!important;aspect-ratio:1/1!important;padding:0!important;margin:0!important;border:1px solid #ddd!important;border-radius:5px!important;overflow:hidden!important;background:#fafafa!important;box-sizing:border-box!important}.sgj-mobile-thumb.sgj-visible{display:block!important}.sgj-mobile-thumb.sgj-active{border:2px solid #111!important}.sgj-mobile-thumb img{display:block!important;width:100%!important;height:100%!important;object-fit:contain!important}.sgj-mobile-arrow{position:absolute!important;top:50%!important;transform:translateY(-50%)!important;width:28px!important;height:34px!important;padding:0!important;border:1px solid #ddd!important;border-radius:50%!important;background:rgba(255,255,255,.96)!important;color:#111!important;display:flex!important;align-items:center!important;justify-content:center!important;font-size:22px!important;line-height:1!important;z-index:20!important;box-shadow:0 1px 5px rgba(0,0,0,.16)!important}.sgj-mobile-prev{left:4px!important}.sgj-mobile-next{right:4px!important}.sgj-mobile-gallery.sgj-four-or-less .sgj-mobile-arrow{display:none!important}.product-information__grid .product-details{margin-top:8px!important}}@media screen and (min-width:750px){.sgj-mobile-gallery{display:none!important}} /* END_SECTION:product-information */ /* START_BLOCK:_product-details (INDEX:86) */ @media screen and (max-width:749px){.product-information.section--page-width .product-details>.group-block{padding-inline:0}}.view-product-title{display:none}.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:add-to-cart (INDEX:97) */ /* MAIN EMAIL BUTTON */ .sgj-email-inquiry-btn { width: 100%; height: 38px; display: flex; align-items: center; justify-content: center; gap: 12px; background: #ffffff; color: #000000 !important; border: 1px solid #151515; border-radius: 6px; text-decoration: none; font-size: 16px; font-weight: 600; letter-spacing: .5px; transition: background .3s ease, color .3s ease, border-color .3s ease, transform .3s ease, box-shadow .3s ease; box-shadow: 0 8px 20px rgba(0,0,0,.12); box-sizing: border-box; } /* TEXT */ .sgj-email-text { color: #000000 !important; transition: color .3s ease; } /* EMAIL ICON */ .sgj-email-icon { width: 24px; height: 24px; flex: 0 0 24px; color: #000000; transition: color .3s ease; } /* HOVER */ .sgj-email-inquiry-btn:hover { background: #000000; color: #ffffff !important; border-color: #000000; transform: translateY(-2px); box-shadow: 0 12px 25px rgba(0,0,0,.30); } .sgj-email-inquiry-btn:hover .sgj-email-text { color: #ffffff !important; } .sgj-email-inquiry-btn:hover .sgj-email-icon { color: #ffffff; } /* MOBILE */ @media (max-width: 749px) { .sgj-email-inquiry-btn { height: 52px; font-size: 15px; gap: 10px; } .sgj-email-icon { width: 22px; height: 22px; flex-basis: 22px; } } /* END_BLOCK:add-to-cart */ /* START_BLOCK:buy-buttons (INDEX:114) */ /* ========================================================= WHATSAPP + EMAIL BUTTONS — SMALL + EXACT SAME SIZE WhatsApp on left, Email on right. ========================================================= */ /* Two equal columns */ .product-form-buttons { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; column-gap: {{ block_settings.button_gap }}px !important; row-gap: 0 !important; align-items: stretch !important; width: 100% !important; } /* Both wrappers must fill their own equal grid column */ .product-form-buttons .sgj-whatsapp-wrapper, .product-form-buttons .sgj-email-inquiry-wrapper { display: block !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* EXACT same small width + height for both buttons. Includes both possible Email button class names. */ .product-form-buttons .sgj-whatsapp-inquire-btn, .product-form-buttons .sgj-email-inquiry-btn, .product-form-buttons .sgj-email-inquiry-button { width: 100% !important; min-width: 0 !important; max-width: 100% !important; height: 34px !important; min-height: 34px !important; max-height: 34px !important; margin: 0 !important; padding: 0 10px !important; box-sizing: border-box !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; font-size: 13px !important; line-height: 1 !important; border-radius: 5px !important; } /* Remove extra margins from child blocks */ .product-form-buttons > * { margin-block-start: 0 !important; margin-block-end: 0 !important; } /* WhatsApp text */ .product-form-buttons .sgj-whatsapp-inquire-btn .sgj-inquire-text { font-size: 13px !important; line-height: 1 !important; } /* Email text — works with both Email class versions */ .product-form-buttons .sgj-email-inquiry-btn .sgj-email-text, .product-form-buttons .sgj-email-inquiry-button .sgj-email-text { font-size: 13px !important; line-height: 1 !important; } /* Keep both icons exactly same size */ .product-form-buttons .sgj-whatsapp-icon, .product-form-buttons .sgj-email-icon, .product-form-buttons .sgj-email-icon svg { width: 19px !important; height: 19px !important; min-width: 19px !important; flex: 0 0 19px !important; } /* Mobile — SAME size as desktop, still side by side */ @media screen and (max-width: 749px) { .product-form-buttons { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; column-gap: {{ block_settings.button_gap }}px !important; row-gap: 0 !important; } .product-form-buttons .sgj-whatsapp-inquire-btn, .product-form-buttons .sgj-email-inquiry-btn, .product-form-buttons .sgj-email-inquiry-button { height: 34px !important; min-height: 34px !important; max-height: 34px !important; padding: 0 7px !important; gap: 5px !important; font-size: 13px !important; } .product-form-buttons .sgj-whatsapp-inquire-btn .sgj-inquire-text, .product-form-buttons .sgj-email-inquiry-btn .sgj-email-text, .product-form-buttons .sgj-email-inquiry-button .sgj-email-text { font-size: 13px !important; } .product-form-buttons .sgj-whatsapp-icon, .product-form-buttons .sgj-email-icon, .product-form-buttons .sgj-email-icon svg { width: 18px !important; height: 18px !important; min-width: 18px !important; flex-basis: 18px !important; } } /* ========================================================= COLLECTION CARD: WHATSAPP FIRST + EMAIL SECOND ========================================================= */ .product-form-buttons .sgj-collection-whatsapp{ grid-column:1!important; order:-10!important; display:flex!important; align-items:center!important; justify-content:center!important; width:100%!important; min-width:0!important; max-width:100%!important; height:34px!important; min-height:34px!important; max-height:34px!important; margin:0!important; padding:0 8px!important; gap:6px!important; box-sizing:border-box!important; border:1px solid #111!important; border-radius:5px!important; background:#fff!important; color:#111!important; text-decoration:none!important; font-size:13px!important; line-height:1!important; font-weight:500!important; } .product-form-buttons .sgj-collection-whatsapp:hover{ background:#f7f7f7!important; color:#111!important; } .product-form-buttons .sgj-collection-whatsapp .sgj-whatsapp-icon{ width:18px!important; height:18px!important; min-width:18px!important; flex:0 0 18px!important; color:#25D366!important; } .product-form-buttons .sgj-collection-whatsapp .sgj-inquire-text{ font-size:13px!important; line-height:1!important; white-space:nowrap!important; } /* ========================================================= BUTTON TEXT = SAME AS PRODUCT DETAIL/TITLE TEXT Poppins + normal weight + dark text ========================================================= */ .product-form-buttons .sgj-whatsapp-inquire-btn, .product-form-buttons .sgj-email-inquiry-btn, .product-form-buttons .sgj-email-inquiry-button, .product-form-buttons .sgj-collection-whatsapp { font-family: Poppins, Arial, sans-serif !important; font-size: 15px !important; font-weight: 400 !important; line-height: 1.25 !important; letter-spacing: 0 !important; text-transform: none !important; color: #333333 !important; -webkit-text-stroke: 0 !important; text-shadow: none !important; } .product-form-buttons .sgj-whatsapp-inquire-btn .sgj-inquire-text, .product-form-buttons .sgj-email-inquiry-btn .sgj-email-text, .product-form-buttons .sgj-email-inquiry-button .sgj-email-text, .product-form-buttons .sgj-collection-whatsapp .sgj-inquire-text { font-family: Poppins, Arial, sans-serif !important; font-size: 15px !important; font-weight: 400 !important; line-height: 1.25 !important; letter-spacing: 0 !important; text-transform: none !important; color: #333333 !important; -webkit-text-stroke: 0 !important; text-shadow: none !important; white-space: nowrap !important; } @media screen and (max-width: 989px) { .product-form-buttons .sgj-whatsapp-inquire-btn, .product-form-buttons .sgj-email-inquiry-btn, .product-form-buttons .sgj-email-inquiry-button, .product-form-buttons .sgj-collection-whatsapp, .product-form-buttons .sgj-whatsapp-inquire-btn .sgj-inquire-text, .product-form-buttons .sgj-email-inquiry-btn .sgj-email-text, .product-form-buttons .sgj-email-inquiry-button .sgj-email-text, .product-form-buttons .sgj-collection-whatsapp .sgj-inquire-text { font-size: 14px !important; font-weight: 400 !important; } } @media screen and (max-width: 749px) { .product-form-buttons .sgj-whatsapp-inquire-btn, .product-form-buttons .sgj-email-inquiry-btn, .product-form-buttons .sgj-email-inquiry-button, .product-form-buttons .sgj-collection-whatsapp, .product-form-buttons .sgj-whatsapp-inquire-btn .sgj-inquire-text, .product-form-buttons .sgj-email-inquiry-btn .sgj-email-text, .product-form-buttons .sgj-email-inquiry-button .sgj-email-text, .product-form-buttons .sgj-collection-whatsapp .sgj-inquire-text { font-size: 13px !important; font-weight: 400 !important; } } /* ========================================================= WHATSAPP HOVER FIX On mouse hover, text stays visible and becomes black ========================================================= */ .product-form-buttons .sgj-whatsapp-inquire-btn:hover, .product-form-buttons .sgj-collection-whatsapp:hover, .product-form-buttons .sgj-whatsapp-inquire-btn:focus, .product-form-buttons .sgj-collection-whatsapp:focus, .product-form-buttons .sgj-whatsapp-inquire-btn:focus-visible, .product-form-buttons .sgj-collection-whatsapp:focus-visible { background: #ffffff !important; color: #000000 !important; border-color: #111111 !important; } /* Force WhatsApp text to black on hover/focus */ .product-form-buttons .sgj-whatsapp-inquire-btn:hover .sgj-inquire-text, .product-form-buttons .sgj-collection-whatsapp:hover .sgj-inquire-text, .product-form-buttons .sgj-whatsapp-inquire-btn:focus .sgj-inquire-text, .product-form-buttons .sgj-collection-whatsapp:focus .sgj-inquire-text, .product-form-buttons .sgj-whatsapp-inquire-btn:focus-visible .sgj-inquire-text, .product-form-buttons .sgj-collection-whatsapp:focus-visible .sgj-inquire-text { color: #000000 !important; } /* Keep WhatsApp icon green */ .product-form-buttons .sgj-whatsapp-inquire-btn:hover .sgj-whatsapp-icon, .product-form-buttons .sgj-collection-whatsapp:hover .sgj-whatsapp-icon, .product-form-buttons .sgj-whatsapp-inquire-btn:focus .sgj-whatsapp-icon, .product-form-buttons .sgj-collection-whatsapp:focus .sgj-whatsapp-icon, .product-form-buttons .sgj-whatsapp-inquire-btn:focus-visible .sgj-whatsapp-icon, .product-form-buttons .sgj-collection-whatsapp:focus-visible .sgj-whatsapp-icon { color: #25D366 !important; } /* ========================================================= WHATSAPP NORMAL + HOVER STYLE Normal: white background, dark text, green icon Hover: black background, white text, green icon ========================================================= */ /* NORMAL STATE */ .product-form-buttons .sgj-whatsapp-inquire-btn, .product-form-buttons .sgj-collection-whatsapp { background: #ffffff !important; color: #333333 !important; border: 1px solid #111111 !important; } .product-form-buttons .sgj-whatsapp-inquire-btn .sgj-inquire-text, .product-form-buttons .sgj-collection-whatsapp .sgj-inquire-text { color: #333333 !important; } .product-form-buttons .sgj-whatsapp-inquire-btn .sgj-whatsapp-icon, .product-form-buttons .sgj-collection-whatsapp .sgj-whatsapp-icon { color: #25D366 !important; } /* HOVER / MOUSE POINTER STATE */ .product-form-buttons .sgj-whatsapp-inquire-btn:hover, .product-form-buttons .sgj-collection-whatsapp:hover, .product-form-buttons .sgj-whatsapp-inquire-btn:focus-visible, .product-form-buttons .sgj-collection-whatsapp:focus-visible { background: #000000 !important; color: #ffffff !important; border-color: #000000 !important; } .product-form-buttons .sgj-whatsapp-inquire-btn:hover .sgj-inquire-text, .product-form-buttons .sgj-collection-whatsapp:hover .sgj-inquire-text, .product-form-buttons .sgj-whatsapp-inquire-btn:focus-visible .sgj-inquire-text, .product-form-buttons .sgj-collection-whatsapp:focus-visible .sgj-inquire-text { color: #ffffff !important; } .product-form-buttons .sgj-whatsapp-inquire-btn:hover .sgj-whatsapp-icon, .product-form-buttons .sgj-collection-whatsapp:hover .sgj-whatsapp-icon, .product-form-buttons .sgj-whatsapp-inquire-btn:focus-visible .sgj-whatsapp-icon, .product-form-buttons .sgj-collection-whatsapp:focus-visible .sgj-whatsapp-icon { color: #25D366 !important; } /* SMOOTH HOVER */ .product-form-buttons .sgj-whatsapp-inquire-btn, .product-form-buttons .sgj-collection-whatsapp { transition: background-color .2s ease, color .2s ease, border-color .2s ease !important; } /* ========================================================= EMAIL HOVER FIX Hover: black background + PURE WHITE text/icon ========================================================= */ .product-form-buttons .sgj-email-inquiry-btn:hover, .product-form-buttons .sgj-email-inquiry-button:hover, .product-form-buttons .sgj-email-inquiry-btn:focus-visible, .product-form-buttons .sgj-email-inquiry-button:focus-visible { background: #000000 !important; color: #ffffff !important; border-color: #000000 !important; } .product-form-buttons .sgj-email-inquiry-btn:hover .sgj-email-text, .product-form-buttons .sgj-email-inquiry-button:hover .sgj-email-text, .product-form-buttons .sgj-email-inquiry-btn:focus-visible .sgj-email-text, .product-form-buttons .sgj-email-inquiry-button:focus-visible .sgj-email-text { color: #ffffff !important; opacity: 1 !important; } .product-form-buttons .sgj-email-inquiry-btn:hover .sgj-email-icon, .product-form-buttons .sgj-email-inquiry-button:hover .sgj-email-icon, .product-form-buttons .sgj-email-inquiry-btn:hover .sgj-email-icon svg, .product-form-buttons .sgj-email-inquiry-button:hover .sgj-email-icon svg, .product-form-buttons .sgj-email-inquiry-btn:focus-visible .sgj-email-icon, .product-form-buttons .sgj-email-inquiry-button:focus-visible .sgj-email-icon, .product-form-buttons .sgj-email-inquiry-btn:focus-visible .sgj-email-icon svg, .product-form-buttons .sgj-email-inquiry-button:focus-visible .sgj-email-icon svg { color: #ffffff !important; fill: currentColor !important; stroke: currentColor !important; opacity: 1 !important; } /* If theme applies opacity/filter to button contents */ .product-form-buttons .sgj-email-inquiry-btn:hover *, .product-form-buttons .sgj-email-inquiry-button:hover *, .product-form-buttons .sgj-email-inquiry-btn:focus-visible *, .product-form-buttons .sgj-email-inquiry-button:focus-visible * { opacity: 1 !important; } /* ========================================================= FINAL EMAIL HOVER Exact style: BLACK background + PURE WHITE text/icon ========================================================= */ /* Normal Email button */ .product-form-buttons .sgj-email-inquiry-btn, .product-form-buttons .sgj-email-inquiry-button { background: #ffffff !important; color: #333333 !important; border: 1px solid #111111 !important; transition: background-color .2s ease, color .2s ease, border-color .2s ease !important; } /* Hover / keyboard focus */ .product-form-buttons .sgj-email-inquiry-btn:hover, .product-form-buttons .sgj-email-inquiry-button:hover, .product-form-buttons .sgj-email-inquiry-btn:focus, .product-form-buttons .sgj-email-inquiry-button:focus, .product-form-buttons .sgj-email-inquiry-btn:focus-visible, .product-form-buttons .sgj-email-inquiry-button:focus-visible { background: #000000 !important; color: #ffffff !important; border-color: #000000 !important; opacity: 1 !important; filter: none !important; } /* Force EVERY inner Email element to pure white */ .product-form-buttons .sgj-email-inquiry-btn:hover *, .product-form-buttons .sgj-email-inquiry-button:hover *, .product-form-buttons .sgj-email-inquiry-btn:focus *, .product-form-buttons .sgj-email-inquiry-button:focus *, .product-form-buttons .sgj-email-inquiry-btn:focus-visible *, .product-form-buttons .sgj-email-inquiry-button:focus-visible * { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; opacity: 1 !important; filter: none !important; text-shadow: none !important; } /* Email text specifically */ .product-form-buttons .sgj-email-inquiry-btn:hover .sgj-email-text, .product-form-buttons .sgj-email-inquiry-button:hover .sgj-email-text, .product-form-buttons .sgj-email-inquiry-btn:focus .sgj-email-text, .product-form-buttons .sgj-email-inquiry-button:focus .sgj-email-text, .product-form-buttons .sgj-email-inquiry-btn:focus-visible .sgj-email-text, .product-form-buttons .sgj-email-inquiry-button:focus-visible .sgj-email-text { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; opacity: 1 !important; } /* Email icon specifically */ .product-form-buttons .sgj-email-inquiry-btn:hover .sgj-email-icon, .product-form-buttons .sgj-email-inquiry-button:hover .sgj-email-icon, .product-form-buttons .sgj-email-inquiry-btn:hover .sgj-email-icon svg, .product-form-buttons .sgj-email-inquiry-button:hover .sgj-email-icon svg, .product-form-buttons .sgj-email-inquiry-btn:focus .sgj-email-icon, .product-form-buttons .sgj-email-inquiry-button:focus .sgj-email-icon, .product-form-buttons .sgj-email-inquiry-btn:focus-visible .sgj-email-icon, .product-form-buttons .sgj-email-inquiry-button:focus-visible .sgj-email-icon { color: #ffffff !important; stroke: #ffffff !important; opacity: 1 !important; } /* SVG paths/lines for outline envelope icon */ .product-form-buttons .sgj-email-inquiry-btn:hover .sgj-email-icon svg *, .product-form-buttons .sgj-email-inquiry-button:hover .sgj-email-icon svg *, .product-form-buttons .sgj-email-inquiry-btn:focus .sgj-email-icon svg *, .product-form-buttons .sgj-email-inquiry-button:focus .sgj-email-icon svg *, .product-form-buttons .sgj-email-inquiry-btn:focus-visible .sgj-email-icon svg *, .product-form-buttons .sgj-email-inquiry-button:focus-visible .sgj-email-icon svg * { stroke: #ffffff !important; color: #ffffff !important; opacity: 1 !important; } /* END_BLOCK:buy-buttons */ /* START_BLOCK:disclosures (INDEX:122) */ .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__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:price (INDEX:140) */ product-price .price,product-price .price bdi{ font-family:Poppins,Arial,sans-serif!important; font-size:22px!important; line-height:1.2!important; font-weight:500!important; color:#111!important; -webkit-text-fill-color:#111!important; opacity:1!important; } product-price .compare-at-price,product-price .compare-at-price bdi{ font-family:Poppins,Arial,sans-serif!important; font-size:14px!important; line-height:1.2!important; font-weight:400!important; color:#d60000!important; -webkit-text-fill-color:#d60000!important; text-decoration:line-through!important; text-decoration-color:#d60000!important; opacity:1!important; } @media(max-width:989px){product-price .price,product-price .price bdi{font-size:17px!important}} @media(max-width:749px){product-price .price,product-price .price bdi{font-size:16px!important}} /* END_BLOCK:price */ /* START_BLOCK:quantity (INDEX:147) */ /* ========================= BUTTON WRAPPER + SPACING ========================= */ .sgj-whatsapp-wrapper { width: 100%; height: 35px; box-sizing: border-box; padding-top: var(--sgj-padding-top, 0px); padding-bottom: var(--sgj-padding-bottom, 0px); } /* ========================= MAIN BUTTON ========================= */ .sgj-whatsapp-inquire-btn { width: 100%; height: 60px; display: flex; align-items: center; justify-content: center; gap: 12px; box-sizing: border-box; background: #ffffff; color: #000000 !important; border: 1px solid #151515; border-radius: 6px; text-decoration: none; font-size: 16px; font-weight: 600; letter-spacing: .5px; transition: background .3s ease, color .3s ease, border-color .3s ease, transform .3s ease, box-shadow .3s ease; box-shadow: 0 8px 20px rgba(0,0,0,.12); } /* ========================= TEXT ========================= */ .sgj-inquire-text { color: #000000 !important; transition: color .3s ease; } /* ========================= WHATSAPP ICON ========================= */ .sgj-whatsapp-icon { width: 24px; height: 24px; flex-shrink: 0; fill: #25D366; } /* ========================= HOVER ========================= */ .sgj-whatsapp-inquire-btn:hover { background: #000000; border-color: #000000; transform: translateY(-2px); box-shadow: 0 12px 25px rgba(0,0,0,.30); text-decoration: none; } .sgj-whatsapp-inquire-btn:hover .sgj-inquire-text { color: #ffffff !important; } /* ========================= MOBILE ========================= */ @media screen and (max-width: 749px) { .sgj-whatsapp-inquire-btn { height: 52px; font-size: 15px; } } /* END_BLOCK:quantity */ /* START_SNIPPET:accordion-styles (INDEX:157) */ .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:158) */ /* 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%; 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:buy-buttons-styles (INDEX:167) */ .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-right: var(--padding-xl); margin-right: 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: left; 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:cart-drawer (INDEX:171) */ 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 { height: calc(100% - var(--header-height)); 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:172) */ .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:173) */ .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: inline-flex; align-items: center; gap: var(--gap-xs); max-width: 100%; min-width: 0; } .cart-items__title { font-size: var(--font-size--md); color: var(--color-foreground); text-transform: var(--product-title-case); display: block; 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 { max-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-typography-styles (INDEX:175) */ .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:176) */ /* 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:deferred-media-product-model-styles (INDEX:183) */ .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:not(.product-information--media-right) .media-gallery--carousel.media-gallery--extend slideshow-container { border-top-left-radius: 0; border-bottom-left-radius: 0; } /* When the CAROUSEL is on the RIGHT side */ .product-information.product-information--media-right .media-gallery--carousel.media-gallery--extend slideshow-container { border-top-right-radius: 0; border-bottom-right-radius: 0; } /* When the GRID is on the LEFT side */ .product-information: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-top-left-radius: 0; border-bottom-left-radius: 0; } } /* When the GRID is on the RIGHT side */ .product-information.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-top-right-radius: 0; border-bottom-right-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; left: 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%; 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:184) */ .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; left: 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%; 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:divider (INDEX:185) */ .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-right: 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:fly-to-cart-styles (INDEX:190) */ /* 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:group (INDEX:198) */ .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:payment-terms-styles (INDEX:219) */ 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:product-badges-styles (INDEX:227) */ .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)); left: calc(var(--badge-inset) + var(--padding-inline-start)); } .product-badges--top-left { top: calc(var(--badge-inset) + var(--padding-block-start)); left: calc(var(--badge-inset) + var(--padding-inline-start)); } .product-badges--top-right { top: calc(var(--badge-inset) + var(--padding-block-start)); right: calc(var(--badge-inset) + var(--padding-inline-start)); } .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-information-content (INDEX:232) */ .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 */ .product-information__grid:not(.product-information--media-none) { /* Media on the left side */ &.product-information--media-left { grid-template-columns: 1fr min(50vw, var(--sidebar-width)); .product-information__media { padding-right: calc(var(--gap, 0) / 2); } .product-details { padding-left: calc(var(--gap, 0) / 2); } &:has(.media-gallery--extend) { grid-column: 1 / 3; } } /* Media on the right side */ &.product-information--media-right { grid-template-columns: min(50vw, var(--sidebar-width)) 1fr; .product-information__media { padding-left: calc(var(--gap, 0) / 2); order: 1; } .product-details { padding-right: 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 */ body:has(#header-group #header-component[data-sticky-state='active']) .product-details.sticky-content--desktop { --sticky-header-offset: var(--header-height); } /* END_SNIPPET:product-information-content */ /* START_SNIPPET:product-media-container-styles (INDEX:233) */ :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-right: auto; margin-left: 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; } body:has(header-component[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:234) */ /* 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:235) */ .dialog-thumbnails-list-container { position: fixed; width: 100%; bottom: 0; display: flex; z-index: var(--layer-raised); } .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: 50% var(--margin-lg) auto auto; right: 0; 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); } .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); right: var(--padding-lg); } @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 to the left of the thumbnails list on the right */ right: 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; } @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:237) */ .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:238) */ /* 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; text-align: center; border: none; appearance: none; max-width: calc(var(--quantity-selector-width) - var(--minimum-touch-target) * 2); 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:quick-add-modal-styles (INDEX:240) */ #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; } } .quick-add-modal[open] { @media screen and (max-width: 750px) { border-top-left-radius: var(--style-border-radius-popover); border-top-right-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); right: var(--margin-2xs); transition: transform 0.15s var(--animation-timing-bounce); z-index: var(--layer-raised); overflow: visible; transform-origin: center; } .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-top-left-radius: 0; border-bottom-left-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-right: 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: left; 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: left; } .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: left; } .quick-add-modal__content .product-details product-price > * { text-align: left; } .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:242) */ /* 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; } 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; } } .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-list-styles (INDEX:248) */ .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; } } } .resource-list__item { height: 100%; color: var(--color-foreground); text-decoration: none; } /* END_SNIPPET:resource-list-styles */ /* START_SNIPPET:section (INDEX:253) */ .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; } body:has(#header-group > .header-section > #header-component[transparent]):not( :has(#header-group > .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:256) */ .skip-to-content-link { position: absolute; left: -99999px; } .skip-to-content-link:focus { z-index: var(--layer-temporary); overflow: auto; width: auto; height: auto; padding: var(--padding-lg) var(--padding-4xl); left: 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-controls (INDEX:260) */ 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'] { right: 0; } &[pagination-position='left'] { left: 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); right: 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:262) */ /* * 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); } /* * 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); right: var(--padding-sm); } slideshow-component.slideshow--content-below-media slideshow-slide { display: grid; } .slideshow--content-below-media slideshow-slide :is(.slide__image-container, .slide__content) { position: static; } .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:swatch-styles (INDEX:270) */ /* 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-component-shimmer-styles (INDEX:273) */ 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) / ''; 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:274) */ :root { --text-align-default: left; } [style*='--horizontal-alignment: center'] .text-block { --text-align-default: center; } [style*='--horizontal-alignment: flex-end'] .text-block { --text-align-default: right; } [style*='--horizontal-alignment: flex-start'] > .text-block { --text-align-default: left; } [style*='--horizontal-alignment: center'] > .text-block { --text-align-default: center; } [style*='--horizontal-alignment: flex-end'] > .text-block { --text-align-default: right; } .text-block { width: var(--width); max-width: 100%; display: flex; flex-direction: column; align-items: var(--horizontal-alignment); color: var(--color, var(--color-foreground)); } .text-block > * { width: var(--width); max-inline-size: min(100%, var(--max-width, 100%)); text-align: var(--text-align, var(--text-align-default)); text-wrap: var(--text-wrap); } .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. */ .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); } .text-block > *:first-child { margin-block-start: 0; } .text-block > *:last-child { margin-block-end: 0; } .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); } /* END_SNIPPET:text */ /* START_SNIPPET:theme-drawer-styles (INDEX:276) */ 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; right: 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; padding: 0; border: none; border-left: var(--style-border-drawer); background-color: var(--color-background); color: var(--color-foreground); } .theme-drawer__dialog[open] { display: flex; right: 0; } .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 { right: calc(-1 * var(--theme-drawer-width, var(--sidebar-width))); } } @keyframes drawer-slide-in-inline-start { from { right: calc(var(--theme-drawer-width, var(--sidebar-width)) / 2); } } @keyframes drawer-slide-out { to { right: 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:289) */ /* 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; right: 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%; left: 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: right; justify-content: right; } .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 { right: 0; left: unset; } } &:has([data-previous-checked='true']) ~ label:has([data-current-checked='true']), &:has(:checked) ~ label { .variant-option__button-label__pill { left: 0; right: 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)); } .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; } /* Override global label:has(input) display rule with higher specificity */ .variant-option__button-label--has-swatch:has(input) { display: block; } .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; left: 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; } } /* 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:video-background-styles (INDEX:291) */ .video-background, .video-background * { position: absolute; top: 0; left: 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 */