/** Shopify CDN: Minification failed Line 1045:0 Unexpected "}" Line 2637:0 Expected "}" to go with "{" **/ /**** * general * */ * { text-underline-offset: var(--textUnderlineOffset) } [color-scheme] { background: var(--bg); background-attachment: fixed; color: var(--color); } .is-link { --buttonPadding: var(--space-2) var(--space-0) } /* Details */ details-content { display: block } details.closex summary { display: flex; justify-content: space-between; align-items: center; list-style: none; cursor: pointer; position: relative; padding-block: var(--space-1) } details.closex > summary::-webkit-details-marker { display: none } input:where([type="checkbox"],[type="radio"]):not([type="switch"]) { --inputHeight: 1.2rem; --inputActive: currentColor; --bc: currentColor; --br: var(--globalRadiusFull) !important; vertical-align: middle; margin-block: auto; } input:where([type="checkbox"],[type="radio"]):not([type="switch"]):after { content: ''; display: none } input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-results-button, input[type="search"]::-webkit-search-results-decoration { display: none; -webkit-appearance: none; appearance: none; } input[type=number]{ -moz-appearance: textfield; appearance: textfield } input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } label, legend { --labelColor: var(--colorFaded); --labelWeight: 400; margin: 0; padding: 0; } table { --tableBorder: none } ul { list-style-type: "\00B7\00a0" } price-unit { color: var(--labelTitleColor, var(--colorFaded)); font-size: var(--type-2) } /*** Image lazy preload */ component-loader, media-loader, picture { display: block } html.js media-loader:has(img:not([src*=".png"]):not([src*=".gif"])) picture { transition: background 500ms ease-in-out; transition-delay: 250ms; } html.js media-loader[ready] picture { background-color: transparent!important } html.js media-loader img { opacity: 0; transition: opacity 500ms ease-in-out } html.js media-loader[ready] img { opacity: 1 } html.js media-loader:has(:not(.noRadius)) { border-radius: var(--globalRadiusImg, 0) } :is(img,video,iframe):not(.noRadius) { border-radius: var(--globalRadiusImg, 0) } .mixBlend { --color: #FFF; --linkColor: #FFF; --linkHover: #FFF; --hColor: #FFF; color: var(--color)!important; mix-blend-mode: difference } /* RTE */ .rte { --tablePadding: 0 var(--space-2); --hLine: 1.2; --hMargin: 0 0 .3em; --hSpace: 0px } .rte :is(h1,h2,h3,h4,h5,h6) { word-break: break-all } .rte :is(ol,ul,li,p,strong,blockquote) { all: revert } .rte table { display: block; margin: 0; padding: 0 } .rte > ul, .rte ul li > ul, .rte ol, .rte ol li > ol { padding-inline: var(--space-4) } .rte p:empty { display: none } .rte p:first-of-type { margin-block-start: 0 } .rte p:last-of-type { margin-block-end: 0 } .rte a { text-decoration: underline; } .rte iframe { max-width: 100%; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: var(--space-5) } :where(button,.button).is-custom { --buttonPadding: var(--space-2); --buttonMargin: 0; --buttonGap: var(--space-1) } .custom.toggle-token { --tokenBg: transparent; --tokenBgHover: transparent; --tokenBgActive: transparent; --tokenBorderColor: transparent; --tokenBorderHover: transparent; --tokenBorderActive: transparent; --tokenColor: currentColor; --tokenColorHover: currentColor; --tokenColorActive: currentColor; --tokenDecorationHover: underline; --tokenDecorationActive: underline; --tokenPadding: var(--space-1); --tokenMargin: 0; --gap: var(--space-1) var(--space-3); } /* Main */ body { --headSpace: var(--headerGroupHeight); background-attachment: fixed } body:has([position-type="initial"],[position-type="absolute"]) { --headSpace: 0px } .grecaptcha-badge, div#shop-hcaptcha-badge-container { display: none!important } .captcha-disclaimer { font-size: 70%; color: var(--colorFaded) } /* iOS zoom fix */ @media screen and (max-width: 777px) { html.ios :is(textarea,input):focus { font-size: 16px } } coretex-fetch { display: block; position: relative } coretex-fetch.is-loading:before { content: attr(coretex-loading); position: absolute; inset: 0; display: block; width: 100%; height: 100%; backdrop-filter: blur(5px); z-index: 9; } /** Add to cart button (Product page + Product card) */ ajax-cart-product-form[processing] .add-2-cart > .cta { color: transparent } .add-2-cart.fullwidth .loading__spinner { justify-self: var(--buttonAlign) } ajax-cart-product-form[processing] .add-2-cart > .loading__spinner { display: block!important } [data-ajax-cart-errors] { color: var(--red) } [data-ajax-cart-errors]:empty { display: none } [data-ajax-cart-errors="form"]:not(:empty) { display: block; padding-block: var(--padding) } /* Mask */ .mask { -webkit-mask-image: var(--maskImage); mask-image: var(--maskImage) } @media (max-width: 777px) { .mask-s { -webkit-mask-image: var(--maskImage); mask-image: var(--maskImage) } } @media (min-width: 778px) { .mask-l { -webkit-mask-image: var(--maskImage); mask-image: var(--maskImage) } } [class*="mask"].inline-start { --maskImage: linear-gradient(to left, #000000 var(--maskStart, 70%), transparent var(--maskEnd, 100%)) } [class*="mask"].inline-end { --maskImage: linear-gradient(to right, #000000 var(--maskStart, 70%), transparent var(--maskEnd, 100%)) } [class*="mask"].inline-both { --maskImage: linear-gradient(90deg, transparent, #000000 var(--maskStart, 10%), #000000 var(--maskCenter, 90%), transparent var(--maskEnd, 100%)) } [class*="mask"].block-start { --maskImage: linear-gradient(to top, #000000 var(--maskStart, 80%), transparent var(--maskEnd, 100%)) } [class*="mask"].block-end { --maskImage: linear-gradient(to bottom, #000000 var(--maskStart, 80%), transparent var(--maskEnd, 100%)) } [class*="mask"].blur { -webkit-backdrop-filter: blur(var(--maskBlur, 10px)); backdrop-filter: blur(var(--maskBlur, 10px)); } .payment-icons i svg > path[opacity] { opacity: 0!important } /* Social networks links */ .socialNets { --buttonWeight: 400; --iconSize: inherit; &[data-icons="icons"] span { display: none } &[data-icons="text"] i { display: none } } /** Utilities */ .title { word-wrap: break-word; word-break: break-word; } /* General page, Blog post */ .general-page { --gap: var(--layoutInline) } .general-page .container { padding: var(--layoutInline) } :where(.general-page,.article) .content.rte > .full-width, .general-page .content.rte > .full-width :where(img,video,iframe) { width: 100% } @media (min-width: 777px) { .general-page x-flex[direction="row"] .title { max-width: 36rem } } @media (max-width: 777px) { .general-page { --charWidth: 100% !important } } /* Switch between hide/show */ .onHover { .on { opacity: 1 } .off { opacity: 0 } &:is(:hover,:focus,:focus-visible,:focus-within) { .on { opacity: 0 } .off { opacity: 1 } } } @media (min-width: 777px) { .onHover-d { .on { opacity: 1 } .off { opacity: 0 } &:is(:hover,:focus,:focus-visible,:focus-within) { .on { opacity: 0 } .off { opacity: 1 } } } } @media (max-width: 777px) { /* Mobile header top spacing */ coretex-header .header { padding-top: var(--space-2, 12px); } /* Mobile header top alignment for cart and counter */ coretex-header .header { align-items: flex-start !important; } coretex-header .tools { align-items: flex-start !important; align-self: flex-start !important; margin-top: 0 !important; padding-top: 0 !important; } coretex-header .tools .cartBubble, coretex-header .tools cart-count { align-items: flex-start !important; align-self: flex-start !important; margin-top: 0 !important; vertical-align: top !important; } coretex-header .tools .cartBubble { display: inline-flex !important; flex-direction: row !important; } coretex-header .tools cart-count { display: inline-flex !important; } .onHover-m { .on { opacity: 1 } .off { opacity: 0 } &:is(:hover,:focus,:focus-visible,:focus-within) { .on { opacity: 0 } .off { opacity: 1 } } } } .loading__spinner { width: 4rem; height: var(--fontSize); background: radial-gradient(circle closest-side, currentColor 90%, transparent) 0% 50%, radial-gradient(circle closest-side, currentColor 90%, transparent) 50% 50%, radial-gradient(circle closest-side, currentColor 90%, transparent) 100% 50%; background-size: calc(100% / 3) .6em; background-repeat: no-repeat; animation: loading-dots 1s infinite linear } @keyframes loading-dots { 20% { background-position: 0% 0%, 50% 50%, 100% 50% } 40% { background-position: 0% 100%, 50% 0%, 100% 50% } 60% { background-position: 0% 50%, 50% 100%, 100% 0% } 80% { background-position: 0% 50%, 50% 50%, 100% 100% } } /* Accordion */ coretex-accordion { display: block; margin-block: var(--blockMargin) } coretex-accordion:has(+ coretex-accordion) { margin-block: 0 } coretex-accordion:has(+ coretex-accordion) details summary { padding-block-end: var(--space-3) } coretex-accordion:not(:has(+ coretex-accordion)), coretex-accordion + coretex-accordion { margin-block-start: 0 } coretex-accordion details-content { position: relative; margin-block: var(--space-1) var(--space-5) } coretex-accordion details summary { justify-content: start; color: var(--colorFaded) } coretex-accordion details[open] summary { text-decoration: underline; color: var(--color); position: sticky; top: 0 } coretex-accordion details summary:is(:hover,:focus-visible), coretex-accordion details[open] summary { padding-inline-start: 1rem; padding-block: var(--space-1) } coretex-accordion details summary:is(:hover,:focus-visible):before, coretex-accordion details[open] summary:before { content: var(--hoverSymbol); position: absolute; inset-inline-start: 0; inset-block-start: 0.15em; font-family: var(--fontFallback); font-size: var(--type-5); } coretex-accordion details-content::before { content: var(--openSymbol); position: absolute; inset-block-start: -2px; inset-inline-start: 1px; display: inline; } coretex-accordion details-content .rte { margin-inline-start: var(--space-4); } /* [C] Product card */ .products { --gap: var(--prodGap) } @media (max-width: 777px) { .products { --gap: var(--prodGapMob) } } .products :is([columns="10"],[columns="fit"]) .meta { display: none } product-card { --hMargin: 0; --gap: var(--space-3); container: prod-card / inline-size; position: relative; } product-card[in-stock="false"][fade="true"] { opacity: 0.35 } product-card[medialess] .meta { margin-block-start: auto } [scroll-area] li:has(product-card[medialess]) { align-self: center } product-card[clip-meta] :where(.vendor h3, .title a, .subtitle) { display: inline-block; text-overflow: ellipsis; max-width: 100cqi; white-space: nowrap; overflow: clip } product-card .meta { --gap: var(--space-1) } product-card .meta > * { display: block; width: 100% } product-card .meta > *:empty { display: none } product-card .meta .titles :is(.title,.subtitle,.vendor) { --hSize: var(--fontSize); --hWeight: var(--fontWeight); --hFontFamily: var(--fontFamily); } product-card .meta .titles .subtitle { color: var(--colorFaded) } product-card .meta .titles .vendor { display: block } product-card .meta .titles a { padding-block: var(--space-2) } product-card .meta :is(.prices,.badges) { padding-block-start: var(--space-1) } product-card .meta x-cell:empty { display: none } product-card .meta .sizes { overflow: hidden } product-card .meta .sizes-list { --gap: 0 var(--space-2) } product-card .meta .sizes-list li { cursor: default } product-card .meta .sizes-list li s { opacity: 0.5 } /* Interactive product card sizes */ product-card .interactive-variants .clickable-sizes .sizes-list li { cursor: pointer; padding: var(--sizing-pill-padding-y) var(--sizing-pill-padding-x); border-radius: var(--sizing-pill-border-radius); transition: all 0.2s ease; border: var(--sizing-pill-border-width) solid var(--sizing-pill-border-color); background: var(--sizing-pill-bg); color: var(--sizing-pill-text); min-height: var(--sizing-pill-height); font-size: var(--sizing-pill-font-size); font-weight: var(--sizing-pill-font-weight); letter-spacing: var(--sizing-pill-letter-spacing); min-width: 2.5em; /* Ensure consistent minimum width for abbreviated sizes */ text-align: center; margin: 0; /* Remove any default margins */ line-height: 1; /* Prevent extra line height spacing */ display: flex; align-items: center; justify-content: center; box-sizing: border-box; text-transform: var(--sizing-pill-uppercase, none); } product-card .interactive-variants .clickable-sizes .sizes-list li:hover { background: var(--sizing-pill-hover-bg); color: var(--sizing-pill-hover-text); border-color: var(--sizing-pill-hover-border-color); } product-card .interactive-variants .clickable-sizes .sizes-list li.selected { background: var(--sizing-pill-selected-bg); color: var(--sizing-pill-selected-text); border-color: var(--sizing-pill-selected-border-color); } product-card .interactive-variants .clickable-sizes .sizes-list li s { opacity: 0.3; cursor: not-allowed; pointer-events: none; } /* Interactive product card hover effects and layout - Only on devices that support true hover */ @media (hover: hover) and (pointer: fine) { product-card:hover .interactive-variants.off { display: block; } /* Sizing buttons are now always visible, no need to hide title on hover */ } /* Mobile/touch devices: Show sizing pills on tap/touch but don't hide images */ @media (hover: none) or (pointer: coarse) { /* On mobile, we'll use JavaScript to toggle states instead of CSS hover */ product-card .interactive-variants.off { display: none !important; } product-card .on { display: flex !important; } /* CRITICAL: Ensure images NEVER disappear on mobile - override everything */ product-card .media, product-card .media *, product-card .media img, product-card .media video, product-card .media iframe { display: block !important; visibility: visible !important; opacity: 1 !important; } /* Ensure media container has proper height for slider */ product-card .media { height: 300px; /* Fixed height instead of 100% */ min-height: 300px; max-height: 300px; /* Prevent overflow */ overflow: hidden; /* Prevent image bleeding */ } /* When sizing pills are actively being interacted with on mobile */ product-card.mobile-sizing-active .interactive-variants.off { display: block !important; } /* Keep the title visible on mobile - only hide it on desktop hover */ product-card.mobile-sizing-active .on { display: flex !important; } /* Ensure media stays visible even when mobile-sizing-active is applied */ product-card.mobile-sizing-active .media, product-card.mobile-sizing-active .media *, product-card.mobile-sizing-active .media img, product-card.mobile-sizing-active .media video, product-card.mobile-sizing-active .media iframe { display: block !important; visibility: visible !important; opacity: 1 !important; } /* Ensure media container has proper height for slider */ product-card.mobile-sizing-active .media { height: 300px; /* Fixed height instead of 100% */ min-height: 300px; max-height: 300px; /* Prevent overflow */ overflow: hidden; /* Prevent image bleeding */ } } product-card .interactive-variants.off { display: none; } /* New positioning: sizing buttons are now always visible below title */ product-card .interactive-variants { display: block; margin-top: var(--space-2); margin-bottom: 0 !important; /* Remove bottom margin to reduce gap above price */ } /* Ensure the title container has consistent height to prevent shifting */ product-card .on { min-height: 1.5em; /* Reduced since we're keeping single line */ display: flex; align-items: flex-start; /* Align to top instead of center */ margin: 0; padding: 0; width: 100%; max-width: 100%; overflow: hidden; } /* Truncate title text with ellipsis */ product-card .on .title { margin: 0; padding: 0; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; max-width: 100%; min-width: 0; /* Allow flex item to shrink below content size */ } product-card .on .title a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; width: 100%; max-width: 100%; position: relative; min-width: 0; /* Allow flex item to shrink below content size */ } /* Remove hover tooltip to prevent layout shifts - rely on browser's native title attribute */ /* Ensure titles container has consistent spacing */ product-card .titles { gap: 0.5rem; /* Add consistent gap between title elements */ } /* Dynamic height container for sizing pills - only expands when needed */ product-card .interactive-variants { min-height: auto !important; max-height: none; overflow: visible; position: relative; margin: 0; padding: 0; } /* Ensure the flex container fills the available space */ product-card .interactive-variants x-flex { height: 100%; align-items: flex-start !important; } /* Size list container - only show one row by default */ product-card .interactive-variants .clickable-sizes { flex: 1; overflow: hidden; position: relative; } product-card .interactive-variants .clickable-sizes .sizes-list { display: flex; flex-wrap: wrap; gap: var(--sizing-pill-gap-vertical, 4px) var(--sizing-pill-gap-horizontal, 4px); align-items: flex-start; margin: 0; padding: 0; list-style: none; /* Calculate single row height: pill height + gap */ max-height: calc(var(--sizing-pill-height, 32px) + var(--sizing-pill-gap-vertical, 4px)); overflow: hidden; transition: max-height 0.3s ease; } /* Expand to show second row when needed - JavaScript will add has-overflow class */ product-card .interactive-variants .clickable-sizes.has-overflow .sizes-list { max-height: calc((var(--sizing-pill-height, 32px) + var(--sizing-pill-gap-vertical, 4px)) * 2); } /* Tablet and mobile: also use single row by default */ @media (max-width: 1024px) { product-card .interactive-variants .clickable-sizes .sizes-list { max-height: calc(var(--sizing-pill-height-mobile, var(--sizing-pill-height, 32px)) + var(--sizing-pill-gap-vertical-mobile, var(--sizing-pill-gap-vertical, 4px))); } product-card .interactive-variants .clickable-sizes.has-overflow .sizes-list { max-height: calc((var(--sizing-pill-height-mobile, var(--sizing-pill-height, 32px)) + var(--sizing-pill-gap-vertical-mobile, var(--sizing-pill-gap-vertical, 4px))) * 2); } } /* Add a subtle fade effect for overflow indication */ product-card .interactive-variants .clickable-sizes::after { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 20px; background: linear-gradient(to right, transparent, var(--colorBg, #fff)); pointer-events: none; opacity: 0; transition: opacity 0.2s ease; } product-card:hover .interactive-variants .clickable-sizes::after { opacity: 1; } /* Quick add button styling */ product-card .quick-add-btn { background: var(--add-to-cart-bg); color: var(--add-to-cart-text); border-radius: var(--add-to-cart-border-radius); padding: var(--add-to-cart-padding-y) var(--add-to-cart-padding-x); min-height: var(--add-to-cart-height); border: var(--add-to-cart-border-width) solid var(--add-to-cart-border-color); font-size: var(--add-to-cart-font-size); font-weight: var(--add-to-cart-font-weight); letter-spacing: var(--add-to-cart-letter-spacing); text-transform: var(--add-to-cart-uppercase, none); white-space: nowrap; flex-shrink: 0; display: flex; align-items: center; justify-content: center; box-sizing: border-box; cursor: pointer; transition: all 0.2s ease; } product-card .quick-add-btn:hover { background: var(--add-to-cart-hover-bg); color: var(--add-to-cart-hover-text); border-color: var(--add-to-cart-hover-border-color); } /* Ensure product card uses flexbox and price stays at bottom */ product-card { display: flex !important; flex-direction: column !important; height: 100% !important; /* Force all cards to fill available height */ width: 100% !important; max-width: 100% !important; min-width: 0 !important; /* Allow flex item to shrink below content size */ overflow: hidden !important; } product-card .titles { flex: 1; display: flex; flex-direction: column; min-height: 0; /* Allow flex item to shrink */ width: 100%; max-width: 100%; overflow: hidden; } product-card .quickBuyPrice { margin-top: var(--space-2) !important; /* Consistent spacing from sizing pills */ flex-shrink: 0; align-self: stretch; /* Ensure price container spans full width */ } /* Ensure consistent spacing in price/cart container */ product-card .quickBuyPrice .add-to-cart-inline { margin-left: auto; } /* Inline add to cart button in sizing pills container */ product-card .interactive-variants .add-to-cart-inline { margin-left: auto; flex-shrink: 0; } product-card .interactive-variants .add-to-cart-inline .quick-add-btn { white-space: nowrap; flex-shrink: 0; } /* Ensure grid items have equal height */ .product-grid product-card, .products-grid product-card, [class*="product"] product-card { align-self: stretch !important; } /* Force grid containers to create equal height items */ .product-grid, .products-grid, [class*="products-with-filter"] .product-list { display: grid !important; align-items: stretch !important; } /* Specific fix for x-grid containers */ x-grid[columns] { display: grid !important; align-items: stretch !important; } x-grid[columns] > x-cell { display: flex !important; flex-direction: column !important; min-width: 0 !important; /* Allow grid cells to shrink */ overflow: hidden !important; } /* Additional responsive fixes for smaller screens */ @media (max-width: 768px) { product-card .on .title { font-size: var(--type-2); /* Match price font size on mobile */ } product-card .on .title a { font-size: inherit; } } @media (max-width: 480px) { product-card .on .title { font-size: var(--type-2); /* Keep same size as price on very small screens too */ } } /* Product Card Media */ product-card .media { position: relative; flex: 1; /* Take up remaining space in flex container */ min-height: 300px; /* Ensure minimum height for media */ max-height: 400px; /* Prevent images from being too big */ display: flex; align-items: center; justify-content: center; overflow: hidden; /* Prevent image bleeding */ } /* Single Product Image */ .single-product-image { width: 100%; height: 100%; min-height: 300px; display: flex; align-items: center; justify-content: center; } .single-product-image img, .single-product-image video { width: 100%; height: 100%; object-fit: cover; display: block; } /* Product Card Swiper - Clean & Simple */ .product-card-swiper { width: 100%; height: 100%; min-height: 300px; max-height: 300px; overflow: hidden; position: relative; } .product-card-swiper .swiper-wrapper { height: 100%; width: 100%; } .product-card-swiper .swiper-slide { width: 100%; height: 100%; flex-shrink: 0; opacity: 1 !important; visibility: visible !important; } .product-card-swiper .swiper-slide img, .product-card-swiper .swiper-slide video { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; opacity: 1 !important; visibility: visible !important; position: relative !important; pointer-events: none; -webkit-user-drag: none; user-select: none; z-index: 1 !important; /* Force images to always be visible - override any Swiper styles */ will-change: auto !important; } /* Hide/show text based on screen size */ .hide-on-mobile { display: inline; } .show-on-mobile { display: none; } /* Make sure swiper is above the product card link on mobile */ @media (max-width: 768px) { .hide-on-mobile { display: none; } .show-on-mobile { display: inline; } /* Make sizing pills clickable on mobile */ product-card .interactive-variants { pointer-events: auto; z-index: 10; position: relative; } product-card .interactive-variants .clickable-sizes, product-card .interactive-variants .clickable-colors { pointer-events: auto; } product-card .interactive-variants .sizes-list li, product-card .interactive-variants .colors-list li { pointer-events: auto; cursor: pointer; touch-action: manipulation; } } /* Product Card Swiper Navigation */ .product-card-swiper .swiper-button-next, .product-card-swiper .swiper-button-prev, .product-card-swiper .swiper-button-next.product-card-nav, .product-card-swiper .swiper-button-prev.product-card-nav { background: var(--product-card-arrow-bg); border: var(--product-card-arrow-border-width) solid var(--product-card-arrow-border); border-radius: var(--product-card-arrow-border-radius); width: var(--product-card-arrow-size); height: var(--product-card-arrow-size); margin-top: 0 !important; top: 50%; transform: translateY(-50%); opacity: 0; visibility: hidden; transition: all 0.3s ease; z-index: 10; display: flex; align-items: center; justify-content: center; } .product-card-swiper .swiper-button-next:after, .product-card-swiper .swiper-button-prev:after { font-size: calc(var(--product-card-arrow-size) * 0.4); font-weight: 300; color: var(--product-card-arrow-icon); position: static; margin: 0; } .product-card-swiper .swiper-button-next { right: 10px; } .product-card-swiper .swiper-button-prev { left: 10px; } /* Show navigation on hover */ .product-card-swiper:hover .swiper-button-next, .product-card-swiper:hover .swiper-button-prev, .product-card-swiper:hover .swiper-button-next.product-card-nav, .product-card-swiper:hover .swiper-button-prev.product-card-nav { opacity: var(--product-card-arrow-opacity); visibility: visible; } .product-card-swiper .swiper-button-next:hover, .product-card-swiper .swiper-button-prev:hover, .product-card-swiper .swiper-button-next.product-card-nav:hover, .product-card-swiper .swiper-button-prev.product-card-nav:hover { background: var(--product-card-arrow-bg-hover); transform: translateY(-50%) scale(1.1); } /* Tablet Navigation - Hide arrows on product cards, ensure centered on product page */ @media (min-width: 769px) and (max-width: 1024px) { /* Hide arrows on product cards for tablet */ .product-card-swiper .swiper-button-next, .product-card-swiper .swiper-button-prev, .product-card-swiper .swiper-button-next.product-card-nav, .product-card-swiper .swiper-button-prev.product-card-nav { display: none !important; opacity: 0 !important; visibility: hidden !important; } /* CRITICAL: Make ALL images visible ALWAYS on tablet */ .product-card-swiper img, .product-card-swiper video { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; opacity: 1 !important; visibility: visible !important; } /* Ensure product page arrows are centered */ .swiper-button-next, .swiper-button-prev { display: flex !important; align-items: center !important; justify-content: center !important; margin-top: 0 !important; } .swiper-button-next:after, .swiper-button-prev:after { position: static !important; margin: 0 !important; } } /* Mobile Navigation - Hide arrows on mobile for product cards */ @media (max-width: 768px) { .product-card-swiper .swiper-button-next, .product-card-swiper .swiper-button-prev, .product-card-swiper .swiper-button-next.product-card-nav, .product-card-swiper .swiper-button-prev.product-card-nav { display: none !important; opacity: 0 !important; visibility: hidden !important; } } /* Product Page Swiper Navigation */ .swiper-button-next, .swiper-button-prev { background: var(--product-page-arrow-bg); border: var(--product-page-arrow-border-width) solid var(--product-page-arrow-border); border-radius: var(--product-page-arrow-border-radius); width: var(--product-page-arrow-size); height: var(--product-page-arrow-size); margin-top: 0 !important; top: 50%; transform: translateY(-50%); opacity: 0; visibility: hidden; transition: all 0.3s ease; z-index: 10; display: flex; align-items: center; justify-content: center; } .swiper-button-next:after, .swiper-button-prev:after { font-size: calc(var(--product-page-arrow-size) * 0.4); font-weight: 300; color: var(--product-page-arrow-icon); position: static; margin: 0; } .swiper-button-next { right: 10px; } .swiper-button-prev { left: 10px; } /* Show navigation on hover */ .swiper:hover .swiper-button-next, .swiper:hover .swiper-button-prev { opacity: var(--product-page-arrow-opacity); visibility: visible; } .swiper-button-next:hover, .swiper-button-prev:hover { background: var(--product-page-arrow-bg-hover); transform: translateY(-50%) scale(1.1); } /* Mobile Navigation for Product Page */ @media (max-width: 768px) { .swiper-button-next, .swiper-button-prev { width: var(--product-page-arrow-size-mobile); height: var(--product-page-arrow-size-mobile); display: flex !important; align-items: center; justify-content: center; } .swiper-button-next:after, .swiper-button-prev:after { font-size: calc(var(--product-page-arrow-size-mobile) * 0.4); } .swiper-button-next { right: 5px; } .swiper-button-prev { left: 5px; } } /* Mobile & Tablet - Show only first image, disable swiper ONLY in ls-feat-products section */ @media (max-width: 1024px) { /* Target ONLY the product list section (ls-feat-products), not featured collection */ #shopify-section-template--23281633321302__ls-feat-products .product-card-swiper .swiper-slide:not(:first-child), section[data-section-id*="ls-feat-products"] .product-card-swiper .swiper-slide:not(:first-child) { display: none !important; } /* Disable swiper transform - ONLY in ls-feat-products */ #shopify-section-template--23281633321302__ls-feat-products .product-card-swiper .swiper-wrapper, section[data-section-id*="ls-feat-products"] .product-card-swiper .swiper-wrapper { transform: none !important; } #shopify-section-template--23281633321302__ls-feat-products .product-card-swiper .swiper-slide:first-child, section[data-section-id*="ls-feat-products"] .product-card-swiper .swiper-slide:first-child { width: 100% !important; height: 100% !important; } #shopify-section-template--23281633321302__ls-feat-products .product-card-swiper img, #shopify-section-template--23281633321302__ls-feat-products .product-card-swiper video, section[data-section-id*="ls-feat-products"] .product-card-swiper img, section[data-section-id*="ls-feat-products"] .product-card-swiper video { width: 100% !important; height: 100% !important; object-fit: cover !important; } /* Allow vertical scrolling on product list - override overflow */ #shopify-section-template--23281633321302__ls-feat-products .product-card-swiper, section[data-section-id*="ls-feat-products"] .product-card-swiper { overflow: visible !important; touch-action: auto !important; } #shopify-section-template--23281633321302__ls-feat-products product-card .media, section[data-section-id*="ls-feat-products"] product-card .media { overflow: visible !important; touch-action: auto !important; } /* Ensure product links are clickable on ALL product cards */ product-card .media a { position: relative; z-index: 10; display: block; } } product-card .interactive-variants .clickable-sizes .sizes-list { gap: var(--sizing-pill-gap-vertical-mobile) var(--sizing-pill-gap-horizontal-mobile); } product-card .interactive-variants .clickable-sizes .sizes-list li { padding: var(--sizing-pill-padding-y-mobile) var(--sizing-pill-padding-x-mobile); min-height: var(--sizing-pill-height-mobile); font-size: var(--sizing-pill-font-size-mobile); } product-card .quick-add-btn { min-height: var(--add-to-cart-height-mobile); } } product-card .meta cortex-price { display: block } product-card .meta.text-start [x-flex] { justify-content: flex-start } product-card .meta.text-center [x-flex] { justify-content: center } product-card .meta.text-end [x-flex] { justify-content: flex-end } product-card[crop="true"] .media :is(img,video,iframe) { aspect-ratio: var(--prodCardRatio, 1/1); object-fit: var(--prodCardFit, cover); object-position: var(--prodCardPosition, center); height: var(--prodCardHeight, initial); } @media (min-width: 777px) { product-card[stealth="true"]:not([medialess]) .meta { opacity: 0 } :is(.products,component-loader):not([columns="10"],[columns="fit"]) product-card[stealth="true"]:is(:hover,:focus,:focus-visible,:focus-within) .meta { opacity: 1 } } product-card .quick-buyer[id*="quickBuy-"] { display: none } product-card:has(input[id*="quickToggle-"]:checked) [id^="quickBuy-"] { display: block } product-card .quick-buyer :is(button.is-custom,select) { --inputBorderColor: none; --inputBorderHover: none; --inputBorderActive: none; --inputBg: transparent; --inputBgHover: transparent; --inputBgActive: transparent; --inputColor: currentColor; padding: var(--space-2) 0; width: 100%; text-align: inherit; } product-card .quick-buyer button { --buttonPadding: var(--space-2) var(--space-3); text-align: inherit; width: 100%; } product-card x-select[data-pop] { border-radius: var(--buttonRadius); background: var(--buttonBg); x-cell { background: var(--buttonBg); } select { padding: var(--space-2) var(--space-3)!important; } } product-card .quick-buyer button.is-custom > .cta { text-decoration: underline } product-card:has(input[id*="quickToggle-"]:checked) .quickBuyPrice { display: none!important } product-card .quickBuyPrice label { all: unset; cursor: pointer } product-card .quickBuyToggle:has(input:focus-visible,input:focus) { --a11yOutline: 2px var(--a11yStyle) var(--a11yColor); outline: var(--a11yOutline); box-shadow: var(--a11yStyle) var(--a11yColor) } x-select { display: block; position: relative } x-select > select { width: 100% } x-select > x-cell { position: absolute; inset-block-start: 0; inset-inline-end: 0; padding: var(--space-2); background: var(--bgColor); pointer-events: none; border-radius: var(--inputRadius); } /* [C] Rating coretex-rating component */ coretex-rating { display: block; rating-bar { --fontSpace: 0.4; --fontSize: 2; --percent: calc((var(--rating) / var(--rating-max) + var(--rating-decimal) * var(--fontSize) / (var(--rating-max) * (var(--fontSpace) + var(--fontSize)))) * 100%); display: inline-block; vertical-align: text-top; -webkit-user-select: none; user-select: none; font-family: monospace; letter-spacing: calc(var(--fontSpace) * 1rem); background-image: linear-gradient(90deg, currentColor var(--percent), rgb(0 0 0 / .3) var(--percent)); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } } /* [C] Coretex Hover display */ coretex-hover { display: block; [hover-spotlight] { min-height: 20px; opacity: 0; filter: blur(5px); transform: translateY(30%); transition: all 500ms var(--easeOutQuint); transform-origin: bottom; } [hover-spotlight].active { opacity: 1; transform: none; filter: none } .spotlight-key { text-transform: capitalize; font-weight: 700 } &[display-key="false"] .spotlight-key { display: none } } /* Fieldset */ fieldset { padding: 0; margin: 0; border: none } fieldset button { margin-inline: 0 } /* Float inputs label */ x-field { display: grid; align-items: center; position: relative; isolation: isolate; max-width: 100%; margin: var(--inputMargin) 0; padding: 0!important; } x-field > input { --inputMargin: 0; --a11yOffset: calc(var(--inputBorderWidth) * 2); padding: calc(var(--inputPadding) * 1.5) 0px calc(var(--inputPadding) / 1.5) calc(var(--inputPadding) + var(--globalRadius) / 9) !important; } x-field > input::placeholder { color: transparent; user-select: none; } x-field > input::-webkit-contacts-auto-fill-button { position: absolute; visibility: hidden; pointer-events: none; user-select: none; } x-field > label { position: absolute; inset-block-start: 40%; margin: 0; padding-inline-start: calc(var(--inputPadding) + var(--globalRadius) / 5); font-weight: normal; line-height: 1; color: var(--inputPlaceholderColor); pointer-events: none; user-select: none; transition: all 150ms var(--easeOutQuad); transform-origin: left center; } x-field > input:focus + label, x-field > input:not(:placeholder-shown) + label { inset-block-start: calc(var(--inputPadding) / 2); color: var(--colorFaded); scale: 0.82; z-index: 1; } select { margin-inline: 0 } /** Pages */ /* General page */ .pageTitle { --hMargin: var(--space-2) 0 var(--space-8); display: block; width: var(--layoutMaxWidth); margin-inline: var(--layoutCenter, 0); } /* Collection list page */ .collections-list .description { max-width: 60ch } .collections-list #ajaxContainer { gap: var(--space-11) } /*** Header ***/ /* Sticky header + Header overlay */ #headerGroup { position: var(--headerPosition, initial); inset-block-start: 0; inset-inline: 0; z-index: 99; } #headerGroup coretex-header[color-scheme] { background: var(--headerBg, transparent) } #headerGroup nav.breadcrumb { background: var(--headerBg, transparent) } #headerGroup [page-current] { text-decoration: underline } /* Invert header contents */ #headerGroup:has(coretex-header[mix-blend="true"]):not(:has(details.lv1[open], #menuDrawerBox[open])) { --color: #FFF; --linkColor: #FFF; --linkHover: #FFF; --hColor: #FFF; mix-blend-mode: exclusion; color: var(--color)!important; coretex-ticker { --color: #FFF; --linkColor: #FFF; --linkHover: #FFF; background: transparent; color: white; border-color: transparent; mix-blend-mode: normal; button.is-custom { --buttonBg: transparent; --buttonColor: #FFF } } .logo { filter: grayscale(1) invert(1); } } #headerGroup:has(coretex-header[mix-blend="true"]) details.lv1[open] summary { background: var(--headerBg) } /* Minimal mode */ @media (min-width: 777px) { coretex-header[stealth="true"] { .header > *:not(.logo) { opacity: 0; transition: opacity var(--globalAnimeTime) var(--globalAnimeEase) } &:is(:hover,:focus,:focus-visible,:focus-within) { .header > * { opacity: 1 } } } } coretex-header { --buttonWeight: 400; --linkColor: var(--color); --linkHover: var(--color); --buttonColor: var(--color); --buttonColorHover: var(--color); display: block; background: var(--bg); background-attachment: fixed; color: var(--color); border-block: var(--globalBorderWidth) solid var(--border); padding-inline: var(--layoutInline); } coretex-header :where(.menuContent) { max-width: 100% } /* Icons */ coretex-header[content-type="icons"] .txtState { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } coretex-header[content-type="text"] :where(.tools,.mobileTrigger) i { display: none } coretex-header .noHide > i { display: block } /* Logo */ coretex-header .header .logo { padding-block: var(--space-2) } coretex-header .header .logo:first-child { padding-inline-end: var(--padding) } coretex-header .header .logo:not(:first-child) { padding-inline: var(--space-2) } coretex-header .header .logo img { height: var(--logoImageSize); width: fit-content } coretex-header .header .logo .has-text-logo { padding-block: var(--space-2) } coretex-header .header .logo .text-logo { font-size: var(--logoSize); font-weight: var(--logoFontWeight); font-style: var(--logoFontStyle); font-family: var(--logoFontFamily); line-height: 1; word-break: break-word; } @media (max-width: 777px) { coretex-header .logo { padding: var(--space-2) } } /* Cart */ coretex-header cart-count[data-count="0"] { display: none } coretex-header :where(button,.button).is-custom { --buttonBg: transparent; --buttonMargin: 0; --buttonPadding: var(--space-2); --buttonGap: var(--space-1); } coretex-header :is(button.cartBubble) { gap: var(--space-1) } cart-footer .cart-notes details[open] i { transform: rotate(180deg) } /* Localization */ coretex-header .localization { container: localization / inline-size; width: 100%; } /* Hide the country name if the container width is too small. */ @container localization (width < 200px) { coretex-header .localization country-name { display: none } } /* localization icons */ coretex-header .crl i { padding-inline-end: var(--space-1) } coretex-header[content-type="icons"] .crl span:not(.noHide) { display: none } /* Menus */ coretex-header details.closex summary.button.is-custom { padding-block: var(--buttonPadding) } /* === [ CORETEX FYI ] === menus: drop & mega are only needed on desktops */ @media (min-width: 778px) { /** General styles */ coretex-header { --gap: 0; --hoverSymbolInline: -0.4em; } coretex-header:not([coretex-menu="drawer"]) .mobileTrigger { display: none } coretex-header:not([coretex-menu="drawer"]) details[open] > summary i { transform: rotate(180deg) } coretex-header[coretex-menu] drawer-footer { display: none } coretex-header .bdotfx { display: flex; place-items: center } /* Override bdotfx for navigation menu - apply same spacing as utility links */ coretex-header .menuPrimary .bdotfx { display: block !important; align-items: stretch !important; margin-bottom: 0.5rem !important; } coretex-header .menuPrimary .bdotfx:last-child { margin-bottom: 0 !important; } /* Header button spacing - pill buttons (will be overridden by dynamic CSS) */ coretex-header .localization.contents { gap: 0.5rem !important; width: auto !important; display: flex !important; flex-wrap: wrap !important; align-items: center !important; } coretex-header .tools .contents { gap: 0.25rem !important; display: flex !important; flex-wrap: wrap !important; align-items: center !important; } /* Ensure button spacing is applied */ coretex-header .localization-country, coretex-header .localization-language, coretex-header .tools .large-only, coretex-header .mobileTrigger { margin-right: 0.5rem !important; } coretex-header .localization-country:last-child, coretex-header .localization-language:last-child, coretex-header .tools .large-only:last-child, coretex-header .mobileTrigger:last-child { margin-right: 0 !important; } /* Navigation menu button spacing - pill buttons */ coretex-header .menuPrimary { gap: 0.5rem !important; display: flex !important; flex-direction: column !important; } /* Target the actual ul element with x-flex */ coretex-header .menuPrimary ul[data-level="1"] { gap: 0.5rem !important; display: flex !important; flex-direction: row !important; } /* Pill Button Styling - CSS custom properties set by header section */ /* =========================== LINK LIST — STICKY + PILLS =========================== */ /* Defaults (you can tweak these) */ .link-list { --pillRadius: 20px; --pillBg: #000; --pillText: #fff; --pillBorder: #000; --pillHoverBg: #333; --pillHoverText: #fff; --pillPaddingY: 8px; --pillPaddingX: 16px; --pillFontSize: 14px; --pillGap: 8px; } /* Put sticky on the inner wrapper to avoid ancestor overflow issues */ .link-list.sticky-nav { position: relative; z-index: 98; } .link-list.sticky-nav .content { position: sticky; top: calc(var(--headerHeight, 80px) + var(--space-1, 8px)); /* sits under header */ background: var(--bg, #fff); border-bottom: 1px solid rgb(var(--colorRGB, 0 0 0) / .08); padding-block: var(--space-2, 12px); } /* If header is taller on mobile, nudge a bit more */ @media (max-width: 777px) { .link-list.sticky-nav .content { top: calc(var(--headerHeight, 80px) + var(--space-2, 12px)); } } /* Pill styling */ .link-list .content ul.inside { display: flex; flex-wrap: wrap; gap: var(--pillGap); } .link-list .content ul.inside li { list-style: none; margin: 0; } .link-list .content ul.inside li > a { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; white-space: nowrap; line-height: 1; padding: var(--pillPaddingY) var(--pillPaddingX); border-radius: var(--pillRadius); background: var(--pillBg) !important; color: var(--pillText) !important; border: 2px solid var(--pillBorder) !important; font-size: var(--pillFontSize); transition: background .2s ease, color .2s ease, border-color .2s ease; } .link-list .content ul.inside li > a:hover { background: var(--pillHoverBg) !important; color: var(--pillHoverText) !important; border-color: var(--pillHoverBg) !important; } /* Hide the little if you don’t want it inside the pill */ .link-list .content ul.inside li > a .count { display: none; } /* Sticky Link List — sits under the header, no overlap */ .link-list.sticky-nav { position: sticky; top: calc(var(--headerHeight, 80px) + var(--space-1)); /* under header */ z-index: 98; /* header is ~99, so this stays beneath */ background: var(--bg, #fff); /* solid bg so content doesn’t show through */ border-bottom: 1px solid rgb(var(--colorRGB, 0 0 0) / .08); } /* Optional: add a bit of breathing room inside */ .link-list.sticky-nav .content { padding-block: var(--space-2); } /* Mobile: a hair more offset if your header is taller on phones */ @media (max-width: 777px) { .link-list.sticky-nav { top: calc(var(--headerHeight, 80px) + var(--space-2)); } } /* Apply pill styling to all header buttons except cart with custom icon */ coretex-header button:not(.no-pill), coretex-header a.button, coretex-header summary.button { background: var(--buttonBg) !important; color: var(--buttonColor) !important; border: var(--buttonBorderWidth) solid var(--buttonBorder) !important; height: var(--buttonHeight) !important; padding: 0 var(--buttonPadding) !important; border-radius: var(--buttonBorderRadius) !important; display: flex !important; align-items: center !important; justify-content: center !important; min-width: auto !important; width: auto !important; } /* Reset cart button styling when it has custom icon */ coretex-header .cartBubble.no-pill { background: transparent !important; border: none !important; border-radius: 0 !important; height: auto !important; padding: 0 !important; width: auto !important; min-width: auto !important; } /* Spacing between button groups */ coretex-header .localization.contents { gap: var(--buttonGap) !important; } /* Hero pill button styling */ section.hero .hero-pill-button { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; font-weight: 500; transition: all 0.2s ease; border: 2px solid transparent; cursor: pointer; white-space: nowrap; } /* Hero pill button with pill styling - styling controlled by inline styles from schema settings */ section.hero .hero-pill-button.is-pill { /* Override header button styles that might interfere */ display: inline-flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; min-width: auto !important; width: auto !important; white-space: nowrap !important; cursor: pointer !important; /* Ensure perfect text centering */ flex-direction: row !important; line-height: 1 !important; vertical-align: middle !important; gap: 0 !important; /* Prevent any gap from affecting text positioning */ /* Individual styling controlled by inline styles */ } /* Mobile-specific styling for hero pill button */ @media (max-width: 777px) { section.hero .hero-pill-button.is-pill { /* Override header button styles that might interfere and ensure text is perfectly centered on mobile */ display: inline-flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; min-width: auto !important; width: auto !important; white-space: nowrap !important; cursor: pointer !important; /* Ensure perfect text centering */ flex-direction: row !important; line-height: 1 !important; vertical-align: middle !important; gap: 0 !important; /* Prevent any gap from affecting text positioning */ } } /* Hero pill button hover effects */ section.hero .hero-pill-button:hover { opacity: 0.9; } coretex-header .tools .contents { gap: calc(var(--buttonGap) / 2) !important; } coretex-header .menuPrimary ul[data-level="1"] { gap: var(--buttonGap) !important; } /* Cart and Menu Container - Side by Side */ @media (max-width: 777px) { .cart-menu-container { display: flex !important; align-items: center !important; gap: var(--mobile-cart-menu-gap, 8px) !important; } } /* Mobile Menu Dropdown Styling */ @media (max-width: 777px) { .mobile-menu-dropdown { position: relative; } .mobile-menu-dropdown summary { cursor: pointer; list-style: none; } .mobile-menu-dropdown summary::-webkit-details-marker { display: none; } .mobile-menu-content { position: absolute; top: 100%; right: 0; z-index: 9999; width: 200px; background: var(--bgColor, #ffffff); border: 1px solid var(--borderColor, #e5e5e5); border-radius: var(--borderRadius, 8px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); padding: var(--space-2, 12px); backdrop-filter: var(--overlayBlur, blur(10px)); -webkit-backdrop-filter: var(--overlayBlur, blur(10px)); margin-top: var(--space-1, 8px); /* Completely remove from document flow */ position: absolute !important; /* Initial state - hidden */ opacity: 0; transform: translateY(-10px); transition: opacity 0.3s ease, transform 0.3s ease; pointer-events: none; /* Ensure it doesn't affect layout */ float: none !important; clear: none !important; display: block !important; } /* Container for menu items - simple block layout */ .mobile-menu-links { display: flex; flex-direction: column; align-items: flex-end; width: 100%; } /* Each menu item wrapper - flex to push buttons right */ .mobile-menu-item { display: flex; justify-content: flex-end; align-items: center; width: 100%; margin-bottom: 8px; /* Initial state for slide animation */ opacity: 0; transform: translateX(20px); transition: opacity 0.2s ease, transform 0.2s ease; } /* Force the actual link/button to hug the right edge */ .mobile-menu-item > .mobile-menu-link, .mobile-menu-item > a.mobile-menu-link, .mobile-menu-item > button.mobile-menu-link, .mobile-menu-item > :where(button,a) { margin-left: auto !important; align-self: center !important; } /* HIGH SPECIFICITY: ensure auto width and right alignment wins over theme */ coretex-header .mobile-menu-content .mobile-menu-links { align-items: flex-end !important; } coretex-header .mobile-menu-content .mobile-menu-item { justify-content: flex-end !important; } coretex-header .mobile-menu-content .mobile-menu-item > :where(a,button) { width: auto !important; margin-left: auto !important; display: inline-flex !important; } .mobile-menu-item:last-child { margin-bottom: 0; } /* Actual clickable links/buttons inside menu items - pill styling */ .mobile-menu-link { display: flex; align-items: center; justify-content: center; width: auto; padding: var(--buttonPadding, 8px 16px); background: var(--buttonBg, #000000); color: var(--buttonColor, #ffffff); text-decoration: none; border: var(--buttonBorderWidth, 2px) solid var(--buttonBorderColor, #000000); border-radius: var(--buttonBorderRadius, 20px); text-align: right; cursor: pointer; transition: all 0.2s ease; font-size: var(--buttonFontSize, 14px); font-weight: var(--buttonFontWeight, 500); min-height: var(--buttonHeight, 40px); box-sizing: border-box; } .mobile-menu-link:hover { background: var(--buttonHoverBg, #333333); border-color: var(--buttonHoverBorderColor, #333333); color: var(--buttonHoverColor, #ffffff); } .mobile-menu-link i, .mobile-menu-link svg { margin-right: 8px; flex-shrink: 0; } .mobile-menu-link .txtState { flex: 1; text-align: right; } /* Universal styling for ALL buttons in mobile menu - override everything */ .mobile-menu-item button, .mobile-menu-item a, .mobile-menu-item a:not(.button), .mobile-menu-item .mobile-menu-link, .mobile-menu-item button.mobile-menu-link, .mobile-menu-item button.is-custom, .mobile-menu-item button.crl, .mobile-menu-item localization-form button, .mobile-menu-item [data-localization] button, .mobile-menu-item details summary, .mobile-menu-item form button { display: flex !important; align-items: center !important; justify-content: center !important; width: auto !important; padding: 8px 16px !important; background: #000000 !important; color: #ffffff !important; text-decoration: none !important; border: 2px solid #000000 !important; border-radius: 20px !important; text-align: center !important; cursor: pointer !important; transition: all 0.2s ease !important; font-size: 14px !important; font-weight: 500 !important; min-height: 40px !important; box-sizing: border-box !important; margin: 0 !important; outline: none !important; appearance: none !important; -webkit-appearance: none !important; } .mobile-menu-item button:hover, .mobile-menu-item a:hover, .mobile-menu-item .mobile-menu-link:hover, .mobile-menu-item button.mobile-menu-link:hover, .mobile-menu-item button.is-custom:hover, .mobile-menu-item button.crl:hover, .mobile-menu-item localization-form button:hover, .mobile-menu-item [data-localization] button:hover, .mobile-menu-item details summary:hover, .mobile-menu-item form button:hover { background: #333333 !important; border-color: #333333 !important; color: #ffffff !important; } /* Center align text in all buttons */ .mobile-menu-item button span:not(.visually-hidden), .mobile-menu-item a span:not(.visually-hidden), .mobile-menu-item .txtState { flex: 1 !important; text-align: center !important; margin: 0 !important; } /* Icons stay on the left */ .mobile-menu-item button i, .mobile-menu-item button svg, .mobile-menu-item a i, .mobile-menu-item a svg { margin-right: 8px !important; flex-shrink: 0 !important; margin-left: 0 !important; } /* HIGH SPECIFICITY fix: anchor vs button differences inside dropdown */ coretex-header .mobile-menu-content .mobile-menu-item > a.mobile-menu-link, coretex-header .mobile-menu-content .mobile-menu-item > button.mobile-menu-link { display: flex !important; align-items: center !important; justify-content: center !important; width: auto !important; padding: 8px 16px !important; background: #000000 !important; color: #ffffff !important; border: 2px solid #000000 !important; border-radius: 20px !important; text-align: center !important; min-height: 40px !important; box-sizing: border-box !important; } coretex-header .mobile-menu-content .mobile-menu-item > a.mobile-menu-link .txtState, coretex-header .mobile-menu-content .mobile-menu-item > button.mobile-menu-link .txtState { flex: 1 !important; text-align: center !important; margin: 0 !important; } /* Open state - slide down and fade in */ .mobile-menu-dropdown[open] .mobile-menu-content { opacity: 1; transform: translateY(0); pointer-events: auto; } /* Staggered animation for menu items */ .mobile-menu-dropdown[open] .mobile-menu-item { opacity: 1; transform: translateX(0); } .mobile-menu-dropdown[open] .mobile-menu-item:nth-child(1) { transition-delay: 0.05s; } .mobile-menu-dropdown[open] .mobile-menu-item:nth-child(2) { transition-delay: 0.1s; } .mobile-menu-dropdown[open] .mobile-menu-item:nth-child(3) { transition-delay: 0.15s; } .mobile-menu-dropdown[open] .mobile-menu-item:nth-child(4) { transition-delay: 0.2s; } .mobile-menu-dropdown[open] .mobile-menu-item:nth-child(5) { transition-delay: 0.25s; } .mobile-menu-dropdown[open] .mobile-menu-item:nth-child(6) { transition-delay: 0.3s; } } /** Menu: dropdown (default) */ coretex-header[coretex-menu="drop"] ul:where([data-level="2"],[data-level="3"]) { display: flex; flex-direction: column; position: relative; margin: 0px; color: var(--color); padding: var(--padding); } coretex-header[coretex-menu="drop"] ul[data-level="2"] { position: absolute; z-index: 1; max-height: 85dvh; overflow-y: auto; background: var(--bg); background-attachment: fixed; border: var(--globalBorderWidth) solid var(--border); border-radius: var(--globalRadius); margin-block-start: var(--space-1); -webkit-backdrop-filter: var(--overlayBlur); backdrop-filter: var(--overlayBlur); } coretex-header[coretex-menu="drop"] ul[data-level="3"] { padding-block-start: 0; padding-inline-start: var(--margin); } coretex-header[coretex-menu="drop"] details[open].lv1 > summary { background: var(--bgColor); background-attachment: fixed; -webkit-backdrop-filter: var(--overlayBlur); backdrop-filter: var(--overlayBlur); } coretex-header[coretex-menu="drop"] ul[data-level="3"]:before { content: var(--openSymbol); display: inline; position: absolute; inset-block-start: 0.3em; inset-inline-start: -0.2em; } coretex-header[coretex-menu="drop"] ul:where([data-level="2"],[data-level="3"]) li.bdotfx:is(:hover,:focus-visible,:focus-within) > a:before, coretex-header[coretex-menu="drop"] ul:where([data-level="2"],[data-level="3"]) li.bdotfx:is(:hover,:focus-visible,:focus-within) > details > summary:before, coretex-header[coretex-menu="drop"] ul:where([data-level="2"],[data-level="3"]) li.bdotfx details[open] > summary:before { content: var(--hoverSymbol); position: absolute; inset-inline-start: var(--hoverSymbolInline); } /** Menu: mega */ coretex-header[coretex-menu="mega"] { position: relative } coretex-header[coretex-menu="mega"] ul[data-level="2"] { position: absolute; inset-inline: 0; inset-block-start: calc(var(--headerHeight, 102px) - 2px); z-index: 100; margin: 0; margin-block-start: calc(-1 * var(--globalBorderWidth)); border-block: var(--globalBorderWidth) solid var(--border); /* margin-block-start: calc(var(--space-4) * 1.4); */ padding: var(--space-5) var(--layoutInline) var(--padding); max-height: 80vh; overflow: auto; background: var(--headerBg); background-attachment: fixed; /* This will be ignored in Chrome (bug #356891480) */ -webkit-backdrop-filter: var(--overlayBlur); backdrop-filter: var(--overlayBlur); } html.chrome coretex-header[coretex-menu="mega"] details-menu > ul[data-level="2"] { background: var(--bg) } /* Since the backdrop-filter is ignored in Chrome, we need to set a solid background color */ /* coretex-header[coretex-menu="mega"] details-menu > ul[data-level="2"]:before { content: var(--openSymbol); margin-block-start: 3px; line-height: 1lh; } coretex-header[coretex-menu="mega"] details-menu > ul[data-level="2"]:not(:has([data-level="3"])):before { position: absolute; inset-inline-start: calc(var(--layoutInline) - 0.5vw); } */ coretex-header[coretex-menu="mega"] ul[data-level="2"] summary { pointer-events: none; color: var(--colorFaded); margin-block-end: var(--space-2) } coretex-header[coretex-menu="mega"] ul[data-level="2"] summary i { display: none } coretex-header[coretex-menu="mega"] ul[data-level="2"] > li { width: max(150px, 100%); height: fit-content } coretex-header[coretex-menu="mega"] nav.firstElevated ul[data-level="2"]:has(ul[data-level="3"]) > li:first-of-type a { font-size: var(--type-6); line-height: calc(2px + 1ex + 2px); font-weight: 600; letter-spacing: .009em } coretex-header[coretex-menu="mega"] ul[data-level="3"] { margin: 0; padding: 0 } coretex-header[coretex-menu="mega"] ul[data-level="3"] > li { max-width: 99% } coretex-header[coretex-menu="mega"] ul:where([data-level="2"],[data-level="3"]) li.bdotfx:is(:hover,:focus-visible) > a:before { content: var(--hoverSymbol); position: absolute; inset-inline-start: var(--hoverSymbolInline) } /* in case there are no level 3 items. */ coretex-header[coretex-menu="mega"] details-menu > ul[data-level="2"]:not(:has(ul[data-level="3"])) { display: block } /* Add a shadow to end of mega menu */ coretex-header[coretex-menu="mega"][mega-shadow="true"] details-menu > ul[data-level="2"] { box-shadow: 0 4rem 5rem rgb(0 0 0 / .12) } /** Menu: drawer w/o mobile */ coretex-header[coretex-menu="drawer"] .menuContent { max-width: 450px } /* Open drawer */ coretex-header[coretex-menu="drawer"] .menuContent { transform: translateY(-150vh); opacity: 0; transition: transform 800ms var(--easeInOutQuint), opacity 1s var(--easeInOutQuint) } body.do-menuDrawerBox coretex-header[coretex-menu="drawer"] .menuContent { transform: none; opacity: 1; transition: transform 800ms var(--easeInOutQuint), opacity 0s var(--easeInOutQuint) } /* Drawer */ coretex-header[coretex-menu="drawer"] .menuContent { --gap: 0; position: fixed; inset-inline: 0; inset-block-start: 0; z-index: 100; max-height: 95vh; overflow: auto; overscroll-behavior: contain; padding: var(--padding); margin: var(--padding) var(--layoutInline); background: var(--bg); background-attachment: fixed; border: 1px solid rgb(var(--colorRGB) / .15); border-radius: var(--globalRadius); box-shadow: 0px 0px 7px 1px rgb(0 0 0 / 0.1); /* This will be ignored in Chrome (/issue/356891480) */ -webkit-backdrop-filter: var(--overlayBlur); backdrop-filter: var(--overlayBlur); } html.chrome coretex-header[coretex-menu="drawer"] .menuContent { background: var(--bg) } /* Since the backdrop-filter is ignored in Chrome, we need to set a solid background color */ coretex-header:not([coretex-menu="drawer"]) drawer-header { display: none } coretex-header[coretex-menu="drawer"] .menuContent drawer-header { --buttonPadding: var(--space-1); --buttonMargin: 0; margin-block-end: var(--space-5); } coretex-header[coretex-menu="drawer"] details > summary i { transform: rotate(270deg) } coretex-header[coretex-menu="drawer"] details[open] > summary i { transform: rotate(90deg) } coretex-header[coretex-menu="drawer"] [data-level="1"] { margin: 0 } coretex-header[coretex-menu="drawer"] ul { margin: var(--space-4); margin-inline-end: 0 } coretex-header[coretex-menu="drawer"] li.bdotfx:is(:hover,:focus-visible) > a:before, coretex-header[coretex-menu="drawer"] li.bdotfx:is(:hover,:focus-visible,:focus-within) > details > summary:before, coretex-header[coretex-menu="drawer"] li.bdotfx details[open] > summary:before { content: var(--hoverSymbol); position: absolute; inset-inline-start: var(--hoverSymbolInline) } } /* Mobile */ @media (max-width: 777px) { :is(.mobileTrigger, .tools) { transition: opacity 500ms var(--easeInOutQuint) } body.do-menuDrawerBox :is(.mobileTrigger, .tools) { opacity: 0; pointer-events: none } coretex-header[coretex-menu] .menuContent nav.menuPrimary .button { text-align: start; white-space: break-spaces; line-height: initial } /* === [ CORETEX FYI ] === You need to keep all code below in sync with the drawer menu code above. */ /** Menu: drawer mobile */ /* Open drawer */ coretex-header[coretex-menu] .menuContent { margin-block: 0px; transform: translateY(-150vh); opacity: 0; pointer-events: none; transition: transform 800ms var(--easeInOutQuint), opacity 1s var(--easeInOutQuint) } body.do-menuDrawerBox coretex-header[coretex-menu] .menuContent { transform: none; opacity: 1; pointer-events: all; transition: transform 800ms var(--easeInOutQuint), opacity 0s var(--easeInOutQuint) } coretex-header[content-type="text"] .menuContent drawer-footer *:not(.noHide) > i { display: none } /* Drawer */ coretex-header[coretex-menu] .menuContent { --gap: 0; position: fixed; inset-inline: 0; inset-block-start: 0; z-index: 100; max-height: calc(95dvh - var(--headSpace)); overflow: auto; overscroll-behavior: contain; padding: var(--padding); margin: var(--padding) var(--layoutInline); background: var(--bg); background-attachment: fixed; color: var(--color); border: 1px solid rgb(var(--colorRGB) / .15); border-radius: var(--globalRadius); box-shadow: 0px 0px 7px 1px rgb(0 0 0 / 0.1); /* This will be ignored in Chrome (/issue/356891480) */ -webkit-backdrop-filter: var(--overlayBlur); backdrop-filter: var(--overlayBlur); } coretex-header[coretex-menu] .menuContent drawer-header { --buttonPadding: var(--space-1); --buttonMargin: 0; margin-block-end: var(--space-5); } coretex-header[coretex-menu] .menuContent drawer-footer { --buttonPadding: var(--space-1); --buttonMargin: 0; --gap: var(--space-3); margin-block-start: var(--space-5); } coretex-header[coretex-menu] details > summary i { transform: rotate(270deg) } coretex-header[coretex-menu] details[open] > summary i { transform: rotate(90deg) } coretex-header[coretex-menu] [data-level="1"] { margin: 0 } coretex-header[coretex-menu] ul { margin: var(--space-4); margin-inline-end: 0 } /* === / end === */ /* Mobile drawer menu specifics */ coretex-header[coretex-menu] .menuContent a { display: block } coretex-header[coretex-menu] .menuContent { inset-block-start: var(--headerHeight); inset-block-end: 0; height: fit-content; transform: translateY(100vh) scale(0.9); } } /* Breadcrumb */ .breadcrumb { padding-inline: var(--layoutInline) } .breadcrumb > * { padding: var(--space-1); white-space: nowrap } .breadcrumb > a:first-child { margin-inline-start: var(--space-1) } /* [C] Predictive search */ coretex-dialog#searchBox { --dialogH: fit-content; --dialogMaxH: 90vh } /* Safari fit-content bug, for some reason the fit-content doesn't work on Safari in our case.*/ html.mq-desktop.safari coretex-dialog#searchBox { --dialogH: max(100%, 600px); --dialogMaxH: min(90vh, 600px) } /* trying to fix an annoying iOS problem, where when the keyboard is open, safari removes the `overflow:hidden` from the page creating a scrollable page mess, because you can scroll the dialog but also the page. */ @media screen and (max-width: 777px) { coretex-dialog#searchBox { --dialogH: 90dvh; --dialogH: 90dvh; --dialogMaxH: 90dvh; --dialogMaxH: 90dvh; } } coretex-dialog#searchBox predictive-search [data-predictive-search] { display: none; overflow: hidden } coretex-dialog#searchBox predictive-search[results="true"] [data-predictive-search] { display: block } coretex-dialog#searchBox x-stack[presuffix] { --inputMargin: 0 } coretex-dialog#searchBox dialog-wrapper { height: 100% } coretex-dialog#searchBox :where(search-engine,main-search) { display: block; height: 100% } coretex-dialog#searchBox main-search form { display: block; height: 100% } coretex-dialog#searchBox .title { font-size: var(--fontSize); font-family: var(--fontFamily) } coretex-dialog#searchBox a.search-section { height: 100%; justify-content: end } coretex-dialog#searchBox a.search-item { gap: var(--gap) } coretex-dialog#searchBox img { max-width: 65px; height: var(--prodCardHeight, initial); aspect-ratio: var(--prodCardRatio, 1 / 1); object-fit: var(--prodCardFit, cover); object-position: var(--prodCardPosition, center); } predictive-search:not([loading]) .predictive-search__loading-state, predictive-search:not([loading]) .predictive-search-status__loading { display: none } predictive-search[loading] .predictive-search__loading-state, predictive-search[loading] .predictive-search-status__loading { display: block } coretex-dialog#searchBox #predictive-search-option-search-keywords { margin-block: var(--padding) } search-engine { --hMargin: 0 0 var(--space-2) } search-engine .price .price-sale { flex-wrap: wrap; gap: 0 var(--padding)!important } search-engine .meta .title { --hMargin: 0; line-height: 1.26 } search-engine .search-list .item:not(.suggest) .button { --buttonWeight: 400; --buttonMargin: 0; --buttonPadding: var(--space-2) } search-engine .search-list .item.suggest .button { --buttonWeight: 400; --buttonMargin: 0; --buttonPadding: var(--space-2) 0 } search-engine x-stack label i { color: var(--inputColor) } /*** Footer ***/ /* Stealth footer */ html:not(.shopify-design-mode) body[coretex-footer="stealth"] #footerGroup { position: fixed; inset-block-end: 0px; z-index: 100; width: 100%; transform: translateY(100vh); transition: transform 800ms var(--easeInOutQuint); max-height: calc(100vh - var(--headSpace)); overflow-y: auto; overscroll-behavior: contain; } html:not(.shopify-design-mode) body[coretex-footer="stealth"] #footerGroup:target { transform: none } body[coretex-footer="stealth"] #footerGroup .main-footer { background: var(--bg); background-attachment: fixed; color: var(--color) } body[coretex-footer="stealth"] #footerGroup .main-footer:first-of-type { border-block-start: 1px solid rgb(var(--colorRGB) / .15) } body[coretex-footer="stealth"] .stealthFooterOpen { position: fixed; inset-block-end: 0; inset-inline: 0; z-index: 100; display: block; margin-inline: auto; transition: all 500ms var(--easeInOutQuint); } body[coretex-footer="stealth"]:has(#footerGroup:target) .stealthFooterOpen { opacity: 0; transform: translateY(50vh); pointer-events: none } body[coretex-footer="stealth"] #footerGroup .stealthFooterClose { display: block; margin: var(--space-1) auto } .labelTitle { color: var(--labelTitleColor,var(--colorFaded)); font-size: var(--labelTitleSize, var(--type-3)); font-weight: var(--labelTitleWeight, 400); word-wrap: break-word; } #primaryFooter, #secondaryFooter { background: var(--bg); background-attachment: fixed; color: var(--color); padding: var(--space-3) var(--layoutInline); } #primaryFooter { --gap: var(--space-4) } /* #primaryFooter > * > section > * { height: 100% } */ #primaryFooter .menu { --gap: 0 var(--space-2) } #primaryFooter .menu a { display: block; padding-block: var(--space-1); word-break: break-word } #primaryFooter .socialNets { --iconSize: 1.5rem; gap: var(--space-3); height: 100% } #primaryFooter .payment-icons { --iconSize: 2.5rem } #primaryFooter .payment-icons [x-flex] { justify-content: var(--paymentJustify) } #primaryFooter .follow-on-shop { margin-block: var(--padding) } #primaryFooter .newsletter { --hMargin: 0; --pMargin: 0; --gap: var(--space-1) } #primaryFooter .i18n-selectors { --gap: var(--space-1) var(--space-3); --labelTitleSize: var(--fontSize); } #primaryFooter :where(.newsletter,.i18n-selectors) button.is-custom { --buttonPadding: var(--space-1); --buttonMargin: 0; --buttonGap: var(--space-1); --buttonWeight: 400 } #primaryFooter .image img { height: var(--imageSize, 150px); width: fit-content } @media screen and (max-width: 777px) { #primaryFooter { --gap: var(--space-6) var(--space-2) } } #secondaryFooter { --linkColor: var(--linkColorFaded); --gap: var(--space-2) var(--space-8); color: var(--colorFaded); font-size: 85%; } #secondaryFooter .policies { --gap: var(--space-1) var(--space-3) } #secondaryFooter a { padding-block: var(--space-2) } /* [C] Localization component */ #languageBox, #countryBox { --dialogH: fit-content } /* fixing an annoying iOS problem, where when the keyboard is open, safari removes the `overflow:hidden` from the page creating a scrollable page mess, because you can scroll the dialog but also the page. */ @media screen and (max-width: 777px) { #countryBox .country-filter { display: none } } country-search button[type="reset"] { width: fit-content } country-search .popular-list li { margin-block: var(--globalBorderWidth) } .localization-list { gap: var(--globalBorderWidth) } .localization-list > li { margin-bottom: 0 } .localization-item { order: 2 } .localization-item[aria-current="true"] { order: 1 } .localization-item > a { display: flex; justify-content: space-between; padding: var(--space-1); position: relative } .localization-item > a:not([aria-current="true"]) .currency .isoCode { opacity: 0 } .localization-item > a:not([aria-current="true"]):is(:hover,:focus,:focus-visible) .currency .isoCode { opacity: 1 } .localization-item a[aria-current="true"] { text-decoration: underline; font-weight: 600 } .localization-item a:where([aria-current="true"],:is(:hover,:focus,:focus-visible)):before { content: var(--hoverSymbol); position: absolute; inset-inline-start: -0.4em } localization-form form { display: flex; flex-direction: column; gap: var(--margin) } /* Numbered pagination */ nav.pagination { margin-block-start: var(--space-9)} nav.pagination :where(a,ul li > *) { display: inline-block; padding: var(--space-3) } nav.pagination [aria-current="page"] { text-decoration: underline overline } nav.pagination [disabled] { pointer-events: none; text-decoration: line-through } /* Shopify Policies pages */ .shopify-policy__title { display: block; text-align: inherit; width: fit-content; margin-inline: var(--layoutCenter, 0) } .shopify-policy__container { width: 100%; max-width: var(--layoutMaxWidth); margin: var(--margin) var(--layoutCenter, 0); padding: 0 var(--layoutInline) var(--margin); } .shopify-policy__body :is(h1,h2,h3,h4,h5,h6) { --hLine: 1.1; --hSpace: 0px; margin-block: 1.5em .3em; } /** Cart */ /* Dynamic checkout */ shopify-accelerated-checkout-cart { --shopify-accelerated-checkout-button-block-size: 42px; --shopify-accelerated-checkout-button-inline-size: 42px; --shopify-accelerated-checkout-button-border-radius: var(--globalRadius); --shopify-accelerated-checkout-button-box-shadow: none; --shopify-accelerated-checkout-inline-alignment: flex-start; --shopify-accelerated-checkout-row-gap: var(--margin); --shopify-accelerated-checkout-skeleton-background-color: rgb(128 128 128 / 0.4); --shopify-accelerated-checkout-skeleton-animation-opacity-start: 1; --shopify-accelerated-checkout-skeleton-animation-opacity-end: 0.5; --shopify-accelerated-checkout-skeleton-animation-duration: 4s; --shopify-accelerated-checkout-skeleton-animation-timing-function: ease; display: block; margin-block: var(--margin); } coretex-cart cart-item ul.product-components { margin: 0; li:last-child { margin: 0 } li { margin-block-end: var(--space-1) } } /*** Home page ***/ /* Recommended products, recently viewed, and products by vendor */ [coretex-page="product"] .suggested :where(coretex-fetch,product-recommendations) { background: var(--bg); background-attachment: fixed; color: var(--color) } .suggested :where(coretex-fetch,product-recommendations) product-card { --scrollChildMinWidth: 250px; --scrollChildMaxWidth: var(--prodCardSlideRatio); height: 100%; width: var(--scrollChildMinWidth); } .suggested.recently-viewed:has(coretex-fetch:not([loading="lazy"])[loaded="false"]) { padding: 0!important; opacity: 0 } /* Onboarding */ svg.svgph { fill: var(--color); background: rgb(var(--colorRGB) / .1) } product-card.onboarding .svgph { width: 100% } /* Cookies banner */ :is(#shopify-pc__banner.shopify-pc__banner__dialog) { box-shadow: none; border-radius: var(--radius) var(--radius) 0 0; border: var(--globalBorder); padding: var(--padding); margin: 0 var(--layoutInline); max-width: calc(100vw - (var(--layoutInline) * 2)); } :is(#shopify-pc__banner.shopify-pc__banner__dialog) button:is(.shopify-pc__banner__btn-accept,.shopify-pc__banner__btn-decline,.shopify-pc__banner__btn-manage-prefs) { display: block; padding: var(--buttonPadding); border: none; border-radius: var(--buttonRadius); text-decoration: none; text-align: var(--buttonAlign); } :is(#shopify-pc__banner.shopify-pc__banner__dialog) button:is(.shopify-pc__banner__btn-manage-prefs) { font-weight: 400 } body[class^="o-"] .shopify-pc__banner__dialog { z-index: 5 } .gs-title { --hMargin: 0 } /* [C] Coretex mouse tracker */ coretex-mouse-tracker { display: block; position: relative; z-index: 2; isolation: isolate; .featImg img { width: 100%; max-height: 400px; object-fit: contain; object-position: center } @media (width >= 777px) { [data-track] { position: absolute; inset: 0; z-index: 1; width: 100%; opacity: 0; scale: 0.9; transform-origin: center; transform: translate(var(--mouse-x, 0px), var(--mouse-y, 0px)); will-change: transform; pointer-events: none; } [data-track="animate"], [data-track*="animate"] { transition: scale 200ms var(--easeOutQuart), opacity 200ms var(--easeOutQuart) } [data-track*="show"] { opacity: 1; scale: 1 } [data-track*="smooth"] { transition: scale 200ms var(--easeOutQuart), opacity 200ms var(--easeOutQuart) } [data-track*="instant"] { transition: scale 200ms var(--easeOutQuart), opacity 200ms var(--easeOutQuart) } } } /* [S] Coretex scroll snap slider styles */ coretex-scroll { display: block; max-width: 100% } coretex-scroll[scrollable] [scroll-area] { contain: content; scrollbar-width: none; user-select: none; cursor: grab; scroll-padding-left: var(--layoutInline) } coretex-scroll[scrollable] [scroll-area] [scroll-slide] { user-select: none } coretex-scroll[scrollable] [scroll-area]::-webkit-scrollbar { display: none } coretex-scroll:not([scrollable-left]) [scroll-button-prev], coretex-scroll:not([scrollable-right]) [scroll-button-next] { opacity: 0.2; cursor: not-allowed } [dir="rtl"] coretex-scroll [scroll-button-prev] { order: 1 } coretex-scroll :where([scroll-button-prev],[scroll-button-next]) { display: none } coretex-scroll[scrollable] :where([scroll-button-prev],[scroll-button-next]) { display: block } coretex-scroll .coretex-scroll-nav { opacity: 0; transition: opacity 500ms ease-in-out } coretex-scroll:where(:hover,:focus-within) .coretex-scroll-nav { opacity: 1 } coretex-scroll:not([scrollable]) .coretex-scroll-nav { display: none!important } /* Show navigation arrows on mobile - always visible, not on hover */ @media (max-width: 777px) { coretex-scroll .coretex-scroll-nav { opacity: 1 !important; /* Always visible on mobile */ display: flex !important; /* Override the hide */ } } coretex-scroll [scroll-area] [scroll-slide]:first-child { margin-inline-start: var(--layoutInline) } coretex-scroll [scroll-area] [scroll-slide]:last-child { margin-inline-end: var(--layoutInline) } /* Coretex slider */ coretex-slider [slider-viewport] { display: block; position: relative; overflow: hidden } coretex-slider [slider-container] { display: flex; touch-action: pan-y pinch-zoom; backface-visibility: hidden; scrollbar-width: none; user-select: none; cursor: grab } coretex-slider [slider-slide] { flex: 0 0 100%; user-select: none } /* [S] Sections general */ .listOfProds { --scrollChildMinWidth: var(--prodCardSlideRatio); --scrollChildMaxWidth: var(--prodCardSlideRatio); .onboarding:first-child { margin-inline-start: var(--layoutInline) } /* Layout type grid */ &[layout-type="grid"] { padding-inline: var(--layoutInline); .product-grid { gap: var(--gridGap); @media (width < 777px) { gap: var(--gridGapMob) } } } } @media (width < 777px) { .listOfProds { --scrollChildMinWidth: 250px; --scrollChildMaxWidth: 250px } .recently-viewed.listOfProds { --scrollChildMinWidth: fit-content; --scrollChildMaxWidth: fit-content } } /* [S] Sections heading */ .section-heading { --hMargin: 0; --pMargin: 0; margin-block-end: var(--space-4) } .section-heading .description { max-width: 62ch } .section-heading:empty { display: none } coretex-scroll .section-heading { padding-inline: var(--layoutInline) } .section-heading :where(.coretex-scroll-nav,.cta[js="end"]) { margin-inline-start: auto } .section-heading[addpad] { padding-inline: var(--layoutInline) } @media(min-width: 777px) { .shopify-section .section-heading[stealth="true"] { opacity: 0; transition: opacity 500ms ease-in-out } .shopify-section:where(:hover,:focus-within) .section-heading[stealth="true"] { opacity: 1 } } /* [C] Autoscroll slider */ [autoscroll-toggle][aria-pressed="true"] [autoscroll-play-text], [autoscroll-toggle][aria-pressed="false"] [autoscroll-pause-text] { display: none } /* Grid to act like a flex container */ [flow="horizontal"] { display: grid; grid-auto-flow: column } [flow="vertical"] { display: grid; grid-auto-flow: row } /* [S] Used for Hero Banner alignments */ x-flex[pi="top left"] { align-items: flex-start; justify-content: flex-start } x-flex[pi="top center"] { align-items: flex-start; justify-content: center } x-flex[pi="top right"] { align-items: flex-start; justify-content: flex-end } x-flex[pi="top between"] { align-items: flex-start; width: 100%; } x-flex[pi="center left"] { align-items: center; justify-content: flex-start } x-flex[pi="center"] { align-items: center; justify-content: center } x-flex[pi="center right"] { align-items: center; justify-content: flex-end } x-flex[pi="center between"] { align-items: center; width: 100%; } x-flex[pi="bottom left"] { align-items: flex-end; justify-content: flex-start } x-flex[pi="bottom center"] { align-items: flex-end; justify-content: center } x-flex[pi="bottom right"] { align-items: flex-end; justify-content: flex-end } x-flex[pi="bottom between"] { align-items: flex-end; width: 100%; } x-flex[pi*="between"] x-cell.content { width: 100% } x-flex[pi*="between"] x-cell.content x-flex { justify-content: space-between } x-flex[pi*="between"][orientation="column"] x-cell.content { height: 100% } x-flex[pi*="between"][orientation="column"] x-cell.content x-flex { height: 100%; justify-content: space-between } @media (max-width: 777px) { x-flex[pi-s="top left"] { align-items: flex-start; justify-content: flex-start } x-flex[pi-s="top center"] { align-items: flex-start; justify-content: center } x-flex[pi-s="top right"] { align-items: flex-start; justify-content: flex-end } x-flex[pi-s="top between"] { align-items: flex-start; width: 100%; } x-flex[pi-s="center left"] { align-items: center; justify-content: flex-start } x-flex[pi-s="center"] { align-items: center; justify-content: center } x-flex[pi-s="center right"] { align-items: center; justify-content: flex-end } x-flex[pi-s="center between"] { align-items: center; width: 100%; } x-flex[pi-s="bottom left"] { align-items: flex-end; justify-content: flex-start } x-flex[pi-s="bottom center"] { align-items: flex-end; justify-content: center } x-flex[pi-s="bottom right"] { align-items: flex-end; justify-content: flex-end } x-flex[pi-s="bottom between"] { align-items: flex-end; width: 100%; } x-flex[pi-s*="between"] x-cell.content { width: 100% } x-flex[pi-s*="between"] x-cell.content x-flex { justify-content: space-between } x-flex[pi-s*="between"][orientation-s="column"] .content { height: 100% } x-flex[pi-s*="between"][orientation-s="column"] .content x-flex { height: 100%; justify-content: space-between } /* === Cart Counter Badge === */ /* Make the cart button the positioning context */ coretex-header button.cartBubble { position: relative !important; display: inline-flex !important; align-items: center !important; } /* Position the cart-count wrapper - positioning is controlled by header section settings */ coretex-header button.cartBubble > cart-count { position: absolute !important; z-index: 2 !important; display: block !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; } /* Hide badge when empty */ coretex-header cart-count[data-count="0"] { display: none !important; } /* ============================================ PBW — LINK LIST (Sticky + Pills) ============================================ */ /* Make parent hold sticky context */ .link-list.sticky-nav { position: relative; z-index: 50; overflow: visible; } /* Sticky bar stays BELOW the header */ .link-list.sticky-nav .content { position: sticky; top: calc(var(--headerHeight, 80px) + 8px); background: var(--bg, #fff); padding-block: var(--space-2); border-bottom: 1px solid rgba(0,0,0,0.08); } /* Pills layout */ .link-list.sticky-nav .inside { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; } /* Turn links into pills */ .link-list.sticky-nav .inside a { display: inline-flex; align-items: center; justify-content: center; background: var(--buttonBg); color: var(--buttonColor); border: var(--buttonBorderWidth) solid var(--buttonBorder); border-radius: var(--buttonBorderRadius); height: var(--buttonHeight); padding-inline: var(--buttonPadding); font-size: var(--_fontSizeMob); line-height: 1; text-decoration: none; white-space: nowrap; transition: 0.2s ease; } /* Desktop font size */ @media (min-width: 777px) { .link-list.sticky-nav .inside a { font-size: var(--_fontSize); } } /* Hover */ .link-list.sticky-nav .inside a:hover { background: var(--buttonHoverBg); color: var(--buttonHoverColor); border-color: var(--buttonHoverBorder); } /* Hide counts */ .link-list.sticky-nav .inside .count { display: none; } /* Extra space if header taller on mobile */ @media (max-width: 768px) { .link-list.sticky-nav .content { top: calc(var(--headerHeight, 80px) + 12px); } }