/** Shopify CDN: Minification failed Line 4697:9 Expected identifier but found whitespace Line 4697:10 Unexpected "where(" Line 4797:18 Expected identifier but found whitespace Line 4797:19 Unexpected "is(" Line 4801:18 Expected identifier but found whitespace Line 4801:19 Unexpected "is(" Line 4858:17 Expected identifier but found whitespace Line 4858:18 Unexpected "where(" Line 4874:13 Expected identifier but found whitespace Line 4874:14 Unexpected "where(" ... and 31 more hidden warnings **/ * { box-sizing: border-box; } body { color: var(--color-foreground); background: var(--color-background); display: flex; flex-direction: column; margin: 0; min-height: 100svh; font-variation-settings: 'slnt' 0; } :root { --hover-lift-amount: 4px; --hover-scale-amount: 1.03; --hover-subtle-zoom-amount: 1.015; --hover-shadow-color: var(--color-shadow); --hover-transition-duration: 0.25s; --hover-transition-timing: ease-out; --surface-transition-duration: 0.3s; --surface-transition-timing: var(--ease-out-quad); } html { /* Firefox */ scrollbar-width: thin; scrollbar-color: rgb(var(--color-foreground-rgb) / var(--opacity-40)) var(--color-background); scroll-behavior: smooth; } html[scroll-lock] { overflow: hidden; } img, picture, video, canvas, svg { display: block; max-width: 100%; } img { width: 100%; height: auto; } input, textarea, select { font: inherit; border-radius: var(--style-border-radius-inputs); } input:hover { background-color: var(--color-input-hover-background); } /** override ios and firefox defaults */ select { background-color: var(--color-background); color: currentcolor; } .product-card, .collection-card, .resource-card, .predictive-search-results__card--product, .predictive-search-results__card { position: relative; transition: transform var(--hover-transition-duration) var(--hover-transition-timing), box-shadow var(--hover-transition-duration) var(--hover-transition-timing); will-change: transform, box-shadow; z-index: var(--layer-flat); } .product-card__link { position: absolute; inset: 0; } .product-card__content { position: relative; } .product-card__content { cursor: pointer; } .product-card__content slideshow-component { --cursor: pointer; } .predictive-search-results__card .product-card, .predictive-search-results__card .collection-card, .predictive-search-results__card .resource-card { transition: none; will-change: auto; } @media (any-pointer: fine) and (prefers-reduced-motion: no-preference) { .card-hover-effect-lift .product-card:hover, .card-hover-effect-lift .collection-card:hover, .card-hover-effect-lift .resource-card:hover, .card-hover-effect-lift .predictive-search-results__card:hover { transform: translateY(calc(-1 * var(--hover-lift-amount))); } .card-hover-effect-lift .header .product-card:hover, .card-hover-effect-lift .header .collection-card:hover, .card-hover-effect-lift .header .resource-card:hover, .card-hover-effect-lift .header-drawer .product-card:hover, .card-hover-effect-lift .header-drawer .collection-card:hover, .card-hover-effect-lift .header-drawer .resource-card:hover { transform: none; } .card-hover-effect-scale .product-card:hover, .card-hover-effect-scale .collection-card:hover, .card-hover-effect-scale .resource-card:hover, .card-hover-effect-scale .predictive-search-results__card:hover { transform: scale(var(--hover-scale-amount)); } .card-hover-effect-scale .header .product-card:hover, .card-hover-effect-scale .header .collection-card:hover, .card-hover-effect-scale .header .resource-card:hover, .card-hover-effect-scale .header-drawer .product-card:hover, .card-hover-effect-scale .header-drawer .collection-card:hover, .card-hover-effect-scale .header-drawer .resource-card:hover { transform: none; } .card-hover-effect-subtle-zoom .card-gallery, .card-hover-effect-subtle-zoom .collection-card__image, .card-hover-effect-subtle-zoom .product-card__image, .card-hover-effect-subtle-zoom .resource-card__image { overflow: hidden; transition: transform var(--hover-transition-duration) var(--hover-transition-timing); } .predictive-search-results__card .card-gallery, .predictive-search-results__card .collection-card__image, .predictive-search-results__card .product-card__image, .predictive-search-results__card .resource-card__image { transition: none; } .card-hover-effect-subtle-zoom .product-card:hover .card-gallery, .card-hover-effect-subtle-zoom .collection-card:hover .collection-card__image, .card-hover-effect-subtle-zoom .product-card:hover .product-card__image, .card-hover-effect-subtle-zoom .resource-card:hover .resource-card__image, .card-hover-effect-subtle-zoom .predictive-search-results__card:hover { transform: scale(var(--hover-subtle-zoom-amount)); } .card-hover-effect-subtle-zoom .header .product-card:hover .card-gallery, .card-hover-effect-subtle-zoom .header .collection-card:hover .collection-card__image, .card-hover-effect-subtle-zoom .header .product-card:hover .product-card__image, .card-hover-effect-subtle-zoom .header .resource-card:hover .resource-card__image, .card-hover-effect-subtle-zoom .header-drawer .product-card:hover .card-gallery, .card-hover-effect-subtle-zoom .header-drawer .collection-card:hover .collection-card__image, .card-hover-effect-subtle-zoom .header-drawer .product-card:hover .product-card__image, .card-hover-effect-subtle-zoom .header-drawer .resource-card:hover .resource-card__image { transform: none; } .predictive-search-results__card .product-card:hover, .predictive-search-results__card .collection-card:hover, .predictive-search-results__card .resource-card:hover, .header .product-card:hover, .header .collection-card:hover, .header .resource-card:hover, .header-drawer .product-card:hover, .header-drawer .collection-card:hover, .header-drawer .resource-card:hover { transform: none; box-shadow: none; } } dialog { /* the ::backdrop inherits from the originating element, custom properties must be set on the dialog element */ --backdrop-color-rgb: var(--color-shadow-rgb); background-color: var(--color-background); color: var(--color-foreground); } p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; } p:empty { display: none; } :first-child:is(p, h1, h2, h3, h4, h5, h6), :first-child:empty + :where(p, h1, h2, h3, h4, h5, h6) { margin-block-start: 0; } /* Remove bottom margin from last text item, or previous to last if the last is empty */ :last-child:is(p, h1, h2, h3, h4, h5, h6), :where(p, h1, h2, h3, h4, h5, h6):nth-child(2):has(+ :last-child:empty) { margin-block-end: 0; } /* view transitions */ @media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } /* Keep page interactive while view transitions are running */ :root { view-transition-name: none; } /* Have the root transition during page navigation */ html:active-view-transition-type(page-navigation), html:active-view-transition-type(product-image-transition) { view-transition-name: root-custom; } ::view-transition { pointer-events: none; } html:active-view-transition-type(page-navigation) main[data-page-transition-enabled='true'] { view-transition-name: main-content; } html:active-view-transition-type(page-navigation) main[data-product-transition='true'][data-template*='product'] { view-transition-name: none; } ::view-transition-old(main-content) { animation: var(--view-transition-old-main-content); } ::view-transition-new(main-content) { animation: var(--view-transition-new-main-content); } html:active-view-transition-type(product-image-transition) { [data-view-transition-type='product-image-transition'] { view-transition-name: product-image-transition; } [data-view-transition-type='product-details'] { view-transition-name: product-details; } } ::view-transition-group(product-image-transition) { z-index: 1; } ::view-transition-group(product-image-transition), ::view-transition-group(product-details) { animation-duration: var(--animation-speed); animation-timing-function: var(--animation-easing); } ::view-transition-old(product-image-transition), ::view-transition-new(product-image-transition) { block-size: 100%; overflow: hidden; object-fit: cover; animation-duration: 0.25s; animation-timing-function: var(--animation-easing); } ::view-transition-new(product-details) { animation: var(--view-transition-new-main-content); } } /* Focus */ *:focus-visible { outline: var(--focus-outline-width) solid currentcolor; outline-offset: var(--focus-outline-offset); } @supports not selector(:focus-visible) { *:focus { outline: var(--focus-outline-width) solid currentcolor; outline-offset: var(--focus-outline-offset); } } .focus-inset { outline-offset: calc(var(--focus-outline-width) * -1); } /* Layout */ .content-for-layout { flex: 1; } /* Set up page widths & margins */ .page-width-wide, .page-width-normal, .page-width-narrow, .page-width-content { --page-margin: 16px; } @media screen and (min-width: 750px) { .page-width-wide, .page-width-normal, .page-width-narrow, .page-width-content { --page-margin: 40px; } } .page-width-wide { /* NOTE: This results in a page width of 2400px because of how we set up margins with grid */ --page-content-width: var(--wide-page-width); --page-width: calc(var(--page-content-width) + (var(--page-margin) * 2)); } .page-width-normal { --page-content-width: var(--normal-page-width); --page-width: calc(var(--page-content-width) + (var(--page-margin) * 2)); } .page-width-narrow, .page-width-content { /* NOTE: This results in a page width of 1400px because of how we set up margins with grid */ --page-content-width: var(--narrow-page-width); --page-width: calc(var(--page-content-width) + (var(--page-margin) * 2)); } .page-width-content { --page-content-width: var(--normal-content-width); --page-width: calc(var(--page-content-width) + (var(--page-margin) * 2)); } /* Section width full vs. page The reason we use a grid to contain the section is to allow for the section to have a full-width background image even if the section content is constrained by the page width. Do not try to rewrite this to max-width: --page-width; margin: 0 auto;, it doesn't work. */ .section { --full-page-grid-central-column-width: min( var(--page-width) - var(--page-margin) * 2, calc(100% - var(--page-margin) * 2) ); --full-page-grid-margin: minmax(var(--page-margin), 1fr); --full-page-grid-with-margins: var(--full-page-grid-margin) var(--full-page-grid-central-column-width) var(--full-page-grid-margin); /* Utility variable gives the grid's first column width. Provides an offset width for components like carousels */ --util-page-margin-offset: max( var(--page-margin), calc((100% - min(var(--page-content-width), calc(100% - (var(--page-margin) * 2)))) / 2) ); /* Offset for full-width sections to account for the page margin, used for Marquee — note that --util-page-margin-offset doesn't work here */ --full-page-margin-inline-offset: calc(((100vw - var(--full-page-grid-central-column-width)) / 2) * -1); width: 100%; /* This is required to make background images work, which are rendered absolutely */ position: relative; /* Set up the grid */ display: grid; grid-template-columns: var(--full-page-grid-with-margins); min-height: var(--section-min-height, 'auto'); } /* Place all direct children in the center column by default */ .section > * { grid-column: 2; } /* Make the actual section background transparent, and instead apply it to a separate sibling element to enable stacking with hero shadow */ .shopify-section:not(.header-section) :is(.section, .cart__summary-container) { background: transparent; } .shopify-section:not(.header-section):has(.section) { position: relative; } .shopify-section:not(.header-section) .section-background { content: ''; position: absolute; inset: 0; z-index: var(--layer-section-background); } /* For page-width sections, all content goes in the center column */ .section--page-width > * { grid-column: 2; } /* For full-width sections, content spans all columns */ .section--full-width > * { grid-column: 1 / -1; } /* Some page-width sections should still extend all the way to the right edge of the page, e.g. collection carousel */ .section--page-width.section--full-width-right > * { grid-column: 2 / 4; } /* For full-width sections with margin, content still spans full width but with space on the sides */ .section--full-width.section--full-width-margin > * { grid-column: 1 / -1; @media screen and (min-width: 750px) { padding-left: var(--page-margin); padding-right: var(--page-margin); } } /* Some section content break out to full width of the page */ .section > .force-full-width { grid-column: 1 / -1; } .section--height-small { --section-min-height: var(--section-height-small); } .section--height-medium { --section-min-height: var(--section-height-medium); } .section--height-large { --section-min-height: var(--section-height-large); } .section--height-full-screen { --section-min-height: 100svh; } .section-content-wrapper.section-content-wrapper { min-height: calc(var(--section-min-height, 'auto') - var(--section-height-offset, 0px)); position: relative; width: 100%; height: 100%; } /* Utility */ .hidden { /* stylelint-disable-next-line declaration-no-important */ display: none ; } @media screen and (max-width: 749px) { .hidden--mobile, .mobile\:hidden { /* stylelint-disable-next-line declaration-no-important */ display: none !important; } } @media screen and (min-width: 750px) { .hidden--desktop, .desktop\:hidden { /* stylelint-disable-next-line declaration-no-important */ display: none !important; } } .hide-when-empty:empty { /* stylelint-disable-next-line declaration-no-important */ display: none !important; } .visually-hidden:not(:focus, :active) { /* stylelint-disable-next-line declaration-no-important */ position: absolute !important; overflow: hidden; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip: rect(0 0 0 0); /* stylelint-disable-next-line declaration-no-important */ word-wrap: normal !important; } @media screen and (max-width: 749px) { .is-visually-hidden-mobile:not(:focus, :active) { /* stylelint-disable-next-line declaration-no-important */ position: absolute !important; overflow: hidden; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip: rect(0 0 0 0); /* stylelint-disable-next-line declaration-no-important */ word-wrap: normal !important; } } .contents { display: contents; } .flex { display: flex; gap: var(--gap-md); } .grid { --centered-column-number: 12; --full-width-column-number: 14; --centered: column-1 / span var(--centered-column-number); --full-width: column-0 / span var(--full-width-column-number); display: flex; flex-direction: column; } @media screen and (min-width: 750px) { .grid { display: grid; gap: 0; grid-template-columns: var(--margin-4xl) repeat(var(--centered-column-number), minmax(0, 1fr)) var(--margin-4xl); grid-template-areas: 'column-0 column-1 column-2 column-3 column-4 column-5 column-6 column-7 column-8 column-9 column-10 column-11 column-12 column-13'; } } @media screen and (min-width: 1400px) { .grid { grid-template-columns: 1fr repeat( var(--centered-column-number), minmax(0, calc((var(--page-width) - var(--page-margin) * 2) / var(--centered-column-number))) ) 1fr; } } .flex { display: flex; gap: var(--gap-md); } .flip-x { scale: -1 1; } .flip-y { scale: 1 -1; } .list-unstyled { margin: 0; padding: 0; list-style: none; } .skip-to-content-link { position: absolute; overflow: hidden; height: 1px; left: -99999px; /* stylelint-disable-next-line declaration-no-important */ word-wrap: normal !important; } .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); box-shadow: 0 0 0 var(--focus-outline-offset) var(--color-background); } .text-left { --text-align: left; text-align: left; } .text-center { --text-align: center; text-align: center; } .text-right { --text-align: right; text-align: right; } .text-inherit { color: inherit; } .user-select-text { user-select: text; } .justify-left { justify-content: left; } .justify-center { justify-content: center; } .justify-right { justify-content: right; } .title--aligned-center { display: flex; align-items: center; gap: 1rem; } .background-image-container { overflow: hidden; position: absolute; inset: 0; opacity: var(--image-opacity); } .background-image-container img, .background-image-container svg { object-fit: cover; width: 100%; height: 100%; } .background-image-fit img, .background-image-fit svg { object-fit: contain; } .svg-wrapper { color: currentcolor; display: inline-flex; justify-content: center; align-items: center; width: var(--icon-size-sm); height: var(--icon-size-sm); pointer-events: none; } .svg-wrapper--smaller { width: var(--icon-size-2xs); height: var(--icon-size-2xs); } .svg-wrapper--small { width: var(--icon-size-xs); height: var(--icon-size-xs); } .svg-wrapper > svg { width: var(--icon-size-sm); height: var(--icon-size-sm); } .relative { position: relative; } /* Icons */ .icon-success, .icon-error { width: var(--icon-size-md); height: var(--icon-size-md); flex-shrink: 0; } .icon-success { color: var(--color-success); } .icon-error { fill: var(--color-error); } placeholder-image { display: block; height: 100%; aspect-ratio: var(--ratio); } placeholder-image[data-type='product'] { background-color: rgb(var(--color-foreground-rgb) / var(--opacity-15)); width: 100%; } /** Placeholder background for the placeholder image, the dimensions are the same as the product images */ placeholder-image[data-type='product']:not(:has(> img)) { aspect-ratio: var(--ratio); height: 350px; } placeholder-image > img { object-fit: cover; aspect-ratio: var(--ratio); height: 100%; } [data-placeholder='true'] * { cursor: default; } slideshow-component [data-placeholder='true'] * { cursor: grab; } /* Base text and heading styles */ body, .paragraph:not(.button), .paragraph > * { font-family: var(--font-paragraph--family); font-style: var(--font-paragraph--style); font-weight: var(--font-paragraph--weight); font-size: var(--font-paragraph--size); line-height: var(--font-paragraph--line-height); text-transform: var(--font-paragraph--case); -webkit-font-smoothing: antialiased; color: var(--color, var(--color-foreground)); } /* Ensure inputs with type presets maintain minimum 16px on mobile to prevent iOS zoom */ @media screen and (max-width: 1200px) { input.paragraph.paragraph, input.paragraph.paragraph:not([type]), textarea.paragraph.paragraph, select.paragraph.paragraph { font-size: max(1rem, var(--font-paragraph--size)); } } .paragraph > small { font-size: smaller; } /* Typography presets */ h1, .h1.h1, .text-block.h1 > * { font-family: var(--font-h1--family); font-style: var(--font-h1--style); font-weight: var(--font-h1--weight); font-size: var(--font-h1--size); line-height: var(--font-h1--line-height); letter-spacing: var(--font-h1--letter-spacing); text-transform: var(--font-h1--case); color: var(--color, var(--font-h1-color)); } @media screen and (max-width: 1200px) { input.h1.h1, textarea.h1.h1, select.h1.h1 { font-size: max(1rem, var(--font-h1--size)); } } h2, .h2.h2, .text-block.h2 > * { font-family: var(--font-h2--family); font-style: var(--font-h2--style); font-weight: var(--font-h2--weight); font-size: var(--font-h2--size); line-height: var(--font-h2--line-height); letter-spacing: var(--font-h2--letter-spacing); text-transform: var(--font-h2--case); color: var(--color, var(--font-h2-color)); } @media screen and (max-width: 1200px) { input.h2.h2, textarea.h2.h2, select.h2.h2 { font-size: max(1rem, var(--font-h2--size)); } } h3, .h3, .h3.h3, .text-block.h3 > * { font-family: var(--font-h3--family); font-style: var(--font-h3--style); font-weight: var(--font-h3--weight); font-size: var(--font-h3--size); line-height: var(--font-h3--line-height); letter-spacing: var(--font-h3--letter-spacing); text-transform: var(--font-h3--case); color: var(--color, var(--font-h3-color)); } @media screen and (max-width: 1200px) { input.h3, textarea.h3, select.h3 { font-size: max(1rem, var(--font-h3--size)); } } h4, .h4.h4, .text-block.h4 > * { font-family: var(--font-h4--family); font-style: var(--font-h4--style); font-weight: var(--font-h4--weight); font-size: var(--font-h4--size); line-height: var(--font-h4--line-height); letter-spacing: var(--font-h4--letter-spacing); text-transform: var(--font-h4--case); color: var(--color, var(--font-h4-color)); } @media screen and (max-width: 1200px) { input.h4.h4, textarea.h4.h4, select.h4.h4 { font-size: max(1rem, var(--font-h4--size)); } } h5, .h5.h5, .text-block.h5 > * { font-family: var(--font-h5--family); font-style: var(--font-h5--style); font-weight: var(--font-h5--weight); font-size: var(--font-h5--size); line-height: var(--font-h5--line-height); letter-spacing: var(--font-h5--letter-spacing); text-transform: var(--font-h5--case); color: var(--color, var(--font-h5-color)); } @media screen and (max-width: 1200px) { input.h5.h5, textarea.h5.h5, select.h5.h5 { font-size: max(1rem, var(--font-h5--size)); } } h6, .h6.h6, .text-block.h6 > * { font-family: var(--font-h6--family); font-style: var(--font-h6--style); font-weight: var(--font-h6--weight); font-size: var(--font-h6--size); line-height: var(--font-h6--line-height); letter-spacing: var(--font-h6--letter-spacing); text-transform: var(--font-h6--case); color: var(--color, var(--font-h6-color)); } @media screen and (max-width: 1200px) { input.h6.h6, textarea.h6.h6, select.h6.h6 { font-size: max(1rem, var(--font-h6--size)); } } :first-child:is(.h1, .h2, .h3, .h4, .h5, .h6) { margin-block-start: 0; } :last-child:is(.h1, .h2, .h3, .h4, .h5, .h6) { margin-block-end: 0; } /* Links */ a { --button-color: var(--color, var(--color-primary)); color: var(--button-color); text-decoration-color: transparent; text-decoration-thickness: 0.075em; text-underline-offset: 0.125em; transition: text-decoration-color var(--animation-speed) var(--animation-easing), color var(--animation-speed) var(--animation-easing); } :is(h1, h2, h3, h4, h5, h6, p) > a:hover { --button-color: var(--color, var(--color-primary-hover)); } /* Add underline to text using our paragraph styles only. */ p:not(.h1, .h2, .h3, .h4, .h5, .h6) a:where(:not(.button, .button-primary, .button-secondary)), .rte :is(p, ul, ol, table):not(.h1, .h2, .h3, .h4, .h5, .h6) a:where(:not(.button, .button-primary, .button-secondary)) { text-decoration-color: currentcolor; &:hover { text-decoration-color: transparent; color: var(--color-primary-hover); } } .container-background-image { background-repeat: no-repeat; background-size: cover; background-position: center center; } details[open] .summary-closed { display: none; } details:not([open]) .summary-open { display: none; } details[open] > summary .icon-animated > svg { transform: rotate(180deg); } /* iOS fix: hide the default arrow on the summary */ summary::-webkit-details-marker { display: none; } /* Featured collection block */ .featured-collection-block { width: 100%; } /* Product grid */ .product-grid-container { display: block; width: 100%; padding-block: var(--padding-block-start) var(--padding-block-end); @media screen and (min-width: 750px) { display: grid; } } .product-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--product-grid-gap); margin: auto; padding: 0; list-style: none; } @media screen and (min-width: 750px) { .product-grid { grid-template-columns: var(--product-grid-columns-desktop); } } .product-grid :is(h3, p) { margin: 0; } .product-grid__item { border: var(--product-card-border-width) solid rgb(var(--color-border-rgb) / var(--product-card-border-opacity)); } .product-grid--organic[product-grid-view='default'] .product-grid__item { height: fit-content; } .product-grid__card.product-grid__card { display: flex; flex-flow: column nowrap; gap: var(--product-card-gap); align-items: var(--product-card-alignment); text-decoration: none; color: var(--color, var(--color-foreground)); padding-block: var(--padding-block-start) var(--padding-block-end); padding-inline: var(--padding-inline-start) var(--padding-inline-end); overflow: hidden; } [product-grid-view='zoom-out'] .product-grid__card { row-gap: var(--padding-xs); } [product-grid-view='default'] { --product-grid-gap: 16px; --padding-block-start: 24px; --padding-block-end: 24px; --padding-inline-start: 0px; --padding-inline-end: 0px; } [product-grid-view='default'] .product-grid__item { padding-block: 0; } [product-grid-view='mobile-single'], .product-grid-mobile--large { @media screen and (max-width: 749px) { grid-template-columns: 1fr; } } .product-grid__card .group-block > * { @media screen and (max-width: 749px) { flex-direction: column; } } ul[product-grid-view='zoom-out'] .product-grid__card > * { display: none; } ul[product-grid-view='zoom-out'] .product-grid__card .card-gallery { display: block; } [product-grid-view='zoom-out'] .card-gallery > :is(quick-add-component, .product-badges, slideshow-component > slideshow-controls) { display: none; } ul[product-grid-view='zoom-out'] .card-gallery > img { display: block; } [product-grid-view='zoom-out'] { --product-grid-columns-desktop: repeat( 10, minmax(clamp(50px, calc(100% - 9 * var(--product-grid-gap)) / 10, 80px), 1fr) ); } .product-grid-view-zoom-out--details { display: none; } .product-grid-view-zoom-out--details .h4, .product-grid-view-zoom-out--details span, .product-grid-view-zoom-out--details s { font-size: var(--font-size--xs); font-family: var(--font-paragraph--family); } .product-grid-view-zoom-out--details span { font-weight: 500; } .product-grid-view-zoom-out--details .h4 { line-height: 1.3; font-weight: 400; } .product-grid-view-zoom-out--details > span.h6, .product-grid-view-zoom-out--details > div.h6 > product-price { display: inline-block; line-height: 0; margin-top: var(--margin-2xs); } .product-grid-view-zoom-out--details > span.h6 > *, .product-grid-view-zoom-out--details > div.h6 > * > * { line-height: 1.2; } @media (prefers-reduced-motion: no-preference) { :root:active-view-transition-type(product-grid) { details[open] floating-panel-component { view-transition-name: panel-content; .checkbox *, .facets__pill-label { transition: none; } .facets--vertical & { view-transition-name: none; } } .product-grid { view-transition-name: product-grid; } footer { view-transition-name: footer; } .product-grid__item, floating-panel-component { transition: none; } } } ::view-transition-group(panel-content) { z-index: 1; } ::view-transition-new(product-grid) { animation-delay: 150ms; animation-name: fadeInUp; animation-duration: var(--animation-speed); animation-timing-function: var(--animation-easing); } results-list[initialized] { .product-grid__item { transition: opacity var(--animation-speed) var(--animation-easing), transform var(--animation-speed) var(--animation-easing); @starting-style { opacity: 0; transform: translateY(10px); } } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* Collection and product list cards have equal heights */ :is(.product-grid__item, .resource-list__item) .product-card { display: grid; height: 100%; } /* Video background */ .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; } .text-block { width: 100%; } .text-block > *:first-child, .text-block > *:first-child:empty + * { margin-block-start: 0; } .text-block > *:last-child, .text-block > *:has(+ *:last-child:empty) { margin-block-end: 0; } /* This is to deal with the margin applied to the p when custom styles are enabled. The p isn't the first child anymore due to the style tag */ .text-block > style + * { margin-block-start: 0; } /* Dialog */ .dialog-modal { border: none; box-shadow: var(--shadow-popover); @media screen and (min-width: 750px) { border-radius: var(--style-border-radius-popover); max-width: var(--normal-content-width); } @media screen and (max-width: 749px) { max-width: 100%; max-height: 100%; height: 100dvh; width: 100dvw; padding: var(--padding-md); } } .dialog-modal::backdrop { transition: backdrop-filter var(--animation-speed) var(--animation-easing); backdrop-filter: brightness(1); background: rgb(var(--backdrop-color-rgb) / var(--backdrop-opacity)); } .dialog-modal[open] { animation: elementSlideInTop var(--animation-speed) var(--animation-easing) forwards; &::backdrop { animation: backdropFilter var(--animation-speed) var(--animation-easing) forwards; transition: opacity var(--animation-speed) var(--animation-easing); } } .dialog-modal.dialog-closing { animation: elementSlideOutTop var(--animation-speed) var(--animation-easing) forwards; &::backdrop { opacity: 0; } } /* stylelint-disable value-keyword-case */ .dialog-drawer { --dialog-drawer-opening-animation: slideInLeft; --dialog-drawer-closing-animation: slideOutLeft; } .dialog-drawer--right { --dialog-drawer-opening-animation: slideInRight; --dialog-drawer-closing-animation: slideOutRight; } /* stylelint-enable value-keyword-case */ .dialog-drawer[open] { animation: var(--dialog-drawer-opening-animation) var(--animation-speed) var(--animation-easing) forwards; } .dialog-drawer.dialog-closing { animation: var(--dialog-drawer-closing-animation) var(--animation-speed) var(--animation-easing); } /* Buttons */ .button, .button-secondary, button.shopify-payment-button__button--unbranded { --text-align: center; display: grid; align-content: center; text-decoration: none; text-align: var(--text-align); color: var(--button-color); appearance: none; background-color: var(--button-background-color); border: none; font-family: var(--font-paragraph--family); font-style: var(--font-paragraph--style); font-size: var(--font-paragraph--size); line-height: var(--font-paragraph--line-height); margin-block: 0; transition: color var(--animation-speed) var(--animation-easing), box-shadow var(--animation-speed) var(--animation-easing), background-color var(--animation-speed) var(--animation-easing); cursor: pointer; width: fit-content; box-shadow: inset 0 0 0 var(--button-border-width) var(--button-border-color); padding-block: var(--button-padding-block); padding-inline: var(--button-padding-inline); } .button { font-family: var(--button-font-family-primary); font-weight: var(--button-font-weight-primary); text-transform: var(--button-text-case-primary); border-radius: var(--style-border-radius-buttons-primary); } .button:not(.button-secondary, .button-unstyled) { outline-color: var(--button-background-color); } .button-secondary { font-family: var(--button-font-family-secondary); font-weight: var(--button-font-weight-secondary); text-transform: var(--button-text-case-secondary); border-radius: var(--style-border-radius-buttons-secondary); } button.shopify-payment-button__button--unbranded { font-family: var(--button-font-family-primary); font-weight: var(--button-font-weight-primary); text-transform: var(--button-text-case-primary); } textarea, input { background-color: var(--color-input-background); border-color: var(--color-input-border); } textarea::placeholder, input::placeholder { color: var(--color-input-text); } textarea:not(:placeholder-shown)::placeholder, input:not(:placeholder-shown)::placeholder { opacity: 0; } /* The declaration above is messing with buttons that have an attribute of hidden as it overwrites the display value */ .button[hidden] { display: none; } .button[aria-disabled='true'], .button-secondary[aria-disabled='true'], .button:disabled { opacity: 0.5; cursor: not-allowed; } .button, button.shopify-payment-button__button--unbranded { --button-color: var(--color-primary-button-text); --button-background-color: var(--color-primary-button-background); --button-border-color: var(--color-primary-button-border); --button-border-width: var(--style-border-width-primary); } .button:hover, button.shopify-payment-button__button--unbranded:hover:not([disabled]) { --button-color: var(--color-primary-button-hover-text); --button-background-color: var(--color-primary-button-hover-background); --button-border-color: var(--color-primary-button-hover-border); } .button-secondary { --button-color: var(--color-secondary-button-text); --button-background-color: var(--color-secondary-button-background); --button-border-color: var(--color-secondary-button-border); --button-border-width: var(--style-border-width-secondary); } .button-secondary:hover { --button-color: var(--color-secondary-button-hover-text); --button-background-color: var(--color-secondary-button-hover-background); --button-border-color: var(--color-secondary-button-hover-border); } /* Needed to override the default Shopify styles */ button.shopify-payment-button__button--unbranded:hover:not([disabled]) { background-color: var(--button-background-color); } .button-unstyled { display: block; padding: 0; background-color: inherit; color: inherit; border: 0; border-radius: 0; overflow: hidden; box-shadow: none; font-family: var(--font-paragraph--family); font-style: var(--font-paragraph--style); font-size: var(--font-paragraph--size); } .button-unstyled:hover { background-color: inherit; } .button-unstyled--with-icon { color: var(--color-foreground); display: flex; gap: var(--gap-2xs); align-items: center; } .button-unstyled--transparent { background-color: transparent; box-shadow: none; } /* Show more */ .show-more__button { color: var(--color-primary); cursor: pointer; } .show-more__button:hover { @media screen and (min-width: 750px) { color: var(--color-primary-hover); } } .show-more__label { text-align: start; font-size: var(--font-size--body-md); font-family: var(--font-paragraph--family); } .show-more__button .svg-wrapper { width: var(--icon-size-xs); height: var(--icon-size-xs); } .show-more[data-expanded='true'] .show-more__label--more, .show-more[data-expanded='false'] .show-more__label--less { display: none; } .link { display: inline-block; text-align: center; } shopify-accelerated-checkout, shopify-accelerated-checkout-cart { --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) :is(shopify-accelerated-checkout, shopify-accelerated-checkout-cart) { --shopify-accelerated-checkout-button-border-radius: var(--style-border-radius-buttons-secondary); --shopify-accelerated-checkout-button-block-size: var(--height-buy-buttons); } /* Collapsible row */ .icon-caret svg { transition: transform var(--animation-speed) var(--animation-easing); } .icon-caret--forward svg { transform: rotate(-90deg); } .icon-caret--backward svg { transform: rotate(90deg); } summary { display: flex; align-items: center; cursor: pointer; list-style: none; padding-block: var(--padding-sm); } summary:hover { color: var(--color-primary-hover); } summary .svg-wrapper { margin-inline-start: auto; height: var(--icon-size-xs); width: var(--icon-size-xs); transition: transform var(--animation-speed) var(--animation-easing); } /* Shared plus/minus icon animations */ summary .icon-plus :is(.horizontal, .vertical), .show-more__button .icon-plus :is(.horizontal, .vertical) { transition: transform var(--animation-speed) var(--animation-easing); transform: rotate(0deg); transform-origin: 50% 50%; opacity: 1; } details[open] > summary .icon-plus .horizontal, .details-open > summary .icon-plus .horizontal, .show-more:where([data-expanded='true']) .show-more__button .icon-plus .horizontal { transform: rotate(90deg); } details[open] > summary .icon-plus .vertical, .details-open > summary .icon-plus .vertical, .show-more:where([data-expanded='true']) .show-more__button .icon-plus .vertical { transform: rotate(90deg); opacity: 0; } /* 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); } } .product-media-gallery__slideshow--single-media slideshow-container { @media screen and (max-width: 749px) { grid-area: unset; } } :not(.dialog-zoomed-gallery) > .product-media-container { /* width and overflow forces children to shrink to parent width */ --slide-width: round(up, 100%, 1px); display: flex; aspect-ratio: var(--gallery-aspect-ratio, var(--media-preview-ratio)); max-height: var(--constrained-height); 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; } } 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%; } .product-media :is(deferred-media, product-model) { position: absolute; } @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; } .media-gallery--two-column .media-gallery__grid { grid-template-columns: repeat(2, 1fr); } .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; } /* 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; } } .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)); } .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); } } /* Media gallery zoom dialog */ .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; } } 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; } } /* Animate the UI elements in only after the view transition is complete */ .close-button { position: fixed; top: var(--margin-lg); right: var(--margin-lg); width: var(--minimum-touch-target); height: var(--minimum-touch-target); z-index: var(--layer-flat); background-color: transparent; display: flex; align-items: center; justify-content: center; /* For the outline radius */ border-radius: 50%; } /* 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. Using element selector to increase specificity. **/ .close-button:focus-visible { outline: none; overflow: visible; } .close-button:focus-visible::after { content: ''; position: absolute; inset: calc(-1 * var(--focus-outline-offset)); border: var(--focus-outline-width) solid currentColor; border-radius: 50%; display: inherit; } } .dialog--closed .close-button { animation: elementSlideOutBottom calc(var(--animation-speed) * 0.5) var(--animation-easing) forwards; } .dialog-thumbnails-list-container { position: fixed; width: 100%; bottom: 0; display: flex; z-index: var(--layer-raised); } .dialog-thumbnails-list { 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 calc(var(--animation-speed) * 0.5) var(--animation-easing) forwards; animation-delay: calc(var(--animation-speed) * 2); } .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 rgb(var(--color-border-rgb) / var(--media-border-opacity)); } } .close-button:hover { background-color: transparent; opacity: 0.8; } .close-button svg { width: var(--icon-size-xs); height: var(--icon-size-xs); } /* Product media */ .product-media { display: flex; flex: 1; } /* If the product media is already providing an image cover, hide images provided by sibling deferred-media */ .product-media__image ~ * .deferred-media__poster-image { display: none; } /* If the product media is playing, hide the preview image */ .product-media-container:has(.deferred-media__playing) .product-media__image { opacity: 0; transition: opacity var(--animation-speed) var(--animation-easing); } /* Deferred media & Product model */ :is(product-model, 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; } product-model model-viewer, /* 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 */ :is(deferred-media, 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; } slideshow-slide .shopify-model-viewer-ui__controls-area.shopify-model-viewer-ui__controls-area { bottom: var(--padding-sm); right: var(--padding-sm); } .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) / calc(var(--media-preview-ratio)) + var(--padding-lg) * 2); right: var(--padding-lg); } @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)); } .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); } } :is(deferred-media, .video-placeholder-wrapper).border-style { /* Apply the border radius to the video */ overflow: hidden; } deferred-media { /* 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); } } } .deferred-media__poster-button { width: 100%; height: 100%; aspect-ratio: var(--video-aspect-ratio, auto); } .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 { width: 100%; height: 100%; border: none; aspect-ratio: var(--size-style-aspect-ratio, auto); } deferred-media[data-media-loaded] img { opacity: 0; } .deferred-media__poster-icon, .video-placeholder-wrapper__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__poster-icon svg, .video-placeholder-wrapper__poster-icon svg { width: var(--button-size); height: var(--button-size); color: var(--color-white); filter: drop-shadow(var(--shadow-button)); &:hover { color: rgb(var(--color-white-rgb) / var(--opacity-80)); } @media screen and (min-width: 750px) { width: 4rem; height: 4rem; } } 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); } .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); fill: currentcolor; margin-inline-end: var(--margin-md); } .button-shopify-xr[data-shopify-xr-hidden] { display: none; } /* 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) + calc(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) + calc(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)); } @media screen and (min-width: 750px) { /* desktop values */ --max-swatch-size: 32px; --max-pill-size: 16px; --max-filter-size: 28px; --scaling-factor: 0.65; } } .variant-picker .variant-option--buttons label:has(.swatch) { border-radius: var(--variant-picker-swatch-radius); } .sticky-content { position: sticky; top: var(--sticky-header-offset, 0); z-index: var(--layer-flat); } @media screen and (min-width: 750px) { .sticky-content--desktop, .sticky-content--desktop.full-height--desktop > .group-block { position: sticky; top: var(--sticky-header-offset, 0); z-index: var(--layer-flat); } } .price, .compare-at-price, .unit-price { white-space: nowrap; } .unit-price { display: block; font-size: min(0.85em, var(--font-paragraph--size)); color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text)); } .tax-note.tax-note.tax-note { font-size: min(0.85em, var(--font-paragraph--size)); color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text)); } product-price.text-block:is(.h1, .h2, .h3, .h4, .h5, .h6) > *:not(.tax-note) { margin-block: 0; } .compare-at-price { opacity: 0.4; text-decoration-line: line-through; text-decoration-thickness: 1.5px; } .card-gallery { position: relative; } @media screen and (min-width: 750px) { product-card:focus-within .quick-add__button, .card-gallery:hover .quick-add__button { display: grid; will-change: margin, opacity; animation: elementSlideInTop var(--animation-speed) var(--animation-easing); } } @container (max-width: 70px) { .card-gallery:hover .quick-add__button { display: none; } } /* Drawer */ .drawer { background-color: var(--color-background); position: fixed; top: 0; left: 0; bottom: 0; width: var(--sidebar-width); z-index: var(--layer-raised); transform: translateX(-120%); transition: transform var(--animation-speed) var(--animation-easing); } .drawer[data-open='true'] { transform: translateX(0); } .drawer-toggle { display: flex; align-items: center; gap: 10px; cursor: pointer; } .drawer__header { display: flex; justify-content: space-between; align-items: center; padding: var(--drawer-header-block-padding) var(--drawer-inline-padding); } .drawer__title { font-size: var(--font-h2--size); margin: 0; } .drawer__close { width: var(--minimum-touch-target); height: var(--minimum-touch-target); } .drawer__content { display: block; padding: var(--drawer-content-block-padding) var(--drawer-inline-padding); width: 100%; } /* Background overlay */ .background-overlay { position: relative; &::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--background-overlay-color, rgb(0 0 0 / 15%)); } } /* Spacing style */ .spacing-style { --spacing-scale: var(--spacing-scale-md); @media screen and (min-width: 990px) { --spacing-scale: var(--spacing-scale-default); } /* Must disable this, when you use these with calc and another unit type, things break — see logo.liquid */ /* stylelint-disable length-zero-no-unit */ --padding-block: 0px; --padding-block-start: var(--padding-block, 0px); --padding-block-end: var(--padding-block, 0px); --padding-inline: 0px; --padding-inline-start: var(--padding-inline, 0px); --padding-inline-end: var(--padding-inline, 0px); --margin-block: 0px; --margin-block-start: var(--margin-block, 0px); --margin-block-end: var(--margin-block, 0px); --margin-inline: 0px; --margin-inline-start: var(--margin-inline, 0px); --margin-inline-end: var(--margin-inline, 0px); } .spacing-style, .inherit-spacing { padding-block: calc(var(--padding-block-start) + var(--section-top-offset, 0px)) var(--padding-block-end); padding-inline: var(--padding-inline-start) var(--padding-inline-end); margin-block: var(--margin-block-start) var(--margin-block-end); margin-inline: var(--margin-inline-start) var(--margin-inline-end); } /* Size style */ .size-style { width: var(--size-style-width-mobile, var(--size-style-width)); height: var(--size-style-height-mobile, var(--size-style-height)); @media screen and (min-width: 750px) { width: var(--size-style-width); height: var(--size-style-height); } } /* Custom Typography style */ .custom-typography, .custom-typography > * { font-family: var(--font-family); font-weight: var(--font-weight); text-transform: var(--text-transform); text-wrap: var(--text-wrap); line-height: var(--line-height); letter-spacing: var(--letter-spacing); } .custom-typography { h1 { line-height: var(--line-height--display, var(--line-height)); } h2, h3, h4 { line-height: var(--line-height--heading, var(--line-height)); } p { line-height: var(--line-height--body, var(--line-height)); } } .custom-font-size, .custom-font-size > * { font-size: var(--font-size); } .custom-font-weight, .custom-font-weight > * { font-weight: var(--weight); } /* Border override style */ .border-style { border-width: var(--border-width); border-style: var(--border-style); border-color: var(--border-color); border-radius: var(--border-radius); } /* Gap scaling style */ .gap-style, .layout-panel-flex { --gap-scale: var(--spacing-scale-md); @media screen and (min-width: 990px) { --gap-scale: var(--spacing-scale-default); } } .layout-panel-flex { display: flex; gap: var(--gap); height: 100%; } .layout-panel-flex--row { flex-flow: row var(--flex-wrap); justify-content: var(--horizontal-alignment); align-items: var(--vertical-alignment); } .layout-panel-flex--column { flex-flow: column var(--flex-wrap); align-items: var(--horizontal-alignment); justify-content: var(--vertical-alignment); } @media screen and (max-width: 749px) { .mobile-column { flex-flow: column nowrap; align-items: var(--horizontal-alignment); justify-content: var(--vertical-alignment-mobile); } .layout-panel-flex--row:not(.mobile-column) { .text-block { flex: 1 1 var(--max-width--display-tight); } .image-block { flex: 1 1 var(--size-style-width-mobile-min); } .button { flex: 0 0 fit-content; } } } @media (min-width: 750px) { .layout-panel-flex { flex-direction: var(--flex-direction); } } /* Form fields */ .field { position: relative; width: 100%; display: flex; transition: box-shadow var(--animation-speed) ease; } .field__input { flex-grow: 1; text-align: left; border-radius: var(--style-border-radius-inputs); transition: box-shadow var(--animation-speed) ease, background-color var(--animation-speed) ease; padding: var(--input-padding); box-shadow: var(--input-box-shadow); background-color: var(--color-input-background); color: var(--color-input-text); border: none; outline: none; font-size: var(--font-paragraph--size); &:autofill { background-color: var(--color-input-background); color: var(--color-input-text); } } .field__input:is(:focus, :hover) { box-shadow: var(--input-box-shadow-focus); background-color: var(--color-input-hover-background); } .field__input--button-radius { border-radius: var(--style-border-radius-buttons-primary); } .field__input--button-padding { padding-inline: var(--padding-3xl); } .field__label { color: rgb(var(--color-input-text-rgb) / var(--opacity-80)); font-size: var(--font-paragraph--size); left: var(--input-padding-x); top: 50%; transform: translateY(-50%); margin-bottom: 0; pointer-events: none; position: absolute; transition: top var(--animation-speed) ease, font-size var(--animation-speed) ease; } /* RTE styles */ .rte, .shopify-policy__title { :is(h1, h2, h3, h4, h5, h6) { margin-block: clamp(1.5rem, 1em * 3.3, 2.5rem) clamp(1rem, 1em * 0.25, 2rem); } :first-child:is(p, h1, h2, h3, h4, h5, h6), :first-child:empty + :is(p, h1, h2, h3, h4, h5, h6) { margin-block-start: 0; } ul, ol { margin-block-start: 0; padding-inline-start: 1.5em; } /* Only apply margin-block-end to the higher level list, not nested lists */ :is(ul, ol):not(:is(ul, ol) :is(ul, ol)) { margin-block-end: 1em; } blockquote { margin-inline: 1.5em 2.3em; margin-block: 3.8em; padding-inline-start: 0.8em; border-inline-start: 1.5px solid rgb(var(--color-foreground-rgb) / var(--opacity-25)); font-style: italic; font-weight: 500; } .rte-table-wrapper { overflow-x: auto; } table { /* stylelint-disable-next-line declaration-no-important */ width: 100% !important; border-collapse: collapse; } tr:not(:has(td)), thead { background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5)); font-weight: bold; text-transform: uppercase; } tr:has(td) { border-bottom: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-10)); } th, td { text-align: start; padding-inline: var(--padding-md); padding-block: var(--padding-sm); } } .shopify-policy__container { padding-block: var(--padding-xl); } .checkbox { --checkbox-size: 22px; --checkbox-top: 50%; --checkbox-left: 1.5px; --checkbox-offset: 3px; --checkbox-border-radius: 7px; --checkbox-label-padding: 8px; --checkbox-path-opacity: 0; --checkbox-cursor: pointer; --checkbox-border: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-35-55)); position: relative; display: flex; align-items: center; @media screen and (min-width: 750px) { --checkbox-size: 16px; --checkbox-border-radius: 5px; --checkbox-label-padding: 6px; } &:has(.checkbox__input:checked) { --checkbox-path-opacity: 1; } &:has(.checkbox__input:disabled) { --checkbox-cursor: not-allowed; } } .checkbox__input { position: absolute; opacity: 0; margin: 0; width: var(--checkbox-size); height: var(--checkbox-size); /* Outline is on the SVG instead, to allow it to have border-radius */ &:focus-visible { outline: none; } &:focus-visible + .checkbox__label .icon-checkmark { outline: var(--focus-outline-width) solid currentcolor; outline-offset: var(--focus-outline-offset); } &:checked + .checkbox__label .icon-checkmark { background-color: var(--color-foreground); border-color: var(--color-foreground); } &:disabled + .checkbox__label .icon-checkmark { background-color: var(--input-disabled-background-color); border-color: var(--input-disabled-border-color); } } .checkbox__label { position: relative; display: inline-flex; cursor: var(--checkbox-cursor); line-height: var(--checkbox-size); min-width: var(--minimum-touch-target); } .checkbox .icon-checkmark { height: var(--checkbox-size); width: var(--checkbox-size); flex-shrink: 0; border: var(--checkbox-border); border-radius: var(--checkbox-border-radius); background-color: var(--color-background); } .checkbox__label-text { padding-inline-start: var(--checkbox-label-padding); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .checkbox .icon-checkmark path { stroke: var(--color-background); opacity: var(--checkbox-path-opacity); transition: opacity var(--animation-speed) var(--animation-easing); } .checkbox__input:disabled + .checkbox__label { color: var(--input-disabled-text-color); } /* Add to cart button */ .button[id^='BuyButtons-ProductSubmitButton-'] { position: relative; overflow: hidden; } /* Cart bubble */ .cart-bubble { --cart-padding: 0.2em; position: relative; width: 20px; aspect-ratio: 1; border-radius: 50%; border-width: 0; display: grid; line-height: normal; place-content: center; color: var(--color-primary-button-text); padding-inline: var(--cart-padding); } .cart-bubble__background { position: absolute; inset: 0; background-color: var(--color-primary-button-background); border-radius: var(--style-border-radius-lg); } .cart-bubble__text { font-size: var(--font-size--2xs); z-index: var(--layer-flat); line-height: 1; display: flex; align-items: center; justify-content: center; } /* 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; transition: background-color var(--animation-speed) var(--animation-easing); &:hover { background-color: var(--color-input-hover-background); } } .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 { border-radius: var(--style-border-radius-buttons-primary); } .product-details .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 { 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; } /* Pills (used in facets and predictive search) */ .pills__pill { --pills-pill-background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5-15)); color: var(--color-foreground); display: flex; justify-content: space-between; align-items: center; gap: var(--gap-sm); min-width: 48px; padding: 6px 12px; border-radius: var(--style-border-radius-pills); cursor: pointer; background-color: var(--pills-pill-background-color); transition: background-color var(--animation-speed) var(--animation-easing); &:hover { --pills-pill-background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10-25)); } @media screen and (max-width: 749px) { padding: var(--padding-xs) var(--padding-md); } } .pills__pill > .svg-wrapper { --close-icon-opacity: 0.4; --icon-stroke-width: 1px; color: var(--color-foreground); } .pills__pill--swatch { @media screen and (max-width: 749px) { padding-inline-start: var(--padding-sm); } } .pills__pill--swatch .swatch { margin-right: -4px; } .pills__pill--desktop-small { @media screen and (min-width: 750px) { font-size: var(--font-size--xs); } } /* Fly to cart animation */ fly-to-cart { position: fixed; width: 40px; height: 40px; left: 0; top: 0; border-radius: 50%; z-index: calc(infinity); pointer-events: none; opacity: 0; overflow: hidden; box-shadow: 0 4px 8px rgb(0 0 0 / 20%); transition: opacity 0.3s ease; background-position: center center; background-size: cover; background-repeat: no-repeat; background-color: var(--color-foreground); transform: translate(var(--x, 0), var(--y, 0)) scale(var(--scale, 1)); } /* ------------------------------------------------------------------------------ */ /* ------------------------------------------------------------------------------ */ /* ------------------------------------------------------------------------------ */ /* Animation declarations - to be kept at the bottom of the file for ease of find */ @keyframes grow { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } } @keyframes slideInLeft { from { transform: translateX(var(--custom-transform-from, 100%)); } to { transform: translateX(var(--custom-transform-to, 0)); } } @keyframes slideInLeftViewTransition { from { transform: translateX(100px); } } @keyframes slideOutRight { from { transform: translateX(0); } to { transform: translateX(var(--custom-transform-to, -100%)); } } @keyframes slideInRight { from { transform: translateX(-100%); } to { transform: translateX(0); } } @keyframes slideOutLeft { from { transform: translateX(0); } to { transform: translateX(100%); } } @keyframes slideInTop { from { transform: translateY(100%); } to { transform: translateY(0); } } @keyframes slideInTopViewTransition { from { transform: translateY(100px); } } @keyframes slideOutBottom { from { transform: translateY(0); } to { transform: translateY(100%); } } @keyframes slideInBottom { from { transform: translateY(-100%); } to { transform: translateY(0); } } @keyframes slideOutTop { from { transform: translateY(0); } to { transform: translateY(-100%); } } @keyframes cartBubbleSlideIn { from { transform: translateY(-1em); } to { transform: translateY(0); } } @keyframes elementSlideInTop { from { margin-top: var(--padding-sm); opacity: 0; } to { margin-top: 0; opacity: 1; } } @keyframes elementSlideOutTop { from { transform: translateY(0); opacity: 1; } to { transform: translateY(var(--padding-sm)); opacity: 0; } } @keyframes elementSlideInBottom { from { transform: translateY(calc(-1 * var(--padding-sm))); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes elementSlideOutBottom { from { transform: translateY(0); opacity: 1; } to { transform: translateY(calc(-1 * var(--padding-sm))); opacity: 0; } } @keyframes thumbnailsSlideInTop { from { transform: translateY(calc(-50% + var(--margin-lg))); opacity: 0; } to { transform: translateY(-50%); opacity: 1; } } @keyframes thumbnailsSlideOutTop { from { transform: translateY(-50%); opacity: 1; } to { transform: translateY(calc(-50% + var(--margin-lg))); opacity: 0; } } @keyframes thumbnailsSlideInBottom { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes thumbnailsSlideOutBottom { from { transform: translateY(0); opacity: 1; } to { transform: translateY(100%); opacity: 0; } } @keyframes search-element-slide-in-bottom { 0% { transform: translateY(20px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } @keyframes search-element-slide-out-bottom { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(20px); opacity: 0; } } @keyframes dialogZoom { from { opacity: 1; transform: scale(1) translateY(0); } to { opacity: 0; transform: scale(0.95) translateY(1em); } } @keyframes thumbnail-selected { 0%, 100% { box-shadow: 0 0 0 2px transparent; scale: 0.9; } 50% { box-shadow: 0 0 0 2px #000; scale: 1; } } @keyframes backdropFilter { from { backdrop-filter: brightness(1); } to { backdrop-filter: brightness(0.75); } } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes modalSlideInTop { from { transform: translateY(var(--padding-sm)); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes modalSlideOutTop { from { transform: translateY(0); opacity: 1; } to { transform: translateY(var(--padding-sm)); opacity: 0; } } .bubble { display: inline-flex; height: calc(var(--variant-picker-swatch-height) / 1.5); font-size: var(--font-size--xs); border-radius: 20px; min-width: 20px; padding: 0 6px; background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10-25)); color: var(--color-foreground); align-items: center; justify-content: center; } .bubble svg { width: 12px; height: 12px; } .top-shadow::before { content: ''; box-shadow: 0 0 10px var(--color-shadow); position: absolute; z-index: var(--layer-lowest); inset: 0; clip-path: inset(-50px 0 0 0); /* stylelint-disable-line */ } @media (min-width: 750px) { .top-shadow--mobile::before { display: none; } } .bottom-shadow::before { content: ''; box-shadow: 0 0 10px var(--color-shadow); position: absolute; z-index: var(--layer-lowest); inset: 0; clip-path: inset(0 0 -50px 0); /* stylelint-disable-line */ } @media (min-width: 750px) { .bottom-shadow--mobile::before { display: none; } } .video-placeholder-wrapper { position: relative; width: 100%; height: 100%; aspect-ratio: var(--size-style-aspect-ratio, auto); } :not(deferred-media) > .video-placeholder-wrapper { width: var(--video-placeholder-width); } .video-placeholder-wrapper > * { width: 100%; height: 100%; object-fit: cover; object-position: center; } /* * Slideshow Component */ slideshow-component { --cursor: grab; position: relative; display: flex; flex-direction: column; timeline-scope: var(--slideshow-timeline); } .slideshow--single-media { --cursor: default; } a slideshow-component { --cursor: pointer; } /* * 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: 15px; cursor: var(--cursor); @media (prefers-reduced-motion) { scroll-behavior: auto; } &::-webkit-scrollbar { width: 0; } &::-webkit-scrollbar-track { background: transparent; } &::-webkit-scrollbar-thumb { background: transparent; border: none; } &[size='small'] { min-height: 17.5rem; } &[size='medium'] { min-height: 21.25rem; } &[size='large'] { min-height: 25rem; } @media screen and (min-width: 750px) { &[size='small'] { min-height: 26.25rem; } &[size='medium'] { min-height: 35rem; } &[size='large'] { min-height: 45rem; } } } slideshow-component[disabled='true'] slideshow-slides { overflow: hidden; } slideshow-component[mobile-disabled] slideshow-slides { @media screen and (max-width: 749px) { overflow: hidden; } } slideshow-slide { position: relative; scroll-snap-align: start; width: var(--slide-width, 100%); max-height: 100%; flex-shrink: 0; view-timeline-axis: inline; content-visibility: auto; contain-intrinsic-size: auto none; 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; } } slideshow-slide.product-media-container--tallest { content-visibility: visible; } @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; } } } /* * Collection and Resource list carousels have peeking slides on both sides. * Card galleries preview the next or previous images on 'pointerenter', so we * try to kick load them beforehand (they are lazy loaded otherwise). */ :is(.resource-list__carousel, .card-gallery) :is( slideshow-slide:has(+ slideshow-slide[aria-hidden='false']), slideshow-slide[aria-hidden='false'] + slideshow-slide ) { content-visibility: auto; slideshow-component[actioned] & { content-visibility: visible; } } /* * 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; } 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; } /* * Slideshow Controls */ 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; } 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; } } 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:not([controls-on-media])[icons-on-media] { &[pagination-position='right'] { justify-content: flex-end; } &[pagination-position='left'] { justify-content: flex-start; } } slideshow-controls:not([controls-on-media]):is([pagination-position='left'], [pagination-position='right']) .slideshow-controls__thumbnails { padding-block: var(--padding-2xs); } slideshow-controls:not([controls-on-media]) { &:is([pagination-position='right']) { .slideshow-controls__thumbnails { padding-inline-end: var(--slideshow-thumbnails-padding-inline, var(--focus-outline-offset)); } } &:is([pagination-position='left']) { .slideshow-controls__thumbnails { padding-inline-start: var(--slideshow-thumbnails-padding-inline, var(--focus-outline-offset)); } } } 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:is([pagination-position='right'], [pagination-position='left']) { .slideshow-controls__thumbnails { flex-direction: column; } } .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.5rem; 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); /* This is at --size / 2 to remove a visual regression on subpixel rendering displays */ border-radius: calc(var(--size) / 2); @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); } } } .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-control--large { .icon-caret { --icon-stroke-width: 1px; } .icon-caret { --icon-stroke-width: 1px; } .svg-wrapper, svg { width: var(--slideshow-controls-icon); height: var(--slideshow-controls-icon); } } /* Slideshow control shape styles */ .button-unstyled.slideshow-control.slideshow-control--shape-square, .button-unstyled.slideshow-control.slideshow-control--shape-circle { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; background-color: var(--color-primary-button-background); color: var(--color-primary-button-text); } .button-unstyled.slideshow-control.slideshow-control--shape-circle { border-radius: 50%; } .button-unstyled.slideshow-control.slideshow-control--shape-square { border-radius: 0; } .slideshow-control .icon-caret { rotate: -90deg; } /* 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(--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(--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; } } } /* Slideshow Arrows */ slideshow-arrows { --cursor-previous: w-resize; --cursor-next: e-resize; position: absolute; inset: 0; display: flex; z-index: var(--layer-heightened); pointer-events: none; mix-blend-mode: difference; align-items: flex-end; &[position='left'] { justify-content: flex-start; padding-inline: var(--padding-xs); } &[position='right'] { justify-content: flex-end; padding-inline: var(--padding-xs); } &[position='center'] { justify-content: space-between; align-items: center; } } slideshow-arrows:has(.slideshow-control--shape-square), slideshow-arrows:has(.slideshow-control--shape-circle) { mix-blend-mode: normal; } slideshow-component[disabled='true'] slideshow-arrows { display: none; } slideshow-arrows .slideshow-control { pointer-events: auto; opacity: 0; min-height: var(--minimum-touch-target); padding: 0 var(--padding-xs); color: var(--color-white); } slideshow-arrows .slideshow-control.slideshow-control--style-none { display: none; } .media-gallery--carousel slideshow-arrows .slideshow-control { padding-inline: 0 var(--padding-md); } .card-gallery slideshow-arrows .slideshow-control { /* Align icons with quick-add button */ padding-inline: var(--padding-xl); @container (max-width: 249px) { padding-inline: 0 var(--padding-sm); } } .media-gallery--carousel slideshow-arrows .slideshow-control { opacity: 1; } :not(.media-gallery--carousel) > :is(slideshow-component:hover, slideshow-component:focus-within):not(:has(slideshow-controls:hover)) > slideshow-container > slideshow-arrows .slideshow-control { animation: arrowsSlideIn var(--animation-speed) var(--animation-easing) forwards; } @keyframes arrowsSlideIn { from { transform: translate(var(--padding-sm), 0); opacity: 0; } to { opacity: 1; } } .block-resource-list { display: flex; flex-direction: column; row-gap: var(--gap); min-width: 0; min-height: 0; container-type: inline-size; container-name: resource-list; } .section-resource-list { row-gap: var(--gap); } .section-resource-list__content { display: flex; flex-direction: column; align-items: var(--horizontal-alignment); gap: var(--gap); width: 100%; } .section-resource-list__content:empty { display: none; } .section-resource-list__header:is(:empty, :has(.group-block-content:empty)), .section-resource-list__content:empty { display: none; } .section-resource-list.section--full-width product-card-link > .group-block { @media screen and (max-width: 749px) { padding-inline: max(var(--padding-xs), var(--padding-inline-start)) max(var(--padding-xs), var(--padding-inline-end)); } } .resource-list--carousel-mobile { display: block; @media screen and (min-width: 750px) { display: none; } } .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; } .resource-list__carousel { --slide-width: 60vw; width: 100%; position: relative; container-type: inline-size; container-name: resource-list-carousel; .slideshow-control[disabled] { display: none; } .slideshow-control--next { margin-inline-start: auto; } } @container resource-list-carousel (max-width: 749px) { .resource-list__carousel .resource-list__slide { --slide-width: clamp(150px, var(--mobile-card-size, 60cqw), var(--slide-width-max)); } } @container resource-list-carousel (min-width: 750px) { .resource-list__carousel .resource-list__slide { --section-slide-width: calc( (100% - (var(--resource-list-column-gap) * (var(--column-count) - 1)) - var(--peek-next-slide-size)) / var(--column-count) ); --fallback-slide-width: clamp(150px, var(--mobile-card-size, 60cqw), var(--slide-width-max)); --slide-width: var(--section-slide-width, var(--fallback-slide-width)); } } .resource-list__carousel slideshow-slides { gap: var(--resource-list-column-gap); /* Add padding to prevent hover animations from being clipped in slideshow 15px accommodates: - Scale effect (9px on each side from 1.03 scale) - Lift effect (4px upward movement) - Shadow (15px spread with -5px offset) Using 16px for better alignment with our spacing scale */ margin-block: -16px; padding-block: 16px; } .resource-list__carousel slideshow-arrows { padding-inline: var(--util-page-margin-offset); } .resource-list__carousel .resource-list__slide { width: var(--slide-width); flex: 0 0 auto; scroll-snap-align: start; min-width: 0; } /* Base styles */ .group-block, .group-block-content { position: relative; } .group-block:has(> video-background-component), .group-block:has(> .background-image-container) { overflow: hidden; } .group-block-content { height: 100%; width: 100%; } /* Container styles */ .section-content-wrapper.section-content-wrapper:where(.layout-panel-flex) .group-block--fill { flex: 1; } /* Flex behavior for width variants */ .layout-panel-flex--row > .group-block--width-fit { flex: 0; } .layout-panel-flex--row > .group-block--width-fill { flex: 1; } .layout-panel-flex--row > .group-block--width-custom { flex-basis: var(--size-style-width); } /* Dimension utilities - Height */ .group-block--height-fit { height: auto; } .group-block--height-custom, .group-block--height-fill { height: var(--size-style-height); } /* Flex behavior for height variants */ .layout-panel-flex--column > .group-block--height-fit { flex: 0 1 auto; } .layout-panel-flex--column > .group-block--height-fill { flex: 1; } .layout-panel-flex--column > .group-block--height-custom { flex-basis: var(--size-style-height); } accordion-custom { details { &::details-content, .details-content { block-size: 0; overflow-y: clip; opacity: 0; interpolate-size: allow-keywords; transition: content-visibility var(--animation-speed-slow) allow-discrete, padding-block var(--animation-speed-slow) var(--animation-easing), opacity var(--animation-speed-slow) var(--animation-easing), block-size var(--animation-speed-slow) var(--animation-easing); } &:not([open]) { &::details-content, .details-content { padding-block: 0; } } &[open] { &::details-content, .details-content { opacity: 1; block-size: auto; @starting-style { block-size: 0; opacity: 0; overflow-y: clip; } &:focus-within { overflow-y: visible; } } } } } accordion-custom[data-disable-on-mobile='true'] summary { @media screen and (max-width: 749px) { cursor: auto; } } accordion-custom[data-disable-on-desktop='true'] summary { @media screen and (min-width: 750px) { cursor: auto; } } 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 { 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; } } /* Animation transitions */ .transition-background-color { transition: background-color var(--animation-speed-medium) ease-in-out; } .transition-transform { transition: transform var(--animation-speed-medium) var(--animation-timing-bounce); } .transition-border-color { transition: border-color var(--animation-speed-medium) var(--animation-timing-hover); } /* Global scrollbar styles */ /* Webkit browsers */ ::-webkit-scrollbar { width: 20px; } ::-webkit-scrollbar-track { background-color: transparent; } ::-webkit-scrollbar-thumb { background-color: rgb(var(--color-foreground-rgb) / var(--opacity-40)); border-radius: 20px; border: 6px solid transparent; background-clip: content-box; transition: background-color 0.2s; } ::-webkit-scrollbar-thumb:hover { background-color: rgb(var(--color-foreground-rgb) / var(--opacity-60)); } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } /* Product card title truncation - applied only to zoom-out view */ [product-grid-view='zoom-out'] :is(.product-card, .product-grid__card) :is(h4, .h4) { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 3; } /* Product card title truncation - applied on mobile regardless of view */ @media screen and (max-width: 749px) { :is(.product-card, .product-grid__card) :is(h4, .h4) { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 3; } } .product-card:hover, .collection-card:hover, .resource-card:hover, .predictive-search-results__card--product:hover, .predictive-search-results__card:hover { position: relative; z-index: var(--layer-raised); transition: transform var(--hover-transition-duration) var(--hover-transition-timing), box-shadow var(--hover-transition-duration) var(--hover-transition-timing); } .header .product-card:hover, .header .collection-card:hover, .header .resource-card:hover, .header-drawer .product-card:hover, .header-drawer .collection-card:hover, .header-drawer .resource-card:hover { z-index: auto; transform: none; box-shadow: none; } /* Prevent iOS zoom on input focus by ensuring minimum 16px font size on mobile */ @media screen and (max-width: 1200px) { input, textarea, select, /* Higher specificity to override type preset classes like .paragraph, .h1, etc. */ .paragraph.paragraph input, .paragraph.paragraph textarea, .paragraph.paragraph select, .h1.h1 input, .h1.h1 textarea, .h1.h1 select, .h2.h2 input, .h2.h2 textarea, .h2.h2 select, .h3.h3 input, .h3.h3 textarea, .h3.h3 select, .h4.h4 input, .h4.h4 textarea, .h4.h4 select, .h5.h5 input, .h5.h5 textarea, .h5.h5 select, .h6.h6 input, .h6.h6 textarea, .h6.h6 select { font-size: max(1rem, 100%); } } /* talwind css copy paste */ /*! tailwindcss v4.0.6 | MIT License | https://tailwindcss.com */ /*! tailwindcss v4.0.6 | MIT License | https://tailwindcss.com*/ @layer theme { :host,:root { --font-sans: ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; --font-serif: ui-serif,Georgia,Cambria,"Times New Roman",Times,serif; --font-mono: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; --color-red-50: oklch(.971 .013 17.38); --color-red-100: oklch(.936 .032 17.717); --color-red-200: oklch(.885 .062 18.334); --color-red-300: oklch(.808 .114 19.571); --color-red-400: oklch(.704 .191 22.216); --color-red-500: oklch(.637 .237 25.331); --color-red-600: oklch(.577 .245 27.325); --color-red-700: oklch(.505 .213 27.518); --color-red-800: oklch(.444 .177 26.899); --color-red-900: oklch(.396 .141 25.723); --color-red-950: oklch(.258 .092 26.042); --color-orange-50: oklch(.98 .016 73.684); --color-orange-100: oklch(.954 .038 75.164); --color-orange-200: oklch(.901 .076 70.697); --color-orange-300: oklch(.837 .128 66.29); --color-orange-400: oklch(.75 .183 55.934); --color-orange-500: oklch(.705 .213 47.604); --color-orange-600: oklch(.646 .222 41.116); --color-orange-700: oklch(.553 .195 38.402); --color-orange-800: oklch(.47 .157 37.304); --color-orange-900: oklch(.408 .123 38.172); --color-orange-950: oklch(.266 .079 36.259); --color-amber-50: oklch(.987 .022 95.277); --color-amber-100: oklch(.962 .059 95.617); --color-amber-200: oklch(.924 .12 95.746); --color-amber-300: oklch(.879 .169 91.605); --color-amber-400: oklch(.828 .189 84.429); --color-amber-500: oklch(.769 .188 70.08); --color-amber-600: oklch(.666 .179 58.318); --color-amber-700: oklch(.555 .163 48.998); --color-amber-800: oklch(.473 .137 46.201); --color-amber-900: oklch(.414 .112 45.904); --color-amber-950: oklch(.279 .077 45.635); --color-yellow-50: oklch(.987 .026 102.212); --color-yellow-100: oklch(.973 .071 103.193); --color-yellow-200: oklch(.945 .129 101.54); --color-yellow-300: oklch(.905 .182 98.111); --color-yellow-400: oklch(.852 .199 91.936); --color-yellow-500: oklch(.795 .184 86.047); --color-yellow-600: oklch(.681 .162 75.834); --color-yellow-700: oklch(.554 .135 66.442); --color-yellow-800: oklch(.476 .114 61.907); --color-yellow-900: oklch(.421 .095 57.708); --color-yellow-950: oklch(.286 .066 53.813); --color-lime-50: oklch(.986 .031 120.757); --color-lime-100: oklch(.967 .067 122.328); --color-lime-200: oklch(.938 .127 124.321); --color-lime-300: oklch(.897 .196 126.665); --color-lime-400: oklch(.841 .238 128.85); --color-lime-500: oklch(.768 .233 130.85); --color-lime-600: oklch(.648 .2 131.684); --color-lime-700: oklch(.532 .157 131.589); --color-lime-800: oklch(.453 .124 130.933); --color-lime-900: oklch(.405 .101 131.063); --color-lime-950: oklch(.274 .072 132.109); --color-green-50: oklch(.982 .018 155.826); --color-green-100: oklch(.962 .044 156.743); --color-green-200: oklch(.925 .084 155.995); --color-green-300: oklch(.871 .15 154.449); --color-green-400: oklch(.792 .209 151.711); --color-green-500: oklch(.723 .219 149.579); --color-green-600: oklch(.627 .194 149.214); --color-green-700: oklch(.527 .154 150.069); --color-green-800: oklch(.448 .119 151.328); --color-green-900: oklch(.393 .095 152.535); --color-green-950: oklch(.266 .065 152.934); --color-emerald-50: oklch(.979 .021 166.113); --color-emerald-100: oklch(.95 .052 163.051); --color-emerald-200: oklch(.905 .093 164.15); --color-emerald-300: oklch(.845 .143 164.978); --color-emerald-400: oklch(.765 .177 163.223); --color-emerald-500: oklch(.696 .17 162.48); --color-emerald-600: oklch(.596 .145 163.225); --color-emerald-700: oklch(.508 .118 165.612); --color-emerald-800: oklch(.432 .095 166.913); --color-emerald-900: oklch(.378 .077 168.94); --color-emerald-950: oklch(.262 .051 172.552); --color-teal-50: oklch(.984 .014 180.72); --color-teal-100: oklch(.953 .051 180.801); --color-teal-200: oklch(.91 .096 180.426); --color-teal-300: oklch(.855 .138 181.071); --color-teal-400: oklch(.777 .152 181.912); --color-teal-500: oklch(.704 .14 182.503); --color-teal-600: oklch(.6 .118 184.704); --color-teal-700: oklch(.511 .096 186.391); --color-teal-800: oklch(.437 .078 188.216); --color-teal-900: oklch(.386 .063 188.416); --color-teal-950: oklch(.277 .046 192.524); --color-cyan-50: oklch(.984 .019 200.873); --color-cyan-100: oklch(.956 .045 203.388); --color-cyan-200: oklch(.917 .08 205.041); --color-cyan-300: oklch(.865 .127 207.078); --color-cyan-400: oklch(.789 .154 211.53); --color-cyan-500: oklch(.715 .143 215.221); --color-cyan-600: oklch(.609 .126 221.723); --color-cyan-700: oklch(.52 .105 223.128); --color-cyan-800: oklch(.45 .085 224.283); --color-cyan-900: oklch(.398 .07 227.392); --color-cyan-950: oklch(.302 .056 229.695); --color-sky-50: oklch(.977 .013 236.62); --color-sky-100: oklch(.951 .026 236.824); --color-sky-200: oklch(.901 .058 230.902); --color-sky-300: oklch(.828 .111 230.318); --color-sky-400: oklch(.746 .16 232.661); --color-sky-500: oklch(.685 .169 237.323); --color-sky-600: oklch(.588 .158 241.966); --color-sky-700: oklch(.5 .134 242.749); --color-sky-800: oklch(.443 .11 240.79); --color-sky-900: oklch(.391 .09 240.876); --color-sky-950: oklch(.293 .066 243.157); --color-blue-50: oklch(.97 .014 254.604); --color-blue-100: oklch(.932 .032 255.585); --color-blue-200: oklch(.882 .059 254.128); --color-blue-300: oklch(.809 .105 251.813); --color-blue-400: oklch(.707 .165 254.624); --color-blue-500: oklch(.623 .214 259.815); --color-blue-600: oklch(.546 .245 262.881); --color-blue-700: oklch(.488 .243 264.376); --color-blue-800: oklch(.424 .199 265.638); --color-blue-900: oklch(.379 .146 265.522); --color-blue-950: oklch(.282 .091 267.935); --color-indigo-50: oklch(.962 .018 272.314); --color-indigo-100: oklch(.93 .034 272.788); --color-indigo-200: oklch(.87 .065 274.039); --color-indigo-300: oklch(.785 .115 274.713); --color-indigo-400: oklch(.673 .182 276.935); --color-indigo-500: oklch(.585 .233 277.117); --color-indigo-600: oklch(.511 .262 276.966); --color-indigo-700: oklch(.457 .24 277.023); --color-indigo-800: oklch(.398 .195 277.366); --color-indigo-900: oklch(.359 .144 278.697); --color-indigo-950: oklch(.257 .09 281.288); --color-violet-50: oklch(.969 .016 293.756); --color-violet-100: oklch(.943 .029 294.588); --color-violet-200: oklch(.894 .057 293.283); --color-violet-300: oklch(.811 .111 293.571); --color-violet-400: oklch(.702 .183 293.541); --color-violet-500: oklch(.606 .25 292.717); --color-violet-600: oklch(.541 .281 293.009); --color-violet-700: oklch(.491 .27 292.581); --color-violet-800: oklch(.432 .232 292.759); --color-violet-900: oklch(.38 .189 293.745); --color-violet-950: oklch(.283 .141 291.089); --color-purple-50: oklch(.977 .014 308.299); --color-purple-100: oklch(.946 .033 307.174); --color-purple-200: oklch(.902 .063 306.703); --color-purple-300: oklch(.827 .119 306.383); --color-purple-400: oklch(.714 .203 305.504); --color-purple-500: oklch(.627 .265 303.9); --color-purple-600: oklch(.558 .288 302.321); --color-purple-700: oklch(.496 .265 301.924); --color-purple-800: oklch(.438 .218 303.724); --color-purple-900: oklch(.381 .176 304.987); --color-purple-950: oklch(.291 .149 302.717); --color-fuchsia-50: oklch(.977 .017 320.058); --color-fuchsia-100: oklch(.952 .037 318.852); --color-fuchsia-200: oklch(.903 .076 319.62); --color-fuchsia-300: oklch(.833 .145 321.434); --color-fuchsia-400: oklch(.74 .238 322.16); --color-fuchsia-500: oklch(.667 .295 322.15); --color-fuchsia-600: oklch(.591 .293 322.896); --color-fuchsia-700: oklch(.518 .253 323.949); --color-fuchsia-800: oklch(.452 .211 324.591); --color-fuchsia-900: oklch(.401 .17 325.612); --color-fuchsia-950: oklch(.293 .136 325.661); --color-pink-50: oklch(.971 .014 343.198); --color-pink-100: oklch(.948 .028 342.258); --color-pink-200: oklch(.899 .061 343.231); --color-pink-300: oklch(.823 .12 346.018); --color-pink-400: oklch(.718 .202 349.761); --color-pink-500: oklch(.656 .241 354.308); --color-pink-600: oklch(.592 .249 .584); --color-pink-700: oklch(.525 .223 3.958); --color-pink-800: oklch(.459 .187 3.815); --color-pink-900: oklch(.408 .153 2.432); --color-pink-950: oklch(.284 .109 3.907); --color-rose-50: oklch(.969 .015 12.422); --color-rose-100: oklch(.941 .03 12.58); --color-rose-200: oklch(.892 .058 10.001); --color-rose-300: oklch(.81 .117 11.638); --color-rose-400: oklch(.712 .194 13.428); --color-rose-500: oklch(.645 .246 16.439); --color-rose-600: oklch(.586 .253 17.585); --color-rose-700: oklch(.514 .222 16.935); --color-rose-800: oklch(.455 .188 13.697); --color-rose-900: oklch(.41 .159 10.272); --color-rose-950: oklch(.271 .105 12.094); --color-slate-50: oklch(.984 .003 247.858); --color-slate-100: oklch(.968 .007 247.896); --color-slate-200: oklch(.929 .013 255.508); --color-slate-300: oklch(.869 .022 252.894); --color-slate-400: oklch(.704 .04 256.788); --color-slate-500: oklch(.554 .046 257.417); --color-slate-600: oklch(.446 .043 257.281); --color-slate-700: oklch(.372 .044 257.287); --color-slate-800: oklch(.279 .041 260.031); --color-slate-900: oklch(.208 .042 265.755); --color-slate-950: oklch(.129 .042 264.695); --color-gray-50: oklch(.985 .002 247.839); --color-gray-100: oklch(.967 .003 264.542); --color-gray-200: oklch(.928 .006 264.531); --color-gray-300: oklch(.872 .01 258.338); --color-gray-400: oklch(.707 .022 261.325); --color-gray-500: oklch(.551 .027 264.364); --color-gray-600: oklch(.446 .03 256.802); --color-gray-700: oklch(.373 .034 259.733); --color-gray-800: oklch(.278 .033 256.848); --color-gray-900: oklch(.21 .034 264.665); --color-gray-950: oklch(.13 .028 261.692); --color-zinc-50: oklch(.985 0 0); --color-zinc-100: oklch(.967 .001 286.375); --color-zinc-200: oklch(.92 .004 286.32); --color-zinc-300: oklch(.871 .006 286.286); --color-zinc-400: oklch(.705 .015 286.067); --color-zinc-500: oklch(.552 .016 285.938); --color-zinc-600: oklch(.442 .017 285.786); --color-zinc-700: oklch(.37 .013 285.805); --color-zinc-800: oklch(.274 .006 286.033); --color-zinc-900: oklch(.21 .006 285.885); --color-zinc-950: oklch(.141 .005 285.823); --color-neutral-50: oklch(.985 0 0); --color-neutral-100: oklch(.97 0 0); --color-neutral-200: oklch(.922 0 0); --color-neutral-300: oklch(.87 0 0); --color-neutral-400: oklch(.708 0 0); --color-neutral-500: oklch(.556 0 0); --color-neutral-600: oklch(.439 0 0); --color-neutral-700: oklch(.371 0 0); --color-neutral-800: oklch(.269 0 0); --color-neutral-900: oklch(.205 0 0); --color-neutral-950: oklch(.145 0 0); --color-stone-50: oklch(.985 .001 106.423); --color-stone-100: oklch(.97 .001 106.424); --color-stone-200: oklch(.923 .003 48.717); --color-stone-300: oklch(.869 .005 56.366); --color-stone-400: oklch(.709 .01 56.259); --color-stone-500: oklch(.553 .013 58.071); --color-stone-600: oklch(.444 .011 73.639); --color-stone-700: oklch(.374 .01 67.558); --color-stone-800: oklch(.268 .007 34.298); --color-stone-900: oklch(.216 .006 56.043); --color-stone-950: oklch(.147 .004 49.25); --color-black: #000; --color-white: #fff; --spacing: .25rem; --breakpoint-sm: 40rem; --breakpoint-md: 48rem; --breakpoint-lg: 64rem; --breakpoint-xl: 80rem; --breakpoint-2xl: 96rem; --container-3xs: 16rem; --container-2xs: 18rem; --container-xs: 20rem; --container-sm: 24rem; --container-md: 28rem; --container-lg: 32rem; --container-xl: 36rem; --container-2xl: 42rem; --container-3xl: 48rem; --container-4xl: 56rem; --container-5xl: 64rem; --container-6xl: 72rem; --container-7xl: 80rem; --text-xs: .75rem; --text-xs--line-height: 1.33333; --text-sm: .875rem; --text-sm--line-height: 1.42857; --text-base: 1rem; --text-base--line-height: 1.5; --text-lg: 1.125rem; --text-lg--line-height: 1.55556; --text-xl: 1.25rem; --text-xl--line-height: 1.4; --text-2xl: 1.5rem; --text-2xl--line-height: 1.33333; --text-3xl: 1.875rem; --text-3xl--line-height: 1.2; --text-4xl: 2.25rem; --text-4xl--line-height: 1.11111; --text-5xl: 3rem; --text-5xl--line-height: 1; --text-6xl: 3.75rem; --text-6xl--line-height: 1; --text-7xl: 4.5rem; --text-7xl--line-height: 1; --text-8xl: 6rem; --text-8xl--line-height: 1; --text-9xl: 8rem; --text-9xl--line-height: 1; --font-weight-thin: 100; --font-weight-extralight: 200; --font-weight-light: 300; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; --font-weight-black: 900; --tracking-tighter: -.05em; --tracking-tight: -.025em; --tracking-normal: 0em; --tracking-wide: .025em; --tracking-wider: .05em; --tracking-widest: .1em; --leading-tight: 1.25; --leading-snug: 1.375; --leading-normal: 1.5; --leading-relaxed: 1.625; --leading-loose: 2; --radius-xs: .125rem; --radius-sm: .25rem; --radius-md: .375rem; --radius-lg: .5rem; --radius-xl: .75rem; --radius-2xl: 1rem; --radius-3xl: 1.5rem; --radius-4xl: 2rem; --shadow-2xs: 0 1px #0000000d; --shadow-xs: 0 1px 2px 0 #0000000d; --shadow-sm: 0 1px 3px 0 #0000001a,0 1px 2px -1px #0000001a; --shadow-md: 0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a; --shadow-lg: 0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a; --shadow-xl: 0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a; --shadow-2xl: 0 25px 50px -12px #00000040; --inset-shadow-2xs: inset 0 1px #0000000d; --inset-shadow-xs: inset 0 1px 1px #0000000d; --inset-shadow-sm: inset 0 2px 4px #0000000d; --drop-shadow-xs: 0 1px 1px #0000000d; --drop-shadow-sm: 0 1px 2px #00000026; --drop-shadow-md: 0 3px 3px #0000001f; --drop-shadow-lg: 0 4px 4px #00000026; --drop-shadow-xl: 0 9px 7px #0000001a; --drop-shadow-2xl: 0 25px 25px #00000026; --ease-in: cubic-bezier(.4,0,1,1); --ease-out: cubic-bezier(0,0,.2,1); --ease-in-out: cubic-bezier(.4,0,.2,1); --animate-spin: spin 1s linear infinite; --animate-ping: ping 1s cubic-bezier(0,0,.2,1)infinite; --animate-pulse: pulse 2s cubic-bezier(.4,0,.6,1)infinite; --animate-bounce: bounce 1s infinite; --blur-xs: 4px; --blur-sm: 8px; --blur-md: 12px; --blur-lg: 16px; --blur-xl: 24px; --blur-2xl: 40px; --blur-3xl: 64px; --perspective-dramatic: 100px; --perspective-near: 300px; --perspective-normal: 500px; --perspective-midrange: 800px; --perspective-distant: 1200px; --aspect-video: 16/9; --default-transition-duration: .15s; --default-transition-timing-function: cubic-bezier(.4,0,.2,1); --default-font-family: var(--font-sans); --default-font-feature-settings: var(--font-sans--font-feature-settings); --default-font-variation-settings: var(--font-sans--font-variation-settings); --default-mono-font-family: var(--font-mono); --default-mono-font-feature-settings: var(--font-mono--font-feature-settings); --default-mono-font-variation-settings: var(--font-mono--font-variation-settings); --color-theme-purple: #7f27ff; --color-theme-purple-light: #ecdfff; --color-secondary: #70e0c1; --color-theme-gray: #2f2f30; --font-helvetica: "Helvetica","sans-serif"; --font-primary: "Titillium Web","sans-serif" } } @layer base { *,::backdrop,:after,:before { border: 0 solid; box-sizing: border-box; margin: 0; padding: 0 } ::file-selector-button { border: 0 solid; box-sizing: border-box; margin: 0; padding: 0 } :host,html { -webkit-text-size-adjust: 100%; font-feature-settings: var(--default-font-feature-settings,normal); -webkit-tap-highlight-color: transparent; font-family: var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"); font-variation-settings: var(--default-font-variation-settings,normal); line-height: 1.5; -moz-tab-size: 4; -o-tab-size: 4; tab-size: 4 } body { line-height: inherit } hr { border-top-width: 1px; color: inherit; height: 0 } abbr: where([title]) { -webkit-text-decoration:underline dotted; text-decoration: underline dotted } h1,h2,h3,h4,h5,h6 { font-size: inherit; font-weight: inherit } a { color: inherit; -webkit-text-decoration: inherit; text-decoration: inherit } b,strong { font-weight: bolder } code,kbd,pre,samp { font-feature-settings: var(--default-mono-font-feature-settings,normal); font-family: var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace); font-size: 1em; font-variation-settings: var(--default-mono-font-variation-settings,normal) } small { font-size: 80% } sub,sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline } sub { bottom: -.25em } sup { top: -.5em } table { border-collapse: collapse; border-color: inherit; text-indent: 0 } :-moz-focusring { outline: auto } progress { vertical-align: baseline } summary { display: list-item } menu,ol,ul { list-style: none } audio,canvas,embed,iframe,img,object,svg,video { display: block; vertical-align: middle } img,video { height: auto; max-width: 100% } button,input,optgroup,select,textarea { font-feature-settings: inherit; background-color: #0000; border-radius: 0; color: inherit; font: inherit; font-variation-settings: inherit; letter-spacing: inherit; opacity: 1 } ::file-selector-button { font-feature-settings: inherit; background-color: #0000; border-radius: 0; color: inherit; font: inherit; font-variation-settings: inherit; letter-spacing: inherit; opacity: 1 } :where(select: is([multiple],[size])) optgroup { font-weight:bolder } :where(select: is([multiple],[size])) optgroup option { padding-inline-start:20px } ::file-selector-button { margin-inline-end:4px} ::-moz-placeholder { color: color-mix(in oklab,currentColor 50%,transparent); opacity: 1 } ::placeholder { color: color-mix(in oklab,currentColor 50%,transparent); opacity: 1 } textarea { resize: vertical } ::-webkit-search-decoration { -webkit-appearance: none } ::-webkit-date-and-time-value { min-height: 1lh; text-align: inherit } ::-webkit-datetime-edit { display: inline-flex } ::-webkit-datetime-edit-fields-wrapper { padding: 0 } ::-webkit-datetime-edit,::-webkit-datetime-edit-year-field { padding-block:0} ::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-month-field { padding-block:0} ::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field { padding-block:0} ::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-second-field { padding-block:0} ::-webkit-datetime-edit-meridiem-field { padding-block:0} :-moz-ui-invalid { box-shadow: none } button,input: where([type=button],[type=reset],[type=submit]) { -webkit-appearance:button; -moz-appearance: button; appearance: button } ::file-selector-button { -webkit-appearance: button; -moz-appearance: button; appearance: button } ::-webkit-inner-spin-button,::-webkit-outer-spin-button { height: auto } [hidden]: where(:not([hidden=until-found])) { display:none!important } } @layer components;@layer utilities { .absolute { position: absolute } .fixed { position: fixed } .relative { position: relative } .-top-2 { top: calc(var(--spacing)*-2) } .-top-\[50px\] { top: -50px } .top-0 { top: calc(var(--spacing)*0) } .top-2 { top: calc(var(--spacing)*2) } .top-4 { top: calc(var(--spacing)*4) } .top-\[10px\] { top: 10px } .-right-2 { right: calc(var(--spacing)*-2) } .right-0 { right: calc(var(--spacing)*0) } .right-2 { right: calc(var(--spacing)*2) } .right-4 { right: calc(var(--spacing)*4) } .bottom-0 { bottom: calc(var(--spacing)*0) } .left-0 { left: calc(var(--spacing)*0) } .z-0 { z-index: 0 } .z-10 { z-index: 10 } .z-20 { z-index: 20 } .z-50 { z-index: 50 } .z-100 { z-index: 100 } .z-\[20\] { z-index: 20 } .z-\[10000\] { z-index: 10000 } .z-\[10\] { z-index: 10 } .z-\[30\] { z-index: 30 } .container { width: 100% } @media (width>=40rem) { .container { max-width: 40rem } } @media (width>=48rem) { .container { max-width: 48rem } } @media (width>=64rem) { .container { max-width: 64rem } } @media (width>=80rem) { .container { max-width: 80rem } } @media (width>=96rem) { .container { max-width: 96rem } } .m-8 { margin: calc(var(--spacing)*8) } .container { margin-inline:auto;padding-inline:20px} .-mx-\[20px\] { margin-inline: -20px } .mx-8 { margin-inline:calc(var(--spacing)*8)} .mx-auto { margin-inline: auto } .my-3 { margin-block:calc(var(--spacing)*3)} .my-8 { margin-block: calc(var(--spacing)*8) } .my-16 { margin-block:calc(var(--spacing)*16)} .my-\[30px\] { margin-block: 30px } .-mt-8 { margin-top: calc(var(--spacing)*-8) } .-mt-12 { margin-top: calc(var(--spacing)*-12) } .mt-0 { margin-top: calc(var(--spacing)*0) } .mt-2 { margin-top: calc(var(--spacing)*2) } .mt-4 { margin-top: calc(var(--spacing)*4) } .mt-8 { margin-top: calc(var(--spacing)*8) } .mt-12 { margin-top: calc(var(--spacing)*12) } .mt-24 { margin-top: calc(var(--spacing)*24) } .mt-\[-2px\] { margin-top: -2px } .mt-\[-4rem\] { margin-top: -4rem } .-mr-8 { margin-right: calc(var(--spacing)*-8) } .mr-4 { margin-right: calc(var(--spacing)*4) } .-mb-14 { margin-bottom: calc(var(--spacing)*-14) } .-mb-\[50px\] { margin-bottom: -50px } .mb-1 { margin-bottom: calc(var(--spacing)*1) } .mb-2 { margin-bottom: calc(var(--spacing)*2) } .mb-3 { margin-bottom: calc(var(--spacing)*3) } .mb-4 { margin-bottom: calc(var(--spacing)*4) } .mb-8 { margin-bottom: calc(var(--spacing)*8) } .mb-12 { margin-bottom: calc(var(--spacing)*12) } .mb-\[20px\] { margin-bottom: 20px } .block { display: block } .flex { display: flex } .grid { display: grid } .hidden { display: none } .inline-block { display: inline-block } .table { display: table } .aspect-square { aspect-ratio: 1 } .size-2 { height: calc(var(--spacing)*2); width: calc(var(--spacing)*2) } .h-1 { height: calc(var(--spacing)*1) } .h-\[32px\] { height: 32px } .h-\[60px\] { height: 60px } .h-auto { height: auto } .h-full { height: 100% } .h-screen { height: 100vh } .min-h-screen { min-height: 100vh } .w-1\/3 { width: 33.3333% } .w-2\/3 { width: 66.6667% } .w-16 { width: calc(var(--spacing)*16) } .w-\[100px\] { width: 100px } .w-\[150px\] { width: 150px } .w-\[200px\] { width: 200px } .w-\[220px\] { width: 220px } .w-\[300px\] { width: 300px } .w-\[360px\] { width: 360px } .w-\[800px\] { width: 800px } .w-auto { width: auto } .w-full { width: 100% } .w-screen { width: 100vw } .max-w-\[600px\] { max-width: 600px } .max-w-\[800px\] { max-width: 800px } .max-w-\[900px\] { max-width: 900px } .max-w-\[1400px\] { max-width: 1400px } .max-w-sm { max-width: var(--container-sm) } .min-w-0 { min-width: calc(var(--spacing)*0) } .shrink-0 { flex-shrink: 0 } .grow { flex-grow: 1 } .-translate-x-\[100\%\] { --tw-translate-x: -100% } .-translate-x-\[100\%\],.translate-y-\[150\%\] { translate: var(--tw-translate-x)var(--tw-translate-y) } .translate-y-\[150\%\] { --tw-translate-y: 150% } .transform { transform: var(--tw-rotate-x)var(--tw-rotate-y)var(--tw-rotate-z)var(--tw-skew-x)var(--tw-skew-y) } .cursor-pointer { cursor: pointer } .resize { resize: both } .grid-cols-1 { grid-template-columns: repeat(1,minmax(0,1fr)) } .grid-cols-3 { grid-template-columns: repeat(3,minmax(0,1fr)) } .grid-cols-4 { grid-template-columns: repeat(4,minmax(0,1fr)) } .flex-col { flex-direction: column } .flex-row-reverse { flex-direction: row-reverse } .flex-wrap { flex-wrap: wrap } .items-center { align-items: center } .items-end { align-items: flex-end } .items-start { align-items: flex-start } .justify-between { justify-content: space-between } .justify-center { justify-content: center } .justify-end { justify-content: flex-end } .justify-start { justify-content: flex-start } .gap-1 { gap: calc(var(--spacing)*1) } .gap-2 { gap: calc(var(--spacing)*2) } .gap-4 { gap: calc(var(--spacing)*4) } .gap-8 { gap: calc(var(--spacing)*8) } .gap-12 { gap: calc(var(--spacing)*12) } .overflow-hidden { overflow: hidden } .rounded-3xl { border-radius: var(--radius-3xl) } .rounded-4xl { border-radius: var(--radius-4xl) } .rounded-full { border-radius: 3.40282e+38px } .rounded-lg { border-radius: var(--radius-lg) } .rounded-xs { border-radius: var(--radius-xs) } .border-2 { border-style: var(--tw-border-style); border-width: 2px } .border-t { border-top-style: var(--tw-border-style); border-top-width: 1px } .border-t-2 { border-top-style: var(--tw-border-style); border-top-width: 2px } .border-b { border-bottom-style: var(--tw-border-style); border-bottom-width: 1px } .border-theme-purple { border-color: var(--color-theme-purple) } .border-white { border-color: var(--color-white) } .border-t-\[\#bf93ff\] { border-top-color: #bf93ff } .border-t-white { border-top-color: var(--color-white) } .border-b-\[\#bf93ff\] { border-bottom-color: #bf93ff } .bg-\[\#7f27ff\] { background-color: #7f27ff } .bg-black\/80 { background-color: color-mix(in oklab,var(--color-black)80%,transparent) } .bg-gray-200 { background-color: var(--color-gray-200) } .bg-red-500 { background-color: var(--color-red-500) } .bg-theme-purple { background-color: var(--color-theme-purple) } .bg-white { background-color: var(--color-white) } .bg-cover { background-size: cover } .object-contain { -o-object-fit: contain; object-fit: contain } .object-cover { -o-object-fit: cover; object-fit: cover } .object-fill { -o-object-fit: fill; object-fit: fill } .p-1 { padding: calc(var(--spacing)*1) } .p-2 { padding: calc(var(--spacing)*2) } .p-4 { padding: calc(var(--spacing)*4) } .p-8 { padding: calc(var(--spacing)*8) } .p-12 { padding: calc(var(--spacing)*12) } .px-3 { padding-inline:calc(var(--spacing)*3)} .px-4 { padding-inline: calc(var(--spacing)*4) } .px-6 { padding-inline:calc(var(--spacing)*6)} .px-8 { padding-inline: calc(var(--spacing)*8) } .px-\[1rem\] { padding-inline: 1rem } .py-2 { padding-block:calc(var(--spacing)*2)} .py-2\.5 { padding-block: calc(var(--spacing)*2.5) } .py-3 { padding-block:calc(var(--spacing)*3)} .py-4 { padding-block: calc(var(--spacing)*4) } .py-8 { padding-block:calc(var(--spacing)*8)} .py-10 { padding-block: calc(var(--spacing)*10) } .py-12 { padding-block:calc(var(--spacing)*12)} .pt-4 { padding-top: calc(var(--spacing)*4) } .pt-8 { padding-top: calc(var(--spacing)*8) } .pb-4 { padding-bottom: calc(var(--spacing)*4) } .pb-8 { padding-bottom: calc(var(--spacing)*8) } .text-center { text-align: center } .font-helvetica { font-family: var(--font-helvetica) } .font-primary { font-family: var(--font-primary) } .text-2xl { font-size: var(--text-2xl); line-height: var(--tw-leading,var(--text-2xl--line-height)) } .text-3xl { font-size: var(--text-3xl); line-height: var(--tw-leading,var(--text-3xl--line-height)) } .text-4xl { font-size: var(--text-4xl); line-height: var(--tw-leading,var(--text-4xl--line-height)) } .text-5xl { font-size: var(--text-5xl); line-height: var(--tw-leading,var(--text-5xl--line-height)) } .text-lg { font-size: var(--text-lg); line-height: var(--tw-leading,var(--text-lg--line-height)) } .text-sm { font-size: var(--text-sm); line-height: var(--tw-leading,var(--text-sm--line-height)) } .text-sm\! { font-size: var(--text-sm)!important; line-height: var(--tw-leading,var(--text-sm--line-height))!important } .text-xl { font-size: var(--text-xl); line-height: var(--tw-leading,var(--text-xl--line-height)) } .text-\[12px\] { font-size: 12px } .text-\[12px\]\! { font-size: 12px!important } .text-\[16px\] { font-size: 16px } .text-\[16px\]\! { font-size: 16px!important } .text-\[20px\] { font-size: 20px } .text-\[24px\]\! { font-size: 24px!important } .text-\[26px\] { font-size: 26px } .text-\[32px\]\! { font-size: 32px!important } .text-\[48px\] { font-size: 48px } .leading-\[1\.2\] { --tw-leading: 1.2; line-height: 1.2 } .leading-\[1\] { --tw-leading: 1; line-height: 1 } .leading-tight { --tw-leading: var(--leading-tight); line-height: var(--leading-tight) } .font-black { --tw-font-weight: var(--font-weight-black); font-weight: var(--font-weight-black) } .font-black\! { --tw-font-weight: var(--font-weight-black)!important; font-weight: var(--font-weight-black)!important } .font-bold { --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold) } .font-extrabold { --tw-font-weight: var(--font-weight-extrabold); font-weight: var(--font-weight-extrabold) } .font-light { --tw-font-weight: var(--font-weight-light); font-weight: var(--font-weight-light) } .text-nowrap { text-wrap: nowrap } .text-wrap { text-wrap: wrap } .text-black { color: var(--color-black) } .text-gray-800 { color: var(--color-gray-800) } .text-gray-900 { color: var(--color-gray-900) } .text-red-500 { color: var(--color-red-500) } .text-theme-purple { color: var(--color-theme-purple) } .text-white { color: var(--color-white) } .lowercase { /* text-transform:lowercase; */ } .uppercase { text-transform: uppercase } .no-underline { text-decoration-line: none } .underline\! { text-decoration-line: underline!important } .antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale } .opacity-0 { opacity: 0 } .opacity-30 { opacity: .3 } .shadow-lg { --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color,#0000001a),0 4px 6px -4px var(--tw-shadow-color,#0000001a); box-shadow: var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow) } .filter { filter: var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,) } .transition { transition-duration: var(--tw-duration,var(--default-transition-duration)); transition-property: color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter; transition-timing-function: var(--tw-ease,var(--default-transition-timing-function)) } .transition-all { transition-duration: var(--tw-duration,var(--default-transition-duration)); transition-property: all; transition-timing-function: var(--tw-ease,var(--default-transition-timing-function)) } @media (hover: hover) { .hover\:gap-5:hover { gap:calc(var(--spacing)*5) } .hover\:border-black:hover { border-color: var(--color-black) } .hover\:bg-black:hover { background-color: var(--color-black) } .hover\:text-white:hover { color: var(--color-white) } } @media (width>=48rem) { .md\: absolute { position:absolute } .md\:mx-0 { margin-inline:calc(var(--spacing)*0)} .md\: my-6 { margin-block:calc(var(--spacing)*6) } .md\:mt-8 { margin-top: calc(var(--spacing)*8) } .md\:-mb-4 { margin-bottom: calc(var(--spacing)*-4) } .md\:block { display: block } .md\:flex { display: flex } .md\:grid { display: grid } .md\:hidden { display: none } .md\:h-auto { height: auto } .md\:w-1\/2 { width: 50% } .md\:w-\[300px\] { width: 300px } .md\:min-w-\[150px\] { min-width: 150px } .md\:grid-cols-2 { grid-template-columns: repeat(2,minmax(0,1fr)) } .md\:flex-row { flex-direction: row } .md\:justify-start { justify-content: flex-start } .md\:gap-8 { gap: calc(var(--spacing)*8) } .md\:gap-16 { gap: calc(var(--spacing)*16) } .md\:border-none { --tw-border-style: none; border-style: none } .md\:py-16 { padding-block:calc(var(--spacing)*16)} .md\: text-3xl { font-size:var(--text-3xl); line-height: var(--tw-leading,var(--text-3xl--line-height)) } .md\:text-\[20px\] { font-size: 20px } .md\:text-\[24px\] { font-size: 24px } .md\:text-\[34px\] { font-size: 34px } .md\:text-\[120px\] { font-size: 120px } } @media (width>=64rem) { .lg\: my-\[54px\] { margin-block:54px } .lg\:mb-\[36px\] { margin-bottom: 36px } .lg\:block { display: block } .lg\:flex { display: flex } .lg\:hidden { display: none } .lg\:grid-cols-2 { grid-template-columns: repeat(2,minmax(0,1fr)) } .lg\:grid-cols-3 { grid-template-columns: repeat(3,minmax(0,1fr)) } .lg\:grid-cols-6 { grid-template-columns: repeat(6,minmax(0,1fr)) } .lg\:p-16 { padding: calc(var(--spacing)*16) } .lg\:pl-16 { padding-left: calc(var(--spacing)*16) } .lg\:text-5xl { font-size: var(--text-5xl); line-height: var(--tw-leading,var(--text-5xl--line-height)) } .lg\:text-\[16px\]\! { font-size: 16px!important } .lg\:text-\[20px\]\! { font-size: 20px!important } .lg\:text-\[24px\]\! { font-size: 24px!important } .lg\:text-\[60px\]\! { font-size: 60px!important } } } @font-face { font-display: swap; font-family: Helvetica; font-style: normal; font-weight: 400; src: url(../fonts/Helvetica.woff2?d448ae5f5f4a73ccbb8fd0613d1f7fdc)format("woff2"),url(../fonts/Helvetica.woff?296c7b2dd0bc5d9d49bd89d80d84c1b2)format("woff") } @font-face { font-display: swap; font-family: Helvetica; font-style: normal; font-weight: 700; src: url(../fonts/Helvetica-Bold.woff2?fefc8c3abc2176266a50ebb013714afe)format("woff2"),url(../fonts/Helvetica-Bold.woff?a3ddb9015474495e4886c8e2c2047708)format("woff") } body,html { font-family: Titillium Web,sans-serif; overflow-x: hidden } .section-1 { --tw-duration: 2s; align-items: center; background-color: #feab12; background-position: top; background-repeat: no-repeat; background-size: cover; display: flex; flex-direction: column; height: 100vh; justify-content: flex-start; overflow: hidden; padding-top: calc(var(--spacing)*10); position: relative; transition-duration: var(--tw-duration,var(--default-transition-duration)); transition-duration: 2s; transition-property: all; transition-timing-function: var(--tw-ease,var(--default-transition-timing-function)); width: 100% } .section-1.overflow-hidden { z-index: 0; } .header__row.header__row--mobile.desktop\:hidden.color-scheme-1 { display: none; } @media (width>=48rem) { .section-1 { justify-content: center; padding-top: calc(var(--spacing)*0) } } .section-1 .soda-can { height: 50vh; margin-left: calc(var(--spacing)*10); margin-top: calc(var(--spacing)*4); position: absolute; translate: 0 -1500px; z-index: 50 } @media (width>=48rem) { .section-1 .soda-can { height: 80vh; z-index: 10 } } .section-1 h2 { --tw-leading: var(--leading-normal); --tw-font-weight: var(--font-weight-black); color: var(--color-white); font-weight: var(--font-weight-black); line-height: var(--leading-normal); position: relative; text-align: center; z-index: 20 } .section-1 .soda { --tw-translate-x: 100%; translate: var(--tw-translate-x)var(--tw-translate-y) } .section-1 .fck { translate: 100% } .section-1 .fck,.section-1 .soda { font-size: clamp(75px,10vw,160px); line-height: 1 } .section-1 .regular { font-size: clamp(75px,18vw,332px); line-height: 1; translate: -100%; width: 100%; z-index: 1 } .scroller { border-color: var(--color-black); border-bottom: 2px solid #000; border-top-style: var(--tw-border-style); border-top-width: 2px; margin-bottom: calc(var(--spacing)*8); overflow: hidden; padding-block:calc(var(--spacing)*4);position: relative; white-space: nowrap; width: 100% } @media (width>=48rem) { .scroller { padding-block: calc(var(--spacing)*8) } } .scroller .text-wrap { display: flex } .scroller .sc-text { display: inline-block; flex-shrink: 0; font-size: 30px; padding-inline:calc(var(--spacing)*4)} @media (width>=48rem) { .scroller .sc-text { font-size: 52px } } .wave-container { overflow: hidden; position: relative; width: 100% } .wave-image { bottom: -1px; height: auto; left: 0; position: absolute; width: 100% } .section-4 { text-align: center } .section-4 h2.title { --tw-font-weight: var(--font-weight-black); color: var(--color-secondary); font-size: 28px; font-weight: var(--font-weight-black); margin-top: calc(var(--spacing)*10) } @media (width>=48rem) { .section-4 h2.title { font-size: 50px } } .section-4 h3 { --tw-font-weight: var(--font-weight-black); font-size: 18px; font-weight: var(--font-weight-black); margin-bottom: calc(var(--spacing)*8); padding-block:calc(var(--spacing)*4)} @media (width>=48rem) { .section-4 h3 { font-size: 37px } } .section-4 .grid { color: var(--color-theme-gray); font-family: var(--font-helvetica); font-size: 12px; margin-bottom: calc(var(--spacing)*4) } @media (width>=48rem) { .section-4 .grid { font-size: 20px } } .section-4 .grid img { margin-bottom: calc(var(--spacing)*3); width: 42px } @media (width>=48rem) { .section-4 .grid img { width: 85px } } .section-6 { font-size: var(--text-base); line-height: var(--tw-leading,var(--text-base--line-height)) } @media (width>=48rem) { .section-6 { font-size: 18px } } .section-6 .t1 { margin-top: calc(var(--spacing)*4) } .section-6 .t1,.section-6 .t2 { --tw-leading: 1; --tw-font-weight: var(--font-weight-black); font-size: 20px; font-weight: var(--font-weight-black); line-height: 1; margin-bottom: calc(var(--spacing)*2); text-transform: uppercase } @media (width>=48rem) { : is(.section-6 .t1,.section-6 .t2) { font-size:34px; } } .section-6 .t2 { margin-bottom: calc(var(--spacing)*4) } .icon-grid>div { --tw-font-weight: var(--font-weight-bold); align-items: center; display: flex; flex-direction: column; font-weight: var(--font-weight-bold); justify-content: center; margin-bottom: calc(var(--spacing)*6) } body { overflow-x: hidden; scroll-behavior: smooth } .purple-bg { background-color: #7f27ff } .sip { --tw-duration: .5s; --tw-ease: var(--ease-out); --tw-leading: 1.1; font-size: 70px; font-weight: 900; line-height: 1.1; position: relative; text-align: center; transition-duration: var(--tw-duration,var(--default-transition-duration)); transition-duration: .5s; transition-property: all; transition-timing-function: var(--tw-ease,var(--default-transition-timing-function)); transition-timing-function: var(--ease-out) } @media (width>=48rem) { .sip { --tw-leading: 1.4; font-size: 160px; line-height: 1.4 } } .sip div { text-wrap: nowrap; position: absolute } .section-5 { background-position: 50%; background-repeat: no-repeat } .lab-report h2 { --tw-font-weight: var(--font-weight-black); font-size: 20px; font-weight: var(--font-weight-black); margin-bottom: calc(var(--spacing)*4) } @media (width>=48rem) { .lab-report h2 { font-size: 34px } } .lab-report p { display: block; font-size: 16px; margin-bottom: calc(var(--spacing)*8) } @media (width>=48rem) { .lab-report p { font-size: 18px } } .lab-report h3 { --tw-font-weight: var(--font-weight-black); color: #70e0c1; font-size: 24px; font-weight: var(--font-weight-black); line-height: 1.2; margin-bottom: calc(var(--spacing)*16); text-transform: uppercase } @media (width>=48rem) { .lab-report h3 { font-size: 93px } } .lab-report h3 span { --tw-font-weight: var(--font-weight-black); color: var(--color-black); font-size: 14px; font-weight: var(--font-weight-black); margin-bottom: calc(var(--spacing)*4) } @media (width>=48rem) { .lab-report h3 span { font-size: 64px } } .black-btn { background-color: var(--color-black); border-radius: var(--radius-lg); display: inline-block; padding-block:calc(var(--spacing)*3);padding-inline: calc(var(--spacing)*4) } .black-btn,.info-box { color: var(--color-white) } .info-box { --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color,#00000040); --tw-shadow-color: var(--color-white); border-radius: var(--radius-xl); box-shadow: var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow); margin-bottom: calc(var(--spacing)*10); overflow: hidden; padding: calc(var(--spacing)*4); padding-inline:calc(var(--spacing)*8);position: relative; z-index: 80 } @media (width>=64rem) { .info-box { padding: calc(var(--spacing)*10); padding-block:calc(var(--spacing)*8)} } .info-box h2 { --tw-font-weight: var(--font-weight-black); color: #fff; font-size: 24px; font-weight: 900; line-height: 1; margin-bottom: calc(var(--spacing)*4); text-transform: uppercase; transform-origin: 0 0 } @media (width>=48rem) { .info-box h2 { margin-bottom: calc(var(--spacing)*16) } } @media (width>=64rem) { .info-box h2 { font-size: 80px } } .info-box p { font-family: var(--font-helvetica); font-size: var(--text-base); line-height: var(--tw-leading,var(--text-base--line-height)); width: 100% } @media (width>=48rem) { .info-box p { font-size: 18px; width: 60% } } .info-box .content { --tw-font-weight: var(--font-weight-bold); display: flex; flex-direction: column; font-weight: var(--font-weight-bold); justify-content: space-between } @media (width>=48rem) { .info-box .content { flex-direction: row } } .info-box .content img { display: block; margin-left: auto; margin-top: calc(var(--spacing)*16); width: auto } .ib-1 img { width: 110px } .xs-accordion { margin-top: calc(var(--spacing)*8) } .xs-accordion .item { border-bottom-color: var(--color-white) } .xs-accordion .title { --tw-font-weight: var(--font-weight-bold); align-items: center; cursor: pointer; display: flex; font-family: var(--font-helvetica); font-size: 12px; font-weight: var(--font-weight-bold); justify-content: space-between; padding-block:calc(var(--spacing)*4)} @media (width>=48rem) { .xs-accordion .title { font-size: 18px } } .product-container .qty,.product-container .quantity { display: none } .product-container .price { display: block; font-size: var(--text-2xl); line-height: var(--tw-leading,var(--text-2xl--line-height)); margin-top: calc(var(--spacing)*4); text-align: center } .product-container .single_add_to_cart_button { background-color: var(--color-black); border-radius: var(--radius-lg); color: var(--color-white); cursor: pointer; font-family: Helvetica; margin-top: calc(var(--spacing)*8); padding-block:calc(var(--spacing)*3);padding-inline: calc(var(--spacing)*4); text-transform: uppercase; transition-duration: var(--tw-duration,var(--default-transition-duration)); transition-property: all; transition-timing-function: var(--tw-ease,var(--default-transition-timing-function)); width: 100% } @media (hover: hover) { .product-container .single_add_to_cart_button:hover { background-color:var(--color-theme-purple) } } .product-container table { width: 100% } .product-container .variations .label { display: none } .product-container .t1,.product-container .t2 { --tw-font-weight: var(--font-weight-black); text-wrap: nowrap; color: var(--color-theme-purple); font-weight: var(--font-weight-black); line-height: .7; text-align: center; text-transform: uppercase } .product-container .t1 { font-size: clamp(110px,17vw,20rem) } @media (width>=48rem) { .product-container .t1 { --tw-translate-y: 20px; translate: var(--tw-translate-x)var(--tw-translate-y) } } .product-container .t2 { font-size: clamp(60px,10vw,8rem); margin-top: calc(var(--spacing)*4); position: relative; z-index: 800 } .product-container .intro { margin-bottom: calc(var(--spacing)*8) } .product-container .intro p { font-size: 12px } @media (width>=48rem) { .product-container .intro p { font-size: 18px } } .product-container .grape { margin-inline:auto;max-width: 400px; width: 100% } @media (width>=48rem) { .product-container .grape { max-width: 800px } } .v-can { --tw-translate-y: -140%; height: auto; position: relative; top: -10vh; transform: translateY(-120%); translate: var(--tw-translate-x)var(--tw-translate-y); width: 150px; z-index: 100 } @media (width>=48rem) { .v-can { width: 300px } } .ib-1 { background-color: #7f27ff } .ib-2 { background-color: #5200c8 } .ib-3 { background-color: #410e8b } .ib-4 { background-color: #280b52 } .ib-5 { background-color: #150032 } .ib-6 { background-color: #0c001c } .xs-testimonial-section { background-color: var(--color-theme-purple); background-image: url(/images/testimonial-bg.png); background-position: 50%; background-repeat: no-repeat; background-size: cover; padding-block:calc(var(--spacing)*12)} @media (width>=48rem) { .xs-testimonial-section { background-image: none; padding-inline:calc(var(--spacing)*4)} } .xs-testimonial-section .title { --tw-leading: 1.4; --tw-font-weight: var(--font-weight-black); color: var(--color-white); font-size: 30px; font-weight: var(--font-weight-black); line-height: 1.4; padding-left: calc(var(--spacing)*6); text-transform: uppercase } @media (width>=48rem) { .xs-testimonial-section .title { display: none } } .xs-testimonial-section .slide-card { --tw-leading: 1.4; background-color: var(--color-white); border-radius: var(--radius-3xl); display: flex; flex-direction: column; font-family: var(--font-helvetica); line-height: 1.4; padding: calc(var(--spacing)*6) } @media (width>=48rem) { .xs-testimonial-section .slide-card { padding: calc(var(--spacing)*10) } } .xs-testimonial-section .slide-card>div { -webkit-line-clamp: 10; -webkit-box-orient: vertical; display: -webkit-box; font-size: 20px; overflow: hidden } @media (width>=48rem) { .xs-testimonial-section .slide-card>div { font-size: 17px } } @media (width>=64rem) { .xs-testimonial-section .slide-card>div { font-size: 20px } } @media (width>=80rem) { .xs-testimonial-section .slide-card>div { font-size: 34px } } .xs-testimonial-section .slide-card .author { height: 72px; margin-top: auto } .xs-testimonial-section .slide-card h2 { --tw-leading: calc(var(--spacing)*1.5); --tw-font-weight: var(--font-weight-black); font-family: var(--font-primary); font-weight: var(--font-weight-black); line-height: calc(var(--spacing)*1.5); margin-bottom: calc(var(--spacing)*0); margin-top: calc(var(--spacing)*8) } .xs-testimonial-section .slide-card small { display: block; font-size: 14px; margin-top: calc(var(--spacing)*4); padding-bottom: calc(var(--spacing)*1) } #movingText1,#movingText2 { --tw-font-weight: var(--font-weight-black); --tw-tracking: var(--tracking-normal); color: var(--color-black); font-size: 100px; font-weight: var(--font-weight-black); letter-spacing: var(--tracking-normal); text-transform: uppercase } .cross-lines:after { background-color: var(--color-white); bottom: calc(var(--spacing)*0); content: " "; height: 60%; position: absolute; width: 100%; z-index: 0 } .variable-items-wrapper { align-items: center; display: flex; flex-wrap: wrap; gap: calc(var(--spacing)*2) } .variable-items-wrapper li { --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a); --tw-shadow-color: oklab(20.9226% .0172768 -.0855348/.25); background-color: var(--color-white); border: var(--product-secondary-color); border-radius: 10px; border-style: var(--tw-border-style)!important; border-width: 0!important; box-shadow: var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow); cursor: pointer; font-family: var(--font-helvetica); font-size: 12px; padding-block:calc(var(--spacing)*1);padding-inline: calc(var(--spacing)*12) } @media (width>=48rem) { .variable-items-wrapper li { font-size: 18px } } @media (width>=64rem) { .variable-items-wrapper li { padding-block: calc(var(--spacing)*2.5) } } .variable-items-wrapper li.selected { background-color: var(--color-black); color: var(--color-white) } .button-variable-items-wrapper { display: flex; gap: calc(var(--spacing)*4); justify-content: center; width: 100% } .button-variable-items-wrapper li { border-radius: 10px; border-style: var(--tw-border-style); border-width: 1px; list-style-type: none; padding-block:calc(var(--spacing)*4);padding-inline: calc(var(--spacing)*8); text-align: center } .button-variable-items-wrapper li .variable-item-contents { line-height: 1 } .variations { width: 100% } .variations td,.variations tr { display: block } a { text-decoration-line: none } #page .container { max-width: 1200px } .product_title { --tw-font-weight: var(--font-weight-black); --tw-tracking: var(--tracking-wide); font-family: var(--font-primary); font-size: 30px!important; font-weight: var(--font-weight-black); letter-spacing: var(--tracking-wide) } @media (width>=48rem) { .product_title { font-size: 40px!important } } input[type=email],input[type=text],textarea { border-color: var(--color-gray-300); border-radius: .25rem; border-style: var(--tw-border-style); border-width: 1px; display: block; padding-block:calc(var(--spacing)*2.5);padding-inline: calc(var(--spacing)*4) } :is(input[type=text],input[type=email],textarea):focus { border-color: var(--color-theme-purple); outline-style: var(--tw-outline-style); outline-width: 0 } .post-container { --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color,#00000040); --tw-shadow-color: var(--color-gray-200); background-color: var(--color-white); border-radius: var(--radius-2xl); box-shadow: var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow); font-family: var(--font-helvetica); overflow: hidden } .post-container p { margin-bottom: calc(var(--spacing)*0) } .post-container img { aspect-ratio: 1; height: auto!important; -o-object-fit: cover; object-fit: cover; width: 100% } .wp-pagenavi { display: flex; gap: calc(var(--spacing)*2); justify-content: center; margin-top: calc(var(--spacing)*8) } .wp-pagenavi a,.wp-pagenavi span { background-color: var(--color-white); border-color: var(--color-white); border-radius: var(--radius-lg); border-style: var(--tw-border-style); border-width: 1px; color: var(--color-black); display: inline-block; padding-block:calc(var(--spacing)*2);padding-inline: calc(var(--spacing)*4); transition-duration: var(--tw-duration,var(--default-transition-duration)); transition-property: all; transition-timing-function: var(--tw-ease,var(--default-transition-timing-function)) } .wp-pagenavi a:hover,.wp-pagenavi span.current { border-color: var(--color-theme-purple) } .wp-pagenavi span.current { background-color: var(--color-theme-purple); color: var(--color-white) } h2.jdgm-rev-widg__title { --tw-font-weight: var(--font-weight-bold)!important; font-family: var(--font-primary); font-size: 2rem; font-weight: var(--font-weight-bold)!important; margin-bottom: calc(var(--spacing)*16) } @media (width>=40rem) { h2.jdgm-rev-widg__title { font-size: 3rem } } @media (width>=48rem) { h2.jdgm-rev-widg__title { font-size: 4rem } } .product-description { color: var(--color-white); font-size: var(--text-xl); line-height: var(--tw-leading,var(--text-xl--line-height)); padding-bottom: calc(var(--spacing)*12) } .product-description p { margin-bottom: calc(var(--spacing)*8) } .footer-links { display: flex; gap: calc(var(--spacing)*4); margin-top: calc(var(--spacing)*8) } .footer-links a { color: var(--color-white); display: block; font-family: var(--font-helvetica); font-size: 14px; padding-block:calc(var(--spacing)*2)} @media (hover: hover) { .footer-links a:hover { text-decoration-line:underline } } .footer-accordion h3 { --tw-font-weight: var(--font-weight-bold); align-items: center; color: var(--color-white); cursor: pointer; display: flex; font-family: var(--font-helvetica); font-size: var(--text-lg); font-weight: var(--font-weight-bold); justify-content: space-between; line-height: var(--tw-leading,var(--text-lg--line-height)); margin-bottom: calc(var(--spacing)*3); padding-top: calc(var(--spacing)*3); text-transform: uppercase } @media (width>=48rem) { .footer-accordion h3 { font-size: var(--text-xl); line-height: var(--tw-leading,var(--text-xl--line-height)); margin-bottom: calc(var(--spacing)*6); padding-top: calc(var(--spacing)*6) } } .footer-accordion ul { padding-bottom: calc(var(--spacing)*8) } .footer-accordion a { color: var(--color-white); display: block; font-family: var(--font-helvetica); padding-block:calc(var(--spacing)*2)} .slick-arrow { padding-inline: calc(var(--spacing)*3) } .wpgs-nav .slick-slide { margin-left: calc(var(--spacing)*0)!important } #check_pincode,#shiprocket_pincode_check { display: none } .variations_form { margin-top: calc(var(--spacing)*4) } .header-menu { --tw-font-weight: var(--font-weight-bold); display: none; font-weight: var(--font-weight-bold) } @media (hover: hover) { .header-menu:hover { color:var(--color-white) } } @media (width>=48rem) { .header-menu { display: flex } } .header-menu li a { border-radius: 3.40282e+38px; font-size: var(--text-2xl); line-height: var(--tw-leading,var(--text-2xl--line-height)); padding-block:calc(var(--spacing)*2);padding-inline: calc(var(--spacing)*8); transition-duration: var(--tw-duration,var(--default-transition-duration)); transition-property: all; transition-timing-function: var(--tw-ease,var(--default-transition-timing-function)) } @media (hover: hover) { .header-menu li a:hover { background-color:#a246ff } } .side-menu a { --tw-font-weight: var(--font-weight-bold); color: var(--color-white); display: block; font-size: var(--text-4xl); font-weight: var(--font-weight-bold); line-height: var(--tw-leading,var(--text-4xl--line-height)); padding-block:calc(var(--spacing)*2);padding-inline: calc(var(--spacing)*4); text-align: center } #side-menu.active { --tw-translate-x: calc(var(--spacing)*0); opacity: 1; translate: var(--tw-translate-x)var(--tw-translate-y) } #buy-now-btn { bottom: calc(var(--spacing)*10); display: flex; justify-content: center; left: 50%; margin-left: -150px; opacity: 0; position: fixed; right: auto; width: 300px; z-index: 300 } .posted_in,.product_meta,.reset_variations,.wc-block-checkout__shipping-option,p.price { display: none } #btn-razorpay,#btn-razorpay-cancel { border-radius: .25rem; border-style: var(--tw-border-style); border-width: 1px; cursor: pointer; display: inline-block; margin-right: calc(var(--spacing)*2); padding-block:calc(var(--spacing)*2);padding-inline: calc(var(--spacing)*4); transition-duration: var(--tw-duration,var(--default-transition-duration)); transition-property: all; transition-timing-function: var(--tw-ease,var(--default-transition-timing-function)) } @media (hover: hover) { :is(#btn-razorpay,#btn-razorpay-cancel):hover { background-color:var(--color-theme-purple) } } #btn-razorpay { color: var(--color-theme-purple) } @media (hover: hover) { #btn-razorpay:hover { color:var(--color-white) } } @keyframes spin { to { transform: rotate(1turn) } } @keyframes ping { 75%,to { opacity: 0; transform: scale(2) } } @keyframes pulse { 50% { opacity: .5 } } @keyframes bounce { 0%,to { animation-timing-function: cubic-bezier(.8,0,1,1); transform: translateY(-25%) } 50% { animation-timing-function: cubic-bezier(0,0,.2,1); transform: none } } @property --tw-translate-x { syntax: "*"; inherits: false; initial-value: 0 } @property --tw-translate-y { syntax: "*"; inherits: false; initial-value: 0 } @property --tw-translate-z { syntax: "*"; inherits: false; initial-value: 0 } @property --tw-rotate-x { syntax: "*"; inherits: false; initial-value: rotateX(0) } @property --tw-rotate-y { syntax: "*"; inherits: false; initial-value: rotateY(0) } @property --tw-rotate-z { syntax: "*"; inherits: false; initial-value: rotateZ(0) } @property --tw-skew-x { syntax: "*"; inherits: false; initial-value: skewX(0) } @property --tw-skew-y { syntax: "*"; inherits: false; initial-value: skewY(0) } @property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid } @property --tw-leading { syntax: "*"; inherits: false } @property --tw-font-weight { syntax: "*"; inherits: false } @property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000 } @property --tw-shadow-color { syntax: "*"; inherits: false } @property --tw-inset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000 } @property --tw-inset-shadow-color { syntax: "*"; inherits: false } @property --tw-ring-color { syntax: "*"; inherits: false } @property --tw-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000 } @property --tw-inset-ring-color { syntax: "*"; inherits: false } @property --tw-inset-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000 } @property --tw-ring-inset { syntax: "*"; inherits: false } @property --tw-ring-offset-width { syntax: ""; inherits: false; initial-value: 0 } @property --tw-ring-offset-color { syntax: "*"; inherits: false; initial-value: #fff } @property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000 } @property --tw-blur { syntax: "*"; inherits: false } @property --tw-brightness { syntax: "*"; inherits: false } @property --tw-contrast { syntax: "*"; inherits: false } @property --tw-grayscale { syntax: "*"; inherits: false } @property --tw-hue-rotate { syntax: "*"; inherits: false } @property --tw-invert { syntax: "*"; inherits: false } @property --tw-opacity { syntax: "*"; inherits: false } @property --tw-saturate { syntax: "*"; inherits: false } @property --tw-sepia { syntax: "*"; inherits: false } @property --tw-duration { syntax: "*"; inherits: false } @property --tw-ease { syntax: "*"; inherits: false } @property --tw-tracking { syntax: "*"; inherits: false } @property --tw-outline-style { syntax: "*"; inherits: false; initial-value: solid } /*! tailwindcss v4.0.6 | MIT License | https://tailwindcss.com */ @layer theme { :host,:root { --font-sans: ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; --font-serif: ui-serif,Georgia,Cambria,"Times New Roman",Times,serif; --font-mono: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; --color-red-50: oklch(.971 .013 17.38); --color-red-100: oklch(.936 .032 17.717); --color-red-200: oklch(.885 .062 18.334); --color-red-300: oklch(.808 .114 19.571); --color-red-400: oklch(.704 .191 22.216); --color-red-500: oklch(.637 .237 25.331); --color-red-600: oklch(.577 .245 27.325); --color-red-700: oklch(.505 .213 27.518); --color-red-800: oklch(.444 .177 26.899); --color-red-900: oklch(.396 .141 25.723); --color-red-950: oklch(.258 .092 26.042); --color-orange-50: oklch(.98 .016 73.684); --color-orange-100: oklch(.954 .038 75.164); --color-orange-200: oklch(.901 .076 70.697); --color-orange-300: oklch(.837 .128 66.29); --color-orange-400: oklch(.75 .183 55.934); --color-orange-500: oklch(.705 .213 47.604); --color-orange-600: oklch(.646 .222 41.116); --color-orange-700: oklch(.553 .195 38.402); --color-orange-800: oklch(.47 .157 37.304); --color-orange-900: oklch(.408 .123 38.172); --color-orange-950: oklch(.266 .079 36.259); --color-amber-50: oklch(.987 .022 95.277); --color-amber-100: oklch(.962 .059 95.617); --color-amber-200: oklch(.924 .12 95.746); --color-amber-300: oklch(.879 .169 91.605); --color-amber-400: oklch(.828 .189 84.429); --color-amber-500: oklch(.769 .188 70.08); --color-amber-600: oklch(.666 .179 58.318); --color-amber-700: oklch(.555 .163 48.998); --color-amber-800: oklch(.473 .137 46.201); --color-amber-900: oklch(.414 .112 45.904); --color-amber-950: oklch(.279 .077 45.635); --color-yellow-50: oklch(.987 .026 102.212); --color-yellow-100: oklch(.973 .071 103.193); --color-yellow-200: oklch(.945 .129 101.54); --color-yellow-300: oklch(.905 .182 98.111); --color-yellow-400: oklch(.852 .199 91.936); --color-yellow-500: oklch(.795 .184 86.047); --color-yellow-600: oklch(.681 .162 75.834); --color-yellow-700: oklch(.554 .135 66.442); --color-yellow-800: oklch(.476 .114 61.907); --color-yellow-900: oklch(.421 .095 57.708); --color-yellow-950: oklch(.286 .066 53.813); --color-lime-50: oklch(.986 .031 120.757); --color-lime-100: oklch(.967 .067 122.328); --color-lime-200: oklch(.938 .127 124.321); --color-lime-300: oklch(.897 .196 126.665); --color-lime-400: oklch(.841 .238 128.85); --color-lime-500: oklch(.768 .233 130.85); --color-lime-600: oklch(.648 .2 131.684); --color-lime-700: oklch(.532 .157 131.589); --color-lime-800: oklch(.453 .124 130.933); --color-lime-900: oklch(.405 .101 131.063); --color-lime-950: oklch(.274 .072 132.109); --color-green-50: oklch(.982 .018 155.826); --color-green-100: oklch(.962 .044 156.743); --color-green-200: oklch(.925 .084 155.995); --color-green-300: oklch(.871 .15 154.449); --color-green-400: oklch(.792 .209 151.711); --color-green-500: oklch(.723 .219 149.579); --color-green-600: oklch(.627 .194 149.214); --color-green-700: oklch(.527 .154 150.069); --color-green-800: oklch(.448 .119 151.328); --color-green-900: oklch(.393 .095 152.535); --color-green-950: oklch(.266 .065 152.934); --color-emerald-50: oklch(.979 .021 166.113); --color-emerald-100: oklch(.95 .052 163.051); --color-emerald-200: oklch(.905 .093 164.15); --color-emerald-300: oklch(.845 .143 164.978); --color-emerald-400: oklch(.765 .177 163.223); --color-emerald-500: oklch(.696 .17 162.48); --color-emerald-600: oklch(.596 .145 163.225); --color-emerald-700: oklch(.508 .118 165.612); --color-emerald-800: oklch(.432 .095 166.913); --color-emerald-900: oklch(.378 .077 168.94); --color-emerald-950: oklch(.262 .051 172.552); --color-teal-50: oklch(.984 .014 180.72); --color-teal-100: oklch(.953 .051 180.801); --color-teal-200: oklch(.91 .096 180.426); --color-teal-300: oklch(.855 .138 181.071); --color-teal-400: oklch(.777 .152 181.912); --color-teal-500: oklch(.704 .14 182.503); --color-teal-600: oklch(.6 .118 184.704); --color-teal-700: oklch(.511 .096 186.391); --color-teal-800: oklch(.437 .078 188.216); --color-teal-900: oklch(.386 .063 188.416); --color-teal-950: oklch(.277 .046 192.524); --color-cyan-50: oklch(.984 .019 200.873); --color-cyan-100: oklch(.956 .045 203.388); --color-cyan-200: oklch(.917 .08 205.041); --color-cyan-300: oklch(.865 .127 207.078); --color-cyan-400: oklch(.789 .154 211.53); --color-cyan-500: oklch(.715 .143 215.221); --color-cyan-600: oklch(.609 .126 221.723); --color-cyan-700: oklch(.52 .105 223.128); --color-cyan-800: oklch(.45 .085 224.283); --color-cyan-900: oklch(.398 .07 227.392); --color-cyan-950: oklch(.302 .056 229.695); --color-sky-50: oklch(.977 .013 236.62); --color-sky-100: oklch(.951 .026 236.824); --color-sky-200: oklch(.901 .058 230.902); --color-sky-300: oklch(.828 .111 230.318); --color-sky-400: oklch(.746 .16 232.661); --color-sky-500: oklch(.685 .169 237.323); --color-sky-600: oklch(.588 .158 241.966); --color-sky-700: oklch(.5 .134 242.749); --color-sky-800: oklch(.443 .11 240.79); --color-sky-900: oklch(.391 .09 240.876); --color-sky-950: oklch(.293 .066 243.157); --color-blue-50: oklch(.97 .014 254.604); --color-blue-100: oklch(.932 .032 255.585); --color-blue-200: oklch(.882 .059 254.128); --color-blue-300: oklch(.809 .105 251.813); --color-blue-400: oklch(.707 .165 254.624); --color-blue-500: oklch(.623 .214 259.815); --color-blue-600: oklch(.546 .245 262.881); --color-blue-700: oklch(.488 .243 264.376); --color-blue-800: oklch(.424 .199 265.638); --color-blue-900: oklch(.379 .146 265.522); --color-blue-950: oklch(.282 .091 267.935); --color-indigo-50: oklch(.962 .018 272.314); --color-indigo-100: oklch(.93 .034 272.788); --color-indigo-200: oklch(.87 .065 274.039); --color-indigo-300: oklch(.785 .115 274.713); --color-indigo-400: oklch(.673 .182 276.935); --color-indigo-500: oklch(.585 .233 277.117); --color-indigo-600: oklch(.511 .262 276.966); --color-indigo-700: oklch(.457 .24 277.023); --color-indigo-800: oklch(.398 .195 277.366); --color-indigo-900: oklch(.359 .144 278.697); --color-indigo-950: oklch(.257 .09 281.288); --color-violet-50: oklch(.969 .016 293.756); --color-violet-100: oklch(.943 .029 294.588); --color-violet-200: oklch(.894 .057 293.283); --color-violet-300: oklch(.811 .111 293.571); --color-violet-400: oklch(.702 .183 293.541); --color-violet-500: oklch(.606 .25 292.717); --color-violet-600: oklch(.541 .281 293.009); --color-violet-700: oklch(.491 .27 292.581); --color-violet-800: oklch(.432 .232 292.759); --color-violet-900: oklch(.38 .189 293.745); --color-violet-950: oklch(.283 .141 291.089); --color-purple-50: oklch(.977 .014 308.299); --color-purple-100: oklch(.946 .033 307.174); --color-purple-200: oklch(.902 .063 306.703); --color-purple-300: oklch(.827 .119 306.383); --color-purple-400: oklch(.714 .203 305.504); --color-purple-500: oklch(.627 .265 303.9); --color-purple-600: oklch(.558 .288 302.321); --color-purple-700: oklch(.496 .265 301.924); --color-purple-800: oklch(.438 .218 303.724); --color-purple-900: oklch(.381 .176 304.987); --color-purple-950: oklch(.291 .149 302.717); --color-fuchsia-50: oklch(.977 .017 320.058); --color-fuchsia-100: oklch(.952 .037 318.852); --color-fuchsia-200: oklch(.903 .076 319.62); --color-fuchsia-300: oklch(.833 .145 321.434); --color-fuchsia-400: oklch(.74 .238 322.16); --color-fuchsia-500: oklch(.667 .295 322.15); --color-fuchsia-600: oklch(.591 .293 322.896); --color-fuchsia-700: oklch(.518 .253 323.949); --color-fuchsia-800: oklch(.452 .211 324.591); --color-fuchsia-900: oklch(.401 .17 325.612); --color-fuchsia-950: oklch(.293 .136 325.661); --color-pink-50: oklch(.971 .014 343.198); --color-pink-100: oklch(.948 .028 342.258); --color-pink-200: oklch(.899 .061 343.231); --color-pink-300: oklch(.823 .12 346.018); --color-pink-400: oklch(.718 .202 349.761); --color-pink-500: oklch(.656 .241 354.308); --color-pink-600: oklch(.592 .249 .584); --color-pink-700: oklch(.525 .223 3.958); --color-pink-800: oklch(.459 .187 3.815); --color-pink-900: oklch(.408 .153 2.432); --color-pink-950: oklch(.284 .109 3.907); --color-rose-50: oklch(.969 .015 12.422); --color-rose-100: oklch(.941 .03 12.58); --color-rose-200: oklch(.892 .058 10.001); --color-rose-300: oklch(.81 .117 11.638); --color-rose-400: oklch(.712 .194 13.428); --color-rose-500: oklch(.645 .246 16.439); --color-rose-600: oklch(.586 .253 17.585); --color-rose-700: oklch(.514 .222 16.935); --color-rose-800: oklch(.455 .188 13.697); --color-rose-900: oklch(.41 .159 10.272); --color-rose-950: oklch(.271 .105 12.094); --color-slate-50: oklch(.984 .003 247.858); --color-slate-100: oklch(.968 .007 247.896); --color-slate-200: oklch(.929 .013 255.508); --color-slate-300: oklch(.869 .022 252.894); --color-slate-400: oklch(.704 .04 256.788); --color-slate-500: oklch(.554 .046 257.417); --color-slate-600: oklch(.446 .043 257.281); --color-slate-700: oklch(.372 .044 257.287); --color-slate-800: oklch(.279 .041 260.031); --color-slate-900: oklch(.208 .042 265.755); --color-slate-950: oklch(.129 .042 264.695); --color-gray-50: oklch(.985 .002 247.839); --color-gray-100: oklch(.967 .003 264.542); --color-gray-200: oklch(.928 .006 264.531); --color-gray-300: oklch(.872 .01 258.338); --color-gray-400: oklch(.707 .022 261.325); --color-gray-500: oklch(.551 .027 264.364); --color-gray-600: oklch(.446 .03 256.802); --color-gray-700: oklch(.373 .034 259.733); --color-gray-800: oklch(.278 .033 256.848); --color-gray-900: oklch(.21 .034 264.665); --color-gray-950: oklch(.13 .028 261.692); --color-zinc-50: oklch(.985 0 0); --color-zinc-100: oklch(.967 .001 286.375); --color-zinc-200: oklch(.92 .004 286.32); --color-zinc-300: oklch(.871 .006 286.286); --color-zinc-400: oklch(.705 .015 286.067); --color-zinc-500: oklch(.552 .016 285.938); --color-zinc-600: oklch(.442 .017 285.786); --color-zinc-700: oklch(.37 .013 285.805); --color-zinc-800: oklch(.274 .006 286.033); --color-zinc-900: oklch(.21 .006 285.885); --color-zinc-950: oklch(.141 .005 285.823); --color-neutral-50: oklch(.985 0 0); --color-neutral-100: oklch(.97 0 0); --color-neutral-200: oklch(.922 0 0); --color-neutral-300: oklch(.87 0 0); --color-neutral-400: oklch(.708 0 0); --color-neutral-500: oklch(.556 0 0); --color-neutral-600: oklch(.439 0 0); --color-neutral-700: oklch(.371 0 0); --color-neutral-800: oklch(.269 0 0); --color-neutral-900: oklch(.205 0 0); --color-neutral-950: oklch(.145 0 0); --color-stone-50: oklch(.985 .001 106.423); --color-stone-100: oklch(.97 .001 106.424); --color-stone-200: oklch(.923 .003 48.717); --color-stone-300: oklch(.869 .005 56.366); --color-stone-400: oklch(.709 .01 56.259); --color-stone-500: oklch(.553 .013 58.071); --color-stone-600: oklch(.444 .011 73.639); --color-stone-700: oklch(.374 .01 67.558); --color-stone-800: oklch(.268 .007 34.298); --color-stone-900: oklch(.216 .006 56.043); --color-stone-950: oklch(.147 .004 49.25); --color-black: #000; --color-white: #fff; --spacing: .25rem; --breakpoint-sm: 40rem; --breakpoint-md: 48rem; --breakpoint-lg: 64rem; --breakpoint-xl: 80rem; --breakpoint-2xl: 96rem; --container-3xs: 16rem; --container-2xs: 18rem; --container-xs: 20rem; --container-sm: 24rem; --container-md: 28rem; --container-lg: 32rem; --container-xl: 36rem; --container-2xl: 42rem; --container-3xl: 48rem; --container-4xl: 56rem; --container-5xl: 64rem; --container-6xl: 72rem; --container-7xl: 80rem; --text-xs: .75rem; --text-xs--line-height: 1.33333; --text-sm: .875rem; --text-sm--line-height: 1.42857; --text-base: 1rem; --text-base--line-height: 1.5; --text-lg: 1.125rem; --text-lg--line-height: 1.55556; --text-xl: 1.25rem; --text-xl--line-height: 1.4; --text-2xl: 1.5rem; --text-2xl--line-height: 1.33333; --text-3xl: 1.875rem; --text-3xl--line-height: 1.2; --text-4xl: 2.25rem; --text-4xl--line-height: 1.11111; --text-5xl: 3rem; --text-5xl--line-height: 1; --text-6xl: 3.75rem; --text-6xl--line-height: 1; --text-7xl: 4.5rem; --text-7xl--line-height: 1; --text-8xl: 6rem; --text-8xl--line-height: 1; --text-9xl: 8rem; --text-9xl--line-height: 1; --font-weight-thin: 100; --font-weight-extralight: 200; --font-weight-light: 300; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; --font-weight-black: 900; --tracking-tighter: -.05em; --tracking-tight: -.025em; --tracking-normal: 0em; --tracking-wide: .025em; --tracking-wider: .05em; --tracking-widest: .1em; --leading-tight: 1.25; --leading-snug: 1.375; --leading-normal: 1.5; --leading-relaxed: 1.625; --leading-loose: 2; --radius-xs: .125rem; --radius-sm: .25rem; --radius-md: .375rem; --radius-lg: .5rem; --radius-xl: .75rem; --radius-2xl: 1rem; --radius-3xl: 1.5rem; --radius-4xl: 2rem; --shadow-2xs: 0 1px #0000000d; --shadow-xs: 0 1px 2px 0 #0000000d; --shadow-sm: 0 1px 3px 0 #0000001a,0 1px 2px -1px #0000001a; --shadow-md: 0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a; --shadow-lg: 0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a; --shadow-xl: 0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a; --shadow-2xl: 0 25px 50px -12px #00000040; --inset-shadow-2xs: inset 0 1px #0000000d; --inset-shadow-xs: inset 0 1px 1px #0000000d; --inset-shadow-sm: inset 0 2px 4px #0000000d; --drop-shadow-xs: 0 1px 1px #0000000d; --drop-shadow-sm: 0 1px 2px #00000026; --drop-shadow-md: 0 3px 3px #0000001f; --drop-shadow-lg: 0 4px 4px #00000026; --drop-shadow-xl: 0 9px 7px #0000001a; --drop-shadow-2xl: 0 25px 25px #00000026; --ease-in: cubic-bezier(.4,0,1,1); --ease-out: cubic-bezier(0,0,.2,1); --ease-in-out: cubic-bezier(.4,0,.2,1); --animate-spin: spin 1s linear infinite; --animate-ping: ping 1s cubic-bezier(0,0,.2,1)infinite; --animate-pulse: pulse 2s cubic-bezier(.4,0,.6,1)infinite; --animate-bounce: bounce 1s infinite; --blur-xs: 4px; --blur-sm: 8px; --blur-md: 12px; --blur-lg: 16px; --blur-xl: 24px; --blur-2xl: 40px; --blur-3xl: 64px; --perspective-dramatic: 100px; --perspective-near: 300px; --perspective-normal: 500px; --perspective-midrange: 800px; --perspective-distant: 1200px; --aspect-video: 16/9; --default-transition-duration: .15s; --default-transition-timing-function: cubic-bezier(.4,0,.2,1); --default-font-family: var(--font-sans); --default-font-feature-settings: var(--font-sans--font-feature-settings); --default-font-variation-settings: var(--font-sans--font-variation-settings); --default-mono-font-family: var(--font-mono); --default-mono-font-feature-settings: var(--font-mono--font-feature-settings); --default-mono-font-variation-settings: var(--font-mono--font-variation-settings) } } @layer base { *,::backdrop,:after,:before { border: 0 solid; box-sizing: border-box; margin: 0; padding: 0 } ::file-selector-button { border: 0 solid; box-sizing: border-box; margin: 0; padding: 0 } :host,html { -webkit-text-size-adjust: 100%; font-feature-settings: var(--default-font-feature-settings,normal); -webkit-tap-highlight-color: transparent; font-family: var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"); font-variation-settings: var(--default-font-variation-settings,normal); line-height: 1.5; -moz-tab-size: 4; -o-tab-size: 4; tab-size: 4 } body { line-height: inherit } hr { border-top-width: 1px; color: inherit; height: 0 } abbr: where([title]) { -webkit-text-decoration:underline dotted; text-decoration: underline dotted } h1,h2,h3,h4,h5,h6 { font-size: inherit; font-weight: inherit } a { color: inherit; -webkit-text-decoration: inherit; text-decoration: inherit } b,strong { font-weight: bolder } code,kbd,pre,samp { font-feature-settings: var(--default-mono-font-feature-settings,normal); font-family: var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace); font-size: 1em; font-variation-settings: var(--default-mono-font-variation-settings,normal) } small { font-size: 80% } sub,sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline } sub { bottom: -.25em } sup { top: -.5em } table { border-collapse: collapse; border-color: inherit; text-indent: 0 } :-moz-focusring { outline: auto } progress { vertical-align: baseline } summary { display: list-item } menu,ol,ul { list-style: none } audio,canvas,embed,iframe,img,object,svg,video { display: block; vertical-align: middle } img,video { height: auto; max-width: 100% } button,input,optgroup,select,textarea { font-feature-settings: inherit; background-color: #0000; border-radius: 0; color: inherit; font: inherit; font-variation-settings: inherit; letter-spacing: inherit; opacity: 1 } ::file-selector-button { font-feature-settings: inherit; background-color: #0000; border-radius: 0; color: inherit; font: inherit; font-variation-settings: inherit; letter-spacing: inherit; opacity: 1 } :where(select: is([multiple],[size])) optgroup { font-weight:bolder } :where(select: is([multiple],[size])) optgroup option { padding-inline-start:20px } ::file-selector-button { margin-inline-end:4px} ::-moz-placeholder { color: color-mix(in oklab,currentColor 50%,transparent); opacity: 1 } ::placeholder { color: color-mix(in oklab,currentColor 50%,transparent); opacity: 1 } textarea { resize: vertical } ::-webkit-search-decoration { -webkit-appearance: none } ::-webkit-date-and-time-value { min-height: 1lh; text-align: inherit } ::-webkit-datetime-edit { display: inline-flex } ::-webkit-datetime-edit-fields-wrapper { padding: 0 } ::-webkit-datetime-edit,::-webkit-datetime-edit-year-field { padding-block:0} ::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-month-field { padding-block:0} ::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field { padding-block:0} ::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-second-field { padding-block:0} ::-webkit-datetime-edit-meridiem-field { padding-block:0} :-moz-ui-invalid { box-shadow: none } button,input: where([type=button],[type=reset],[type=submit]) { -webkit-appearance:button; -moz-appearance: button; appearance: button } ::file-selector-button { -webkit-appearance: button; -moz-appearance: button; appearance: button } ::-webkit-inner-spin-button,::-webkit-outer-spin-button { height: auto } [hidden]: where(:not([hidden=until-found])) { display:none!important } *,::backdrop,:after,:before { border-color: var(--color-gray-200,currentColor) } ::file-selector-button { border-color: var(--color-gray-200,currentColor) } } @layer components;@layer utilities { .absolute { position: absolute } .fixed { position: fixed } .relative { position: relative } .-top-2 { top: calc(var(--spacing)*-2) } .-top-\[50px\] { top: -50px } .top-0 { top: calc(var(--spacing)*0) } .top-2 { top: calc(var(--spacing)*2) } .top-4 { top: calc(var(--spacing)*4) } .top-\[10px\] { top: 10px } .-right-2 { right: calc(var(--spacing)*-2) } .right-0 { right: calc(var(--spacing)*0) } .right-2 { right: calc(var(--spacing)*2) } .right-4 { right: calc(var(--spacing)*4) } .bottom-0 { bottom: calc(var(--spacing)*0) } .left-0 { left: calc(var(--spacing)*0) } .z-0 { z-index: 0 } .z-10 { z-index: 10 } .z-20 { z-index: 20 } .z-50 { z-index: 50 } .z-100 { z-index: 100 } .z-\[20\] { z-index: 20 } .z-\[10000\] { z-index: 10000 } .z-\[10\] { z-index: 10 } .z-\[30\] { z-index: 30 } .container { width: 100% } @media (width>=40rem) { .container { max-width: 40rem } } @media (width>=48rem) { .container { max-width: 48rem } } @media (width>=64rem) { .container { max-width: 64rem } } @media (width>=80rem) { .container { max-width: 80rem } } @media (width>=96rem) { .container { max-width: 96rem } } .alignfull { margin: 0 calc(50% - 50vw)!important; width: 100vw } .aligncenter { margin: .5rem auto!important } .m-8 { margin: calc(var(--spacing)*8) } .-mx-\[20px\] { margin-inline: -20px } .mx-8 { margin-inline:calc(var(--spacing)*8)} .mx-auto { margin-inline: auto } .my-3 { margin-block:calc(var(--spacing)*3)} .my-8 { margin-block: calc(var(--spacing)*8) } .my-16 { margin-block:calc(var(--spacing)*16)} .my-\[30px\] { margin-block: 30px } .-mt-8 { margin-top: calc(var(--spacing)*-8) } .-mt-12 { margin-top: calc(var(--spacing)*-12) } .mt-0 { margin-top: calc(var(--spacing)*0) } .mt-2 { margin-top: calc(var(--spacing)*2) } .mt-4 { margin-top: calc(var(--spacing)*4) } .mt-8 { margin-top: calc(var(--spacing)*8) } .mt-12 { margin-top: calc(var(--spacing)*12) } .mt-24 { margin-top: calc(var(--spacing)*24) } .mt-\[-2px\] { margin-top: -2px } .mt-\[-4rem\] { margin-top: -4rem } .alignnone { height: auto; margin-left: 0; margin-right: 0; max-width: 100% } .-mr-8 { margin-right: calc(var(--spacing)*-8) } .mr-4 { margin-right: calc(var(--spacing)*4) } .-mb-14 { margin-bottom: calc(var(--spacing)*-14) } .-mb-\[50px\] { margin-bottom: -50px } .mb-1 { margin-bottom: calc(var(--spacing)*1) } .mb-2 { margin-bottom: calc(var(--spacing)*2) } .mb-3 { margin-bottom: calc(var(--spacing)*3) } .mb-4 { margin-bottom: calc(var(--spacing)*4) } .mb-8 { margin-bottom: calc(var(--spacing)*8) } .mb-12 { margin-bottom: calc(var(--spacing)*12) } .mb-\[20px\] { margin-bottom: 20px } .block { display: block } .flex { display: flex } .grid { display: grid } .hidden { display: none } .inline-block { display: inline-block } .table { display: table } .aspect-square { aspect-ratio: 1 } .size-2 { height: calc(var(--spacing)*2); width: calc(var(--spacing)*2) } .h-1 { height: calc(var(--spacing)*1) } .h-\[32px\] { height: 32px } .h-\[60px\] { height: 60px } .h-auto { height: auto } .h-full { height: 100% } .h-screen { height: 100vh } .min-h-screen { min-height: 100vh } .w-1\/3 { width: 33.3333% } .w-2\/3 { width: 66.6667% } .w-16 { width: calc(var(--spacing)*16) } .w-\[100px\] { width: 100px } .w-\[150px\] { width: 150px } .w-\[200px\] { width: 200px } .w-\[220px\] { width: 220px } .w-\[300px\] { width: 300px } .w-\[360px\] { width: 360px } .w-\[800px\] { width: 800px } .w-auto { width: auto } .w-full { width: 100% } .w-screen { width: 100vw } .container { max-width: var(--wp--style--global--wide-size) } .max-w-\[600px\] { max-width: 600px } .max-w-\[800px\] { max-width: 800px } .max-w-\[900px\] { max-width: 900px } .max-w-\[1400px\] { max-width: 1400px } .max-w-sm { max-width: var(--container-sm) } .min-w-0 { min-width: calc(var(--spacing)*0) } .shrink-0 { flex-shrink: 0 } .grow { flex-grow: 1 } .-translate-x-\[100\%\] { --tw-translate-x: -100% } .-translate-x-\[100\%\],.translate-y-\[150\%\] { translate: var(--tw-translate-x)var(--tw-translate-y) } .translate-y-\[150\%\] { --tw-translate-y: 150% } .transform { transform: var(--tw-rotate-x)var(--tw-rotate-y)var(--tw-rotate-z)var(--tw-skew-x)var(--tw-skew-y) } .cursor-pointer { cursor: pointer } .resize { resize: both } .grid-cols-1 { grid-template-columns: repeat(1,minmax(0,1fr)) } .grid-cols-3 { grid-template-columns: repeat(3,minmax(0,1fr)) } .grid-cols-4 { grid-template-columns: repeat(4,minmax(0,1fr)) } .flex-col { flex-direction: column } .flex-row-reverse { flex-direction: row-reverse } .flex-wrap { flex-wrap: wrap } .items-center { align-items: center } .items-end { align-items: flex-end } .items-start { align-items: flex-start } .justify-between { justify-content: space-between } .justify-center { justify-content: center } .justify-end { justify-content: flex-end } .justify-start { justify-content: flex-start } .gap-1 { gap: calc(var(--spacing)*1) } .gap-2 { gap: calc(var(--spacing)*2) } .gap-4 { gap: calc(var(--spacing)*4) } .gap-8 { gap: calc(var(--spacing)*8) } .gap-12 { gap: calc(var(--spacing)*12) } .overflow-hidden { overflow: hidden } .rounded-3xl { border-radius: var(--radius-3xl) } .rounded-4xl { border-radius: var(--radius-4xl) } .rounded-full { border-radius: 3.40282e+38px } .rounded-lg { border-radius: var(--radius-lg) } .rounded-xs { border-radius: var(--radius-xs) } .border-2 { border-style: var(--tw-border-style); border-width: 2px } .border-t { border-top-style: var(--tw-border-style); border-top-width: 1px } .border-t-2 { border-top-style: var(--tw-border-style); border-top-width: 2px } .border-b { border-bottom-style: var(--tw-border-style); border-bottom-width: 1px } .border-white { border-color: var(--color-white) } .border-t-\[\#bf93ff\] { border-top-color: #bf93ff } .border-t-white { border-top-color: var(--color-white) } .border-b-\[\#bf93ff\] { border-bottom-color: #bf93ff } .bg-\[\#7f27ff\] { background-color: #7f27ff } .bg-black\/80 { background-color: color-mix(in oklab,var(--color-black)80%,transparent) } .bg-gray-200 { background-color: var(--color-gray-200) } .bg-red-500 { background-color: var(--color-red-500) } .bg-white { background-color: var(--color-white) } .bg-cover { background-size: cover } .object-contain { -o-object-fit: contain; object-fit: contain } .object-cover { -o-object-fit: cover; object-fit: cover } .object-fill { -o-object-fit: fill; object-fit: fill } .p-1 { padding: calc(var(--spacing)*1) } .p-2 { padding: calc(var(--spacing)*2) } .p-4 { padding: calc(var(--spacing)*4) } .p-8 { padding: calc(var(--spacing)*8) } .p-12 { padding: calc(var(--spacing)*12) } .px-3 { padding-inline:calc(var(--spacing)*3)} .px-4 { padding-inline: calc(var(--spacing)*4) } .px-6 { padding-inline:calc(var(--spacing)*6)} .px-8 { padding-inline: calc(var(--spacing)*8) } .px-\[1rem\] { padding-inline: 1rem } .py-2 { padding-block:calc(var(--spacing)*2)} .py-2\.5 { padding-block: calc(var(--spacing)*2.5) } .py-3 { padding-block:calc(var(--spacing)*3)} .py-4 { padding-block: calc(var(--spacing)*4) } .py-8 { padding-block:calc(var(--spacing)*8)} .py-10 { padding-block: calc(var(--spacing)*10) } .py-12 { padding-block:calc(var(--spacing)*12)} .pt-4 { padding-top: calc(var(--spacing)*4) } .pt-8 { padding-top: calc(var(--spacing)*8) } .pb-4 { padding-bottom: calc(var(--spacing)*4) } .pb-8 { padding-bottom: calc(var(--spacing)*8) } .text-center { text-align: center } .text-2xl { font-size: var(--text-2xl); line-height: var(--tw-leading,var(--text-2xl--line-height)) } .text-3xl { font-size: var(--text-3xl); line-height: var(--tw-leading,var(--text-3xl--line-height)) } .text-4xl { font-size: var(--text-4xl); line-height: var(--tw-leading,var(--text-4xl--line-height)) } .text-5xl { font-size: var(--text-5xl); line-height: var(--tw-leading,var(--text-5xl--line-height)) } .text-lg { font-size: var(--text-lg); line-height: var(--tw-leading,var(--text-lg--line-height)) } .text-sm { font-size: var(--text-sm); line-height: var(--tw-leading,var(--text-sm--line-height)) } .text-sm\! { font-size: var(--text-sm)!important; line-height: var(--tw-leading,var(--text-sm--line-height))!important } .text-xl { font-size: var(--text-xl); line-height: var(--tw-leading,var(--text-xl--line-height)) } .text-\[12px\] { font-size: 12px } .text-\[12px\]\! { font-size: 12px!important } .text-\[16px\] { font-size: 16px } .text-\[16px\]\! { font-size: 16px!important } .text-\[20px\] { font-size: 20px } .text-\[24px\]\! { font-size: 24px!important } .text-\[26px\] { font-size: 26px } .text-\[32px\]\! { font-size: 32px!important } .text-\[48px\] { font-size: 48px } .leading-\[1\.2\] { --tw-leading: 1.2; line-height: 1.2 } .leading-\[1\] { --tw-leading: 1; line-height: 1 } .leading-tight { --tw-leading: var(--leading-tight); line-height: var(--leading-tight) } .font-black { --tw-font-weight: var(--font-weight-black); font-weight: var(--font-weight-black) } .font-black\! { --tw-font-weight: var(--font-weight-black)!important; font-weight: var(--font-weight-black)!important } .font-bold { --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold) } .font-extrabold { --tw-font-weight: var(--font-weight-extrabold); font-weight: var(--font-weight-extrabold) } .font-light { --tw-font-weight: var(--font-weight-light); font-weight: var(--font-weight-light) } .text-nowrap { text-wrap: nowrap } .text-wrap { text-wrap: wrap } .text-black { color: var(--color-black) } .text-gray-800 { color: var(--color-gray-800) } .text-gray-900 { color: var(--color-gray-900) } .text-red-500 { color: var(--color-red-500) } .text-white { color: var(--color-white) } .lowercase { text-transform: lowercase } .uppercase { text-transform: uppercase } .no-underline { text-decoration-line: none } .underline\! { text-decoration-line: underline!important } .antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale } .opacity-0 { opacity: 0 } .opacity-30 { opacity: .3 } .shadow-lg { --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color,#0000001a),0 4px 6px -4px var(--tw-shadow-color,#0000001a); box-shadow: var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow) } .filter { filter: var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,) } .transition { transition-duration: var(--tw-duration,var(--default-transition-duration)); transition-property: color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter; transition-timing-function: var(--tw-ease,var(--default-transition-timing-function)) } .transition-all { transition-duration: var(--tw-duration,var(--default-transition-duration)); transition-property: all; transition-timing-function: var(--tw-ease,var(--default-transition-timing-function)) } @media (hover: hover) { .hover\:gap-5:hover { gap:calc(var(--spacing)*5) } .hover\:border-black:hover { border-color: var(--color-black) } .hover\:bg-black:hover { background-color: var(--color-black) } .hover\:text-white:hover { color: var(--color-white) } } @media (width>=48rem) { .md\: absolute { position:absolute } .md\:mx-0 { margin-inline:calc(var(--spacing)*0)} .md\: my-6 { margin-block:calc(var(--spacing)*6) } .md\:mt-8 { margin-top: calc(var(--spacing)*8) } .md\:-mb-4 { margin-bottom: calc(var(--spacing)*-4) } .md\:block { display: block } .md\:flex { display: flex } .md\:grid { display: grid } .md\:hidden { display: none } .md\:h-auto { height: auto } .md\:w-1\/2 { width: 50% } .md\:w-\[300px\] { width: 300px } .md\:min-w-\[150px\] { min-width: 150px } .md\:grid-cols-2 { grid-template-columns: repeat(2,minmax(0,1fr)) } .md\:flex-row { flex-direction: row } .md\:justify-start { justify-content: flex-start } .md\:gap-8 { gap: calc(var(--spacing)*8) } .md\:gap-16 { gap: calc(var(--spacing)*16) } .md\:border-none { --tw-border-style: none; border-style: none } .md\:py-16 { padding-block:calc(var(--spacing)*16)} .md\: text-3xl { font-size:var(--text-3xl); line-height: var(--tw-leading,var(--text-3xl--line-height)) } .md\:text-\[20px\] { font-size: 20px } .md\:text-\[24px\] { font-size: 24px } .md\:text-\[34px\] { font-size: 34px } .md\:text-\[120px\] { font-size: 120px } } @media (width>=64rem) { .lg\: my-\[54px\] { margin-block:54px } .lg\:mb-\[36px\] { margin-bottom: 36px } .lg\:block { display: block } .lg\:flex { display: flex } .lg\:hidden { display: none } .lg\:grid-cols-2 { grid-template-columns: repeat(2,minmax(0,1fr)) } .lg\:grid-cols-3 { grid-template-columns: repeat(3,minmax(0,1fr)) } .lg\:grid-cols-6 { grid-template-columns: repeat(6,minmax(0,1fr)) } .lg\:p-16 { padding: calc(var(--spacing)*16) } .lg\:pl-16 { padding-left: calc(var(--spacing)*16) } .lg\:text-5xl { font-size: var(--text-5xl); line-height: var(--tw-leading,var(--text-5xl--line-height)) } .lg\:text-\[16px\]\! { font-size: 16px!important } .lg\:text-\[20px\]\! { font-size: 20px!important } .lg\:text-\[24px\]\! { font-size: 24px!important } .lg\:text-\[60px\]\! { font-size: 60px!important } } .entry-content>*,article>: not(.entry-content) { margin-inline:auto } :is(.entry-content,.block-editor-block-list__layout) h1 { font-size: var(--text-2xl); line-height: var(--tw-leading,var(--text-2xl--line-height)) } :is(.entry-content,.block-editor-block-list__layout) h2 { font-size: var(--text-xl); line-height: var(--tw-leading,var(--text-xl--line-height)) } :is(.entry-content,.block-editor-block-list__layout) h3 { font-size: var(--text-lg); line-height: var(--tw-leading,var(--text-lg--line-height)) } :is(.entry-content,.block-editor-block-list__layout) ol,: is(.entry-content,.block-editor-block-list__layout) p,:is(.entry-content,.block-editor-block-list__layout) ul { margin-bottom:calc(var(--spacing)*8) } :is(:is(.entry-content,.block-editor-block-list__layout) p,: is(.entry-content,.block-editor-block-list__layout) ul,:is(.entry-content,.block-editor-block-list__layout) ol) a { color:var(--color-blue-500); text-decoration-line: underline } :is(:is(.entry-content,.block-editor-block-list__layout) p,: is(.entry-content,.block-editor-block-list__layout) ul,:is(.entry-content,.block-editor-block-list__layout) ol) a:hover { text-decoration-line:none } :is(.entry-content,.block-editor-block-list__layout) ul: not(.block-editor-block-variation-picker__variations) li { list-style-position:inside; list-style-type: disc } :is(.entry-content,.block-editor-block-list__layout) ol li { list-style-position: inside; list-style-type: decimal } } :root { --product-primary-color: #7f27ff } body { -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; text-size-adjust: 100% } .jdgm-prev-badge__stars .jdgm-star:before { color: #f8c429!important; font-size: 20px } @media (width>=64rem) { .jdgm-prev-badge__stars .jdgm-star: before { font-size:30px } } .jdgm-prev-badge__text { display: none } .jdgm-star:before { color: #f8c429 } .jdgm-histogram__bar { background-color: var(--color-white)!important; border-radius: 10px!important; overflow: hidden!important } .jdgm-write-rev-link { align-items: center; border: none!important; display: flex; justify-content: center; line-height: 1!important; padding: calc(var(--spacing)*4)!important; text-transform: uppercase } .jdgm-write-rev-link,.summary .single_add_to_cart_button { background-color: var(--product-primary-color)!important; border-radius: 10px!important; box-shadow: inset 1px 1px 1px #ffffff40,1px 4px 4px -1px #0000004d!important } .summary .single_add_to_cart_button { font-family: Helvetica,serif!important; padding: calc(var(--spacing)*5)!important } @media (width>=48rem) { .summary .single_add_to_cart_button { width: 70% } } .woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product p.price,.woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product span.price { font-size: 24px; font-weight: 700 } @media (width>=64rem) { : is(.woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product p.price,.woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product span.price) { font-size:40px } } .variations_form .quantity { align-items: center; background-color: var(--color-white); border-color: #ccc; border-radius: 10px; border-style: var(--tw-border-style); border-width: 1px; display: flex; justify-content: center; padding-block:calc(var(--spacing)*2);padding-inline: calc(var(--spacing)*12); width: calc(var(--spacing)*6) } .woocommerce form.variations_form .quantity input { font-size: 16px; outline-style: var(--tw-outline-style); outline-width: 0 } @media (width>=64rem) { .woocommerce form.variations_form .quantity input { font-size: 24px } } #primary { background-color: var(--product-secondary-color); display: none } .flavour-2 { padding: 0!important } .flavour-2 img { width: 60px!important } .flavour { background-color: var(--color-white); border-color: #0000; border-radius: var(--radius-xl); border-style: var(--tw-border-style); border-width: 2px; padding: calc(var(--spacing)*2) } .flavour.active { background: var(--product-darksecondary-color); border-color: var(--product-primary-color) } .flavour img { width: 60px } .br10 { border-radius: 10px } .slick-slide img,.slick-slide.slick-current img,.wpgs-nav div.slick-current { border-radius: 10px!important } .slant-line { background: var(--product-secondary-color); clip-path: polygon(100% 0,0 0,100% 100%) } .related.products,.woocommerce-tabs.wc-tabs-wrapper { display: none } .product-description p { font-size: 16px!important } @media (width>=48rem) { .product-description p { font-size: 24px!important } } .jdgm-rev { background-color: var(--color-white); border-radius: var(--radius-2xl); border-style: var(--tw-border-style)!important; border-width: 0!important; margin-bottom: calc(var(--spacing)*8)!important; padding: calc(var(--spacing)*8)!important } .psc-text { --tw-font-weight: var(--font-weight-black); text-wrap: nowrap; font-size: 64px; font-weight: var(--font-weight-black); text-transform: uppercase } @media (width>=64rem) { .psc-text { font-size: 128px } } .scale-down { transform: scale(.6)!important } .x-splide button[type=submit] { width: 100% } .x-splide form { display: block; width: 100% } .x-splide .variable-items-wrapper { align-items: center; display: flex; gap: calc(var(--spacing)*4); justify-content: flex-start; width: 100%!important } @media (width>=48rem) { .x-splide .variable-items-wrapper { justify-content: center } } .pinfo form.cart .variations_button { display: flex; justify-content: center } .pinfo form.cart ul { display: flex; justify-content: center!important } form.cart { display: flex; justify-content: center } form.cart table tbody,form.cart table th,form.cart table tr { display: block; text-align: center; width: 100% } @media (width>=48rem) { : is(form.cart table tr,form.cart table tbody,form.cart table th) { text-align:left } } form.cart table.variations,form.cart tr,form.cart>div { display: block; width: 100% } form.cart button[type=submit] { width: 100% } @media (width>=48rem) { form.cart button[type=submit] { width: 72% } } form.cart ul.variable-items-wrapper { align-items: center; display: flex; gap: calc(var(--spacing)*4); justify-content: center; width: 100%!important } @media (width>=48rem) { form.cart ul.variable-items-wrapper { justify-content: flex-start } } form.cart ul.variable-items-wrapper li { flex-grow: 1; padding-inline:calc(var(--spacing)*8)} @media (width>=48rem) { form.cart ul.variable-items-wrapper li { flex-grow: 0; padding-inline:calc(var(--spacing)*16)} } .product-info { overflow: hidden; padding-bottom: 9vh } .product-info .quantity { display: none } .product-info .single_variation_wrap { font-size: var(--text-2xl); line-height: var(--tw-leading,var(--text-2xl--line-height)); text-align: center; width: 100% } .product-info th.label { display: none } .product-info .button-variable-items-wrapper { margin-top: calc(var(--spacing)*8) } .product-info .cart { display: block; margin-inline:auto;max-width: 600px; width: 100% } .product-info button[type=submit] { background-color: var(--color-black); border-radius: var(--radius-xl); color: var(--color-white); cursor: pointer; display: block; font-size: var(--text-lg); line-height: var(--tw-leading,var(--text-lg--line-height)); padding-block:calc(var(--spacing)*4);text-transform: uppercase; width: 100% } :is(.mango-slide,.grape-slide) .t1 { --tw-leading: .93; --tw-font-weight: var(--font-weight-black); align-items: flex-end; display: flex; font-size: clamp(10px,13vw,300px)!important; font-weight: var(--font-weight-black); justify-content: center; line-height: .93; margin-bottom: calc(var(--spacing)*2); text-align: center; text-transform: uppercase; transition-duration: var(--tw-duration,var(--default-transition-duration)); transition-property: all; transition-timing-function: var(--tw-ease,var(--default-transition-timing-function)); white-space: nowrap } @media screen and (width>=768px) { : is(.mango-slide,.grape-slide) .t1 { font-size:clamp(12px,13vw,500px)!important; } } :is(.mango-slide,.grape-slide) .t2 { --tw-leading: .93; --tw-font-weight: var(--font-weight-black); align-items: flex-end; display: flex; font-size: clamp(10px,10vw,140px)!important; font-weight: var(--font-weight-black); justify-content: center; line-height: .93; margin-bottom: calc(var(--spacing)*2); text-align: center; text-transform: uppercase; transition-duration: var(--tw-duration,var(--default-transition-duration)); transition-property: all; transition-timing-function: var(--tw-ease,var(--default-transition-timing-function)); white-space: nowrap } @media screen and (width>=768px) { : is(.mango-slide,.grape-slide) .t2 { font-size:clamp(12px,10vw,140px)!important } } .can-img-container { align-items: flex-end; bottom: 15px; display: flex; height: 100%; justify-content: center; left: calc(var(--spacing)*0); position: absolute; width: 100%; z-index: 100 } @media (width>=64rem) { .can-img-container { bottom: 60px } } .can-img { max-width: 380px; width: 85% } .slide-bg { max-width: 1000px; text-align: center; width: 100vw } .slide-bg img { max-width: 800px } .headline1 { font-family: Helvetica,serif; font-size: 10px; margin-inline:auto;padding-top: 3rem; width: 80% } @media (width>=48rem) { .headline1 { font-size: 18px } } @keyframes spin { to { transform: rotate(1turn) } } @keyframes ping { 75%,to { opacity: 0; transform: scale(2) } } @keyframes pulse { 50% { opacity: .5 } } @keyframes bounce { 0%,to { animation-timing-function: cubic-bezier(.8,0,1,1); transform: translateY(-25%) } 50% { animation-timing-function: cubic-bezier(0,0,.2,1); transform: none } } @property --tw-translate-x { syntax: "*"; inherits: false; initial-value: 0 } @property --tw-translate-y { syntax: "*"; inherits: false; initial-value: 0 } @property --tw-translate-z { syntax: "*"; inherits: false; initial-value: 0 } @property --tw-rotate-x { syntax: "*"; inherits: false; initial-value: rotateX(0) } @property --tw-rotate-y { syntax: "*"; inherits: false; initial-value: rotateY(0) } @property --tw-rotate-z { syntax: "*"; inherits: false; initial-value: rotateZ(0) } @property --tw-skew-x { syntax: "*"; inherits: false; initial-value: skewX(0) } @property --tw-skew-y { syntax: "*"; inherits: false; initial-value: skewY(0) } @property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid } @property --tw-leading { syntax: "*"; inherits: false } @property --tw-font-weight { syntax: "*"; inherits: false } @property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000 } @property --tw-shadow-color { syntax: "*"; inherits: false } @property --tw-inset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000 } @property --tw-inset-shadow-color { syntax: "*"; inherits: false } @property --tw-ring-color { syntax: "*"; inherits: false } @property --tw-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000 } @property --tw-inset-ring-color { syntax: "*"; inherits: false } @property --tw-inset-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000 } @property --tw-ring-inset { syntax: "*"; inherits: false } @property --tw-ring-offset-width { syntax: ""; inherits: false; initial-value: 0 } @property --tw-ring-offset-color { syntax: "*"; inherits: false; initial-value: #fff } @property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000 } @property --tw-blur { syntax: "*"; inherits: false } @property --tw-brightness { syntax: "*"; inherits: false } @property --tw-contrast { syntax: "*"; inherits: false } @property --tw-grayscale { syntax: "*"; inherits: false } @property --tw-hue-rotate { syntax: "*"; inherits: false } @property --tw-invert { syntax: "*"; inherits: false } @property --tw-opacity { syntax: "*"; inherits: false } @property --tw-saturate { syntax: "*"; inherits: false } @property --tw-sepia { syntax: "*"; inherits: false } @property --tw-outline-style { syntax: "*"; inherits: false; initial-value: solid } @media (min-width: 768px) { .md\:block { display: block !important; } } /* cart custom css */ .cart-container { text-align: center; padding-top: 35px; width: 47%; margin: 0 auto; } .variant-buttons { display: flex; justify-content: center; gap: 17px; margin-bottom: 20px; } .variant-btn { padding: 12px; border-radius: 12px; cursor: pointer; font-weight: bold; transition: 0.2s; width: 100%; font-size: 18px; font-family:"Helvetica","sans-serif"; } .variant-btn.active { background: black; color: white; } .variant-btn:not(.active) { background: white; color: black; } .cart-container .price { font-size: 25px; margin: 45px 0 0 0; color: #000; } .price { color: #000; font-size: 40px; font-weight: bold; } .stock { font-size: 16px; margin-bottom: 40px; color: gray; } .cart-btn { background: black; color: white; border: none; font-size: 1.125rem ; padding: 17px 0px; border-radius: 12px; cursor: pointer; margin-bottom: 20px; width: 100%; } .details-link { display: block; color: #7f27ff; margin-top: 10px; text-decoration: underline; font-size: 18px; } .details-link:hover { text-decoration: underline; } .xs-accordion .item { border-bottom: 1px solid #fff; padding: 10px 0; } .xs-accordion .title { cursor: pointer; font-weight: bold; display: flex; justify-content: space-between; align-items: center; padding: 10px 0; } .xs-accordion .content { display: none; padding: 10px 0; color: #444; line-height: 1.5; } .xs-accordion .item.active .content { display: block; } .xs-accordion .item.active .title i { transform: rotate(180deg); } .title i { transition: transform 0.3s ease; } .arrow_icon { width: 20px; } .content.show { font-size: 17px; } #shopify-section-template--18882886369455__custom_liquid_akcgVh { position: relative; } .section.section--full-width.spacing-style.color-scheme-1 { --section-top-offset: unset !important; } .icon-block__media { color: #fff; } svg.icon-block__media.icon-block-AdWN5SVRqZGVta3pnZ__icon_bBbWWq { fill: #fff !important; } .section-1 img { width: unset; } .section-5 img { width: unset; } label.variant-option__button-label { padding: 11px 65px !important; } .add-to-cart-text__content { text-transform: uppercase; } @media (max-width: 1024px) { .footer_mob { display: none; } .section-5 img#image1 { top:unset !important; } .section-5 img#image2{ top:unset !important; } } .show{ display:block !important; } @media (max-width: 540px) { .section-5 #mb2{ width:300px !important; } .section-5 #mb1{ width:300px !important; } variant-picker.variant-picker { margin-top: 0px !important; } #shopify-section-template--18900086718639__custom_liquid_XFJheW svg { max-width: 190% !important; height: 45px !important; } #shopify-section-template--18900067844271__custom_liquid_7GBgWW svg { max-width: 190% !important; height: 43px !important; } .container.product-description .shrink-0 img { padding: 0px 50px !important; } .variant-btn { padding: 13px 0px; } .add-custom-quantity { justify-content: center; } .cart-container { width: 100%; margin: 0 auto; } #shopify-section-template--18900086718639__custom_liquid_XFJheW svg { margin-top: 0px; } .cart-btn { padding: 15px 95px; } .section-5 img#image1 { top:unset !important; } .section-5 img#image2{ top:unset !important; } } @media screen and (max-width: 664px) { .cart-container { width: 70%; margin: 0 auto; } } @media (max-width: 460px) { .container.product-description .shrink-0 img { padding: 0 20px !important; } .variant-btn { padding: 13px 20px; } .add-custom-quantity { justify-content: center; } .cart-container { width: 100% !important; margin: 0 auto; } .cart-btn { padding: 15px 35px; } .section-5 img#image1 { top:unset !important; } .section-5 img#image2{ top:unset !important; } #shopify-section-template--18882886369455__section_kVr3By h2 { font-size: 28px; } } @media only screen and (max-width: 600px) { #shopify-section-template--18882886369455__section_eFkJ4C .h4 p strong { font-size: 14px !important; font-family: Titillium Web, sans-serif; } .section-5 img#image1 { top:unset !important; } ul.splide__pagination.splide__pagination--ltr { display: none; } .add-custom-quantity { justify-content: center; } .cart-container { width: 60%; margin: 0 auto; } .section-5 img#image2{ top:unset !important; } label.variant-option__button-label { padding: 17px 55px !important; } .cart-container { text-align: center; padding: 50px 0px 0px 0px; } .cart-btn{ width:100%; padding: 17px 36px; } .variant-btn{ width:100%; } .section-5 .min-h-screen.flex.flex-col.justify-center{ gap:0px; } } .section-5 img#image1 { top: 124px; } .section-5 img#image2{ top:220px; } quantity-selector-component.quantity-selector { width: 120px; } .shopify-product-form .product-form-buttons{ display:unset; } .add-to-cart-button { box-shadow: inset 1px 1px 1px #ffffff40, 1px 4px 4px -1px #0000004d !important; } @media screen and (min-width: 1040px){ .shopify-product-form{ width:70%; } } .section-4 h2{ line-height:unset; } @media screen and (min-width: 1020px) { .footer.purple-bg { margin-top:-16px; } } @media screen and (max-width: 1020px) { .footer.purple-bg { margin-top:-36px; } label.variant-option__button-label { padding: 11px 62px !important; } .cart-container { width: 60%; margin: 0 auto; } #shopify-section-template--18882886369455__section_GfWwEQ p { font-family: Titillium Web, sans-serif; font-size: 16px !important; margin-bottom: 2.25rem; } #shopify-section-template--18882886369455__section_GfWwEQ h2 { font-family: Titillium Web, sans-serif; font-weight: 900; font-size: 20px; } .spacing-style.text-block.text-block--ASE5WOGI0MzEvVGhae__text_fAY4ET.h1.text-block--align-left.text-block--full-width p { font-size: 64px !important; font-weight: 900 !important; } .spacing-style.text-block.text-block--AbTAxY2JZbWpPVXNxZ__text_fAY4ET.h1.text-block--align-left.text-block--full-width p{ font-size: 64px !important; } } #shopify-section-sections--18882886631599__custom_liquid_MWtnEM svg{ max-width:unset; } .product-card__metafield-image { width: 200px; } img.mb-3.mx-auto.block { width: 84px; } #shopify-section-template--18900067844271__custom_liquid_7GBgWW svg{ max-width:unset; } #shopify-section-template--18900086718639__custom_liquid_XFJheW svg{ max-width:unset; } @media screen and (min-width:1400px) and (max-width:1545px) { label.variant-option__button-label { padding:11px 79px !important; } } .p-12 .emoji { display: unset; width:18px; } .cus-cls .emoji{ display: unset; width:18px; } .sip { color: #000; } .custom-product-name{ display:none; } @media screen and (max-width: 749px) { .img-slide-cont{ display:unset !important; align-items:unset !important; } .slide-arrow{ display:none; } .custom-product-name{ display:block !important; margin-top:20px; } .price{ font-size: 24px; font-weight: 700; } .variant-option__button-label__text{ font-size: 12px !important; } .mob-view-img{ display: block; } .desk-view-img { display: none; } .cusotm-p-cls .group-block-content.layout-panel-flex.layout-panel-flex--column.mobile-column { display: none !important; } #shopify-block-AeGdVMEJHWERzb2txS__judge_me_reviews_preview_badge_bDMdUy{ display: none !important; } } @media screen and (min-width: 750px) { .cusotm-p-cls .group-block-content.layout-panel-flex.layout-panel-flex--column.mobile-column { display: block !important; } .mob-view-img{ display:none; } } @media only screen and (max-width: 480px) { .container.product-description .shrink-0 img { padding: 0 80px !important; } .add-custom-quantity { justify-content: center !important; } label.variant-option__button-label { padding: 10px 77px !important; } form.variant-picker__form legend { text-align: left; } img#mb2 { margin-left: 53px; } img#mb1 { margin-left: 53px; } } header-drawer.header-drawer.header__drawer--mobile { background: #a792c136; border-radius: 50px; margin-left: 10px; } .menu-drawer.motion-reduce.color-scheme-1 { background: rgb(236 223 255); } button.button.button-unstyled.close-button.menu-drawer__close-button { background: #a792c136; padding: 10px; margin-left: 10px; margin-top: 10px; } .menu-drawer__menu-item { justify-content: center !important; } span.menu-drawer__menu-item-text { font-weight: bold; } .menu-drawer.motion-reduce.color-scheme-1 { background: rgb(236 223 255); opacity: 0.9; width:100%; } .blurred{ filter:blur(4px); } form.variant-picker__form legend { font-size: 16px !important; font-weight: bold; } .mob-view-img .text-block h5 { margin-bottom: 33px !important; margin-top: 12px; color: #000; } .desk-view-img .text-block h5 { margin-bottom: 33px !important; margin-top: 12px; color: #000; } quantity-selector-component.quantity-selector { background: #fff; color: #000 !important; font-size: 17px; font-weight: 500; } span.svg-wrapper.icon-plus { color: #000; } input[type="number"] { color: #000 !important; } @media only screen and (max-width: 430px) { .container.product-description .shrink-0 img { padding: 20px !important; } .variant-btn { padding: 12px 10px; } .variant-option--buttons { justify-content: center; } label.variant-option__button-label { padding: 10px 50px !important; } } .py-12 { margin: -3px; } .quantity-selector{ display:none; } .add-custom-quantity .quantity-selector{ display:flex !important; } @media (min-width: 1280px) { #shopify-section-template--18900086718639__custom_liquid_XFJheW .container{ width:1200px; } #shopify-section-template--18900067844271__custom_liquid_7GBgWW .container{ width:1200px; } } @media screen and (min-width: 750px) { .mob-res-none{ display:none !important; } } variant-picker.variant-picker { margin-top: -32px; } .img-slide-cont{ display:flex; align-items:center; } ul.splide__pagination.splide__pagination--ltr { display: none; }