/** Shopify CDN: Minification failed Line 4698:44 Expected identifier but found "!" Line 5286:114 Expected identifier but found "!" Line 5287:131 Expected identifier but found "!" Line 5291:163 Expected identifier but found "!" Line 5527:185 Unexpected "{" **/ * { 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; font-family: "Libre Franklin", sans-serif; -webkit-font-smoothing: antialiased; /* Chrome, Safari */ -moz-osx-font-smoothing: grayscale; } :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; } .collection-card, .featured-blog-posts-card { width: 100%; position: relative; height: 100%; } /* Editorial layout */ .resource-list:not(.hidden--desktop) .collection-card--flexible-aspect-ratio, .resource-list:not(.hidden--desktop) .blog-post-card--flexible-aspect-ratio { .collection-card__image, .featured-blog-posts-card__image, .blog-placeholder-svg { aspect-ratio: 99; height: 100%; } .collection-card__inner, .featured-blog-posts-card__inner { display: flex; flex-direction: column; height: 100%; } .featured-blog-posts-card__content .blog-description .blog-post-card__content-text { color: #FFF; --color:#FFF; } .featured-blog-posts-card .blog-description .blog-post-card__content-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; display:none !important; } .blog-post-details span, .featured-blog-posts-card__content { color: #FFF !important; } .collection-card__content, .featured-blog-posts-card__content { flex-shrink: 0; } &:not(.collection-card--image-bg) .collection-card__content, .featured-blog-posts-card__content { height: auto; } } .collection-card__inner, .featured-blog-posts-card__inner { width: 100%; overflow: hidden; position: relative; display: flex; flex-direction: column; z-index: var(--layer-flat); pointer-events: none; } .collection-card__content, .featured-blog-posts-card__content { display: flex; position: relative; height: 100%; width: 100%; gap: var(--gap); } .collection-card__link, .featured-blog-posts-card__link { position: absolute; inset: 0; /* allows focus outline to have radius in supported browsers */ border-radius: var(--border-radius); } .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); 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; } .wrap-text { overflow-wrap: break-word; word-break: break-word; hyphens: auto; } 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); */ outline:none; outline-offset:none; } @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), 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; } @media screen and (max-width: 749px) { .section--mobile-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 */ .home-main-slider .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 !important; } @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); background-color: var(--color-background); 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); } .icon-default { fill: currentColor; } [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; } /* When header is transparent, pull the first main content section up to sit under the floating header */ body:has(.header[transparent]) .content-for-layout > .shopify-section:first-child { margin-top: calc(var(--header-group-height) * -1); } body:has(.header[transparent]) #header-group > .header-section { z-index: var(--layer-sticky); } /* All other header group content should be beneath the floating header, but above the rest of the page content */ body:has(.header[transparent]) #header-group > *:not(.header-section) { z-index: calc(var(--layer-sticky) - 1); } /* Featured collection block */ .featured-collection-block { width: 100%; } /*preloader*/ #life-preloader { position: fixed; width: 100%; height: 100%; background: #ffffff; z-index: 9999; top: 0; left: 0; display: flex; justify-content: center; align-items: center; } .life-loader { border: 3px solid #f3f3f3; border-top: 3px solid rgb(0 174 239 / 1.0); border-radius: 50%; width: 80px; height: 80px; animation: spin 3s linear infinite; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* Product grid */ .product-grid-container { position:relative; display: block; width: 100%; padding-block: var(--padding-block-start) var(--padding-block-end); @media screen and (min-width: 750px) { /* display: grid; */ } } .listing-filter-tab { position: absolute; left: 0; right: 0; width: auto; display: inline-block; top: 151px; z-index:1; } .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; text-align:center; } .product-grid__card.product-grid__card .wishlist-app { display : none; } .product-card .product-info { display:flex; justify-content: space-between; border-top:1px #C5C5C5 solid; padding-top:10px; margin-top:16px; padding-bottom:20px; } .product-card .product-info .variant-option { padding:10px; } .product-card .product-info .variant-option:hover, .product-card .product-info .variant-option:hover select { background:#f1f1f1; border-radius:10px; } .product-card .product-info .variant-option select { cursor:pointer; } .product-info div[ref="priceContainer"] .main-price { margin-top:10px; } .product-card .variant-count { font-family: "Libre Franklin", sans-serif; color:#303030;text-align: center;font-size: 16px;font-style: normal;font-weight: 400;line-height:16px; } .product-card .user-select-text p{ text-overflow: ellipsis; white-space: nowrap; overflow: hidden; font-family: "Libre Franklin", sans-serif; display:inline-block; width:100%; color:#303030;text-align: center;font-size: 18px; font-style: normal;font-weight: 600;line-height:24px; margin:20px 0 13px 0 !important; } .product-card .product-info form.variant-picker__form-custom select { border:none; text-transform:capitalize; } .product-info div[ref="priceContainer"] { justify-content: start; display: flex; align-items: self-end; flex-direction: column; margin-left: auto; min-height: 46px; } .product-info div[ref="priceContainer"] .main-price { margin-bottom:5px; } [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); */ max-width:62rem; } @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: move-and-fade; --dialog-drawer-closing-animation: move-and-fade; } .dialog-drawer--right { --dialog-drawer-opening-animation: move-and-fade; --dialog-drawer-closing-animation: move-and-fade; } /* stylelint-enable value-keyword-case */ .dialog-drawer[open] { --start-x: var(--custom-transform-from, 100%); --end-x: var(--custom-transform-to, 0px); --start-opacity: 1; animation: var(--dialog-drawer-opening-animation) var(--animation-speed) var(--animation-easing) forwards; } .dialog-drawer[open].dialog-closing { --start-x: 0px; --end-x: 100%; --start-opacity: 1; --end-opacity: 1; animation: var(--dialog-drawer-closing-animation) var(--animation-speed) var(--animation-easing); } .dialog-drawer--right[open] { --start-x: -100%; --start-opacity: 1; } .dialog-drawer--right[open].dialog-closing { --start-x: 0px; --end-x: -100%; --start-opacity: 1; --end-opacity: 1; animation: var(--dialog-drawer-closing-animation) var(--animation-speed) var(--animation-easing); } /* 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: 14px; /* 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); font-weight:600; height:38px; line-height:38px; } .button { font-family: var(--button-font-family-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); 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); 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); font-weight:400; } textarea:not(:placeholder-shown)::placeholder, input:not(:placeholder-shown)::placeholder { opacity: 0; font-weight:400; } /* 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-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); } @media(min-width:1200px){ .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:hover { --button-color: var(--color-secondary-button-hover-background); --button-background-color: var(--color-secondary-button-hover-text); --button-border-color: var(--color-secondary-button-hover-background); color:var(--color-secondary-button-hover-background); } .slide-content .slide-btn-group .button:hover, .biotics-banner .biotics-banner-caption .button:hover { --button-border-color:transparent;outline-color:transparent; } } /* 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); } .collection-wrapper { position:relative; } summary { display: flex; align-items: center; cursor: pointer; list-style: none; /* padding-block: var(--padding-sm); */ /* padding:0 0 20px 0; */ } 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; } body:has(header-component[transparent]) .product-media-container.constrain-height { --viewport-offset: 0px; } .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); */ top:10px; right: var(--margin-lg); width: var(--minimum-touch-target); height: var(--minimum-touch-target); z-index: var(--layer-flat); background-color: #00AEEF; display: flex; align-items: center; justify-content: center; /* For the outline radius */ border-radius: 0; } .close-button svg { color: #FFF; } /* 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: #00aeef; opacity: 1; } .facets-block-wrapper .dialog-drawer { border-radius: 0px; } .close-button svg { width: var(--icon-size-xs); height: var(--icon-size-xs); } /* Product media */ .product-media { display: flex; flex: 1; border-radius: 20px; background: #EFEFEF; padding:20px 37px; margin-bottom:0px; } /* 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) / 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); 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) + var(--scaling-factor) * var(--offset-swatch-width) * 1px), calc(var(--min-width) + var(--offset-scaled-width)), var(--max-swatch-size) ); /* height = min(m + sV, (m + s * H'/W' * M'), M) */ --swatch-height: min( calc(var(--min-height) + var(--scaling-factor) * var(--offset-swatch-height) * 1px), calc(var(--min-height) + var(--offset-scaled-height)), var(--max-swatch-size) ); display: block; background: var(--swatch-background); background-position: var(--swatch-focal-point, center); border-radius: var(--variant-picker-swatch-radius); border: var(--style-border-swatch-width) var(--style-border-swatch-style) var(--color-border); width: var(--swatch-width); height: var(--swatch-height); /* This is different than `background-size: cover` because we use `box-sizing: border-box`, * doing it like makes the background clip under the border without repeating. */ background-size: var(--swatch-width) var(--swatch-height); &.swatch--unavailable { border-style: dashed; } &.swatch--unscaled { /* for when you want fixed sizing (e.g. pdp) */ --swatch-width: var(--variant-picker-swatch-width); --swatch-height: var(--variant-picker-swatch-height); } &.swatch--filter { --swatch-width: var(--max-filter-size); --swatch-height: var(--max-filter-size); border-radius: var(--variant-picker-swatch-radius); } &.swatch--pill { --swatch-width: var(--max-pill-size); --swatch-height: var(--max-pill-size); border-radius: var(--variant-picker-swatch-radius); } /* swatches in filters and pills always have a border */ &.swatch--filter, &.swatch--pill { --style-border-swatch-width: var(--variant-picker-border-width); --style-border-swatch-style: var(--variant-picker-border-style); --color-border: rgb(var(--color-foreground-rgb) / var(--variant-picker-border-opacity)); } &.swatch--variant-image { background-size: cover; } @media screen and (min-width: 750px) { /* desktop values */ --max-swatch-size: 32px; --max-pill-size: 16px; --max-filter-size: 28px; --scaling-factor: 0.65; } } .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; } .price, .currency-price-display .currency{ color: #303030; font-size: 20px; font-style: normal; font-weight: 500; line-height: 20px; } .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)); font-weight: var(--font-paragraph--weight); 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: 1; text-decoration-line: line-through; text-decoration-thickness: 1px; color: #474B4E; font-size: 15px; font-style: normal; font-weight: 400; line-height: 15px; } .card-gallery { position: relative; } @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: 992px) { .mobile-column { flex-flow: column nowrap; align-items: var(--horizontal-alignment); justify-content: var(--vertical-alignment-mobile); } .layout-panel-flex--row:not(.mobile-column) { flex-wrap: var(--flex-wrap-mobile); > .menu { flex: 1 1 min-content; } > .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: 993px) { .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; } &.checkbox--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; font-size:14px; color:#fff; } .facets .facets__inputs-wrapper.price-facet__inputs-wrapper .field__input { padding-left: 30px; border: 1px #fff solid; background:#FFF; box-shadow: none; } .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: flex; line-height: normal; align-items: center; justify-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--3xs); z-index: var(--layer-flat); line-height: 1; display: flex; align-items: center; justify-content: center; } /* Quantity selector */ .quantity-selector { --quantity-selector-width: 136px; 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); */ border-radius: 30px; border: 1px solid #00ADEF; background: #E3F6FD; flex: 1 1 var(--quantity-selector-width); align-self: stretch; transition: background-color var(--animation-speed) var(--animation-easing); padding:31px 36px; &:hover { background-color: var(--color-input-hover-background); } } .cart-drawer__inner .quantity-selector{ padding:10px 8px; } .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 .svg-wrapper{ height:24px; width:24px; border:2px #303030 solid; color:#303030; border-radius:100%; } .quantity-selector button:hover .svg-wrapper{ background:#00ADEF; border-color:#00ADEF; color:#FFF; } .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; font-size:24px; font-weight:400; } .button.cart-items__remove svg{ height:25px; width:25px; } .button.cart-items__remove svg * { stroke-width:1px; } .cart-page__items .cart-items thead tr th { padding-bottom:20px; } /* 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 { --offset-y: 10px; position: fixed; width: var(--width, 40px); height: var(--height, 40px); left: 0; top: 0; z-index: calc(infinity); pointer-events: none; border-radius: var(--style-border-radius-buttons-primary); overflow: hidden; object-fit: cover; background-size: cover; background-position: center; opacity: 0; background-color: var(--color-foreground); translate: var(--start-x, 0) var(--start-y, 0); transform: translate(-50%, -50%); animation-name: travel-x, travel-y, travel-scale; animation-timing-function: var(--x-timing), var(--y-timing), var(--scale-timing); animation-duration: 0.6s; animation-composition: accumulate; animation-fill-mode: both; } fly-to-cart.fly-to-cart--main { --x-timing: cubic-bezier(0.7, -5, 0.98, 0.5); --y-timing: cubic-bezier(0.15, 0.57, 0.9, 1.05); --scale-timing: cubic-bezier(0.85, 0.05, 0.96, 1); } fly-to-cart.fly-to-cart--quick { --x-timing: cubic-bezier(0, -0.1, 1, 0.32); --y-timing: cubic-bezier(0, 0.92, 0.92, 1.04); --scale-timing: cubic-bezier(0.86, 0.08, 0.98, 0.98); animation-duration: 0.6s; } fly-to-cart.fly-to-cart--sticky { --x-timing: cubic-bezier(0.98, -0.8, 0.92, 0.5); --y-timing: cubic-bezier(0.14, 0.56, 0.92, 1.04); --scale-timing: cubic-bezier(0.86, 0.08, 0.98, 0.98); --radius: var(--style-border-radius-buttons-primary); @media (max-width: 749px) { --x-timing: cubic-bezier(0.98, -0.1, 0.92, 0.5); } animation-duration: 0.8s; } @keyframes travel-scale { 0% { opacity: var(--start-opacity, 1); } 5% { opacity: 1; } 100% { border-radius: 50%; opacity: 1; transform: translate(-50%, calc(-50% + var(--offset-y))) scale(0.25); } } @keyframes travel-x { to { translate: var(--travel-x, 0) 0; } } @keyframes travel-y { to { translate: 0 var(--travel-y, 0); } } /* ------------------------------------------------------------------------------ */ /* ------------------------------------------------------------------------------ */ /* ------------------------------------------------------------------------------ */ /* 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 move-and-fade { from { transform: translate(var(--start-x, 0), var(--start-y, 0)); opacity: var(--start-opacity, 0); } to { transform: translate(var(--end-x, 0), var(--end-y, 0)); opacity: var(--end-opacity, 1); } } @keyframes slideInTopViewTransition { from { transform: translateY(100px); } } @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; --slide-offset: 6px; position: relative; display: flex; flex-direction: column; timeline-scope: var(--slideshow-timeline); } slideshow-component.slideshow--content-below-media slideshow-slide { display: grid; } .slideshow--content-below-media slideshow-slide :is(.slide__image-container, .slide__content) { position: static; } .slideshow--content-below-media slideshow-slide { grid-template-rows: var(--grid-template-rows); @media screen and (min-width: 750px) { grid-template-rows: var(--grid-template-rows-desktop); } } .slide__content { opacity: 0; animation: slide-reveal both linear; animation-timeline: var(--slideshow-timeline); @media (prefers-reduced-motion) { opacity: 1; animation: none; } } .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: var(--slideshow-gap, 0); cursor: var(--cursor); min-height: var(--slide-min-height); @media (prefers-reduced-motion) { scroll-behavior: auto; } &::-webkit-scrollbar { width: 0; } &::-webkit-scrollbar-track { background: transparent; } &::-webkit-scrollbar-thumb { background: transparent; border: none; } @media screen and (min-width: 750px) { min-height: var(--slide-min-height-desktop); } } slideshow-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: center; width: var(--slide-width, 100%); max-height: 100%; flex-shrink: 0; view-timeline-name: var(--slideshow-timeline); view-timeline-axis: inline; content-visibility: auto; contain-intrinsic-size: auto none; border-radius: var(--corner-radius, 0); overflow: hidden; slideshow-component[actioned] &, &[aria-hidden='false'] { content-visibility: visible; } slideshow-component slideshow-slide:not([aria-hidden='false']) { content-visibility: hidden; } &[hidden]:not([reveal]) { display: none; } /* Make inactive slides appear clickable */ &[aria-hidden='true'] { cursor: pointer; } } slideshow-slide .slide__image-container--rounded { border-radius: var(--corner-radius, 0); } 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; } .home-main-slider slideshow-slides[gutters*='start'] { padding-inline-start: var(--gutter-slide-width, 0); scroll-padding-inline-start: var(--gutter-slide-width, 0); } .home-main-slider 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; } @media screen and (min-width: 750px) { .media-gallery--carousel slideshow-component:has(slideshow-controls[thumbnails]) { &:has(slideshow-controls[pagination-position='right']) { display: grid; grid-template: 'container controls' auto 'arrows controls' min-content / 1fr auto; } &:has(slideshow-controls[pagination-position='left']) { display: grid; grid-template: 'controls container' auto 'controls arrows' min-content / auto 1fr; } slideshow-controls[pagination-position='left'] { order: -1; } } } /* 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: 1; min-height: var(--minimum-touch-target); min-width: var(--minimum-touch-target); padding: 0 var(--padding-xs); color: var(--color-white); } slideshow-arrows .slideshow-control.slideshow-control--style-none { display: none; } .media-gallery--carousel slideshow-arrows .slideshow-control { /* padding-inline: 0 var(--padding-md); */ opacity: 1; border-radius: 30px; background: #fff; padding: 10px; display: flex; align-items: center; justify-content: center; height: 39px; width: 39px; } .media-gallery--carousel slideshow-arrows .slideshow-control svg * { stroke:#00AEEF; stroke-width:2px; } .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); } } :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; } } @keyframes slide-reveal { 0% { translate: calc(var(--slideshow-slide-offset, 6) * 1rem) 0; opacity: 0; } 50% { opacity: 1; } 100% { translate: calc(var(--slideshow-slide-offset, 6) * -1rem) 0; opacity: 0; } } .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, .section-carousel { 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, .section-carousel.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: 20px; } @container resource-list (max-width: 749px) { --resource-list-mobile-gap-max: 20px; } } .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: 1200px) { .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)); } } @container resource-list-carousel (max-width: 1199px) { .resource-list__carousel .resource-list__slide { --section-slide-width: calc( (100% - (var(--resource-list-column-gap) * (var(--column-count-ipad) - 1)) - var(--peek-next-slide-size)) / var(--column-count-ipad) ); --fallback-slide-width: clamp(150px, var(--mobile-card-size, 60cqw), var(--slide-width-max)); --slide-width: var(--section-slide-width, var(--fallback-slide-width)); } } @container resource-list-carousel (max-width: 750px) { .resource-list__carousel .resource-list__slide { --section-slide-width: calc( (100% - (var(--resource-list-column-gap) * (var(--column-count-mobile) - 1)) - var(--peek-next-slide-size)) / var(--column-count-mobile) ); --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); } /* Disable transitions when the content toggle is not caused by the direct user interaction, e.g. opening the filters on mobile. */ &:not(:focus-within)::details-content, &:not(:focus-within) .details-content { transition: none; } &:not([open]) { &::details-content, .details-content { padding-block: 0; } } &[open] { &::details-content, .details-content { opacity: 1; block-size: auto; @starting-style { block-size: 0; opacity: 0; overflow-y: clip; } &:focus-within { overflow-y: visible; } } } } } accordion-custom[data-disable-on-mobile='true'] summary { @media screen and (max-width: 1024) { cursor: auto; } } accordion-custom[data-disable-on-desktop='true'] summary { @media screen and (min-width: 1025) { 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%); } } .blog-read-now-button { display: inline-flex; align-items: center; margin-top: 12px; padding: 10px 18px; font-size: 14px; font-weight: 600; text-decoration: none; border-radius: 6px; background: rgb(var(--color-button)); color: rgb(var(--color-button-text)); transition: all 0.25s ease; } .blog-read-now-button:hover { background:#fff; color:#00AEEF; } .btn-svg-wrapper { display: flex; align-items: center; justify-content: center; } .btn-svg-wrapper span.btn-block-svg { margin-left: 9px; } .container-width{ max-width:1650px; } .btn-svg-wrapper:hover span.btn-block-svg svg * { stroke: #00aeef; } .daily-probiotics-section .daily-probiotics-content a { text-decoration:none; font-weight:700; } .specifically-content{ margin-bottom:66px; } /****** Announcement bar CSS Start ***************************/ .announcement-bar__slider { width: 100%; max-width: 736px; margin: 0 auto; } /*** Main slider ***/ .slide-image img { width: 100%; } .slide-image { max-width: 764px; } /*** Review Section CSS Start ***/ .review-section .marquee-container .marquee-content { padding:0;justify-content:space-between; } .review-section .marquee-container::before { display:none; } .review-section .marquee-container::after { display:none; } .review-section .marquee-icon { width:68px; height:68px; } .review-section .marquee-container { padding:50px 0;} .review-section .marquee-item { color: #FFF;font-size: 18px;font-style: normal; font-family: "Libre Franklin", sans-serif; font-weight: 300;line-height: 100%; /* 18px */} .review-section .marquee-item .counts { color: #FFF;font-size: 40px; font-family: "Libre Franklin", sans-serif; margin-bottom:15px; font-style: normal;font-weight: 400; font-family: "Libre Franklin", sans-serif; display:inline-block; margin-bottom:10px; line-height: 100%; /* 40px */} .review-section.pdp-review-section .marquee-item .counts { color: #FFF;font-size: 28px;font-style: normal;font-weight: 400;line-height: 100%; /* 28px */} .review-section.pdp-review-section .marquee-item { font-family: "Libre Franklin", sans-serif; color: #FFF;font-size: 16px;font-style: normal;font-weight: 400;line-height: 100%; /* 18px */ } .email-signup__input-group input{ background: transparent; margin: 0; padding: 0; color: #FFF; font-size: 15px; font-style: normal; font-weight: 500; line-height: normal;} .email-signup__input-group input::-webkit-input-placeholder { color: #00AEEF; font-size: 15px; font-style: normal; font-weight: 500; line-height: normal;} .email-signup__input-group input::-moz-placeholder { color: #00AEEF; font-size: 15px; font-style: normal; font-weight: 500; line-height: normal;} .email-signup__input-group input::-ms-placeholder { color: #00AEEF; font-size: 15px; font-style: normal; font-weight: 500; line-height: normal;} .email-signup__input-group input::placeholder { color: #00AEEF; font-size: 15px; font-style: normal; font-weight: 500; line-height: normal;} .client-logo { margin-top:40px; } .client-logo img{ width:auto; height:37px; object-fit:contain;aspect-ratio: auto; } .subscribing-text { color:#7E7E7E; font-size: 14px; font-style: normal; font-weight: 400; line-height: 100%; /* 14px */ } .specifically-title p { font-weight:700; } a.swym-wishlist { position: relative; display:inline-block; min-width:28px; } i.icon-swym-wishlist:after { visibility: hidden; } .swym-ready i.icon-swym-wishlist:after { visibility: visible; content: '\f004'; /* Make it'\f08a' for the heart to look empty */ } .swym-wishlist .swym-wishlist-header-counter { position: absolute; top: -10px; right: -10px; background: #00aeef; color: #FFF; border-radius: 100%; padding: 5px; display: flex; align-items: center; justify-content: center; height: 20px; font-size: 10px; min-width: 20px; } span.swym-wishlist-header-counter[data-count="0"] { display: none; } .gut-health-slider{ position:relative; } .gut-health-slider .gut-health-slide-content { position:absolute; left:0; right:0; width:100%; max-width:1650px; margin:0 auto; } .common-slider .resource-list__carousel .slideshow-control.slideshow-control--shape-circle { height:58px; width:58px; background:#FFF; border-radius: 100%; box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.20); } .common-slider .resource-list__carousel .slideshow-control.slideshow-control--shape-circle svg * { stroke:#00AEEF; } .common-slider .resource-list__carousel .slideshow-control.slideshow-control--shape-circle:hover { background:#00AEEF; } .common-slider .resource-list__carousel .slideshow-control.slideshow-control--shape-circle:hover svg * { stroke:#fff; } .common-slider .resource-list__carousel .slideshow-control--next { right:-20px; position:relative; } .common-slider .resource-list__carousel .slideshow-control--previous { left:-20px; position:relative; } /* .specifically-formulated-content{ padding:115px 69px 50px 50px; } */ .specifically-formulated-content .specifically-main-title p{ font-family: "Libre Franklin", sans-serif; color: #FFF; font-size: 28px; font-style: normal; font-weight: 400; line-height: 120%; /* 33.6px */ margin:0 auto 30px auto; text-align:center; } .specifically-formulated-content .specifically-formulated-box img{ margin-bottom:14px; height:80px; object-fit:contain; } .specifically-formulated-content .specifically-title p{ color: #FFF; font-family: "Libre Franklin", sans-serif; text-align: center; font-size: 16px; font-style: normal; font-weight: 600; line-height: 120%; /* 19.2px */ text-transform:capitalize; } .padding-100 { padding:100px 0; } .pb-100{ padding-bottom:100px; } .pt-100{ padding-top:100px; } .product-detail-faq > .main-div{ padding-top:100px; } .mt-100{ margin-top:100px; } .mb-100{ margin-bottom:100px; } .padding-100.pb-0{ padding-bottom:0; } .subscribe-content .email-signup__input{ padding:10px 10px 10px 20px; height:60px; font-weight:400; } .slider-container { width:100%; max-width:1680px; margin:0 auto; padding:37px 35px 23px 15px; } .home-main-slider slideshow-controls[controls-on-media] { margin-bottom:46px; } .okeReviews[data-oke-container] .oke-state--noTopBorder, div.okeReviews .oke-state--noTopBorder { border-bottom:none !important; } .slideshow-control .icon-caret { rotate: 180deg;} .home-main-slider .slide-content { padding-bottom: 23px; } .slide-content .slide-main-heading h2 { color: #303030; font-size: 70px; font-style: normal; font-weight: 500; margin-bottom:5px; font-family: "Libre Franklin", sans-serif; line-height: 100%; /* 70px */ } .slide-content .slide-heading p{ color: #00AEEF; font-size: 100px; font-style: normal; font-weight: 500; line-height: 100%; font-family: "Libre Franklin", sans-serif; } .slide-content .slide-heading.left-content p { color:#FFF; } .slide-content .slide-btn-group{ margin-top:30px; } .slide-content .slide-btn-group .button-secondary, .biotics-banner .biotics-banner-caption .button-secondary{ --button-border-color:transparent; } .achivement_class h4 { margin-bottom:30px !important; color: #303030;text-align: center; font-family: "Libre Franklin", sans-serif; font-size: 28px; font-style: normal;font-weight: 400;line-height: 100%; /* 28px */ } .achivement_class img{ width:auto; height:37px; object-fit:contain; aspect-ratio:auto; } .announcement-bar__button { border-radius: 30px; background: #FFFFFF; color: #00aeef; text-decoration: none; white-space: nowrap; display: flex; width: 100px; height: 30px; padding: 0 30px; justify-content: center; align-items: center; font-size: 12px; font-style: normal; font-weight: 600; line-height: 30px; font-family: "Libre Franklin", sans-serif; } .achivement_class .image-block { justify-content:center; } .announcement-bar__slider slideshow-arrows { left:-20px; right:-20px; } .announcement-bar__slide p.announcement-bar__text { display: flex; justify-content: start; align-items: center; column-gap: 0px; color: #FFF; font-family: "Libre Franklin", sans-serif; font-size: 14px; font-style: normal; font-weight: 600; line-height: normal; } .announcement-bar__slide p.announcement-bar__text img{ margin-right:20px; } .announcement-bar__slide p.announcement-bar__text span.text-line { margin: 0 13px; } .featured-blog-posts-card__content{ border-radius: 0 0 30px 30px; background: rgba(59, 59, 59, 0.24); backdrop-filter: blur(9.5px); position: absolute; left: 0; bottom: 0; width: 100%; height: max-content; padding:28px 26px 30px 18px; display:block; } .featured-blog-posts-card__content h4{ color: #FFF; font-family: "Libre Franklin", sans-serif; font-size: 16px; font-style: normal; font-weight: 600; line-height: 100%; /* 16px */ margin-bottom:10px; overflow: hidden; text-overflow: ellipsis; white-space: initial; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; height:32px; } .blog-read-now-button{ border-radius: 30px; border: 1px solid #FFF; color: #FFF; font-family: "Libre Franklin", sans-serif; font-size: 14px; font-style: normal; font-weight: 500; line-height: 37px; height:37px; padding:0 30px; } .blog-card-box{ position:relative; margin-top:39px; } .featured-blog-posts-card .featured-blog-posts-card__link { left: 0; top: 0; } .featured-blog-posts-card__link .blog-card-tags { position: absolute; top: 0; left: 0; } .featured-blog-posts-card__inner:after { position: absolute; left: 0; top: 0; height: 100px; width: 100%; border-radius: 30px 30px 0 2px; background: linear-gradient(180deg, #303030ba 8%, #73737308 98%); content: ''; } .featured-blog-posts-card__inner{ border-radius:30px; } .featured-blog-posts-card__inner .blog-card-tags { position: absolute; top: 20px; left: 20px; z-index: 1; color: #FFF; font-family: "Libre Franklin", sans-serif; font-size: 18px; font-style: normal; font-weight: 500; line-height: 100%; /* 18px */ text-transform:capitalize; flex-wrap:wrap; } .video-section .video-content { padding-left:60px; max-width:700px; } .video-section .video-section-box { height:580px; } .subscribe-content p a { color:#7e7e7e; } .video-content .video-content-title p { color: #303030; font-family: "Libre Franklin", sans-serif; font-size: 28px; font-style: normal; font-weight: 400; line-height: 100%; /* 28px */ margin-bottom:30px; } .video-content .video-content-info p{ color: #303030; font-family: "Libre Franklin", sans-serif; margin-bottom:30px; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal; } slideshow-slide.announcement-bar__slide{ display: flex; align-items: center; justify-content: center; flex-direction: row; } slideshow-slide.announcement-bar__slide .announcement-bar-button { width: auto; } .view-all-button { flex: 0 0 auto; } .cart-title .h3 { font-size: 28px; } .custom-section-content { padding-bottom:0px; } .footer-main-section{ padding:100px 0 20px 0; } .footer-logo img { margin-bottom:21px; } .footer-logo{ margin-bottom:52px; } .footer-social-info { margin-bottom:25px; } .footer-social-info p{ color: #FFF; font-size: 20px; font-style: normal; line-height: normal; letter-spacing: -0.4px; font-family: "Libre Franklin", sans-serif; font-weight: 300; } .footer-description p { color: #FFF; font-size: 16px; font-style: normal; line-height: 19px; letter-spacing: -0.32px; font-family: "Libre Franklin", sans-serif; font-weight: 300; } .footer-main-section ul li a { display:inline-block; color: #FFF; font-family: "Libre Franklin", sans-serif; font-weight: 300; font-size: 18px; font-style: normal; line-height: normal; letter-spacing: -0.36px; margin-top:21px; } .footer-main-section .menu__heading.h5{ font-family: "Libre Franklin", sans-serif; color: #FFF; font-size: 20px; font-style: normal; font-weight: 600; line-height: 100%; /* 20px */ padding:0; margin-bottom:5px; } .footer-main-section .footer-social-link{ margin:30px 0 19px 0; } .footer-main-section .footer-social-link .social-icons__wrapper { gap:20px; } .footer-main-section .footer-social-link .social-icons__icon-wrapper:has(.social-icons__icon path) { border:1px #fff solid; height:44px; width:44px; border-radius:100%; } .custom-section-content a { text-decoration:none; } @media screen and (min-width: 1199px){ .footer-main-section .footer-content{ grid-template-columns: 4fr 3fr; } } .footer-links { min-width: 206px; margin-left:60px; } .footer-links:first-child{ margin-left:48px; } .footer-main-section .payment-option-list{ margin-top:114px; } .footer-main-section .payment-option-list img { height: 34px; width: auto; object-fit: contain; } .probiotics-link p{ padding:9px 14px; border-radius: 60px; border: 1px solid #2B4F9E; background: rgba(255, 255, 255, 0.70); color: #2B4F9E !important; text-align: center; font-size: 16px; font-style: normal; font-weight: 500; line-height: 100%; /* 16px */ font-family: "Libre Franklin", sans-serif; } /* slideshow-slides[gutters*=end]{ padding-inline-end:0; padding-inline-start: 0; max-width: 1650px; margin: 0 auto; } */ .custom-typography, .custom-typography>*{ font-family: "Libre Franklin", sans-serif;!important ; } .footer-main-section .select-country button[aria-label="Select country"] { color: #FFF; font-family: "Libre Franklin", sans-serif; font-size: 12px; font-style: normal; font-weight: 600; line-height: 100%; /* 12px */ text-transform: uppercase; min-width:236px; max-width:236px; border-radius:30px !important; border-color:#fff !important; } .bottom-footer { padding-bottom:52px; position:relative; z-index:0; } /* Mobile slider spacing */ .group-block-slider .slick-slide { padding: 0 8px; } /* Dots like screenshot */ .group-block-slider .slick-dots { bottom: -28px; } .formulated-block > .group-block-content { flex-wrap: wrap; } .formulated-block .specifically-formulated-box { width: 33.33%; flex: 0 0 33.33%; margin-bottom:47px; } /* .shop-by-range-section .tab-content { margin:23px auto 40px auto; max-width:884px; } */ .shop-by-range-section .tab-content { margin:23px auto 40px auto;text-align: center; display: flex; align-items: center; justify-content: center; } .health-tips-container.shop-by-range-section .tab-content .slick-list { justify-content:center; display:flex; } .shop-by-range-section .tab-content .category-tab-links.slick-slider { margin-bottom:0; } .shop-by-range-section .tab-content .slick-slider .slick-prev { left:-75px; } .shop-by-range-section .tab-content .slick-slider .slick-next { right:-45px; } .shop-by-range-section .tab-content .slick-track { display:flex; /*gap:31px;*/ margin:0; } .shop-by-range-section .tab-content .slick-list { margin: 0 -15px; max-width:1050px; width:100%;} .shop-by-range-section .tab-content .slick-slide { margin: 0 15px;} .shop-by-range-section .tab-content .slick-slide.active { background:#2B4F9E; color:#FFF; font-weight:600; } .product-slider-container .slick-initialized .slick-slide { margin:0px 15px; } .product-card .home-and-collection { background-color:transparent !important; } .product-slider-container .slick-initialized .slick-track { display:flex; justify-content:center; align-items:center; } .shop-by-range-section .tab-content .slick-slide {cursor:pointer; white-space:nowrap; color: #2B4F9E;font-family: "Libre Franklin", sans-serif; text-align: center;font-size: 16px;font-style: normal;font-weight: 500;line-height: 100%; /* 16px */ border-radius: 60px; padding:11px 14px; border: 1px solid #2B4F9E; background: rgba(255, 255, 255, 0.70);} .tab-content .slick-slider .slick-next:before, .tab-content .slick-slider .slick-next:hover:before { opacity:1; color:transparent; width: 12px; height: 18px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='18' viewBox='0 0 12 18' fill='none'%3E%3Cpath d='M1 1L11 9L1 17' stroke='%23BBBFC2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: contain;} .add-to-cart-text { font-size:16px; } .tab-content.slick-slider .slick-prev, .tab-contentn .slick-slider .slick-next { background:transparent; box-shadow:none; } .slick-prev.slick-disabled:before, .slick-next.slick-disabled:before { opacity:1; } .view-faq-btn { margin-top:50px; } .faq-content { padding:100px 0 55px 0; width:100%; max-width:1180px; margin:0 auto; } .faq-content .faq-content-heading p { margin-bottom:30px; } .faq-content .faq-info p { line-height:19px;} .faq-content .faq-info p a { color: #00AEEF; font-size: 16px;font-style: normal;font-weight: 400;line-height: 120%;text-decoration: underline; } .faq-section .faqpart_1 { min-width:280px; border-radius: 20px; background: #C2EDFE; padding:0 20px; height:fit-content; } .Pharmacovigilance-box { margin-bottom:60px; max-width:1430px !important; padding:29px 45px !important; color: #00AEEF; font-family: "Libre Franklin", sans-serif;font-size: 18px;font-style: normal;font-weight: 400;line-height: 107%;} .Pharmacovigilance-box p b { font-weight:700; } .Pharmacovigilance-box p a { text-decoration:underline; color:#00AEEF; } .faq-section .faqpart_2 .faq-question { padding: 30px 23px; background-color: transparent; display: flex; align-items:start; justify-content: space-between; margin: 0; text-transform: none; border:1px #BABABA solid; margin-top:30px; cursor:pointer; border-radius:30px; color: #303030; font-family: "Libre Franklin", sans-serif; font-size: 18px; font-style: normal; font-weight: 300; line-height:24px; } .faqpart_2 h3.faq-question.active{ color: #00AEEF; font-size: 18px; font-style: normal; font-weight: 600; line-height: 107%; /* 19.26px */ border-color:#00AEEF; border-bottom-color:#6C6C6C80; border-radius:30px 30px 0 0; margin-bottom:0; } .faq-section .faqpart_2 div.faq-answer.active{ border:1px #00AEEF solid; border-top:none; border-radius:0 0 30px 30px; } .faq-section .faqpart_2 { width:100%; } .faq-section .faqpart_2 div.faq-answer { padding: 20px 23px 0px 23px; background-color: #ffffff; margin-top: 0px; display: flex; justify-content: space-between; flex-wrap: wrap; margin-bottom: 0px; border-bottom: none; color: #626464; font-size: 16px; font-style: normal; font-weight: 300; font-family: "Libre Franklin", sans-serif; line-height: normal; transition:none !important; } .faq-section .faqpart_2 div.faq-answer p{ margin-bottom:30px; } .faq-section .faqsubmain { display: grid; gap: 30px; width: 100%; margin: 0 auto; grid-template-columns: 1fr 4fr; } .faq-section .faqpart_2 div.faq-answer li { color:#000; line-height:26px; } .faq-section .no-faq { font-style: normal; color: #000000; padding: 50px 10px; text-align: center; background: #cceffc; font-size: 20px; font-weight: bold; letter-spacing: 0.1rem; } .faq-section .faqpart_1 .faqgrp.active{ background-color: transparent; color:#2B4F9E; font-size:14px; padding:25px 0px; font-weight:600; } .faq-section .faqgrp { cursor: pointer; padding: 25px 0px; text-align: left; transition: background 0.3s; margin: 0; border:none; border-bottom: 1px solid #96ADDE; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: transparent; text-transform:none; color: #303030; font-size: 14px; font-style: normal; font-weight: 500; line-height: normal; font-family: "Libre Franklin", sans-serif; } .faq-section .faqgrp:last-child{ border-bottom:none; } .cms-content table thead th:first-child { min-width: 260px; } .faq-section #FaqMainDiv { margin-bottom:0;} .faqpart_2 .faq-question span svg { display:none; } .faqpart_2 .faq-question span { position:relative; height:15px; width:15px; } .faqpart_2 .faq-question span[data-arrow="plus"]{ width: 24px; height:24px; min-width:24px; display: inline-block; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-size: 11px 11px; margin-top: 0; border: 1px #000 solid; border-radius: 100%; padding: 0; background-position: center; } .faqpart_2 .faq-question span[data-arrow="minus"]{ width: 24px; height:24px; min-width:24px; display: inline-block; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='2' viewBox='0 0 10 2' fill='none'%3E%3Cpath d='M1 1H9' stroke='%2300AEEF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 11px 11px; margin-top: 0; border: 1px #00AEEF solid; border-radius: 100%; padding: 0; background-position: center; } .faqpart_2 .faq-group-name { font-family: "Libre Franklin", sans-serif; display: block !important; color: #2B4F9E; font-size: 28px; font-style: normal; font-weight: 600; line-height: normal; } @media screen and (min-width: 750px) { #FaqDivContent { padding: 0 !important; max-width: 1430px; } } .mobile-collection-section { width:100%; max-width:1834px; margin:0 auto; text-align:center; padding:0 15px; } .mobile-collection-section .collection-btn { margin:0 auto; } .mobile-collection-section .collection-btn a { color:#FFF; } .mobile-collection-section .collection-btn a:hover, .mobile-collection-section .collection-btn:hover a { color:#00AEEF; } /* Contact Page CSS Start */ .contact-info-box .contact-info > div { width: fit-content; } .contact-info-box { max-width:830px; width:100%; margin:0 auto; padding:30px 0 100px; } .contact-info-box .contact-info { display: flex; align-items: center; width: auto; justify-content: center; margin: 26px auto 0 auto; } .contact-info-box .contact-info a {font-family: "Libre Franklin", sans-serif; color: #00AEEF;text-align: center;font-size: 16px;font-style: normal;font-weight: 500;line-height: 120%; /* 19.2px */} .contact-info-box .contact-info img { margin:0 10px; height:10px; width:13px !important; object-fit:contain; } .visit-help-centre-detail { border-radius: 20px; background: #EFEFEF; padding:50px; width:100%; max-width:1430px; } .visit-help-centre-detail .help-centre-content p { margin-bottom:20px; color:#303030;font-family: "Libre Franklin", sans-serif;font-size: 16px; font-style: normal;font-weight: 400;line-height: 120%; /* 19.2px */} .get-in-touch .container { width:100%; max-width:1398px; padding: 0 15px 55px 15px; margin:0 auto; } .get-in-touch .get-in-touch__heading {position:relative; width:100%; max-width:80%; margin:0 auto 35px; font-weight: 500; display: flex; align-items: center; justify-content: center; gap: 20px; } .get-in-touch .get-in-touch__heading span { background:#FFF; padding:0 56px; color: #303030;font-family: "Libre Franklin", sans-serif;font-size: 28px; font-style: normal;font-weight: 400;line-height: 100%; /* 28px */ text-align: center; display:inline-block; z-index:1; } .get-in-touch .get-in-touch__heading::before { position:absolute; left:0; top:15px; width:100%; height:1px; background: #AEAEAE; content:""; } .get-in-touch__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px;} .contact-card { border-radius: 20px; padding: 40px 63px; text-align: center; } .contact-heading { display:flex; gap:10px; align-items:center; justify-content:center; border-bottom:1px #A0D8EE solid; padding-bottom:32px; margin-bottom:17px; } .contact-card .contact-heading h3 {margin:0; color: #00AEEF; font-family: "Libre Franklin", sans-serif;font-size: 20px;font-style: normal;font-weight: 600;line-height: 100%; /* 20px */ } .contact-card .contact-card-link a{font-family: "Libre Franklin", sans-serif; color: #00AEEF; font-size: 18px;font-style: normal;font-weight: 600;line-height: 38px; margin-bottom:5px; display:inline-block; width:fit-content; text-decoration:none; } .contact-card p {color: #00AEEF;font-family: "Libre Franklin", sans-serif;font-size: 18px;font-style: normal;font-weight: 500;line-height: 100%; /* 18px */ } .contact-card-link.has-btn a { display: inline-block;border-radius: 30px; margin-top:15px; text-decoration:none; background: #00AEEF; border:1px #00AEEF solid; color:#FFF; font-family: "Libre Franklin", sans-serif; height:38px; line-height:38px;color: #fff; padding: 0px 30px; border-radius: 30px;font-size: 14px;font-style: normal;font-weight: 500;} .contact-card-link.has-btn a:hover { background:#FFF; color:#00AEEF; } .collection-section-heading p { text-align:center; margin:0 !important; } .wholesale-enquiries-section .contact-card .contact-card-link a { margin-bottom:0; font-weight:500; } .wholesale-enquiries-section .contact-heading { padding-top: 14px; padding-bottom: 30px;} .wholesale-enquiries-section.get-in-touch .container { padding-bottom:100px; } .wholesale-enquiries-section .contact-card { border-radius: 20px;border: 1px solid #00ADEF;background: #FFF;} .custom-collection-list-wrapper-brands { display: flex; gap: 30px; margin-bottom: 25px; margin-top:30px; } .custom-collection-card { text-align: center; border-radius: 20px; } .custom-collection-card img { width: 100%; border-radius: 20px; } .custom-collection-card img.mobile-image { display:none; } .custom-collection-card__title { display: block; margin-top: 23px; font-weight: 700; } .custom-collection-list-wrapper-brands .slick-slide { padding: 0 10px; } .custom-collection-list-wrapper-brands .slick-list { margin: 0 -10px; } .custom-collection-card__button { margin-top: 12px; display: flex; justify-content: center; } @media (min-width: 768px) { .custom-collection-list-wrapper-brands { display: flex; gap: 30px; } } @media (min-width:1028) { .custom-collection-list-wrapper-brands { display: flex; gap: 40px; } } .biotics-banner slideshow-slide { height: 850px; } .biotics-banner .biotics-banner-caption { padding:50px 15px; width:100%; max-width:1650px; } .biotics-banner .biotics-banner-caption.right-alignment-content { padding-top:170px; } .biotics-banner .biotics-banner-caption.right-alignment-content .biotics-subheading p { margin-right:-50px; letter-spacing:49px; } .biotics-banner-caption .biotics-heading p{ font-family: "Libre Franklin", sans-serif; margin-bottom:0; font-size: 80px;font-style: normal;font-weight: 500;line-height: 100%; /* 80px */} .biotics-banner-caption .biotics-subheading p {font-family: "Libre Franklin", sans-serif;font-size: 109px; margin:0 0 10px 60px; font-style: normal;font-weight: 300;line-height: 118px;letter-spacing: 59px; } .biotics-banner slideshow-controls[controls-on-media][pagination-position=center] { margin-bottom: 25px; } /*** About us css start *****/ nav.breadcrumb .breadcrumb__list { display: flex; align-items: center; justify-content: start; padding: 0; margin: 0; } nav.breadcrumb .breadcrumb__list li { list-style: none; padding-right: 5px; color: #00AEEF;font-size: 14px;font-family: "Libre Franklin", sans-serif;font-style: normal;font-weight: 500;line-height: normal; } nav.breadcrumb .breadcrumb__list li a { color:#303030; } nav.breadcrumb .breadcrumb__list svg { margin-right:5px; } .about-content { max-width:1160px; margin:0 auto; } .about-content p { color: #303030;text-align: center; font-family: "Libre Franklin", sans-serif;font-size: 28px;font-style: normal;font-weight: 400;line-height: 120%; /* 33.6px */} .about-content p a { color: #00AEEF; text-decoration:none; } .brand-content { max-width:1140px; margin:0 auto; } .about-right-content { width:50%; padding-left:50px; } .about-right-img { width:50%; padding-right:15px; } .about-left-img { width:50%; padding-left:15px; } .about-left-content { padding-right:50px; } .about-image-text .content p{ margin:30px 0 45px; max-width:740px; width:100%; } .about-discover-banner-section { margin-bottom:100px; } .about-discover-banner-section .about-discover-content .h3 p {margin-bottom:40px; color: #303030;font-family: "Libre Franklin", sans-serif;font-size: 80px;font-style: normal;font-weight: 500;line-height: 100%; /* 80px */} .about-discover-banner-section .about-discover-content .h3 p strong { color: #FFF;font-size: 100px;font-style: normal;font-weight: 500;line-height: 100%; } .about-discover-banner-section .about-discover-content .content p { margin-bottom:60px; color: #303030;font-family: "Libre Franklin", sans-serif;font-size: 18px; font-style: normal;font-weight: 600;line-height: 120%; /* 21.6px */ } .banner-caption { width:100%; padding-top:22px; padding-bottom:55px; min-height:400px; } .banner-caption .banner-heading p, .gut-health-slide-content .banner-heading p, .banner-caption .banner-heading { margin-bottom:20px; color: #00ADEF;font-size: 40px;font-family: "Libre Franklin", sans-serif; font-style: normal;font-weight: 500;line-height: 100%; /* 40px */} .banner-caption .banner-content p, .gut-health-slide-content .banner-content p, .gut-health-slide-content .banner-content, .banner-caption .banner-content, .gut-health-slide-content .banner-content { margin-bottom:25px; color: #303030; font-family: "Libre Franklin", sans-serif;font-size: 16px;font-style: normal;font-weight: 400;line-height: 120%; /* 19.2px */} .banner-caption .banner-heading p, .gut-health-slide-content .banner-heading p, .banner-caption .banner-content p, .gut-health-slide-content .banner-content p{ margin-bottom:0; } .microbial-promo-banner-content { padding:100px 0; max-width:842px; width:100%; } .microbial-promo-banner-content .microbial-promo-banner-title p { margin-bottom:50px; color: #FFF;font-family: "Libre Franklin", sans-serif;font-size: 80px;font-style: normal;font-weight: 500;line-height: 100%; /* 80px */} .microbial-promo-banner-content .microbial-promo-banner-title p strong { font-weight:500; font-size:100px; } .microbial-promo-banner-content .promo-banner-text p { margin-bottom:60px; color:#FFF;font-family: "Libre Franklin", sans-serif; font-size: 18px;font-style: normal;font-weight: 600;line-height: 120%; /* 21.6px */} /* Store Locatore */ .store-locatore-tab { padding:100px 0; } .store-locatore-tab .tabs { display:flex; column-gap:19px; justify-content:center; align-content:center; margin-bottom:65px; } .store-locatore-tab .tabs .tab { cursor:pointer; list-style:none; padding:9px 30px; border-radius: 30px; border: 1px solid #00AEEF;color: #00AEEF;font-family: "Libre Franklin", sans-serif;font-size: 14px;font-style: normal;font-weight: 600;line-height: normal; } .store-locatore-tab .tabs .tab.active { background:#00AEEF; color:#FFF; } .store-locatore-tab .store-detail { width:23.6%; border-radius: 20px; border: 2px solid #AEAEAE; padding:39px 45px; } .store-locatore-tab .store-detail img { height:85px; width:auto; object-fit:contain; } .store-locatore-tab .tab-content { display:none; align-items:center; row-gap:40px; column-gap: 30px; justify-content:center; flex-wrap:wrap; } .store-locatore-tab .tab-content.active { display:flex; } .store-locatore-tab .store-detail:hover { border-color:#00AEEF; } /**** Megamenu CSS Start *****/ .menu-list__link .menu-list__link-title { color: #00AEEF;font-size: 20px;font-style: normal;font-weight: 600;line-height: normal; font-family: "Libre Franklin", sans-serif;} .menu-list__list-item .arrow-span-svg svg { width:19px; height:10px; margin-left:10px; } .shop-mega-menu .resource-card__image { aspect-ratio: auto; } .shop-mega-menu { padding:50px 0 33px 0; } .shop-mega-menu .main-megamenu[data-menu-grid-id="MegaMenuList-1"] { display:flex; justify-content:space-between;gap:97px; } .shop-mega-menu .main-megamenu .mega-menu__list { display:flex; width:60%; gap:0; } .shop-mega-menu .main-megamenu .mega-menu__list .mega-menu__column:first-child { width: 28%;} .shop-mega-menu .main-megamenu .mega-menu__list .mega-menu__column { width: 38%; border-right: 1px #BDBDBD solid; padding-right: 50px; margin-right: 50px;} .shop-mega-menu .main-megamenu .mega-menu__list .megamenu-heading{ color: #303030;font-size: 18px;font-style: normal; font-family: "Libre Franklin", sans-serif; margin-bottom:40px; font-weight: 700;line-height: normal; } .shop-mega-menu .main-megamenu .mega-menu__list .mega-menu__column ul li .mega-menu__link{ color: #303030;font-size: 14px;font-style: normal;font-weight: 400;line-height: normal; margin-bottom:22px; } .shop-mega-menu .mega-menu__list .mega-menu__column:last-child { margin-right: 0; padding-right: 0; border-right: none;} .shop-main-menu-list.menu-list__list-item { position:static; } .shop-mega-menu .mega-menu__grid { display:grid; } .shop-main-menu-list.menu-list__list-item:has([aria-expanded=true])>.menu-list__submenu { min-width:auto; } .menu-list__list-item:where(:not([slot=overflow]))>.menu-list__submenu { min-width:300px; padding-top:28px; } .overflow-menu:after { display:none; } li.menu-list__list-item { position:relative; margin:0 0 0 60px; } li.menu-list__list-item:first-child { margin-left: 0; } .mega-menu__grid{ display:flex !important; } .mega-menu__grid ul, .mega-menu__grid ul .mega-menu__column { width:100%; } .shop-mega-menu .mega-menu__content-list--products { gap:30px; } .shop-mega-menu .resource-card__content .resource-card__title { color: #00AEEF;font-size: 16px;font-style: normal;font-weight: 400;line-height: normal;} .shop-mega-menu .resource-card__content { gap:0; } /*** Help Center Page CSS Start **/ .quick-link-box { margin: 50px 0 100px 0; } .quick-link-box > .layout-panel-flex{ gap:30px; } .quick-link-box .quick-link { text-align:center; border-radius: 10px; padding:29px; } .quick-link-box .quick-link p { font-family: "Libre Franklin", sans-serif; margin-top:10px; color: #00AEEF;font-size: 18px;font-style: normal;font-weight: 700;line-height: 19.26px;} .blog-ajax-search { padding: 100px 20px 90px 20px; } .blog-categories { margin: 0 auto; max-width: 1750px; padding:0 50px; } .blog-ajax-search .search-container { max-width: 687px; margin: 0 auto; position: relative; } .blog-ajax-search .search-box { display: flex; align-items: center; padding: 10px 10px 10px 20px; border-radius: 30px; background: #FFF; box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25); } .blog-ajax-search .search-icon { color: #303030; } .blog-ajax-search .blog-search-input { flex: 1; border: none; outline: none; padding: 0 10px; color: #303030; font-size: 15px; font-style: normal; font-weight: 400; line-height: 15px; font-family: "Libre Franklin", sans-serif; } .blog-ajax-search .search-btn { background: #00a8e8; color: #fff; border: none; padding: 10px 30px; border-radius: 30px; cursor: pointer; color: #FFF; font-size: 16px; font-style: normal; font-weight: 500; line-height: normal; font-family: "Libre Franklin", sans-serif; border:1px #00a8e8 solid; } .blog-ajax-search .search-btn:hover { background: #FFF; color:#008fc5; } /* Results dropdown */ .blog-ajax-search .search-results { position: absolute; top: calc(100% + 12px); left: 0; right: 0; background: #fff; border-radius: 16px; box-shadow: 0 15px 40px rgba(0,0,0,0.1); overflow: hidden; z-index: 99; } .blog-ajax-search .search-item {padding: 14px 20px; border-top: 1px solid #f1f1f1;} .blog-ajax-search .search-item:first-child { border-top: none; } .blog-ajax-search .search-item a {text-decoration: none;color: #111; font-weight: 500; display: block;} .blog-ajax-search .search-item a:hover {color: #00a8e8;} .blog-categories-heading { margin-bottom: 32px;} .blog-categories-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top:40px; } /* Card */ .blog-category-card { display: block; overflow: hidden; background: #fff; text-decoration: none; color: inherit; transition: transform 0.25s ease, box-shadow 0.25s ease; border-radius: 20px; border: 1px solid #00AEEF; } .blog-category-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); } /* Image */ .blog-category-image img { width: 100%; height: 203px; object-fit: cover; display: block; } /* Content */ .blog-category-content { padding: 30px 30px 25px 30px; } .blog-category-content strong { display: block; margin-bottom:15px; color: #303030; font-size: 16px; font-style: normal; font-weight: 700; line-height: 16px; font-family: "Libre Franklin", sans-serif; } .blog-category-content span { color: #303030; font-family: "Libre Franklin", sans-serif; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; } .facets__filters-wrapper .facets__panel { padding-top: 10px;} .accordion.campaign-acc{ width:100%; max-width:1430px; width:100%; margin:0 auto; } .accordion-item { border:1px #626464 solid; display:inline-block; color:#626464; width:100%; border-radius:30px; padding:0px 0; margin-top:30px; } .faq-banner-content{ padding:185px 0; max-width:776px; } .faq-banner-content .microbial-promo-banner-title p { color: #FFF; font-family: "Libre Franklin", sans-serif; font-size: 80px; font-style: normal; font-weight: 500; line-height:80px; margin-bottom:30px; } .faq-banner-content.help-center-banner{ padding:174px 0; max-width:776px; } .faq-banner-content.help-center-banner .promo-banner-text p { font-weight:400; } .faq-banner-content .microbial-promo-banner-title p strong{font-family: "Libre Franklin", sans-serif; color: #FFF;font-size: 100px;font-style: normal;font-weight: 500;line-height: 100%;} .faq-banner-content .promo-banner-text p{ color:#FFF; font-family: "Libre Franklin", sans-serif; font-size: 16px; font-style: normal; font-weight: 500; line-height: 19.2px; margin-bottom:60px; } .marquess-section { text-align:center; } .marquess-section .marquee__content { margin-top:39px; } .marquess-section .marquee-item, .marquess-section .marquee-item:not(:last-child) { margin-right:117px; } .marquess-section .marquee__content .marquee__repeated-items .marquee-item { height:auto; width:150px; } .marquess-section .marquee__content .marquee__repeated-items img { width:100%; height:auto; object-fit:contain; } .product-card span.custom-product-tag { position: absolute; z-index: 1; background: #FFF; border-radius: 30px; padding: 8px 10px 7px 10px; font-weight: 400; font-size: 16px; line-height: 100%; text-align: center; left: 15px; top: 15px; } .product-badges .product-badges__badge { background:#0055B8; color:#FFF; padding: 8px 10px 7px 10px; font-weight: 400; font-size: 16px; line-height:16px; left: 15px; top: 15px; } .shop-mega-menu .resource-card__content span.mega-menu-btn { color: #00AEEF; font-size: 14px; font-style: normal; font-weight: 600; line-height: normal; border-bottom: 1px #00aeef solid; margin-top: 19px; display: inline-block; font-family: "Libre Franklin", sans-serif; text-transform:capitalize; } .shop-mega-menu .resource-card__content span.mega-menu-btn:hover{ border-bottom:none; } .product-card span.custom-product-tag.limited-offer-tag{ color:#00AEEF; } .product-card span.custom-product-tag.best-seller-tag{ background:#EB1264; color:#fff; } .product-card span.custom-product-tag.new-tag{ background:#000000; color:#fff; } .product-badges .product-badges__badge.sold-out-tag { background:#F00; color:#FFF; } .account-popover__panel a.account-actions__link.button-secondary.user-icon svg { height: 20px; width: 17px;} /*** Google Review CSS Start ***/ div.okeReviews .is-current .oke-reviewCard { background:#FFF !important; } .okeReviews[data-oke-container] .is-current .oke-title, div.okeReviews .is-current .oke-title, .okeReviews[data-oke-container] .is-current .oke-w-reviewer, div.okeReviews .is-current .oke-w-reviewer { color:#00AEEF !important; } .okeReviews[data-oke-container] .is-current .oke-bodyText, div.okeReviews .is-current .oke-bodyText { color:#303030 !important; } .okeReviews[data-oke-container] .oke-reviewCarousel-reviews-review, div.okeReviews .oke-reviewCarousel-reviews-review { padding:0 15px !important; } .okeReviews[data-oke-container] .oke-reviewCard, div.okeReviews .oke-reviewCard {padding:50px !important; border-radius: 30px; border: 1px solid #FFF;background: rgba(0, 174, 239, 0.47);backdrop-filter: blur(2.200000047683716px); } .okeReviews[data-oke-container] .oke-reviewCarousel, div.okeReviews .oke-reviewCarousel { max-width:1650px !important; padding:15px 0 0 0 !important; } .okeReviews[data-oke-container] .oke-title, div.okeReviews .oke-title { font-family: "Libre Franklin", sans-serif;!important; color: #FFF;font-size: 30px !important;font-style: normal;font-weight: 600 !important; line-height: normal;} .okeReviews[data-oke-container] .oke-bodyText, div.okeReviews .oke-bodyText {color: #FFF;font-family: "Libre Franklin", sans-serif;!important;font-size: 20px !important;font-style: normal;font-weight: 300 !important;line-height: 100%; /* 28px */} .okeReviews[data-oke-container] .oke-reviewContent-date, div.okeReviews .oke-reviewContent-date, .okeReviews[data-oke-container] .oke-reviewCard-head .oke-reviewCard-product, div.okeReviews .oke-reviewCard-head .oke-reviewCard-product, .okeReviews[data-oke-container] .oke-reviewCard .oke-w-review-footer, div.okeReviews .oke-reviewCard .oke-w-review-footer { display: none !important; } .okeReviews[data-oke-container] .oke-w-reviewer, div.okeReviews .oke-w-reviewer { color: #FFF;font-size: 22px !important;font-family: "Libre Franklin", sans-serif;!important;font-style: normal;font-weight: 500 !important;line-height: 100%; /* 28px */text-transform: uppercase;} strong.oke-w-reviewer-name { font-weight: 500; } .okeReviews[data-oke-container] .oke-is-large .oke-w-review-side { flex-basis:430px !important;} div.okeReviews .oke-reviewCard-content { margin-bottom:35px !important; } .okeReviews[data-oke-container] p, div.okeReviews p { line-height:26px !important; } /* .okeReviews[data-oke-container] .oke-reviewContent-body p { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } */ .okeReviews[data-oke-container] .oke-prevNextButton-icon, div.okeReviews .oke-prevNextButton-icon { box-shadow:0 0 6px 0 rgba(0, 0, 0, 0.20); background: #FFF; border-radius: 100%; height: 58px !important; width: 58px !important; display: flex !important; align-items: center; justify-content: center;} .okeReviews[data-oke-container] .oke-reviewCard--below .oke-reviewCard-head, div.okeReviews .oke-reviewCard--below .oke-reviewCard-head { border-top:1px #D7D7D7 solid !important; padding-top:24px !important; margin-bottom:0 !important; } .okeReviews[data-oke-container] .oke-reviewContent-title { margin-top:20px !important; } .okeReviews[data-oke-container] .oke-prevNextButton--next .oke-prevNextButton-icon:before, div.okeReviews .oke-prevNextButton--next .oke-prevNextButton-icon:before, .okeReviews[data-oke-container] .oke-prevNextButton--prev .oke-prevNextButton-icon:before, div.okeReviews .oke-prevNextButton--prev .oke-prevNextButton-icon:before { font-size:32px; color:#00AEEF !important; } span.oke-reviewContent-readMore-text.oke-bodyText { text-decoration: underline; } /* .okeReviews[data-oke-container] .oke-prevNextButton-icon, div.okeReviews .oke-prevNextButton-icon:hover { background:#00AEEF; } */ .oke-modal--large.oke-modal .okeReviews[data-oke-container].oke-w, .oke-modal div.okeReviews.oke-w { padding:20px; } .oke-modal--large.oke-modal .okeReviews[data-oke-container] .oke-w-reviewer-identity, .oke-modal--large.oke-modal div.okeReviews .oke-w-reviewer-identity { color:#000 !important; font-size:19px !important; } .oke-modal--large.oke-modal .okeReviews[data-oke-container] .oke-w-reviewer-verified, .oke-modal--large.oke-modal div.okeReviews .oke-w-reviewer-verified { font-size:14px !important; } .slick-slider .slick-prev { left:-5px; } .slick-slider .slick-next { right:-15px; } .slick-slider .slick-prev, .slick-slider .slick-next { top:54%; background:#FFF; border-radius:100%; box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.20); height: 58px; width: 58px; z-index: 1; display: flex; justify-content: center; align-items: center;} .slick-slider .slick-prev:before { color:transparent; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='16' viewBox='0 0 10 16' fill='none'%3E%3Cpath d='M9 1L1 8L9 15' stroke='%2300AEEF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat;background-size: contain;background-position: center; } .slick-slider .slick-next:before { color:transparent; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='16' viewBox='0 0 10 16' fill='none'%3E%3Cpath d='M1 1L9 8L1 15' stroke='%2300AEEF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat;background-position: center;background-size: contain;} .section-resource-list .product-slider-container .slick-slider { margin-bottom:0; } .tab-content .slick-slider .slick-prev, .tab-content .slick-slider .slick-next { background:#FFF; border-radius:0; box-shadow:none; top:75%; } .slick-dots li.slick-active button:before { opacity: 1; color: #00AEEF; border-color: #00AEEF;} .slick-dots li button:before { font-size: 10px; opacity:1; line-height: 18px;width: 16px; height: 16px;border: 1px #2B4F9E solid; border-radius: 100%;color:#FFF;} .announcement-bar { background:#00aeef !important; z-index:4; } .header-menu-active { position:relative; width:100%; height:100%; overflow:hidden; } .header-menu-active:before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.40); content: ""; z-index: 4; } button.button.predictive-search__close-modal-button { padding:0 12px; } .predictive-search-results__wrapper-products .resource-card__title { font-size:14px; margin-bottom:10px; } .predictive-search-results__wrapper-products .resource-card__image { object-fit:contain; aspect-ratio:auto; } .predictive-search-results__wrapper-products .resource-card__content .price { font-size:18px; } .predictive-search-form__content-wrapper .predictive-search-results__title { font-size:20px; } .faq-bottom-banner { margin-bottom:100px; } .microbial-banner { margin-bottom:100px; } .product_banner_info_images { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top:40px; } .product_banner_info_images .banner-img img { border-radius: 20px; } .shop-by-range-section.padding-100.pb-0 { padding-top:95px; } .meta-shop-by-range.shop-by-range-section .tab-content .slick-track { transform:none !important; width:auto !important; } /**** Product-detail CSS Start ***/ .product .breadcrumb { margin-top:30px; } .the-life-space-difference .main-div {border-radius: 20px; position: relative; padding:95px 50px 100px 50px; text-align:center; } .the-life-space-difference .main-div:after { border-radius: 20px; background: rgba(0, 0, 0, 0.30); content: ''; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 0;} .the-life-space-difference .collection-section-heading { text-align:center; color:#FFF; margin-bottom:44px; position:relative; z-index:1; } .the-life-space-difference .image_with_text_and_button { justify-content:center; background:#AEAEAE80; flex-wrap: wrap; row-gap: 50px; position:relative; z-index:1; fill: rgba(174, 174, 174, 0.50); backdrop-filter: blur(12px); border-radius:20px; padding:50px 0px 44px 0px; margin:0px; } .the-life-space-difference .main-icon-with-text-div { text-align: center; display: flex; width: 25%; flex-direction: column; justify-content: start; align-items: center;} .the-life-space-difference .image_with_text_and_button .icon { margin-bottom:18px; height:80px; width:auto; object-fit:contain; filter: brightness(0) invert(1); } .the-life-space-difference .image_with_text_and_button .heading {max-width:240px; font-family: "Libre Franklin", sans-serif; color: #FFF;text-align: center;font-size: 16px;font-style: normal;font-weight: 600;line-height: 100%; /* 16px */} .product-details .text-block.h3 > *, .prod-title-mobile h1 { margin-bottom:35px; color: #303030; font-family: "Libre Franklin", sans-serif; font-size: 32px;font-style: normal;font-weight: 600;line-height: 100%; /* 32px */} .prod-title-mobile { display:none; } .product-details .okeReviews[data-oke-container] svg * { --oke-stars-foregroundColor: #00aeef !important; } .product-details .oke-sr-count { font-size:16px !important; position: relative; padding-left: 10px; } .product-details .oke-sr-count:after { position: absolute; left: 0;top: 3px; height: 80%; width: 1px; background: #303030; content: '';} .product-details .okeReviews { margin-bottom:16px; } .product-details .main-price .compare-at-price { font-family: "Libre Franklin", sans-serif; color: #303030;font-size: 25px;font-style: normal;font-weight: 400;line-height: 100%; /* 25px */text-decoration-line: line-through;} .product-details .main-price { display:flex; align-items:end; margin-bottom:28px; gap:15px; } .product-details .main-price .currency { color: #303030; font-family: "Libre Franklin", sans-serif;font-size: 40px;font-style: normal;font-weight: 400;line-height: 100%; /* 40px */ } .product-details .main-price .price { font-weight:700; color: #303030; font-family: "Libre Franklin", sans-serif;font-size: 40px;font-style: normal; line-height: 100%; /* 40px */ } .product-details .product-description p{ margin-bottom:10px; color: #303030;font-family: "Libre Franklin", sans-serif; font-size: 16px;font-style: normal;font-weight: 400;line-height: 120%; /* 19.2px */} .product-details ul { margin-block-end:10px !important; } .product-details .product-group.product-key-benefits { padding:17px 27px 0px 27px; margin-bottom:40px; margin-top:17px; } .product-details .product-group.product-key-benefits h2 {font-family: "Libre Franklin", sans-serif; color: #00AEEF;font-size: 20px;font-style: normal;font-weight: 700;line-height: 100%; /* 20px */} .product-details .product-group.product-key-benefits p { margin-top:23px; } .product-details .product-group.product-key-benefits ul { margin:13px 0 0 0; padding:0 0 0 18px; display:inline-block; width:100%; } .product-details .product-group.product-key-benefits ul li { font-family: "Libre Franklin", sans-serif; line-height: 18px; margin-bottom: 14px; color:#303030;font-size: 16px;font-style: normal;font-weight: 400; } /* .product-details .variant-picker__form { margin-bottom:40px; } */ .product-details .variant-picker__form legend { font-family: "Libre Franklin", sans-serif; margin-bottom:20px; color: #303030;font-size: 20px;font-style: normal;font-weight: 600;line-height: 100%; /* 20px */} .product-details .variant-option__button-label { display:flex; flex-direction:column; padding:27px; width: 30%; flex: 0 0 30%; margin-right: 0px; } .product-details .variant-option__button-label:last-child { margin-right:0; } .product-details .variant-option__button-label .variant-option__button-label__text{ margin-bottom:31px; text-transform:capitalize; font-family: "Libre Franklin", sans-serif; color:#303030;font-size: 18px;font-style: normal;font-weight: 400;line-height: 120%; /* 21.6px */} .product-details .variant-option-price-wrapper { display:flex; align-items:center; gap:10px; position:relative; } .product-details .variant-option-price-wrapper.price-old .variant-option-price, .product-details .variant-option-price-wrapper.price-old .variant-option-currency, .snippet-addto-cart .subscription-plan-option.is-active .variant-option-price-wrapper.price-old .variant-option-price.price-old {color: #474B4E;text-align: center; font-family: "Libre Franklin", sans-serif; font-size: 15px;font-style: normal;font-weight: 400; line-height: 100%; /* 15px */text-decoration-line: line-through;} .product-details .pto-inner .variant-option-price-wrapper .variant-option-currency{ color: #303030; font-family: "Libre Franklin", sans-serif; font-size: 18px; font-style: normal; font-weight: 400; line-height: 100%; /* 18px */} .product-details .pto-inner .variant-option-price-wrapper .variant-option-price{ color: #303030; display:flex; gap:5px; font-size: 18px; font-style: normal; font-weight: 700; line-height: 100%; /* 18px */} .product-details .is-selected .pto-inner .variant-option-price-wrapper .variant-option-price { color:#00aeef; } .product-details form .product-form-buttons { margin-bottom:40px; margin-top:40px; } .product-details .variant-option--buttons { gap:30px; } .product-warning-text { border-radius:10px; } .accordion.custom-acc .accordion-item { border:none; border-top:1px #00ADEF78 solid; border-radius:0; padding:29px 0; margin-top:0;} /* .accordion.custom-acc .accordion-item:first-child { margin-top:39px; } */ .accordion.custom-acc .accordion-item:last-child { border-bottom: 1px #00ADEF78 solid; } .accordion.custom-acc .accordion-item-header { color: #303030;font-size: 20px;font-style: normal;font-weight: 600;line-height: 100%; /* 20px */} .accordion.custom-acc .accordion-item-body-content { padding:19px 0 24px 0; } .accordion.custom-acc .accordion-item-body-content:last-child { padding-bottom:0; } .accordion.custom-acc .accordion-item-body-content .heading {display:inline-block; width:100%; margin-bottom:13px; color: #00AEEF;font-size: 18px;font-style: normal;font-weight: 600;line-height: 100%; /* 18px */} .accordion.custom-acc .accordion-item-body-content .sub-heading { margin:0 0 24px 0; } .accordion.custom-acc .accordion-item:first-child .accordion-item-body-content p:last-child { margin-top:30px; text-align:left !important; } .accordion.custom-acc .accordion-item-body .accordion-bottom { margin-top:20px; } .accordion.custom-acc .accordion-table table { width:100%;border-radius: 5px; border: 1px #A6A6A6 solid; border-spacing: 0; } .accordion.custom-acc .accordion-table table thead { border-radius: 5px 5px 0 0; background: #F3F3F3;} .accordion.custom-acc .accordion-table table thead th { padding:16px 20px; width:50%; text-align:left; } .accordion.custom-acc .accordion-table table tbody td { padding:15px 20px; } .accordion.custom-acc .accordion-table table tbody tr td:first-child { font-style:italic; } .accordion.custom-acc .accordion-table table tbody tr:nth-child(even){ background:#F3F3F3;} .ingredients-dosage p strong { color:#303030; font-family: "Libre Franklin", sans-serif; margin-bottom:24px; margin-top:12px; display:inline-block; font-size: 20px;font-style: normal;font-weight: 400;line-height: 100%; /* 20px */} .product-group.product-warning-text { padding:18px 23px; color: #00AEEF; margin-bottom:39px; font-size: 16px; font-family: "Libre Franklin", sans-serif; font-style: normal;font-weight: 400;line-height: 193%; /* 30.88px */ } .product-details .variant-option__button-label:has(:checked) .variant-option-price{color:#00AEEF; } .product-details .variant-option__button-label:has(:checked) .variant-option-currency { color:#303030; } .product-details .variant-option__button-label .variant-option-currency {font-family: "Libre Franklin", sans-serif; color: #303030;font-size: 18px;font-style: normal;font-weight: 400;line-height: 100%; /* 18px */} .product-details .variant-option__button-label .variant-option-price { font-weight:700; font-size:18px; } .probiotic-handling-storage-section { margin:0 auto; max-width:1270px; } .probiotic-handling-storage-section .text-block.h3>* { margin-bottom:30px; } header header-component[data-sticky-state="active"] { box-shadow:0px 0px 14px 9px rgba(0, 0, 0, 0.1); } .faqs { width:100%; } .faq .faqs .faq-accordion h2{ color: #303030;font-size: 28px; font-family: "Libre Franklin", sans-serif; margin-bottom:0; font-style: normal;font-weight: 400;line-height: 100%; /* 28px */} .faqs .image { width: 42%; border:1px #ddd solid; border-radius:30px; } .faq .faqs .faq-accordion { max-width: 814px; width: calc(100% - 580px); padding-left: 6px; } .faq .faqs .accordion--dividers accordion-custom:first-child .details { margin-top:40px; } .faq .faqs .accordion .details__header { padding:27px 24px; } .faq .faqs .accordion--dividers .details-content { padding:16px 23px 33px; } /* .product-detail-faq > .main-div { padding:100px 0; } */ .key-ingredients-their-benefits > .main-div { padding:93px 0 0 0; } .slick-dotted.slick-slider.key-in-container { margin:0 -15px; display:block; overflow:hidden; padding-bottom:30px; } .key-in-container .slick-slide { padding: 0 15px; } .key-in-container .slick-dots { bottom:0px; } .key-ingredients-their-benefits .image_with_text_and_button { width:100%; } .key-ingredients-their-benefits .grid-key-ingredients-their-benefits .icon { border-radius:20px 20px 0 0; } .key-ingredients-their-benefits .key-ingredient-info { margin-bottom:30px; border-radius: 0 0 20px 20px; background: #D9F3FD; padding:27px 30px 37px; } .key-ingredients-their-benefits .key-ingredient-info .heading { overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical; min-height:32px; margin-bottom:7px; font-family: "Libre Franklin", sans-serif; color: #303030;font-size: 16px;font-style: normal;font-weight: 700;line-height: 100%; /* 16px */} .key-ingredients-their-benefits .key-ingredient-info .description p { min-height:54px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; color:#303030; font-family: "Libre Franklin", sans-serif; font-size: 14px;font-style: normal;font-weight: 400;line-height: normal;} .key-ingredients-their-benefits .collection-section-heading { margin-bottom:44px; text-align:center; } .cms-content-detail a { color:#00AEEF; text-decoration:underline; } .cms-content-detail a:hover { text-decoration:none; } .cms-content-detail table { max-width: 50%; border: 1px #f1f1f1 solid; margin-bottom: 30px; font-family: "Libre Franklin", sans-serif;} .cms-content-detail table td, .cms-content-detail thead th { border-right:1px #f1f1f1 solid; } .cms-content-detail table td::last-child, .cms-content-detail thead th:last-child { border-right:none; } .cms-content-detail table p { margin:0; } .cms-content-detail ul li::marker {color: #00AEEF; } .cms-content-detail thead th { background:#E3F6FD; font-weight:600; font-family: "Libre Franklin", sans-serif;} .cms-content-detail table td span { font-weight:600; display:block;} .faq-number { min-width:110px; } .campaign-tab-detail .campaign-tab { margin-bottom:80px; } .campaign-content .content { margin:30px auto 0 auto; max-width:1230px; width:100%; color: #303030;font-family: "Libre Franklin", sans-serif; text-align: center;font-size: 16px;font-style: normal;font-weight: 400;line-height: 120%; /* 19.2px */ } .key-benefits-detail { padding-right:70px; } .key-benefits-detail .key-benefits-listing { padding-right:66px; } .key-benefits-detail .key-benefits-content p { margin:30px 0 10px 0 !important; color:#303030;font-size: 16px;font-family: "Libre Franklin", sans-serif; font-style: normal;font-weight: 400;line-height: 120%; /* 19.2px */ } .key-benefits-detail .key-benefits-listing p { position:relative; padding:25px 0; margin:0; width:100%; font-weight:500; } .key-benefits-detail .key-benefits-listing p:after { background: linear-gradient(90deg, #00AEEF 0%, rgba(0, 174, 239, 0.00) 100%); position:absolute; left:0; bottom:0; content:''; width:100%; height:2px; } .key-benefits-detail .key-benefits-listing .text-block:last-child p:after { display:none; } .campaign-faq { max-width: 1510px; margin: 0 auto; } .campaign-faq .Pharmacovigilance-box { margin-bottom:0; } .choose-life-space-section { max-width: 1510px; margin: 0 auto; } .choose-life-space-section .sub-content { width:100%; max-width:718px; margin:30px auto 75px auto; } .choose-life-space-section .choose-life-space-box { overflow:visible !important; padding:0 71px 31px 71px; height:100%; } .choose-life-space-section .choose-life-space-box .choose-sub-content p {font-family: "Libre Franklin", sans-serif; color:#303030; margin:15px 0 0 0 !important;text-align: center;font-size: 14px;font-style: normal;font-weight: 400;line-height: normal;} .choose-life-space-section .icon-block { border-radius: 20px; background: #00AEEF; padding:20px; margin-top:-25px; margin-bottom:30px; } .education-resources-content { max-width:742px; width:100%; margin:30px 0 50px 0; color: #303030;font-family: "Libre Franklin", sans-serif; text-align: center;font-size: 16px;font-style: normal;font-weight: 400;line-height: 120%; /* 19.2px */} .education-resource-img img { border-radius:20px 20px 0 0; } .education-box { padding:30px 14px 30px 30px; border-radius:0 0 20px 20px !important; } .education-box p {font-family: "Libre Franklin", sans-serif; color:#303030;font-size: 14px;font-style: normal;font-weight: 400;line-height: normal;} .education-box .education-subheader h5 { margin:15px 0 8px; font-family: "Libre Franklin", sans-serif; color:#303030;font-size: 16px;font-style: normal;font-weight: 700;line-height: 100%; /* 16px */} .education-box .heading p { color:#0077C8;font-size: 14px; font-family: "Libre Franklin", sans-serif; font-style: normal;font-weight: 500;line-height: normal;text-transform: uppercase;} .education-resources-section { padding:100px 0 0px 0; } .specifically-formulated-content { padding:110px 75px 70px 75px; } .specifically-formulated-content .heading h1 { margin-bottom:15px; color: #FFF;font-family: "Libre Franklin", sans-serif; font-size: 80px;font-style: normal;font-weight: 500;line-height: 90px; } .specifically-formulated-content .heading h1 strong { font-size: 100px; font-weight:500; } .specifically-formulated-content .description p { width:100%; max-width:653px; margin:0 0 59px 0; color: #FFF;font-size: 16px;font-family: "Libre Franklin", sans-serif; font-style: normal;font-weight: 300;line-height: 160%; /* 25.6px */} .faqs img.faq-image { width: 100%; margin:0 auto; max-width: 604px; object-fit: contain; height: 100%; padding-right:20px; border-radius:30px; } .button-secondary.campaign-active { background:#00AEEF; color: var(--color-secondary-button-background); } .authenticity-section { max-width:1270px; margin:0 auto; width:100%; display:flex; align-items:start; } .gut-main-section {padding-left:15px !important; padding-right:15px !important; } .authenticity-section .authenticity-section-info { padding:0 20px; } .authenticity-section .group-block-content { align-items:start; } .authenticity-section .authenticity-box { background:#FFF; border-radius:20px; padding:0 0 20px 0; } .authenticity-section .authenticity-box.gut-authenticity-box { box-shadow: 0px 1px 10px 2px rgba(0, 0, 0, 0.1);} .contact-content p { max-width:800px; margin:20px auto 0 !important; text-align:center; color: #303030; font-family: "Libre Franklin", sans-serif; text-align: center; font-size: 16px; font-style: normal; font-weight: 400; line-height: 120%;} .contact-content p a { color:#00AEEF; } .authenticity-section .authenticity-box h3, .authenticity-section .authenticity-box h3 strong { color: #303030;font-family: "Libre Franklin", sans-serif;font-size: 20px; margin:20px 0; font-style: normal;font-weight: 500;line-height: normal;} .authenticity-section .authenticity-box p { display: -webkit-box;-webkit-line-clamp: 4;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis; min-height:71px; color: #303030;font-family: "Libre Franklin", sans-serif;font-size: 14px; margin-bottom:0px; font-style: normal;font-weight: 400;line-height: normal; } .collection-card__image {border-radius: 20px; background: #efefef;} .collection-card__content p{ font-weight:600; } .facets-toggle__wrapper button.button.facets-toggle__button { color: #FFF; font-size: 18px; background: #2b4f9e; border-radius: 20px; padding: 10px 20px 10px 15px;} .product-information { padding: 92px 0 100px 0; } .product-media .zoom-icon { height: 49px; width: 49px; border-radius: 30px; background: #00adef; display: flex; align-items: center; justify-content: center; position: absolute; right: 18px; top: 18px;} .product-information__media slideshow-arrows { mix-blend-mode:normal; margin:0 18px; } .custom-typography p strong { margin: 0 4px; } .pdp-review-section.review-section .marquee-icon { height:80px; width:auto; } .pdp-review-section.review-section .marquee-container { padding: 58px 0; } .pdp-review-section.review-section .marquee-item { gap:22px; } .product-details .oke-sr-count .oke-sr-label-text { display: none !important; } /* .shop-by-range-section .tab-content .slick-slide { width:auto !important; } */ .collection-wrapper { padding:0 20px; } .campaign-collection-product .view-all-button { margin-top:30px; } /** slider loading issuue fix css **/ /* .category-product-slider:not(.slick-initialized) div:not(:first-child), .category-tab-links:not(.slick-initialized) button { display: none;} */ .category-product-slider:not(.slick-initialized) div:first-child { width: 100%; height: auto;} /** slider loading issuue fix css **/ .tab-content .slick-slider .slick-prev:before, .tab-content .slick-slider .slick-prev:hover:before { opacity:1; color:transparent; width: 12px; height: 18px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='18' viewBox='0 0 12 18' fill='none'%3E%3Cpath d='M11 1L1 9L11 17' stroke='%23BBBFC2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: contain;} .announcement-bar-main { display:flex; width:fit-content; } .announcement-bar-main img { margin-right:10px; } zoom-dialog dialog[open] .product-media .zoom-icon { display:none; } zoom-dialog dialog[open] .product-media-container--zoomable.product-media-container--image { height: 50%; width: 50%; margin: 20px auto;} .blog-post-featured-image { width: 100%; max-width: 800px; margin: 0 auto; height: auto; background: #EFEFEF; border-radius: 20px; padding:50px; } .swym-advanced-wishlist-collections, .swym-advanced-wishlist-collections svg { transform:none !important; } .swym-advanced-wishlist-collections-container { left:auto !important; right:0; } .swym-storefront-layout-root-component .swym-storefront-layout-container { width:100%; overflow-y:visible; } .swym-storefront-layout-root-component { width: 100%; max-width: 1680px; margin: 0 auto; padding: 0 15px;} .swym-storefront-layout-login-user-container { background:#CCEFFC !important; } swym-storefront-layout-login-user .swym-storefront-layout-login-button { background:#00aeef!important; border:1px #00aeef solid !important; } swym-storefront-layout-login-user .swym-storefront-layout-login-button:hover, .swym-storefront-layout-grid-item-add-to-cart-button:hover { background:#FFF !important; color:#00aeef!important; } .swym-storefront-layout-grid-item-add-to-cart-button{ background:#00aeef!important; border:1px #00aeef solid !important; height: 38px; line-height: 38px; border-radius:30px !important; } .swym-storefront-layout-grid-item-image-container { border-radius:20px !important; padding:10px !important; } .swym-storefront-layout-grid-item-title { text-overflow: ellipsis; white-space: nowrap;overflow: hidden; font-family: "Libre Franklin", sans-serif; display: inline-block; width: 100%;color: #303030; font-size: 18px !important; font-style: normal; font-weight: 600 !important; line-height: 18px; margin: 20px 0 13px !important;} .swym-storefront-layout-grid-item-final-price { display:inline-block; margin-bottom:10px; color: #303030 !important; font-size: 20px; font-style: normal; font-weight: 500; line-height: 20px;} img.swym-storefront-layout-grid-item-image { object-fit:contain !important; } #swym-storefront-layout-section-container.swym-storefront-layout-layout .swym-storefront-layout-body { width:100% !important; max-width:1680px !important; padding:0 15px; margin:50px auto !important; } .footer-main-section ul li.list-menu__item--active a{ color:#000;} .slide__image-container>img.slide__image.mobile-image, .home-main-slider .slide-image .mobile-image { display: none;} #swym-storefront-layout-container .swym-storefront-layout-grid-item-content .swym-storefront-layout-grid-item-action-container button.swym-variant-selector { justify-content:center; border: 1px solid #00aeef !important; background: #00aeef !important; font-weight:600; cursor: pointer; border-width: 1px; border-radius: 30px; color: #fff !important; text-align: center; height: 38px;} #swym-storefront-layout-container .swym-storefront-layout-grid-item-content .swym-storefront-layout-grid-item-action-container button.swym-variant-selector svg * { stroke:#fff; } .swym-ui-components .swym-bg-2, .swym-ui-component .swym-bg-2, .swym-ui-component .swym-sfl-popup-dialog.swym-control-centre-mode .swym-cc-sfl-popup-action-container>div .swym-cc-sfl-popup-content .swym-cc-action-btn-container button:nth-child(2), { border-radius:30px !important; background: #00aeef !important; } .swym-ui-component .swym-sfl-popup-dialog.swym-control-centre-mode .swym-cc-sfl-popup-action-container>div .swym-cc-sfl-popup-content .swym-cc-action-btn-container button { border-radius:30px !important; border:1px #00aeef solid !important; } .swym-storefront-layout-empty-sfl-view-cart-button { font-size:14px !important; border-radius:30px !important; background: #00aeef !important; border:1px #00aeef solid !important; color:#FFF !important; } .swym-storefront-layout-empty-sfl-view-cart-button:hover { background:transparent !important; color: #00aeef !important; } .swym-ui-component .swym-sfl-popup-dialog.swym-control-centre-mode { padding:20px !important; width:100% !important; max-width:670px; } .swym-ui-component .swym-sfl-popup-dialog.swym-control-centre-mode .swym-cc-sfl-popup-action-container>div .swym-cc-sfl-popup-content .swym-ask-again-container { column-gap:10px; } .swym-ui-component .swym-sfl-popup-dialog.swym-control-centre-mode .swym-cc-sfl-popup-action-container>div .swym-cc-sfl-popup-content .swym-cc-action-btn-container button:focus, .swym-ui-component .swym-sfl-popup-dialog.swym-control-centre-mode .swym-cc-sfl-popup-action-container>div .swym-cc-sfl-popup-content .swym-cc-action-btn-container input:focus { outline:none !important; } #swym-storefront-extention-render-container { display:none !important; } .gut-health-box { background:#FFF; border-radius:0 0 30px 30px; padding:15px; box-shadow:0px 0px 0px rgba(0,0,0,0.5); text-align:center; } .gut-health-box .button { margin:15px auto 0 auto; } .microbiome-section { width: 100%; max-width: 1270px; margin:0 auto; padding:0 15px; } .microbiome-section .microbiome-section-box h3{ font-size:18px; font-weight:600; margin:20px 0; } .microbiome-section-box { background:#FFF; border-radius:20px; box-shadow:0px 1px 10px 2px rgba(0, 0, 0, 0.1); text-align:center; } .country-selector-menu-avxfsmezvdi9pvw9mwcountryselectorj8tzkb { max-height:210px; } .cart__ctas .cart__ctas .swym-advanced-header-icon, #swym-advanced-header-icon[aria-label="Wishlist"] { display:none !important; } /* wishlist CSS Start */ .ydp-ui-component.ydp-wishlist-page, .ydp-ui-component .ydp-wishlist-grid{max-width: 1650px !important;} .ydp-ui-component .ydp-wishlist-grid{ margin:0 !important; } .ydp-ui-component .ydp-wishlist-grid li{ border-radius: 20px; border: none; overflow: hidden;} .ydp-ui-component .ydp-wishlist-grid .ydp-wishlist-item{ border: none !important; border-radius:20px; } ydp-wishlist-page .ydp-ui-component .ydp-wishlist-grid .ydp-wishlist-item .ydp-title { white-space: normal; text-align: center; font-size: 18px; } .ydp-ui-component .ydp-wishlist-grid .ydp-wishlist-item .ydp-title {text-overflow: ellipsis; white-space: nowrap; overflow: hidden; font-family: "Libre Franklin", sans-serif !important; display: inline-block; width: 100%; color: #303030 !important; text-align: center; font-size: 18px !important; font-style: normal; font-weight: 600 !important; line-height: 24px; margin: 20px 0 0px 0 !important;} .ydp-ui-component .ydp-wishlist-grid .ydp-wishlist-image-wrapper { border-radius:20px; height:auto !important; background:#F5F5F5 !important; padding:10px; } .ydp-ui-component .ydp-wishlist-grid .ydp-wishlist-item .ydp-title:hover { white-space: normal; overflow: hidden !important; } ydp-wishlist-page .ydp-ui-component .ydp-product-price.ydp-has-sale .ydp-product-final-price {color: #303030; font-size: 18px; font-style: normal; font-weight: 600; line-height: 22px; order: 2; margin: 0; } ydp-wishlist-page .ydp-ui-component .ydp-wishlist-grid .ydp-wishlist-item .ydp-product-price { display: flex; justify-content: space-between; border-top: 1px #C5C5C5 solid; padding-top: 20px; margin-top: 16px; padding-bottom: 20px;} ydp-wishlist-page .ydp-ui-component .ydp-wishlist-grid .ydp-wishlist-item .ydp-product-price .ydp-product-original-price {color: #3c3c3c; font-size: 16px; font-style: normal; font-weight: 400; line-height: 16px; margin: 0 1rem 0 0; } .ydp-ui-component .ydp-wishlist-grid .ydp-wishlist-item .ydp-add-to-cart-btn{ background: #00aeef; border-color: #00aeef; height: 40px; min-height: 40px; padding: 0; border-radius: 30px; min-width: inherit; margin: 15px;} .ydp-ui-component.ydp-wishlist-page .ydp-wishlist-container-title-bar .ydp-wishlist-main-title{ color: #303030 !important; leading-trim: both; text-edge: cap;font-family: "Libre Franklin", sans-serif;font-size: 28px !important;font-style: normal;font-weight: 400;line-height: 100%; /* 28px */} .ydp-ui-component .ydp-wishlist-grid .ydp-wishlist-item .ydp-delete-btn { border-radius: 10px !important; background: #00aeef !important; width: 40px !important; height: 40px !important; line-height: 36px !important;} .ydp-ui-component .ydp-wishlist-grid .ydp-wishlist-item .ydp-delete-btn .ydp-icon::before{ color:#fff !important; line-height:40px; } .ydp-ui-component .ydp-product-price .ydp-product-final-price { margin-left:auto; margin-right:0; } .ydp-ui-component .ydp-wishlist-grid .ydp-wishlist-item .ydp-delete-btn.sale { width: fit-content !important; background: transparent !important; } .ydp-ui-component .ydp-wishlist-grid .ydp-wishlist-item .ydp-delete-btn .ydp-sale-badge { word-break:none; background: #000; } .ydp-ui-component .ydp-empty-wishlist-container{ border: solid 1px #ccc; margin-bottom: 50px;} .ydp-ui-component .ydp-wishlist-grid .ydp-wishlist-item .ydp-variant-title-spacer{ margin: 0 !important;} .ydp-ui-component .ydp-empty-wishlist-container .ydp-empty-wishlist-text{ max-width: 800px !important; text-align: center;} button#ydp-user-login-status-btn { padding: 1rem 2rem; text-decoration: none; border: solid 1px #00aeef; font-size: 18px; color: #fff; border-radius: 40px; background: #00aeef; z-index: 1;} header-drawer{ margin-left: 0 !important;} .pswp--zoom-allowed .pswp__img { background: #FFF; } .okeReviews[data-oke-container] .oke-w-reviewer-verified, div.okeReviews .oke-w-reviewer-verified { text-transform:capitalize; font-size: 17px !important; font-style: normal; font-weight: 400 !important;line-height: 100%; /* 20px */} .okeReviews[data-oke-container] .oke-reviewCarousel-reviews-review.is-current .oke-w-reviewer-verified, .okeReviews[data-oke-container] .oke-reviewCarousel-reviews-review.is-current .oke-w-reviewer-verified { color:#00AEEF !important; } .pswp__button--arrow--left:before, .pswp__button--arrow--right:before { background-color:#000; } .tab-inner-wrapper .accordion-icon { top: 61%; } .accordion-header.active .accordion-icon { top: 40%; } ydp-wishlist .ydp-modals-container .ydp-share-wishlist-modal .ydp-modal-content .ydp-share-wishlist-modal-dialog .ydp-share-wishlist-input-container, ydp-wishlist-page .ydp-ui-component .ydp-share-wishlist-modal .ydp-share-wishlist-modal-dialog .ydp-share-wishlist-input-container {padding-bottom: 0;} .ydp-ui-component .ydp-share-wishlist-modal .ydp-share-wishlist-modal-dialog .ydp-share-email-button-container {margin-top: 0;} .ydp-ui-component .ydp-share-wishlist-modal .ydp-share-wishlist-modal-dialog .ydp-share-email-button-container button { margin: 0; border-radius: 10px; } .ydp-ui-component .ydp-clear-wishlist-modal .ydp-clear-wishlist-modal-dialog .ydp-clear-wishlist-btn { border-radius: 10px; background: #00aeef;} .ydp-ui-component .ydp-clear-wishlist-modal .ydp-clear-wishlist-modal-dialog .ydp-cancel-clear-wishlist-btn { border-radius: 10px; } .ydp-ui-component .ydp-share-wishlist-modal .ydp-share-wishlist-modal-dialog .ydp-share-email-button-container button:hover, .ydp-ui-component .ydp-clear-wishlist-modal .ydp-clear-wishlist-modal-dialog .ydp-clear-wishlist-btn:hover, .ydp-ui-component .ydp-clear-wishlist-modal .ydp-clear-wishlist-modal-dialog .ydp-cancel-clear-wishlist-btn:hover { background: #00aeef; } ydp-ui-component *, .ydp-ui-component .ydp-is-button, .ydp-ui-component .ydp-is-anchor, .ydp-ui-component .ydp-title, .ydp-ui-component .ydp-heading, .ydp-ui-component .ydp-label {font-family: var(--font-body-family);} .product__info-container .jdgm-widget.jdgm-widget .jdgm-prev-badge__text:hover {color: #00aeef} .wishlist-app {width: 65px; height: 65px; background: #00aeef; display: inline-block; flex-basis: fit-content !important; flex: 1 1 45px !important; min-width: 65px !important; max-width: 65px !important; border-radius: 100%;} .wishlist-app button.wishlist-button { padding:28px 0px 10px 0px; } .wishlist-app button.wishlist-button span{ font-size:0; } .wishlist-app button.wishlist-button span.wishlist-icon { font-size:24px; } .wishlist-app button.wishlist-button span.wishlist-icon svg { height:28px; width:28px; } .wishlist-app button.wishlist-button span.wishlist-icon svg * { stroke:#FFF; stroke-width:2px;} .wishlist-app button.wishlist-button.added-to-wishlist span.wishlist-icon svg * { fill: #FFF; } .section-password .email-signup-block .email-signup__input-group { display: flex; align-items: stretch; background-color: transparent; border: 1px #00aeef solid; border-radius: 40px; padding:0;} .section-password .email-signup-block .email-signup__input.paragraph { border: none; padding:15px 0px 15px 20px; } .section-password .email-signup-block .email-signup__button:not(.button-unstyled) { height:49px; line-height:49px; } .password-dialog__content .email-signup__input-group { display: flex; align-items: stretch; background-color: transparent; border: 1px #00aeef solid;border-radius: 40px; padding:5px 8px 5px 0;} .password-dialog__content .email-signup__input-group input { border: none; padding:10px 0px 15px 20px; line-height:24px; box-shadow:none !important; color: #00aeef; font-size: 24px; } .password-dialog__content .email-signup__button:not(.button-unstyled), .password-dialog__content .password-dialog__submit-button { height:49px; line-height:49px; } .product-form-buttons--stacked>*:not(.quantity-selector-wrapper,.quantity-rules,.quantity-label,.volume-pricing) { flex-basis: auto !important; } .oke-reviewCard-reviewer { display:flex; align-items:center; justify-content:space-between; width:100%; } .okeReviews[data-oke-container] .oke-readMore, div.okeReviews .oke-readMore { text-decoration:none !important; } .okeReviews[data-oke-container] .oke-w-reviewer, div.okeReviews .oke-w-reviewer > div { display: flex; width: 100%; justify-content: space-between; } .oke-w-reviewer-verified { flex-direction: row-reverse !important; display: flex !important; align-items: center; gap:8px; justify-content: start; margin-left:0 !important; } .okeReviews[data-oke-container] .oke-w-reviewer-verified-icon:before, div.okeReviews .oke-w-reviewer-verified-icon:before { content:"" !important; width: 27px; height: 27px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='27' height='27' viewBox='0 0 27 27' fill='none'%3E%3Cpath d='M11.5814 1.481C12.125 -0.493665 14.875 -0.493667 15.4186 1.481L15.7764 2.78045C16.1439 4.11526 17.6891 4.68988 18.8153 3.91054L19.9202 3.14588C21.5904 1.99002 23.6956 3.80587 22.8498 5.67287L22.3343 6.81087C21.7592 8.08027 22.5883 9.54747 23.9553 9.67968L25.1944 9.79952C27.2117 9.99463 27.6884 12.7742 25.8555 13.6537L24.7626 14.1781C23.5169 14.7758 23.2282 16.449 24.1992 17.4431L25.0473 18.3115C26.4742 19.7724 25.1009 22.2175 23.1403 21.7068L21.8856 21.3799C20.5611 21.0349 19.2966 22.1191 19.4053 23.5064L19.5071 24.8048C19.6675 26.8505 17.0838 27.8171 15.9047 26.1526L15.1162 25.0395C14.3209 23.9169 12.6791 23.9169 11.8838 25.0395L11.0953 26.1526C9.91616 27.8171 7.33255 26.8505 7.49291 24.8048L7.59469 23.5064C7.70344 22.1191 6.43887 21.0349 5.11445 21.3799L3.85967 21.7068C1.8991 22.2175 0.525798 19.7724 1.95271 18.3115L2.80085 17.4431C3.77185 16.449 3.48312 14.7758 2.23743 14.1781L1.14454 13.6537C-0.688449 12.7742 -0.211684 9.99463 1.80563 9.79952L3.04472 9.67968C4.41174 9.54747 5.24075 8.08027 4.66569 6.81087L4.15015 5.67287C3.30437 3.80587 5.40957 1.99002 7.0798 3.14588L8.18474 3.91053C9.3109 4.68988 10.8561 4.11526 11.2236 2.78045L11.5814 1.481Z' fill='%23FFBC40'/%3E%3Cpath d='M17.6758 10.2599C18.0844 9.88858 18.7174 9.91872 19.0889 10.3273C19.4602 10.736 19.4301 11.3689 19.0215 11.7404L12.5938 17.5832C12.2124 17.9296 11.6303 17.9296 11.249 17.5832L8.32715 14.9269C7.91877 14.5555 7.88864 13.9234 8.25977 13.5148C8.63127 13.1062 9.2642 13.0759 9.67285 13.4474L11.9209 15.4914L17.6758 10.2599Z' fill='white'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: contain; background-position: center;} #ydp-plugin #ydp-anchor { display: none !important; } .review-widget-okendo .okeReviews[data-oke-container].oke-w, div.okeReviews.oke-w { max-width:1650px; border:1px #ddd solid; padding:20px; } .review-widget-okendo .okeReviews[data-oke-container] .oke-reviewContent-title, div.okeReviews .oke-reviewContent-title { color:#303030; font-size:20px !important; } .review-widget-okendo .okeReviews .oke-reviewContent-body p { color: #303030; font-size: 14px; font-weight: 400; line-height: 18px !important;} .review-widget-okendo strong.oke-w-reviewer-name { color:#303030; font-size:16px !important; } .review-widget-okendo .okeReviews[data-oke-container] .oke-is-large .oke-w-review-side { flex-basis: 400px; } .review-widget-okendo .okeReviews[data-oke-container] .oke-w-reviewer-verified, div.okeReviews .oke-w-reviewer-verified { font-size:16px !important; } .featured-blog-posts .slideshow-control .icon-caret { rotate:180deg; } .announcement-bar__slider slideshow-arrows .slideshow-control .icon-caret svg { height:15px; } .announcement-bar__slider slideshow-arrows .slideshow-control .icon-caret svg * { stroke: #FFF; } .announcement-bar__slider slideshow-arrows .slideshow-control .icon-caret { rotate:180deg; } .specifically-section .image-block--height-fill .image-block__image.mobile-image { display:none; } .specifically-section .image-block--height-fill .image-block__image.desktop-image { display:block; } .home-main-slider .slider-container { height:calc(100vh - 140px); } .category-tab-links.blog-tags .slick-tags { align-items:center; } .blog-search-wrapper { height:40px; text-align: center; position: relative;border: 1px #2b4f9e solid; border-radius: 30px;padding-right: 30px; display: flex; min-width: 340px;} .blog-search-wrapper #blog-search { border: none; padding: 0 20px; color: #2B4F9E; font-family: "Libre Franklin", sans-serif; text-align: left; max-width: auto; font-size: 16px;font-style: normal;font-weight: 500; line-height: 100%; } .blog-search-wrapper #blog-search::placeholder { color: #2B4F9E; opacity:0.7; font-weight:500; } .blog-search-wrapper span.svg-wrapper { position: absolute; right: 15px; top: 11px; height: 15px; width: 15px; } .blog-search-wrapper span.svg-wrapper svg * { fill: #2b4f9e; } .featured-blog-posts-card__image { min-height:580px; overflow:hidden; } .featured-blog-posts-card__image img { height: 580px; object-fit: cover; transition:all 0.5s ease-in-out 0s; } .resource-card__media { display: inline-block; overflow: hidden; width: 100%; position:relative; z-index:1; } .resource-card__media img { transition: all 0.5s ease-in-out 0s; } .biotics-banner .biotics-banner-btn-group { margin-top:20px; } .social-icons-main-group { width: 100%; max-width: 1200px; margin: 0 auto;} .social-icons-main-group .social-icons__icon-wrapper { background:#00aeef; border-radius:100%; height:40px; min-width:40px; width:40px; display:flex; align-items:center; justify-content:center; } /* product detail page subscribe CSS */ .snippet-addto-cart .purchase-type-wrap { display: flex; gap: 30px; margin-bottom: 40px; } .snippet-addto-cart .purchase-type-option { flex: 1; display: flex; align-items: flex-start; gap: 13px; padding: 20px 20px 16px 18px; border: 1px solid #AEAEAE; border-radius: 20px; cursor: pointer; background: #fff; transition: border-color 0.2s, background 0.2s; position: relative; } .snippet-addto-cart .purchase-type-option.is-selected { border-color: #00adef; background: #E3F6FD; } .snippet-addto-cart .purchase-type-option input[type="radio"] { margin:0px; margin-top: 4px; /* accent-color: #00adef; */ width: 20px; height: 20px; flex-shrink: 0; position:relative; cursor: pointer; } .snippet-addto-cart .pto-inner { display: flex; flex-direction: column; gap: 20px; } .snippet-addto-cart .pto-title { font-size: 20px; font-weight: 600; color:#303030; line-height: 1.3; } .snippet-addto-cart .pto-price { font-size: 18px; font-weight: 400; color: #00adef; } .snippet-addto-cart .pto-desc { color: #303030; font-size: 16px; font-style: normal; font-weight: 400; line-height: 100%; /* 16px */ } .featured-blog-posts .blog-sub-heading { text-transform:uppercase; color:#00adef; font-size:14px; font-weight:600; } .about-image-text.microbial-about-data .about-content { margin: 30px auto 45px; max-width: 410px; width: 100%; } .about-image-text.microbial-about-data .about-content p { font-size:16px; line-height:22px; text-align:left;} .about-image-text.microbial-about-data .about-content .main-heading p{ font-size:28px; font-weight:700; } .about-image-text.microbial-about-data.main-banner-micro .about-content { max-width:600px; } /* ── Subscription Options ─────────────────────────────────────────── */ .snippet-addto-cart .subscription-options-wrap { margin-bottom: 40px; } .snippet-addto-cart .subscription-options-wrap .subscription-options-title{ color:#303030; font-size: 20px; font-style: normal; font-weight: 600; line-height: 100%; /* 20px */ margin-bottom:20px; } .snippet-addto-cart .subscription-plan-option { display: flex; align-items: self-start; gap: 14px; padding: 27px 27px 27px 15px; border: 1px solid #9C9C9C; border-radius: 20px; cursor: pointer; background: #fff; margin-bottom: 20px; transition: border-color 0.2s, background 0.2s; position: relative; } .snippet-addto-cart .subscription-plan-option:last-child { margin-bottom: 0; } .snippet-addto-cart .subscription-plan-option input[type="radio"] { width: 16px; height: 16px; flex-shrink: 0; cursor: pointer; margin: 0; position:relative; } .snippet-addto-cart .subscription-plan-option input[type="radio"]:after, .snippet-addto-cart .purchase-type-option input[type="radio"]:after { position: absolute; left: 0px; top: -2px; content: ''; background: #FFF; width: 20px; border-radius: 100%; border: 1px #111111 solid; height: 20px; } .snippet-addto-cart .subscription-plan-option input[type="radio"]:before, .snippet-addto-cart .purchase-type-option input[type="radio"]:before { position: absolute; left: 5px; top: 3px; content: ''; background: #00AEEF; width: 12px; border-radius: 100%; height: 12px; display: none; z-index: 1; } .snippet-addto-cart .subscription-plan-option.is-active input[type="radio"]:after, .snippet-addto-cart .purchase-type-option.is-selected input[type="radio"]:after{ border:1px #00AEEF solid; background:#E3F6FD; } .snippet-addto-cart .subscription-plan-option.is-active .spo-price .variant-option-price { color:#00ADEF; } .snippet-addto-cart .subscription-plan-option.is-active input[type="radio"]:before, .snippet-addto-cart .purchase-type-option.is-selected input[type="radio"]:before{ display:block; } .snippet-addto-cart .subscription-plan-option.is-active { border-color: #00adef; background: #E3F6FD; } /* Left content: name / description / skip */ .snippet-addto-cart .spo-content { /* flex: 1; min-width: 0; */ } .snippet-addto-cart .spo-name { color: #303030; font-family: "Libre Franklin", sans-serif; font-size: 16px; font-style: normal; margin-bottom:20px; font-weight: 500; line-height: 140%; /* 22.4px */ } .snippet-addto-cart .spo-desc { font-size: 12px; color: #444; margin-top: 2px; line-height: 1.4; } .snippet-addto-cart .spo-skip { color: #00AEEF; font-family: "Libre Franklin", sans-serif; font-size: 14px; font-style: normal; font-weight: 400; line-height: 140%; /* 19.6px */ } /* Right: badge + price */ .snippet-addto-cart .spo-right { display: flex; flex-direction: row; align-items: start; gap: 9px; flex-shrink: 0; margin-left: auto; } .snippet-addto-cart .spo-badge { display: inline-block; background: #B7B7B7; padding: 10px; border-radius: 5px; white-space: nowrap; color: #FFF; font-family: "Libre Franklin", sans-serif; text-align: center; font-size: 12px; font-style: normal; font-weight: 500; line-height: 100%; /* 12px */ } .snippet-addto-cart .is-active .spo-badge{ background: #00adef; } .snippet-addto-cart .spo-price { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; } .snippet-addto-cart .spo-price .variant-option-price{ color: #303030; font-family: "Libre Franklin", sans-serif; font-size: 18px; font-style: normal; font-weight: 700; line-height: 100%; } .snippet-addto-cart .spo-price .variant-option-currency{ color: #303030; font-family: "Libre Franklin", sans-serif; font-size: 18px; font-style: normal; font-weight: 400; line-height: 100%; } .snippet-addto-cart .spo-price-new { font-size: 14px; font-weight: 600; color: #303030; white-space: nowrap; } .snippet-addto-cart .spo-price-old { font-size: 12px; color: #999; text-decoration: line-through; white-space: nowrap; } @media (max-width:575px){ .snippet-addto-cart .purchase-type-wrap{ flex-direction:column; gap:20px; margin-bottom:30px; } .snippet-addto-cart .pto-title{ font-size:16px; } .snippet-addto-cart .pto-price{ font-size:14px; } .snippet-addto-cart .pto-desc{ font-size:14px; } .snippet-addto-cart .pto-inner{ gap:15px; } .snippet-addto-cart .spo-name{ font-size:14px; } .snippet-addto-cart .spo-price-new{ font-size:12px; } .snippet-addto-cart .purchase-type-option input[type="radio"]{ width:16px; height:16px; margin-top:2px; } } .facets--drawer.dialog-modal .checkbox__label-text { color:#303030; } .facets--drawer.dialog-modal.facets .facets__inputs-wrapper.price-facet__inputs-wrapper .field__input { background:#2b4f9e; color:#FFF; } .facets--drawer.dialog-modal.facets .facets__inputs-wrapper.price-facet__inputs-wrapper .field__input::placeholder, .facets--drawer.dialog-modal .field__label.price-facet__label { color:#FFF; } .facets--drawer.dialog-modal .facets__clear-all.active { padding: 11px 10px 11px 10px; } .form__message class { color:green; } div#boost-sd__search-widget-init-wrapper { width: 100%;left: 0 !important; top: 49px !important; } .boost-sd__suggestion-queries-item-product--right { width: calc(100% - 120px) !important; } .boost-sd__suggestion-queries-item-product--left { width:90px !important; } .boost-sd__suggestion-queries-item-img { border-radius:10px; border:1px #ddd solid; padding:5px; } .boost-sd__view-all-text, .boost-sd__header-item, .boost-sd__no-search-result-desc strong, .boost-sd__format-currency>span { color: #00aeef !important; font-weight:600 !important; } .boost-sd__view-all-icon * {fill: #00aeef !important; } .boost-sd__suggestion-queries-group .boost-sd__suggestion-queries-item { border-bottom: 1px #ddd solid; } .why-microbial-diversity-is-important .order-change-content .custom-section-content > .section-content-wrapper { flex-direction:row-reverse; } .boost-sd__header-item { font-size: 16px !important;} .cart-drawer .quantity-selector :is(.quantity-minus, .quantity-plus) { height:23px; width:23px; } .cart-drawer .quantity-selector .svg-wrapper { border:none; } .cart-drawer .quantity-selector input[type='number'] { font-size:16px; } .cart-drawer .quantity-selector { height:34px; } .cart-drawer .cart-items__table-row { --cart-item-price-width: 2rem !important; } .cart-drawer .cart-items__table .cart-items__details .cart-price-block span { margin-top:0; } /* Responsive */ @media (min-width:1025px){ .specifically-formulated-content { max-width: 825px;} } @media(min-width:1200px){ .boost-sd__instant-search-results--two-column .boost-sd__instant-search-column--others { width:380px !important; } .boost-sd__instant-search-results--two-column.boost-sd__instant-search-results--product-type-list.boost-sd__instant-search-results--product-per-row-2 .boost-sd__instant-search-column--products { width:615px; } .blog-card-box:hover .featured-blog-posts-card__image img { transform:scale(1.1); } .resource-card__media:hover img { transform: scale(1.1);} .footer-main-section .footer-social-link .social-icons__icon-wrapper:has(.social-icons__icon path):hover { background:#cceffc; } .social-icons__icon-wrapper:has(.social-icons__icon path):hover .social-icons__icon * { fill: #000; } .footer-main-section ul li a:hover{ color:#000; } .footer-bottom-footer-link a:hover, .footer-social-info:hover a { color:#000 !important; } .footer-social-info:hover .icon svg * { fill:#000; } .footer-social-info:hover .icon.location-svg-class svg * { stroke:#fff; fill:transparent; } .slick-slider .slick-next:hover, .slick-slider .slick-prev:hover { background:#00AEEF;} .tab-content .slick-slider .slick-next:hover, .tab-content .slick-slider .slick-prev:hover { background:#FFF; } .slick-slider .slick-prev:hover:before{background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='16' viewBox='0 0 10 16' fill='none'%3E%3Cpath d='M9 1L1 8L9 15' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .slick-slider .slick-next:hover:before{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='16' viewBox='0 0 10 16' fill='none'%3E%3Cpath d='M1 1L9 8L1 15' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");} } @media(min-width:1650px){ .product-content { margin: 0 -20px; } } @media(max-width:1699px){ li.menu-list__list-item { margin:0 0 0 30px; } } @media(max-width:1640px){ .shop-mega-menu .main-megamenu[data-menu-grid-id=MegaMenuList-1] { gap:10px; } .shop-mega-menu .main-megamenu .mega-menu__list .mega-menu__column { margin-right:20px; padding-right:20px; } .shop-mega-menu .main-megamenu .mega-menu__list .mega-menu__column ul li .mega-menu__link { font-size:13px; margin-bottom:12px; } .shop-mega-menu .main-megamenu .mega-menu__list .megamenu-heading { margin-bottom:20px; } } @media(max-width:1499px){ .featured-blog-posts-card__content { padding:28px 10px 30px 10px; } .featured-blog-posts-card__content h4 { font-weight:500; font-size:14px; } .slide-content .slide-heading p { font-size:80px; } .slide-content .slide-main-heading h2 { font-size:60px; } .home-main-slider .slide-image { max-width: 650px; } } @media(max-width:1399px){ .menu-list__link .menu-list__link-title { font-size:18px; } .menu-list__list-item .arrow-span-svg svg { width:16px; } .slider-container { max-width:1312px; } .specifically-formulated-content .specifically-title p { font-size:13px; font-weight:500; } .specifically-formulated-content { padding: 0 20px; } .specifically-content { margin-bottom:20px; } .specifically-formulated-content .specifically-main-title p { font-size:18px; margin-bottom:20px; } .footer-links { max-width:fit-content; margin-left:30px;} footer ul li a { font-size:16px; margin-top:15px;} .store-locatore-tab .store-detail { padding:20px 30px; } .review-section .marquee-item .counts { font-size:30px; margin-bottom:10px; } .review-section .marquee-item { font-size:16px; } .review-section .marquee-icon { height:50px; width:50px; } .formulated-block .specifically-formulated-box { margin-bottom:28px; } .video-section .video-section-box { height:auto; } .product-details .variant-option--buttons { gap:15px; } .ingredients-dosage p strong { font-size:18px; } .the-life-space-difference .image_with_text_and_button .heading { font-weight:500; } .key-ingredients-their-benefits .key-ingredient-info { padding:27px 20px; } .review-section.pdp-review-section .marquee-item { font-size:14px; } .review-section.pdp-review-section .marquee-item .counts { font-size:20px; } .pdp-review-section.review-section .marquee-icon { height:60px; width:60px; object-fit:contain; } .pdp-review-section.review-section .marquee-container { padding:38px 0; } .okeReviews[data-oke-container] .oke-title, div.okeReviews .oke-title { font-size:20px !important; } .okeReviews[data-oke-container] .oke-reviewCard, div.okeReviews .oke-reviewCard { padding:15px !important; } .okeReviews[data-oke-container] .oke-bodyText, div.okeReviews .oke-bodyText { font-size:16px !important; line-height:20px !important; } .okeReviews[data-oke-container] .oke-w-reviewer, div.okeReviews .oke-w-reviewer { font-size:14px !important; } .okeReviews[data-oke-container] .oke-w-reviewer-verified, div.okeReviews .oke-w-reviewer-verified { font-size:13px !important; } .featured-blog-posts-card__image{ min-height:350px; } .featured-blog-posts-card__image img { height:350px; } } @media(max-width:1299px){ .slide-content .slide-heading p { font-size:80px; } .slide-content .slide-main-heading h2 { font-size:60px; } .store-locatore-tab .tabs .tab { padding:10px 28px; margin-bottom:10px; } .store-locatore-tab .tabs { margin-bottom:35px; } .store-locatore-tab .store-detail { padding:10px 20px; } .faq .faqs .faq-accordion, .faqs .image { width:50%; } .faq-banner-content { max-width:700px; } .faq-banner-content .microbial-promo-banner-title p { font-size:60px; } .faq-banner-content .microbial-promo-banner-title p strong { font-size:80px; } } @media(max-width:1240px){ .cart-page__items .cart-items thead tr th#productInformation{ display:none; } .microbiome-section .microbiome-section-box h3 { font-size:14px; } } @media(max-width:1199px){ #search-modal .search-modal__content { width:90%; } .okeReviews[data-oke-container] .oke-bodyText, div.okeReviews .oke-bodyText { font-size:14px !important; } .the-life-space-difference .main-div { padding: 55px 20px 70px; } .the-life-space-difference .image_with_text_and_button .heading { font-size:14px; } .faq-banner-content .promo-banner-text p { margin-bottom:30px; } .ingredients-dosage p strong { font-size:16px; } .accordion.custom-acc .accordion-table table tbody td, .accordion.custom-acc .accordion-table table thead th { font-size:14px; padding:10px; } .collection-main .resource-list--grid { grid-template-columns: 1fr 1fr 1fr; } .product-group.product-warning-text { padding:16px; font-size:14px; } .product-details .variant-option__button-label { padding:18px; } .product-details { padding-left:0; } .the-life-space-difference .main-icon-with-text-div { padding:0 1%; } .review-section .marquee-item .counts { font-size: 23px; margin-bottom: 3px; } .marquee-item { gap:5px; } .review-section .marquee-icon { height:40px; width:40px; } .review-section .marquee-item { font-size:14px; } .review-section .marquee-item:not(:last-child) { margin-right:0 !important; } .footer-links { margin-left:30px; } ul li a { font-size:15px; } .footer-social-info p { font-size:18px; } .footer-logo img { margin-bottom:26px; } .footer-social-info { margin-bottom:20px; } .footer-logo { margin-bottom:30px; } .marquee-item:not(:last-child) { margin-right:75px !important; } .country-selector-container-abgr6v1jxug1wbuprdcountryselectorj8tzkb { width:40% !important; } .specifically-formulated-content { padding: 50px 20px 22px 20px; } .about-right-content { padding-left:0; } .about-left-content { padding-right:0; } .banner-caption .banner-heading p { margin-bottom:15px; font-size:32px; } .hero__image, .hero__video, .hero__video-poster { object-position: right top; } .about-discover-banner-section .about-discover-content .h3 p { font-size:60px; margin-top:40px; } .about-discover-banner-section .about-discover-content .h3 p strong { font-size:74px; } .about-discover-banner-section .about-discover-content .content p { font-size:14px; margin-bottom:40px; } .store-locatore-tab .tabs { flex-wrap:wrap; column-gap:10px; } .store-locatore-tab .tabs .tab { padding:10px 20px; } .quick-link-box .quick-link p { font-size:16px; } .quick-link-box .quick-link { padding:20px; } .faq-banner-content { padding:85px 0; } .footer-links { min-width:150px; } .footer-main-section ul li a { margin-top:10px; font-size:16px; } .footer-links:first-child { margin-left:30px; } .store-locatore-tab .tab-content { row-gap:20px; column-gap:20px;} .authenticity-section .authenticity-box h3 { min-height:48px; } .banner-caption .banner-content p br { display:none; } .banner-caption { min-height:300px; } .hero__container:after { position: absolute; left: 0; top: 0; width: 100%; height: 100%; content: ''; background: rgb(176, 198, 204, 0.7); z-index:0; } .help-center-banner .hero__container:after { background:rgb(131 145 149 / 82%); } .quantity-selector { padding:31px 15px; } .menu-drawer__nav-buttons button.button.menu-drawer__back-button {--button-border-color: transparent; padding:34px 15px 20px 15px; font-size:20px; font-weight:600; color: #000; background: transparent; border-radius: 0px; border-color: transparent !important; outline: none; display: flex; width: calc(100% - 70px); overflow: visible; } .slick-dotted.slick-slider.custom-collection-list-wrapper-brands { margin-bottom: 36px; } .menu-drawer__nav-buttons button.button.menu-drawer__back-button .icon-caret--backward svg { transform: rotate(360deg); } .slick-dotted.slick-slider.custom-collection-list-wrapper-brands .slick-dots { bottom:-38px; } .snippet-addto-cart .pto-title { font-size:16px; } .snippet-addto-cart .purchase-type-option { padding:20px 10px 16px 10px; gap:8px; } .snippet-addto-cart .pto-inner { gap:10px; } } @media (max-width:1024px){ .custom-collection-card img.mobile-image { display:block; } .custom-collection-card img.desktop-image { display:none; } .product-form-buttons:not(:has(.quantity-rules)) { gap:12px; } .brand-content p br { display:none; } .review-section .marquee-container { padding:40px 0; } .subscribe-content .email-signup-block { width: 80% !important; } .okeReviews[data-oke-container] .oke-reviewsTab--small-top-left, div.okeReviews .oke-reviewsTab--small-top-left { top:60% !important; } .menu-drawer__nav-buttons { border-bottom: 1px #ccc solid; padding-bottom: 12px; } .footer-main-section { padding:70px 0 20px; } .cms-content-detail table { max-width:100%; } .store-locatore-tab .tabs .tab { padding:10px 32px; } .review-section .marquee-container .marquee-content { gap:50px; } .footer-main-section .footer-content{grid-template-columns: 6fr;} .footer-links-main-section > .group-block-content { --horizontal-alignment: flex-start !important; flex-direction: column; } .payment-icons { --alignment:flex-start !important; } .payment-option-list, .footer-links-main-section { margin-top:30px; } .footer-links { margin-left: 0px; } .footer-main-section .custom-section-content .section-content-wrapper { flex-wrap:wrap; flex-direction: column; } .footer-links:first-child { margin-left:0; } .footer-main-section .payment-option-list img { margin:0 auto; } .footer-main-section .payment-option-list { margin-top:50px; } .okeReviews[data-oke-container] .oke-reviewContent-title{ margin-top: 10px !important;} .okeReviews[data-oke-container] .oke-bodyText, div.okeReviews .oke-bodyText { font-size:16px !important; } .bottom-copyright-footer .layout-panel-flex { flex-wrap:wrap; flex-direction:row; width:100%; text-align:center; justify-content:center; display:flex; --horizontal-alignment: center !important;} .biotics-banner slideshow-slide { height:760px; } .footer-links { margin:0; width:100%; max-width:100%; border-bottom:1px #fff solid; padding:18px 0;} .footer-links::last-child .menu__heading.h5 span.menu__heading__toggle { border-bottom:none; } .footer-main-section .menu__heading.h5 { margin-bottom:0; } .menu__heading.h5 span.menu__heading__toggle { border: 1px #FFF solid; border-radius: 100%; height: 20px; width: 20px; padding:2px; } .bottom-copyright-footer .layout-panel-flex .group-block{ --size-style-width:100% !important; } .bottom-copyright-footer .layout-panel-flex div { --text-align:center !important; } .blog-category-content { padding:20px; } .view-faq-btn { margin-top:30px; } .faq-banner-content .microbial-promo-banner-title p { margin-bottom:20px; } .faq-banner-content .promo-banner-text p { margin-bottom:30px; } .about-image-text .content p { margin-top:20px; } .microbial-promo-banner-content .microbial-promo-banner-title p { font-size:60px; margin-bottom:30px; } .microbial-promo-banner-content .microbial-promo-banner-title p strong { font-size:80px; } .microbial-promo-banner-content .promo-banner-text p { margin-bottom:30px; } .review-section .marquee-item .counts { font-size:30px; } .review-section .marquee-icon { height: 50px; width: 50px; } .review-section { display: block;} .footer-bottom-footer-link {margin-top:20px; } .listing-filter-tab .section-resource-list { display: block;} .tab-content .slick-slider .slick-prev, .tab-content .slick-slider .slick-next { width:30px; height:60px; } .shop-by-range-section .tab-content .slick-slider .slick-prev { left:-55px; } .shop-by-range-section .tab-content .slick-slider .slick-next { right:-15px; } .biotics-banner .biotics-banner-caption { padding:40px 15px; } .biotics-banner-caption .biotics-heading p { font-size:70px; } .biotics-banner-caption .biotics-subheading p { font-size:90px; } .biotics-banner .biotics-banner-caption.right-alignment-content {padding-top:40px; } } @media(max-width:992px){ .boost-sd__instant-search-results--product-type-grid .boost-sd__suggestion-queries-item--product { flex: 0 0 33% !important; max-width: 33% !important;} .boost-sd__instant-search-results--product-type-grid .boost-sd__suggestion-queries-item-product--left { margin:0 15px 0 0 !important;} .boost-sd__suggestion-queries-item--mobile-style1 { box-shadow:none !important; } .boost-sd__suggestion-queries-group .boost-sd__suggestion-queries-item::last-child { border-bottom:none !important; } .microbiome-section-box { flex:0 0 48% !important; height:auto; } .category-tab-links.blog-tags .slick-tags { align-items: center;flex-wrap: wrap; justify-content: center;} .blog-search-wrapper { text-align: center; width: 100%; max-width: 50%; margin: 0 auto; } .snippet-addto-cart .subscription-plan-option { flex-wrap:wrap; } .snippet-addto-cart .spo-right { margin-left:0; width: 100%; justify-content: space-between;} .snippet-addto-cart .spo-name { margin-bottom:0px; } .snippet-addto-cart .purchase-type-wrap { flex-wrap:wrap; flex-direction:column; gap:10px; } .home-main-slider .slide__image-container>img.slide__image.mobile-image { display: block;height: auto; width: 100%;position: static;} .specifically-section .image-block--height-fill .image-block__image.mobile-image { display:block; } .specifically-section .image-block--height-fill .image-block__image.desktop-image { display:none; } .faq-section .faqpart_2 div.faq-answer, .faq-section .faqpart_2 .faq-question { gap:10px; width:100%; } .product-details .quantity-selector-wrapper { width:calc(100% - 74px); } .product-form-buttons--stacked>*:not(.quantity-selector-wrapper,.quantity-rules,.quantity-label,.volume-pricing) { flex-basis: 100%; } .subscribe-content .email-signup-block { width: 100% !important; } .product-details .variant-option__button-label { width:47%; flex:0 0 47%; } .product-details .main-price .price, .product-details .main-price .currency { font-size:26px; } .product-details .main-price .compare-at-price { font-size:18px; } .product-details .main-price { margin-bottom:18px; } .product-details .product-description p { font-size:14px; } .product-details .product-group.product-key-benefits ul li { font-size:14px; margin-bottom:10px; } .product-details .product-group.product-key-benefits { padding:17px 20px 10px; } .product-information__media slideshow-arrows { margin:0 2px; } .product-group.product-warning-text > .mobile-column, .authenticity-section .authenticity-section-info > .mobile-column { flex-direction: row;} .collection-main .resource-list--grid { grid-template-columns: 1fr 1fr; } .the-life-space-difference .main-icon-with-text-div { width:33%; } .about-image-text .content p { margin:20px auto 45px; text-align: center; } .about-right-img, .about-left-img { width:100%; max-width:80%; padding:0; margin:0 auto; } .about-right-content .group-block-content, .about-left-content .group-block-content, .about-right-content .group-block-content > div, .about-left-content .group-block-content > div {--text-align:center !important; --horizontal-alignment: center !important; align-items:center; } .about-right-content, .about-left-content { width:100%; text-align:center; } .faqs.flex { flex-wrap:wrap; flex-direction:column; display:block; } .faq .faqs .faq-accordion, .faqs .image { width:100%; } .faq .faqs .faq-accordion{ padding-top:50px; max-width:100%; } .faq .faqs .faq-accordion .accordion-headeing { text-align:center; } .faqs img.faq-image { padding-right:0; margin:0 auto; } .specifically-formulated-content .specifically-title p { font-size:16px; } .blog-categories-grid { grid-template-columns: repeat(2, 1fr); } .get-in-touch__grid { grid-template-columns: 1fr;} .mobile-about-data .mobile-column div { flex-direction: column; } .quick-link-box>.layout-panel-flex { flex-flow:wrap; } .quick-link-box .quick-link { width:47%; flex:0 0 47%; } .about-discover-banner-section .about-discover-content .h3 p, .about-discover-banner-section .about-discover-content .content p { text-align:center; } .about-discover-content .group-block-content{ --horizontal-alignment: center !important;} .mobile-about-data .mobile-column { flex-direction: column-reverse; } .biotics-banner-caption .biotics-heading p { font-size:70px; } .biotics-banner-caption .biotics-subheading p { font-size:80px; line-height:86px; } .slide-content .slide-heading p { font-size:60px; } .slide-content .slide-main-heading h2 { font-size:40px; } .marquess-section .marquee__content .marquee__repeated-items * { height:27px; } .padding-100, .store-locatore-tab, .faq-content, .product-information { padding: 70px 0; } .shop-by-range-section.padding-100.pb-0, .product-detail-faq > .main-div { padding-top:70px; } .quick-link-box { margin:40px 0 70px; } .blog-ajax-search { padding:70px 20px; } .get-in-touch .container { padding:0 20px 55px 20px; } .pb-100, .wholesale-enquiries-section.get-in-touch .container { padding-bottom:70px; } .mb-100, .about-discover-banner-section { margin-bottom:70px; } .mt-100{margin-top:70px;} .pt-100{ padding-top:70px; } .formulated-block > .group-block-content { flex-flow: row wrap; justify-content:center;align-items:start; } .specifically-formulated-content .specifically-main-title p { font-size:20px; text-align:center; margin:0 auto 38px auto; } .specifically-formulated-content .specifically-main-title { width:100%; text-align:center; } .store-locatore-tab .store-detail img { height:70px; } .store-locatore-tab .store-detail { width:25%; } .blog-ajax-search .search-btn { padding:14px 20px; } .blog-ajax-search .search-icon { display:none; } .faq-bottom-banner { margin-bottom:70px; } .faq-content .faq-content-heading p { margin-bottom:20px; } .Pharmacovigilance-box { padding:20px 15px!important; font-size:16px; margin-bottom:30px; } .faq-section .faqsubmain { grid-template-columns:1fr; } .faq-section .faqpart_1 { width:100%; } .faq-section .faqgrp, .faq-section .faqpart_1 .faqgrp.active { padding:15px 0; } .faq-section .faqpart_2 .faq-question { padding:15px; margin-top:20px; } .faqpart_2 h3.faq-question.active { border-radius:20px 20px 0 0; } .faq-section .faqpart_2 div.faq-answer.active { border-radius:0 0 20px 20px; } .faq-section .faqpart_2 div.faq-answer { padding:10px 0px 20px; } .faq-section .faqpart_2 div.faq-answer p { margin-bottom:15px; } .faqpart_2 .faq-group-name { margin-bottom:0; text-align:left; } #FaqDivContent { padding:0 !important; } .microbial-banner { margin-bottom:70px; } .visit-help-centre-detail { padding:30px; } .mobile-padding-50 .section-content-wrapper { padding-top: 70px !important; } .slide-content .slide-heading p { text-align:center; } .slide-content .slide-main-heading h2 { text-align:center; margin-bottom:10px; } .slide-content { order:2; margin:0 auto; padding:20px 15px 53px 15px; background:#ADE9FF; } .slide-image { order:1; margin:0 auto; } .slide-image img { max-width:70%; margin:0 auto; } .home-main-slider .slide-content { display:none; } .slide-content .mobile-column { align-items:center; --horizontal-alignment: center !important; } .slider-container { padding:18px 0 0 0; } .home-main-slider slideshow-controls[controls-on-media] { margin-bottom:0; } .home-main-slider .slider-container { padding:0; } .home-main-slider .slide__image-container>img.slide__image.desktop-image, .home-main-slider .slide-image .desktop-image { display:none; } .slide-content .slide-btn-group .mobile-column { flex-flow:nowrap; } .slide-content .slide-btn-group { margin-top:30px; } .video-section .video-content { text-align:center; margin:0 30px; padding:32px 0 0 0; } .video-section .video-content .btn-svg-wrapper { margin:0 auto; } .video-content .video-content-title p { margin:0 auto 20px auto; font-size:20px; text-align:center; } .video-content .video-content-info p { text-align:center; font-size:15px; margin-bottom:20px; } .video-content .video-content-info p br { display:none; } .biotics-banner .biotics-banner-btn-group .group-block-content { flex-flow: nowrap; } .contact-info-box .contact-info>div { flex-flow: row; } .contact-info-box .contact-info { margin:15px auto 0px; } .shop-by-range-section .tab-content .slick-list { max-width:500px; width:100%;} .biotics-banner slideshow-slide { height:auto; } .biotics-banner .biotics-banner-caption { padding:40px 15px 320px 15px; } /* .biotics-banner slideshow-slide>.slide__image-container { position:static; height:auto; } .biotics-banner slideshow-slide{ height:auto; background:#e3f6fd; display:flex; flex-direction:column-reverse; padding-bottom:60px; } .biotics-banner slideshow-slide .slide__content.background-transparent { height:auto; } .biotics-banner slideshow-controls[controls-on-media][pagination-position=center] { margin-bottom:0; } .biotics-banner .biotics-banner-caption { padding:60px 15px; } */ .biotics-banner .group-block-content { height:auto; --horizontal-alignment: center !important; --vertical-alignment: center !important; --vertical-alignment-mobile: center !important;} } @media(max-width:767px){ .boost-sd__instant-search-results--mobile-style1.boost-sd__instant-search-results--product-type-grid .boost-sd__suggestion-queries-item-product--left:before { padding-top: 103% !important; } .boost-sd__instant-search-results--product-type-grid .boost-sd__suggestion-queries-item--product { flex: 0 0 100% !important; max-width: 100% !important; } .slide-content .slide-btn-group { margin-top:10px; } .biotics-banner-caption .biotics-heading p { text-align:center; } .biotics-banner-caption .layout-panel-flex--column > .group-block--height-fit { --size-style-width:100% !important;} .footer-main-section .select-country button[aria-label="Select country"] { max-width:266px; } .country-selector-am0rxa1huodjyztzaacountryselectorj8tzkb { text-align:center; } .featured-blog-posts-card__content h4 { overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical; } .specifically-formulated-content .specifically-formulated-box img { height:50px; } .blog-card-box { margin-top:24px; } .visit-help-centre-detail .help-centre-content p br { display:none; } .subscribe-content .h3, .subscribe-content .h3.h3, .subscribe-content .text-block.h3>* { font-size:25px; } .subscribe-content .text-block:not(.text-block--full-width):is(.h1,.h2,.h3,.h4,.h5,.h6) { text-wrap:auto; } .product-slider-container .slick-list { padding-bottom: 30px;} .key-ingredients-their-benefits .collection-section-heading { margin-bottom:25px; } .pdp-review-section.review-section .marquee-container { padding:18px 0; } .product-information .product-information__media { margin-bottom:70px; } .product-slider-container { padding-bottom:20px; } .shop-by-range-section.listing-filter-tab .product-slider-container { padding-bottom:0; } .okeReviews[data-oke-container] .oke-button, div.okeReviews .oke-button { padding: 10px 15px !important; font-size: 16px !important; font-weight: 500 !important; } /* .home-main-slider { background:#CCEFFC !important; } */ .slide__image-container>img.slide__image.desktop-image, .home-main-slider .slide-image .desktop-image{display: none;} .biotics-banner .slide__image-container>img.slide__image.mobile-image { display:block; } /* .home-main-slider .slide-image .mobile-image {display: block; object-fit:contain; height:335px; } */ .common-slider .resource-list__carousel .slideshow-control.slideshow-control--shape-circle { height:38px; width:38px; } .common-slider .resource-list__carousel .slideshow-control--next { right:-10px; } .common-slider .resource-list__carousel .slideshow-control--previous { left:-10px; } .cart-items__table-row { grid-template-columns:clamp(2.5rem,25cqi,7.5rem) minmax(0,1fr) minmax(var(--cart-item-price-width),auto); } .footer-logo .group-block-content { align-content:center; --horizontal-alignment: center !important;} .footer-social-info .layout-panel-flex--row, .select-country .mobile-column { --horizontal-alignment:center !important; align-items:center; } .footer-social-info { width:auto; margin:0 auto 13px auto; } .footer-description p { text-align:center; } .payment-icons__list { justify-content:center !important; } .footer-main-section .select-country button[aria-label="Select country"] { margin:10px auto 0 auto; } .country-selector-container-avxfsmezvdi9pvw9mwcountryselectorj8tzkb { width:100% !important; } .footer-social-link .social-icons__wrapper { margin:0 auto; } .slick-slider .slick-prev, .slick-slider .slick-next { height: 38px; width: 38px;} .slick-prev:before, .slick-next:before { font-size:14px; } .featured-blog-posts-card__content { padding:10px 10px 15px; } .featured-blog-posts-card__inner { border-radius:10px; } .featured-blog-posts-card__content { border-radius:0 0 10px 10px; } .featured-blog-posts-card__inner:after { border-radius:10px 10px 0 0; } .blog-card-box { border-radius:10px; } .featured-blog-posts-card__inner .blog-card-tags { top:10px; left:10px; font-size:14px; } .blog-read-now-button, .button, .button-secondary, button.shopify-payment-button__button--unbranded { font-size:12px; } .faq .faqs .accordion .details__header { padding:17px 24px; } .about-discover-banner-section .about-discover-content .h3 p { font-size:40px; margin-bottom:20px; } .about-discover-banner-section .about-discover-content .h3 p strong { font-size:56px; } .slide-image img { max-width:100%; } .review-section .marquee-container .marquee-content { gap:37px; } .slide-content .slide-heading p { text-align:center; font-size:52px; } .slide-content .slide-main-heading h2 { text-align:center; margin-bottom:10px; font-size:24px; line-height:32px; } .mobile-padding-50 > .section-content-wrapper, .mobile-padding-50 .section-content-wrapper { padding-top: 50px !important; } .brand-content p br { display:none; } .about-image-text .content p { margin:10px 0 30px; } .faq-bottom-banner, .microbial-banner { margin-bottom:50px; } .accordion-item { margin-top:15px; } .accordion-item { border-radius: 20px; } .banner-caption .banner-heading p { font-size:30px; } .banner-caption { padding-bottom:0px; } .breadcrumbs { display:none; } .marquess-section .marquee__content .marquee__repeated-items * { height:23px; object-fit:contain; width:auto; } .blog-ajax-search .search-box { border-radius:50px; } h3, .h3, .h3.h3, .text-block.h3>* { font-size:20px; } .paragraph>* { font-size:15px; } .padding-100, .store-locatore-tab, .faq-content, .product-information { padding: 50px 0; } .shop-by-range-section.padding-100.pb-0, .product-detail-faq > .main-div { padding-top:50px; } .quick-link-box { margin:20px 0 50px; } .blog-ajax-search { padding:50px 20px; } .get-in-touch .container { padding:0 20px 50px 20px; } .pb-100, .wholesale-enquiries-section.get-in-touch .container { padding-bottom:50px; } .mt-100{ margin-top:50px; } .pt-100{ padding-top:50px; } .mb-100, .about-discover-banner-section { margin-bottom:50px; } .announcement-bar__slide p.announcement-bar__text img{ margin-right: 10px;} .marquee-item:not(:last-child) { margin-right: 35px !important; } .marquess-section .marquee__content .marquee__repeated-items .marquee-item { width:120px; } .faq-section .faqpart_2 .faq-question, .faqpart_2 h3.faq-question.active { font-size:16px; line-height:24px; } .okeReviews[data-oke-container] .oke-reviewCarousel-reviews, div.okeReviews .oke-reviewCarousel-reviews { width:calc(100% - 26px) !important; } .okeReviews[data-oke-container] .oke-reviewCarousel, div.okeReviews .oke-reviewCarousel { padding-top:0 !important; } .biotics-banner-caption .biotics-heading p { font-size:54px; } .biotics-banner-caption .biotics-subheading p { font-size:60px; letter-spacing:44px; line-height:64px; } .store-locatore-tab .tab-content { gap:15px; } .blog-category-image img { height:125px; } .faq-banner-content .microbial-promo-banner-title p { font-size:40px; line-height:40px; margin-bottom:20px; } .faq-banner-content .microbial-promo-banner-title p strong { font-size:50px; } .blog-category-content strong { margin-bottom:0; } .about-content p { font-size:22px; } .about-content p br { display:none; } .contact-card { padding:20px; } .contact-card .contact-heading h3 { font-size:18px; text-align:left; } .contact-heading { padding-bottom:20px; margin-bottom:10px; } .contact-card .contact-card-link a { font-size:16px; font-weight:700; } .home-main-slider .slide-content { padding-top:20px; padding-bottom:53px; } .biotics-banner slideshow-controls[controls-on-media][pagination-position=center] { margin-bottom:-7px; } .custom-collection-card img { border-radius:10px; } .slick-dotted.slick-slider.custom-collection-list-wrapper-brands { margin-bottom:36px; } .featured-blog-posts-card__image { min-height:300px;} .okeReviews[data-oke-container] .oke-prevNextButton-icon, div.okeReviews .oke-prevNextButton-icon { height:38px !important; width:38px !important; } .okeReviews[data-oke-container] .oke-bodyText, div.okeReviews .oke-bodyText { font-size:14px !important; } .okeReviews[data-oke-container] .oke-reviewCard, div.okeReviews .oke-reviewCard { padding: 22px !important; } .blog-post-featured-image { padding:20px; } } @media(max-width:750px){ .filter-count-bubble { display:none; } .snippet-addto-cart .purchase-type-option { gap:15px; } .biotics-banner .slide__image-container>img.slide__image.mobile-image { display:block; } .product-information { padding-top:20px; } .product-information__media { margin-bottom:20px; } .product-details .text-block.h3 > *, .prod-title-mobile h1 { font-size:24px; } .product-details .prod-title-desktop { display:none; } .prod-title-mobile { display:block; } .the-life-space-difference .main-div { padding:35px 20px 30px; } .announcement-bar-main{ display: flex; text-align: left; align-items:center; } .authenticity-section .authenticity-section-info > .mobile-column { flex-direction: column;} .media-gallery--carousel slideshow-controls[pagination-position=center] { bottom:-60px; } .product_banner_info_images {margin-top:80px; } .review-section .marquee-item .counts { font-size:23px; } .review-section .marquee-item { font-size:18px; } .review-section .marquee-icon { height: 38px; width: 38px; } .shop-by-range-section .tab-content { margin-bottom:20px; display:block; } .shop-by-range-section .tab-content .slick-list { max-width:80%; margin:0 auto; } .shop-by-range-section .tab-content .slick-slide { margin:0 5px; } .shop-by-range-section .tab-content .slick-slide:first-child { margin-left:0; } .shop-by-range-section .tab-content .slick-slide:last-child { margin-right:0; } .shop-by-range-section .tab-content .slick-slider .slick-prev { left:0px;} .shop-by-range-section .tab-content .slick-slider .slick-next { right:0px; } .listing-filter-tab { position:static; width:100%; } .microbial-promo-banner-content .microbial-promo-banner-title p { margin-bottom:20px; font-size: 40px; margin-bottom: 30px; line-height: 50px; } .microbial-promo-banner-content .microbial-promo-banner-title p strong { font-size:60px; } .blog-categories { padding:0 20px; } .footer-links:first-child {margin-left:0; } .announcement-bar__slider slideshow-arrows { left:0; right:0; } .review-section .marquee-container { padding:15px 0; } .specifically-content .mobile-column { flex-flow: wrap; } .specifically-content .mobile-column .specifically-formulated-box { width:50%; flex:0 0 50%; } footer .footer-logo .mobile-column {align-items:center; } .footer-main-section { padding-top:50px; } .bottom-footer .footer-content .mobile-column { align-items:center; } .get-in-touch .get-in-touch__heading span { padding:0 15px; font-size:20px; } header-actions { gap:10px; margin-left:10px; } .product-grid { gap:30px; } .announcement-bar-main img.announcement-icon { height: 30px !important; width: 30px; } .announcement-bar { display:inline-block; } .email-signup__button:not(.button-unstyled) { padding:0 19px; } .announcement-bar__slide p.announcement-bar__text { margin-left:0px; display:inline-block; } .announcement-bar__button { height:26px; line-height:26px; padding:0 10px; width:auto; font-size:10px; } .announcement-bar__slide p.announcement-bar__text span.text-line { display:none; } .announcement-bar__slides { padding:0 10px; } .announcement-bar__slide p.announcement-bar__text .sub-text-announce { width:100%;} } @media(max-width:640px){ .microbiome-section-box { flex:0 0 auto !important; height:auto; } .microbiome-section-box .group-block-content { height:auto; } .you-may-also-section .resource-list.force-full-width.resource-list__carousel, .featured-blog-posts .resource-list.force-full-width.resource-list__carousel { --column-count-mobile: 1 !important;} .blog-card-tag { font-size: 9px !important;padding: 4px 5px !important; } .the-life-space-difference .main-icon-with-text-div { width:50%; } .the-life-space-difference .image_with_text_and_button .icon { height:60px; } .the-life-space-difference .image_with_text_and_button { row-gap: 30px; } .microbial-promo-banner-content .microbial-promo-banner-title p { font-size: 28px; margin-bottom: 20px; line-height: 30px; } .microbial-promo-banner-content .microbial-promo-banner-title p strong { font-size: 34px; line-height: 40px; } .faq-banner-content .microbial-promo-banner-title p strong { font-size:40px; } .faq-banner-content .microbial-promo-banner-title p { font-size:30px; line-height:30px; } .subscribing-text, .subscribe-content p a { font-size:10px; color:#303030; } .about-right-img, .about-left-img { width:100%; max-width:100%; } .formulated-block .specifically-formulated-box { width: 50%; flex: 0 0 50%; } .specifically-formulated-content .specifically-title p { font-size:12px; } .biotics-banner-caption .biotics-heading p { font-size:35px; line-height:38px; } .biotics-banner-caption .biotics-subheading p, .biotics-banner .biotics-banner-caption.right-alignment-content .biotics-subheading p { margin-right:0; font-size: 38px; line-height:35px; letter-spacing: 14px; margin-left:15px; margin-bottom:10px; margin-top:10px; } .custom-collection-card__title { font-size:12px; margin-top:9px; } .store-locatore-tab .tabs .tab { padding:10px 28px; } .store-locatore-tab .store-detail { width:46%; } .quick-link-box .quick-link { width:100%; flex:0 0 100%; } .quick-link-box>.layout-panel-flex { gap:20px; } .review-section .marquee-item { font-size:12px;} .faqs img.faq-image { max-width:80%; } .featured-blog-posts-card__content h4 { font-size:14px; line-height:17px; } .footer-social-info p { font-size:15px; } } @media (max-width: 600px) { .product-card .user-select-text p { font-size:14px; margin:10px 0 !important; } .product-card .variant-count { font-size:14px; margin-bottom:10px; } .product-card .product-info { margin-top:0px; padding-bottom:10px; } .blog-categories-grid { grid-template-columns: 1fr;gap:20px; } .cms-content-detail thead th, .cms-content-detail table td, .cms-content-detail thead th { font-size:13px; } .product-details .product-group.product-key-benefits ul li { text-wrap:auto; } .shop-by-range-section.meta-shop-by-range .tab-content .slick-list { max-width:80%; } .shop-by-range-section .tab-content .slick-list { max-width:84%;} .product-slider-container { margin:- -10px; } .product-slider-container .slick-initialized .slick-slide { margin:0 10px; } .shop-by-range-section .tab-content .slick-slider .slick-prev { left:0px; } .shop-by-range-section .tab-content .slick-slider .slick-next { right:0px; } .snippet-addto-cart .spo-right { margin-left:0; margin-top:10px; justify-content:space-between; width:100%; } .snippet-addto-cart .spo-name { margin-bottom:10px; } .category-tab-links.blog-tags .slick-tags { gap:5px; margin:5px 0; } .category-tab-links.blog-tags .slick-tags button { margin:5px 0; font-size:14px;} } @media(max-width:429px){ .announcement-bar__slide p.announcement-bar__text { font-size:10px; } .custom-collection-card__title { font-size:10px; } .store-locatore-tab .tabs .tab { padding:6px 19px; } .subscribe-content .h3, .subscribe-content .h3.h3, .subscribe-content .text-block.h3>* { font-size:24px; } .biotics-banner-caption .biotics-heading p { font-size:30px; line-height:38px; } }