@font-face { font-family: 'Quentin'; src: url('https://cdn.shopify.com/s/files/1/0920/6153/2233/files/Quentin.ttf?v=1764577110') format('truetype'); font-weight: normal; font-style: normal; font-display: swap; } body { letter-spacing: normal; } /* Several off-canvas / dropdown elements (mega-menu panel, cart drawer) are wider than the viewport by design and normally invisible, but an invisible element still contributes to scrollable overflow — without this they add horizontal scroll and a sliver of blank space on the right at narrower desktop/laptop widths. `overflow-x: hidden` here would fix that too, but it also breaks position:sticky on the header (any ancestor with overflow other than visible does). `clip` clips the same way without creating a scroll container, so sticky keeps working. */ html, body { overflow-x: clip; } /* Same story on the other axis: the mobile menu drawer, cart drawer, and modals all lock scroll by adding .overflow-hidden(-mobile/-tablet/-desktop) to while open (see global.js). Plain `overflow: hidden` breaks position:sticky on the header — since body is always its ancestor, the header stops sticking and scrolls out of view the moment one of these opens after the page has been scrolled. `clip` locks scroll the same way without creating a scroll container, so the header keeps sticking. */ .overflow-hidden, .overflow-hidden-mobile, .overflow-hidden-tablet, .overflow-hidden-desktop { overflow: clip; } /* "Trusted by thousands" homepage reviews — initials avatar, standing in for a photo since Review has no image field, sized to match the .block__multicolumn-crad-buyer-name img rules in multicolumn.css. */ .block__multicolumn-crad-avatar { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; flex-shrink: 0; border-radius: 50%; background: #b4975a; color: #fff; font-weight: 600; font-size: 1.6rem; text-transform: uppercase; } @media screen and (max-width: 749px) { .block__multicolumn-crad-avatar { width: 4.4rem; height: 4.4rem; } } .block__multicolumn-crad-verified { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin-left: 4px; border-radius: 50%; background: #1f5c47; color: #fff; font-size: 11px; line-height: 1; vertical-align: middle; } img { max-width: 100%; vertical-align: middle; height: auto; } .mb-80 { margin-bottom: 80px; } .p-80 { padding: 80px 0; } ul { padding: 0; margin: 0; list-style: none; } .h-100 { height: 100%; width: 100%; } .m-0 { margin: 0; } .line-0 { line-height: 0; } .obj-cover { object-fit: cover; } .text-deco-none { text-decoration: none !important; } .text-cap { text-transform: capitalize; } .custom_btn, .customer button { text-decoration: none !important; font-weight: 600; font-family: var(--font-body-family); transition: all 0.5s ease-in-out; cursor: pointer; /* background: var(--tertiary-color); color: var(--secondary-color); */ padding: 1.4rem 2.8rem; line-height: 1; display: inline-block; width: auto; text-align: center; border-radius: 54px; margin: 0; } .custom_btn:hover, .customer button:hover { background: var(--quinary-color); color: var(--secondary-color); } .btn { border-radius: 0.8rem; font-weight: 600; padding: 1.4rem 3.5rem; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; text-decoration: none; overflow: hidden; white-space: nowrap; /* height: 100%; width: 100%; */ transition: all 0.5s ease-in-out; /* color: rgb(var(--color-button-text)); */ gap: 0; cursor: pointer; filter: brightness(1.005); } .btn .label { opacity: 0; transition: all 0.5s ease-in, all 0.7s ease-out, opacity 0.2s ease; width: 0; } .btn:hover { justify-content: space-between; gap: 43px; } .btn:hover .label { opacity: 1; width: max-content; } .text-up { text-transform: uppercase; } .w-full { width: 100%; } .h-full { height: 100%; } .text-left{ text-align: left !important; } .text-center { text-align: center !important; } .text-right{ text-align: right !important; } .button_hover { background: var(--octal-color); border: 1px solid #0000000d; border-radius: 6px; gap: 16px; padding: 18px 65px; display: flex; cursor: pointer; justify-content: center; align-items: center; transition: all 0.5s ease-in-out; line-height: 1; min-width: calc(11rem + var(--buttons-border-width) * 2); font-family: var(--font-body-family); } .button_hover:hover { background: var(--tertiary-button-hover-color); color: var(--selection-color); } .button--secondary.button_hover:hover svg path { fill: var(--selection-color); } .button--primary { background-color: var(--primary-button-color); color: var(--selection-color); } .button--secondary { background-color: var(--tertiary-button-color); color: var(--secondary-color); } .button--primary.loading:hover { color: transparent; } .button.loading:hover > .loading__spinner .path { stroke: var(--primary-color); } .button--secondary { font-weight: 600; } .shopify_subscriptions_in_widget_price { display: block !important; } .swiper-button-lock { display: none !important; } .inner_container { max-width: 1320px; padding: 0 4rem; margin: auto; } .underline_button { color: var(--primary-color); text-decoration: none; display: inline-flex; align-items: center; margin: 0; gap: 10px; font-weight: 600; transition: 0.3s all ease; position: relative; } .underline_button:before { position: absolute; content: ""; left: 0; bottom: -4px; background: var(--primary-color); width: 100%; height: 1px; transition: all 0.4s ease; } .underline_button:hover:before { background-color: var(--quaternary-color); } .underline_button:hover { color: var(--quaternary-color); border-color: var(--quaternary-color); } .underline_button:hover svg path { stroke: var(--quaternary-color); } .underline_button svg path { transition: 0.3s all ease; } /* heading */ .block__custom-text__heading { margin-top: 0; margin-bottom: 0; line-height: 1.24; } .block__custom-title--header p { margin: 0; font-size: var(--regular_body); list-style: 1.7; } .collection__title .h4 { line-height: 1.24; margin-bottom: 0.8rem; } .collection__title .collection__description { line-height: 1.7; } .block__custom-text__heading .body { line-height: 1.6; } @media only screen and (max-width: 767px) { .collection__title .collection__description { line-height: 20px; } } /* announcement-bar */ .announcement-bar { align-items: center; } .announcement-bar__announcement, .first_announcement-bar__announcement { align-items: center; padding: 13px 0 12px; } .announcement-bar p { margin: 0; } .announcement-bar svg { margin-right: 14px; } .announcement-bar__button { border: 0; outline: 0; border-radius: 32px; margin-left: 8px; font-size: 1.2rem; padding: 7px 32px; } /* announcement bar — moving ad style */ .announcement-bar-section--dark { background: #111111; } .announcement-bar-section--dark .announcement-bar, .announcement-bar-section--dark .first_announcement-bar__announcement { color: #ffffff; padding: 0; justify-content: flex-start; /* Without this, the flex/grid ancestors default to min-width:auto and grow to fit the (intentionally very wide) marquee track instead of letting it clip — causing page-wide horizontal overflow. */ min-width: 0; } .announcement-bar__marquee { width: 100%; min-width: 0; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); } .announcement-bar__track { display: inline-flex; width: max-content; white-space: nowrap; } /* Animation only starts once JS has cloned enough copies to cover the bar's width — otherwise a single short message would scroll off and leave a blank gap before the loop restarts. See the script at the bottom of the announcement bar markup. */ .announcement-bar__track.is-marquee-ready { animation: announcement-marquee var(--marquee-duration, 24s) linear infinite; } .announcement-bar-section--dark:hover .announcement-bar__track { animation-play-state: paused; } .announcement-bar__item { display: inline-flex; align-items: center; flex-shrink: 0; padding: 14px 0; margin-right: 5.5rem; font-size: 1.4rem; line-height: 1.3; } .announcement-bar__item svg { margin-right: 10px; flex-shrink: 0; color: #ffffff; } .announcement-bar__item p { margin: 0; color: inherit; } .announcement-bar__item strong { font-weight: 700; } @keyframes announcement-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .announcement-bar__track.is-marquee-ready { animation: none; } } @media screen and (max-width: 749px) { .announcement-bar__item { padding: 11px 0; margin-right: 3.2rem; font-size: 1.2rem; } } .tertiary-border-radius { border-radius: 1.2rem; } .tertiary-border-radius-small { border-radius: 0.6rem; } .block__content_left { text-align: left; } .block__content_right { text-align: right; } .block__content_center { text-align: center; } .heading h3 { margin: 0; } .mobile_visually-hidden { display: none; } .block-slider-arrow-wrapper { position: absolute; top: 45%; z-index: 2; cursor: pointer; } /* .related-products .block-slider-arrow-wrapper { top: 45%; } */ .related-products .block-slider-arrow-wrapper { top: 0; bottom: 0; display: flex; } .related-products .block-slider-arrow-wrapper .block_collection-slider-arrow { display: flex; justify-content: center; align-items: center; } .related-products .block-slider-arrow-wrapper.block__-slider-arrow_next_icon .block_slider_prev_icon { display: none; } .block_slider_icon rect { fill: var(--secondary-button-color); } .block_slider_icon:hover rect { fill: rgb(var(--color-background)); } .block__slider-arrow_prev_icon { left: 0.7%; } .block__-slider-arrow_next_icon { right: 0.7%; } .absolute { position: absolute; } .relative { position: relative; } .inset-0 { top: 0; right: 0; bottom: 0; left: 0; } .object-cover { object-fit: cover; } .mobile_small_hiden { display: none; } @media (max-width: 1200px) { .block-slider-arrow-wrapper { top: 40%; } } @media (max-width: 989px) { .btn { min-height: calc(5rem + var(--buttons-border-width) * 2); } .btn:hover { min-width: calc(10rem + var(--buttons-border-width) * 2); padding: 0 2.4rem 0 2.5rem; } .button_hover { padding: 14px 36px; } .mobile_visually-hidden { display: block; } .desktop_visually-hidden { display: none; } .block-slider-arrow-wrapper { display: flex; gap: 1.2rem; justify-content: center; margin-top: 1.6rem; margin-bottom: 0; width: 100%; position: unset; } } .block__Watch-and-Shop_content .yotpo-vugc-header-container { display: none !important; } .text-title-case { text-transform: capitalize; } .hidden-color { display: none; } @media (max-width: 989px) { .related-products .block-slider-arrow-wrapper.block__-slider-arrow_next_icon .block_slider_prev_icon { display: flex; } } /* ===========rebuy-css======= */ .block_rebuy-card__badge { position: absolute; top: 10px; left: 10px; display: flex; flex-wrap: wrap; } /* =========== rise.css ======= */ .rise-cbe__check-balance-title , .rise-cbe__balance-view-title , .rise-cbe__balance_expiration , .rise-cbe__balance_value{ font-size: var(--h4); } .rise-cbe__card .rise-cbe__check-button { border-radius: 6px; } .rise-cbe__card .rise-cbe__check-button:hover { background-color: var(--primary-button-color); color: var(--selection-color); } .rise-cbe__balance-view-title { margin-bottom: 10px !important; } .template_suffix_free-swatch .rich-text .rich-text__image.left{ position: absolute; left: 0; top: 50px; width: auto; margin: 0; } .template_suffix_free-swatch .rich-text .rich-text__image.right{ position: absolute; right: 0; top: 50px; width: auto; } .template_suffix_free-swatch .rich-text{ display: flex; flex-wrap: wrap; justify-content: center; } .template_suffix_free-swatch .rich-text__blocks>*+* { margin-top: 2rem; width: 100%; } @media (max-width: 1699px) { .template_suffix_free-swatch .rich-text .rich-text__image.left{ width: 25%; } .template_suffix_free-swatch .rich-text .rich-text__image.right{ width: 25%; } } @media (max-width: 1449px) { .template_suffix_free-swatch .rich-text .rich-text__image.left{ width: 22%; } .template_suffix_free-swatch .rich-text .rich-text__image.right{ width: 22%; } } @media (max-width: 1349px) { .template_suffix_free-swatch .rich-text .rich-text__image.left{ width: 18%; } .template_suffix_free-swatch .rich-text .rich-text__image.right{ width: 18%; } } @media (max-width: 1299px) { .template_suffix_free-swatch .rich-text .rich-text__image.left{ width: 17%; } .template_suffix_free-swatch .rich-text .rich-text__image.right{ width: 17%; } } @media (max-width: 1199px) { .template_suffix_free-swatch .rich-text .rich-text__image.left, .template_suffix_free-swatch .rich-text .rich-text__image.right{ position: unset; display: inline-block; width: 45%; margin-left: 10px; margin-right: 10px; } } @media (max-width: 400px) { .template_suffix_free-swatch .rich-text .rich-text__image.left, .template_suffix_free-swatch .rich-text .rich-text__image.right{ width: 40%; } }