/* Fonts */ @keyframes fadeout { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes ellipsis { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 100% { content: "..."; } } /* Utility Mixins Styleguide: Utilities */ /* .noscroll prevents the element from being scrolled. Useful to put on 'body' for flyouts and modals. ```html // This page will not be scrollable ``` Style guide: Base - noscroll */ /* clickable Changes the mouse cursor to a pointer and does not allow text selection. ```scss button { @include clickable; } ``` Styleguide: Utilities - clickable */ /* hide-scrollbar Hides the scrollbar on the element. Compatible in Chrome 4+, Safari 5.1+, Opera 15+, iOS Safari 7.1+. ```scss .container { @include hide-scrollbar; } ``` Styleguide: Utilities - hide-scrollbar */ /* hide-number-spinner Hides the number spinner. ```scss input[type="number"] { @include hide-number-spinner; } ``` Styleguide: Utilities - hide-number-spinner */ /* maintain-ratio Uses zero height and bottom padding to maintain the ratio of an element. $ratio - The width to height ratio of the element, separated by a space. ```scss .square { @include maintain-ratio(1 1); } .rectangle { @include maintain-ratio(4 3); } ``` Styleguide: Utilities - maintain-ratio */ /* Apply transition properties to multiple properties. Avoids the need to specify transition properties for each property. Usage: @include transition(0.3s ease-in-out, width, height, color); Output: transition(width 0.3s ease-in-out, height 0.3s ease-in-out, color 0.3s ease-in-out); */ /* * Hide visually and from screen readers */ /* * Hide only visually, but have it available for screen readers: * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility * * 1. For long content, line feeds are not interpreted as spaces and small width * causes content to wrap 1 word per line: * https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe */ /* * Extends the .visuallyhidden class to allow the element * to be focusable when navigated to via the keyboard: * https://www.drupal.org/node/897638 */ /* * Hide visually and from screen readers, but maintain layout */ /* * Removes indentation and bullets from lists */ /* * Wraps long text when the words are too long */ /* * Renders a form with all fields on the same row */ .root :global { --window-inner-height: 100vh; } @layer base { html, body { padding: 0; margin: 0; font-family: var(--font-montserrat); } h1, h2, h3, h4, h5, h6 { font-family: var(--font-oswald); } h1 { font-size: 48px; } h2 { font-size: 32px; } h3 { font-size: 28px; } h4 { font-size: 24px; } h5 { font-size: 20px; } h6 { font-size: 18px; } a { color: inherit; text-decoration: none; } * { box-sizing: border-box; } } @layer base { * { margin: 0; padding: 0; } *, *::before, *::after { box-sizing: inherit; } html { scroll-behavior: smooth; box-sizing: border-box; } body { font-family: var(--font-montserrat); } body h1, body h2, body h3, body h4, body h5, body h6 { font-family: var(--font-oswald); } body h1 { font-size: 48px; } body h2 { font-size: 32px; } body h3 { font-size: 28px; } body h4 { font-size: 24px; } body h5 { font-size: 20px; } body h6 { font-size: 18px; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-oswald); } h1 { font-size: 48px; } h2 { font-size: 32px; } h3 { font-size: 28px; } h4 { font-size: 24px; } h5 { font-size: 20px; } h6 { font-size: 18px; } } .red--text { color: #d14124; } @layer base { body { background: #ffffff; color: #3d3935; font-family: var(--font-montserrat); font-weight: 300; line-height: 1.4; } p { display: block; -webkit-margin-before: 1em; margin-block-start: 1em; -webkit-margin-after: 1em; margin-block-end: 1em; -webkit-margin-start: 0px; margin-inline-start: 0px; -webkit-margin-end: 0px; margin-inline-end: 0px; } a { background: transparent; color: #3d3935; } a:focus, a:hover { color: #22201d; } a:active { color: #22201d; } ol, ul { /* stylelint-disable-line block-no-empty */ } li { /* stylelint-disable-line block-no-empty */ } dl { /* stylelint-disable-line block-no-empty */ } dt { /* stylelint-disable-line block-no-empty */ } dd { /* stylelint-disable-line block-no-empty */ } } .wf-black-text { color: #3d3935; } .wf-red-text { color: #dc4504; } .wf-white-text { color: #ffffff; } .wf-gray-text { color: #9e9e9e; } .wf-default-text { color: #000000; } .membership-added-to-cart-text { color: #3d3935; cursor: not-allowed; font-family: var(--font-oswald); font-size: 1rem; font-weight: 500; text-align: center; text-transform: uppercase; } button[type=button]:not([class]), button[type=submit]:not([class]), button[type=reset]:not([class]), input[type=button]:not([class]), input[type=submit]:not([class]), input[type=reset]:not([class]) { border-radius: 2rem; display: inline-block; font-family: var(--font-oswald); letter-spacing: 0.02em; font-size: 16px; font-weight: 500; line-height: 16px; min-width: 5em; padding: 0.6em 1.25em; margin: 0; text-align: center; text-decoration: none; text-transform: uppercase; transition: background-color 200ms, border-color 200ms; } button[type=button]:not([class]):hover, button[type=submit]:not([class]):hover, button[type=reset]:not([class]):hover, input[type=button]:not([class]):hover, input[type=submit]:not([class]):hover, input[type=reset]:not([class]):hover { cursor: pointer; } button[type=button]:not([class]):disabled, button[type=submit]:not([class]):disabled, button[type=reset]:not([class]):disabled, input[type=button]:not([class]):disabled, input[type=submit]:not([class]):disabled, input[type=reset]:not([class]):disabled { cursor: not-allowed; } button[type=button]:not([class]), button[type=submit]:not([class]), button[type=reset]:not([class]), input[type=button]:not([class]), input[type=submit]:not([class]), input[type=reset]:not([class]) { position: relative; min-width: -moz-fit-content !important; min-width: fit-content !important; padding: 10px 20px; border-radius: 20px !important; height: 44px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-family: var(--font-oswald) !important; font-size: 16px !important; font-weight: 500 !important; } .action { border-radius: 2rem; display: inline-block; font-family: var(--font-oswald); letter-spacing: 0.02em; font-size: 16px; font-weight: 500; line-height: 16px; min-width: 5em; padding: 0.6em 1.25em; margin: 0; text-align: center; text-decoration: none; text-transform: uppercase; transition: background-color 200ms, border-color 200ms; } .action:hover { cursor: pointer; } .action:disabled { cursor: not-allowed; } .action { position: relative; min-width: -moz-fit-content !important; min-width: fit-content !important; padding: 10px 20px; border-radius: 20px !important; height: 44px !important; display: inline-flex; align-items: center !important; justify-content: center !important; font-family: var(--font-oswald) !important; font-size: 16px !important; font-weight: 500 !important; } @media (max-width: 40em) { .action { width: 100%; } } .action--primary--black { color: #ffffff; fill: #ffffff; background-color: #3d3935; } .action--primary--black:hover, .action--primary--black:focus, .action--primary--black:active { background-color: #000000; border-color: #000000; } .action--primary--red { color: #ffffff !important; fill: #ffffff !important; background-color: #dc4405 !important; border: 1px solid #dc4405 !important; } .action--primary--red:hover, .action--primary--red:active { background-color: #872a03 !important; border-color: #872a03 !important; } .action--primary--white { color: #3d3935; fill: #3d3935; background-color: #ffffff; border: none; } .action--primary--white:hover, .action--primary--white:focus, .action--primary--white:active { color: #000000; background-color: #ffffff; border: none; } .action--primary--icon-black { color: #ffffff; fill: #ffffff; background-color: #3d3935; border: 1px solid #3d3935; } .action--primary--icon-black:hover, .action--primary--icon-black:focus, .action--primary--icon-black:active { background-color: #000000; border-color: #000000; } .action--primary--icon-black .icon-button-content { display: flex; position: relative; width: 100%; } .action--primary--icon-black .icon-button-content svg { margin: 0 8px 0 0; stroke: #ffffff; fill: #ffffff; stroke-width: 100; width: 16px; height: 16px; } .action--primary--icon-red { color: #ffffff; fill: #ffffff; background-color: #dc4405; border: 1px solid #dc4405; } .action--primary--icon-red:hover, .action--primary--icon-red:focus, .action--primary--icon-red:active { background-color: #872a03; border-color: #872a03; } .action--primary--icon-red .icon-button-content { display: flex; position: relative; width: 100%; } .action--primary--icon-red .icon-button-content svg { margin: 0 8px 0 0; stroke: #ffffff; fill: #ffffff; stroke-width: 100; width: 16px; height: 16px; } .action--secondary--black { color: #3d3935; fill: #3d3935; background-color: transparent; border: 1px solid #3d3935; } .action--secondary--black:hover, .action--secondary--black:focus, .action--secondary--black:active { color: #000000; fill: #000000; border-color: #000000; background-color: transparent; } .action--secondary--red { color: #dc4405; fill: #dc4405; background-color: transparent; border: 1px solid #dc4405; } .action--secondary--red:hover, .action--secondary--red:focus, .action--secondary--red:active { color: #872a03; fill: #872a03; border-color: #872a03; background-color: transparent; } .action--secondary--white { color: #ffffff; fill: #ffffff; background-color: transparent; border: 1px solid #ffffff; } .action--secondary--white:hover, .action--secondary--white:focus, .action--secondary--white:active { color: #d8d7d7; fill: #d8d7d7; border-color: #d8d7d7; background-color: transparent; } .action--disabled { color: #9e9c9a; fill: #9e9c9a; background-color: #d8d7d7; border: 1px solid #d8d7d7; font-size: 16px !important; } .action--subscription { color: #ffffff; background: linear-gradient(180deg, #a38c71 0%, #8f7b64 6.25%, #685642 100%); border-color: #7e6a54; border-radius: 0.25rem; } .action--subscription:hover, .action--subscription:focus { background: linear-gradient(180deg, #a38c71 0%, #8f7b64 6.25%, #685642 100%); border-color: #7e6a54; } .action--info { border-radius: 0.25rem; } .action--info, .action--info:hover, .action--info:focus, .action--info:active { background: linear-gradient(180deg, #f5f5f5 0%, #ffffff 10.42%, #ececec 97.4%); color: #3d3935; border: 1px solid #e0e0e0; } .action--outline { background: #ffffff !important; margin-right: unset !important; } .action--outline--black { color: #3d3935; border: 1px solid #3d3935; } .action--outline--black:hover { color: #ffffff; background-color: #3d3935 !important; border-color: #3d3935; } a.action--size-xl, button.action--size-xl { font-size: 1rem; padding: 1rem 1.5rem; min-width: 15rem; } a.action--size-lg, button.action--size-lg { font-size: 0.875rem; padding: 0.875rem 1.5rem; min-width: 15rem; } a.action--size-md, button.action--size-md { font-size: 0.75rem; padding: 0.625rem 1rem; } a.action--size-sm, button.action--size-sm { font-size: 0.625rem; padding: 0.5rem 0.75rem; } a.action--size-xs, button.action--size-xs { font-size: 0.625rem; padding: 0.375rem 0.5rem; } @media (max-width: 40em) { .media-tile-collection .caption .action { width: 100%; margin-bottom: 10px; } } .action__icon { position: absolute; top: 0; left: 0.75rem; width: 1.5rem; height: 1.5rem; border-radius: 100%; background: #ffffff; fill: #3d3935; transform: translateY(-50%); } .text-input ~ label { position: absolute; top: 50%; left: 0; } .text-input:focus ~ label, .text-input.has-content ~ label { top: 5px; font-size: 11px; transition: 0.2s ease-in-out; } .input-group { position: relative; padding-top: 1.25rem; margin-bottom: 1.25rem; } .input-group input, .input-group select { font-size: inherit; padding: 3px 0; width: 100%; border: none; border-bottom: solid 1px #3d3935; } .input-group label { transition: 0.2s ease-in-out; text-transform: none; letter-spacing: normal; } .input-group .select-wrapper::after { margin: 0; } .select-wrapper label { top: -1.25rem; font-size: small; } .visually-hidden { display: none; } .autoship-dropdown { font-family: var(--font-oswald); background-color: #f2f2f2; padding: 1rem; width: 100%; } .autoship-dropdown__container { display: flex; justify-content: space-between; flex-wrap: wrap; } .autoship-dropdown__content { display: flex; align-items: center; } .autoship-dropdown__title { min-width: 14rem; display: flex; align-items: center; font-size: 1.3rem; font-weight: bold; margin: 0.5rem; } .autoship-dropdown .delivery-schedule__container { display: flex; align-items: center; } .autoship-dropdown .delivery-schedule__deliveryContainer { width: 14rem; } .autoship-dropdown .delivery-schedule__label { margin: 0.5rem; } .autoship-dropdown .delivery-schedule__label label { color: #000000; } .autoship-dropdown .delivery-schedule__dropdown { min-width: 10rem; } .autoship-dropdown .delivery-schedule__dropdown select { border: 1px solid; padding: 0.625rem 0.625rem 0.625rem; } .autoship-form { font-family: var(--font-oswald); background-color: #f2f2f2; padding: 1rem; } .autoship-form .content { display: flex; } .autoship-form .content__icon { min-width: 2rem; margin-top: 0.4rem; } .autoship-form .content__deliveryIcon { position: absolute; } .autoship-form .content__deliveryContainer { margin: 0 2rem; } .autoship-form .content__container { margin: 0 0.5rem; } .autoship-form .content__title { font-size: 1.25rem; font-weight: 600; } .autoship-form .content__title .autoship-title { color: #d14124; } .autoship-form .content__description { font-size: 0.875rem; margin: 1rem 0; } .autoship-form .checkbox { display: inline-flex; width: 100%; margin: 0 0.5rem; } .autoship-form .checkbox input { width: 5%; } .autoship-form .checkbox label { color: #000000; } .autoship-form .checkbox-cart-drawer { display: inline-flex; width: 100%; margin: 0; } .autoship-form .checkbox-cart-drawer input { width: 5%; } .warning-label { display: block; margin-top: 0.5rem; color: #d14124; } .autoship-form-icon { position: relative; } .autoship-form-icon__arrows { position: absolute; inset: 6px; } .quick-add { --border-size: 2px; min-height: 35px; } @media (min-width: 60em) { .quick-add { min-height: 44px; } } .quick-add { text-align: center; } .quick-add--quantity-selector-wrapper { display: flex; flex-direction: row; width: 140px; height: 44px; margin: auto; } @media (max-width: 60em) { .quick-add--quantity-selector-wrapper { height: 35px; } } .quick-add--quantity-selector-wrapper .quantity-selector { position: relative; display: flex; flex-wrap: wrap; justify-content: flex-start; width: auto; } .quick-add--quantity-selector-wrapper .quantity-selector-input { border-color: #d14124; border-radius: 0; border-style: solid none; border-width: var(--border-size); color: #3d3935; font-family: var(--font-oswald); font-size: 1rem; font-weight: 500; height: 2.75rem; max-width: 9.125rem; padding: 0; text-align: center; width: 4.1875rem; } .quick-add--quantity-selector-wrapper .quantity-selector-button { align-items: center; background: #d14124; border: none; cursor: pointer; display: flex; height: 2.75rem; justify-content: center; position: relative; -webkit-user-select: none; -moz-user-select: none; user-select: none; width: 2.25rem; font-size: 2rem; color: #ffffff; } @media (max-width: 60em) { .quick-add--quantity-selector-wrapper .quantity-selector-button { height: 35px; } } @media (hover: hover) and (pointer: fine) { .quick-add--quantity-selector-wrapper .quantity-selector-button:hover { background-color: #872a03; border-color: #872a03; } } @media (hover: none) and (pointer: coarse) { .quick-add--quantity-selector-wrapper .quantity-selector-button:active { background-color: #872a03; border-color: #872a03; } } .quick-add--quantity-selector-wrapper .quantity-selector-button-up::after, .quick-add--quantity-selector-wrapper .quantity-selector-button-up::before, .quick-add--quantity-selector-wrapper .quantity-selector-button-down::after, .quick-add--quantity-selector-wrapper .quantity-selector-button-down::before { background-color: #fff; content: ""; left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); } .quick-add--quantity-selector-wrapper .quantity-selector-button-up--disabled, .quick-add--quantity-selector-wrapper .quantity-selector-button-up--disabled:hover { border-color: #d14124; cursor: default; pointer-events: auto; opacity: 0.8; background-color: rgba(209, 65, 36, 0.38); } .quick-add--quantity-selector-wrapper .quantity-selector-button-up--disabled::after, .quick-add--quantity-selector-wrapper .quantity-selector-button-up--disabled::before { background-color: rgba(135, 42, 3, 0.4); } .quick-add--quantity-selector-wrapper .quantity-selector-button-down { border: var(--border-size) solid #d14124; border-radius: 4.140625rem 0 0 4.140625rem; min-width: 35px; } .quick-add--quantity-selector-wrapper .quantity-selector-button-down::before { height: 2px; width: 12px; } .quick-add--quantity-selector-wrapper .quantity-selector-button-up { border: var(--border-size) solid #d14124; border-radius: 0 4.140625rem 4.140625rem 0; min-width: 35px; } .quick-add--quantity-selector-wrapper .quantity-selector-button-up::before { height: 2px; width: 12px; } .quick-add--quantity-selector-wrapper .quantity-selector-button-up::after { height: 12px; width: 2px; } .quick-add--quantity-selector-wrapper .quantity-selector__button { color: #ffffff; height: auto; font-size: 2rem; font-weight: 500; line-height: normal; transition: none; text-transform: none; position: relative; background-color: #ffffff; margin: 0; min-width: 0; min-height: 0; padding: 0; display: flex; align-items: center; justify-content: center; -webkit-user-select: none; -moz-user-select: none; user-select: none; cursor: pointer; background: linear-gradient(180deg, #64615d 0%, #3d3935 6.25%, #181818 100%); border: 1px solid #000000; border-radius: 4px !important; width: 2.25rem; height: 2.125rem; } @media (min-width: 60em) { .quick-add--quantity-selector-wrapper .quantity-selector__button { height: 44px; width: 46px; } } @media (min-width: 45em) { .quick-add--quantity-selector-wrapper .quantity-selector__button { width: 2.6875rem; height: 2.75rem; } } @media (min-width: 45em) { .quick-add--quantity-selector-wrapper .quantity-selector { justify-content: center; } } .quick-add--quantity-selector-wrapper .quantity-selector .price-qty { display: flex; height: 1.94rem; align-items: center; max-width: 7.5rem; } .quick-add--quantity-selector-wrapper .quantity-selector .price-qty-value { height: 1.94rem; width: 2.5rem; } @media (min-width: 60em) { .quick-add--quantity-selector-wrapper .quantity-selector .price-qty-value-cart { min-width: 46px; min-height: 46px; } .quick-add--quantity-selector-wrapper .quantity-selector .price-qty-value-cart input { border: none; min-width: 46px; } } .quick-add--quantity-selector-wrapper .quantity-selector .price-qty-value input { font-size: 1.5em; padding: 0px !important; border-radius: 0 !important; border: none; max-width: 40px; text-align: center; } .quick-add--quantity-selector-wrapper .quantity-selector .price-qty-remove { display: block; text-decoration: underline; margin: 8px 0px; cursor: pointer; font-size: 0.75rem; font-family: var(--font-montserrat); } .quick-add--quantity-selector-wrapper .quantity-selector .price-qty-reached { color: #d14124; font-size: 0.75rem; margin: 8px 0px; font-weight: 300; } .quick-add .circular-progress-wrapper { height: 44px; padding-bottom: 10px; } @media (max-width: 60em) { .quick-add .circular-progress-wrapper { height: 35px; } } .quick-add__atc { color: #ffffff; display: inline-block; fill: #ffffff; font-family: var(--font-oswald); /* Required for styling */ font-size: 0.75rem; font-weight: 700; line-height: 1.2; min-height: 3.66666em; min-width: 12em; text-align: center; text-decoration: none; text-transform: uppercase; transition: background-color 0.2s, border-color 0.2s; background: linear-gradient(180deg, #64615d 0%, #3d3935 6.25%, #181818 100%); border: 1px solid #000000; border-radius: 4px; min-height: 34px; padding: 0.5em 1.25em; } .quick-add__atc--secondary { background: #3d3935; color: #ffffff; display: inline-block; fill: #ffffff; font-family: var(--font-oswald); /* Required for styling */ font-size: 0.75rem; font-weight: 700; line-height: 1.2; min-height: 3.66666em; min-width: 12em; text-align: center; text-decoration: none; text-transform: uppercase; transition: background-color 0.2s, border-color 0.2s; background: linear-gradient(180deg, #64615d 0%, #3d3935 6.25%, #181818 100%); border: 1px solid #000000; border-radius: 4px; min-height: 34px; padding: 0.5em 1.25em; cursor: pointer; } @media (min-width: 45em) { .quick-add__atc--secondary { min-height: 2.25rem; width: 11rem; max-width: -moz-fit-content; max-width: fit-content; } } .quick-add__atc--tertiary { background: rgba(111, 111, 111, 0.75); color: #ffffff; display: inline-block; fill: #ffffff; font-family: var(--font-oswald); /* Required for styling */ font-size: 0.75rem; font-weight: 700; line-height: 1.2; min-height: 3.66666em; min-width: 12em; text-align: center; text-decoration: none; text-transform: uppercase; transition: background-color 0.2s, border-color 0.2s; background: linear-gradient(180deg, #64615d 0%, #3d3935 6.25%, #181818 100%); border: 1px solid #000000; border-radius: 4px; min-height: 34px; padding: 0.5em 1.25em; cursor: pointer; } @media (min-width: 45em) { .quick-add__atc--tertiary { min-height: 2.25rem; width: 11rem; max-width: -moz-fit-content; max-width: fit-content; } } @media (max-width: 45em) { .quick-add__atc--tertiary { min-height: 2.25rem; width: 11rem; max-width: 100%; } } .quick-add__atc--tertiary--action-zipcode { font-size: 1rem; font-weight: 500; color: #979797; background-color: transparent; border: none; cursor: pointer; } .quick-add__atc--tertiary--action-zipcode:hover { color: #3d3935; } .quick-add__atc--oos { text-align: center; cursor: pointer; width: max-content; margin: 0px; } @media (min-width: 45em) { .quick-add__atc--oos { min-height: 2.25rem; } } @media (max-width: 45em) { .quick-add__atc--oos { height: 35px; width: 100%; } } .quick-add__atc--orange { background: #dc4405; color: #ffffff; display: inline-block; fill: #ffffff; font-family: var(--font-oswald); /* Required for styling */ font-size: 0.75rem; font-weight: 500; line-height: 1.2; min-height: 3.66666em; min-width: 7em; text-align: center; text-decoration: none; text-transform: uppercase; transition: background-color 0.2s, border-color 0.2s; background: linear-gradient(180deg, #cf4023, #da4405 10.42%, #c54b32 97.4%); border: 1px solid #dc4405; border-radius: 25px; min-height: 34px; padding: 0.5em 0.5em; cursor: pointer; } @media (min-width: 45em) { .quick-add__atc--orange { min-height: 2.25rem; width: 11rem; max-width: -moz-fit-content; max-width: fit-content; } } @media (min-width: 1040px) { .quick-add__atc--orange { min-width: 9em; } } @media (min-width: 45em) { .quick-add__atc { min-height: 44px; } } .quick-add .icon-button-content { display: flex; align-items: center; } @media (max-width: 45em) { .quick-add .icon-button-content { justify-content: center; } } .quick-add .icon-button-content .icon { display: flex; position: relative; width: 1rem; margin-right: 5px; } .quick-add button.action--add-to-cart { width: auto; background-color: #d14124; color: #ffffff; font-family: var(--font-oswald); font-style: normal; font-weight: 500; text-transform: uppercase; border-radius: 22px; line-height: 16px; font-size: 16px; letter-spacing: 0.32px; padding: 8px; display: flex; justify-content: center; align-items: flex-end; flex-direction: column; gap: 8px; height: 44px; border: none; } @media (max-width: 60em) { .quick-add button.action--add-to-cart { height: 35px; } } .quick-add button.action--add-to-cart:hover { background-color: #872a03; cursor: pointer; } .quick-add button.action--add-to-cart svg { width: 18px; height: 18px; stroke-width: 3px; } .quick-add button.action--add-to-cart .start-icon-content { display: flex; padding: 5px; justify-content: center; align-items: center; gap: 10px; align-self: stretch; } .quick-add button.action--add-to-cart:disabled { cursor: none; pointer-events: none; background-color: #d8d7d7; color: #9e9c9a; } .max-quantity-text { color: #d14124; font-size: 0.75rem; font-weight: 300; } .button-filler { display: inline-block; min-width: 144px; min-height: 2.25rem; } .quick-add__atc--oos { height: 2.75rem; padding-top: 0 !important; padding-bottom: 0 !important; } @media (max-width: 45em) { .quick-add__atc--oos { height: 35px; } } .quick-add__atc--oos .icon-button-content { font-size: 0.75rem; font-weight: 500; } @media (max-width: 45em) { .quick-add__atc--oos .icon-button-content { gap: 3px; font-size: 13px; } } .quick-add__atc--oos .icon-button-content .icon { width: 26.4px; } @media (max-width: 45em) { .quick-add__atc--oos .icon-button-content .icon { width: 20px; height: 20px; margin-right: 0px; } } @media (min-width: 60em) { .quick-add__atc--oos .icon-button-content { font-size: 1rem; } } .quick-add__atc--oos, .quick-add__atc--oos:active, .quick-add__atc--oos:focus, .quick-add__atc--oos:hover { background: #3d3935; color: #ffffff; border: 1px solid #000000; } .quick-add__atc--secondary, .quick-add__atc--secondary:active, .quick-add__atc--secondary:focus, .quick-add__atc--secondary:hover, .quick-add__lm, .quick-add__lm:active, .quick-add__lm:focus, .quick-add__lm:hover { background: transparent; color: #3d3935; border: 1.5px solid #e0e0e0; } .quick-add__atc--tertiary, .quick-add__atc--tertiary:active, .quick-add__atc--tertiary:focus, .quick-add__atc--tertiary:hover { background: linear-gradient(180deg, rgba(100, 97, 93, 0.5), rgba(61, 57, 53, 0.5) 6.25%, rgba(24, 24, 24, 0.5)); color: #fafafa; border: 0; cursor: not-allowed; } .quick-add__atc--orange { background: #dc4405; color: #ffffff; border: 1.5px solid #dc4405; } .card-pod { padding: 0.5rem 1rem; white-space: pre-wrap; } .card-pod--carousel { padding: 2rem 3rem; display: flex; flex-direction: column; justify-content: center; height: 100%; } @media (min-width: 45em) { .card-pod--carousel { padding: 3rem 4rem; } } @media (max-width: 45em) { .card-pod--grid { width: 75%; margin: 0 auto; } } .card-pod--grid { height: max-content; display: flex; flex-direction: column; justify-content: space-between; text-align: center; padding: 1rem; } .card-pod--grid .action { margin: 0; } .card-pod--background-gray { background: #f5f5f5; } .card-pod--background-white { background: #ffffff; } .card-pod--media-background { width: 100%; } .card-pod--border-rounded { border-radius: 0.5rem; } .card-pod--border-black { border: 1px solid #000000; } .card-pod ul { display: block; list-style-type: disc; padding-left: 2rem; } .carousel { height: 100%; position: relative; } .carousel .arrow { z-index: 9999999; position: absolute; top: 21%; transform: translateY(-50%); z-index: 1; cursor: pointer; padding: 0.5rem; border: none; transition: background-color 0.3s ease; background-color: rgba(255, 255, 255, 0.4); } .carousel .arrow:disabled { cursor: not-allowed; opacity: 0.5; } .carousel .arrow:hover { background-color: rgba(255, 255, 255, 0.4); } @media (min-width: 26.5em) { .carousel .arrow { top: 25%; } } @media (min-width: 30em) { .carousel .arrow { top: 30%; } } .carousel .prev-arrow { left: 0rem; } .carousel .next-arrow { right: 0rem; z-index: 0; } .carousel .carousel .arrow { display: none; } .line-item { display: flex; width: 100%; padding-top: 0.6875rem; } .line-item-reverse { flex-direction: row-reverse; } .line-item:first-child { padding-top: 1.25rem; } .line-item-cart { display: flex; flex-direction: row; width: 100%; } .line-item-flyout { display: flex; } @media (max-width: 45em) { .line-item-flyout { justify-content: space-around; width: 100%; } } .line-item-flyout-toast { display: flex; } @media (max-width: 45em) { .line-item-flyout-toast { justify-content: space-around; width: 100%; } } .line-item-checkout { display: flex; flex-direction: row; width: 100%; } .line-item-image-wrapper { position: relative; min-width: 6rem; } .line-item-image { display: flex; flex-direction: column; gap: 6px; } .line-item-image img { object-fit: cover; } .line-item-image img[alt]:before { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #ffffff; font-weight: 400; content: attr(alt); } .line-item-image--membership img { object-fit: contain; } .line-item-image-wrapper { height: 124px; } .line-item-image-placeholder { display: table; font-weight: 500; height: 100%; } .line-item-image-placeholder span { display: table-cell; vertical-align: middle; text-align: center; border: 1px solid #c6c6c6; background: #fafafa; } .line-item-image { position: relative; cursor: pointer; } .line-item-image-cart { margin-right: 1rem; } @media (max-width: 45em) { .line-item-image-cart:first-child span { width: 103px !important; min-width: 103px; height: 103px !important; } } .line-item-image-flyout { padding-left: 7px; margin-right: 9px; } .line-item-image-checkout { padding-left: 0px; } .line-item-favorite { display: inline-flex; font-size: 0.75rem; cursor: pointer; text-decoration: underline; text-align: right; } .line-item-favorite svg { width: 1.1rem; height: 1.1rem; vertical-align: middle; } .line-item-quantity { font-weight: 500; border-radius: 1.3rem; background-color: #727272; color: #ffffff; height: 1.3rem; padding: 1px 8px; position: absolute; right: -9px; top: -9px; } .line-item-content { padding-left: 1.25rem; display: flex; justify-content: space-between; width: 100%; } .line-item-content__approx-keyword { font-weight: 500; font-size: 0.75rem; display: inline-block; } .line-item-content-packaging { flex-direction: column; } .line-item-content-fav { display: flex; column-gap: 18px; } .line-item-content-wrapper { width: 8.75rem; height: 5rem; } .line-item-content-wrapper-cart { margin: 1rem 0 0; height: -moz-fit-content; height: fit-content; } .line-item-content-wrapper-cart--clickable { cursor: pointer; } @media (min-width: 60em) { .line-item-content-wrapper-cart { margin-top: 1rem; } } .line-item-content-wrapper-flyout { margin-top: 3px; text-align: left; font-size: 14px; font-weight: 400; cursor: pointer; } .line-item-content-cart { flex-direction: column; padding: 0px; justify-content: flex-start; } .line-item-content-flyout { flex-direction: column; padding: 0px; max-width: 15.125rem; justify-content: flex-start; } .line-item-content-flyout-title { max-width: 224px; } .line-item-content-flyout { flex-direction: column; padding: 0px; } .line-item-content-flyout-title { max-width: 224px; } .line-item-content-checkout { flex-direction: row; } .line-item-content-title { text-transform: uppercase; font-size: 1rem; cursor: pointer; } @media (max-width: 30em) { .line-item-content-title { font-size: 0.875rem; } } .line-item-content-title-cart { font-size: 1rem; margin: 0 0 0.25rem; } .line-item-content-approx { font-size: 0.938rem; font-weight: 300; color: #727272; display: block; font-family: var(--font-montserrat); } .line-item-content-approx-pieces { font-size: 0.75rem; } @media (max-width: 30em) { .line-item-content-approx { font-size: 0.75rem; } } .line-item-content-approx-flyout { display: flex; flex-direction: column; column-gap: 5px; } .line-item-content-approx-cart { font-size: 0.9rem; margin: 0; } .line-item-content-approx-fixed { font-size: 0.9rem; margin: 6px 0; } .line-item-content-price { display: flex; column-gap: 1.25rem; } .line-item-content-price-cart { margin-top: 0; flex-wrap: wrap; justify-content: space-between; flex-direction: column; } @media (min-width: 45em) { .line-item-content-price-cart { display: block; } } .line-item-content-price-flyout { margin-top: 1.25rem; column-gap: 1rem; align-items: flex-start; } .line-item-content-price-checkout { text-align: right; } .line-item-content-price { font-weight: 500; } .line-item-content-price-emphasis { font-size: 1.3rem; } .line-item-content-price-emphasis--fixed { font-size: 0.75rem; font-weight: 500; } @media (max-width: 30em) { .line-item-content-price-emphasis { font-size: 1.063rem; } } .line-item-content-price-emphasis-cart { font-size: 1.4rem; font-weight: 500; margin: 0.2rem 0; } .line-item-content-price-emphasis-flyout { font-size: 1.34rem; } .line-item-content-price-emphasis-checkout { margin-top: 0px; } .line-item-content-price-detail { font-size: 0.938rem; } .line-item-content-price-detail__per-unit { font-size: 0.85rem; font-weight: 700; display: inline-block; } .line-item-content-price-detail:nth-child(2n+2) { margin: 0 0.8rem; } @media (max-width: 30em) { .line-item-content-price-detail { font-size: 0.75rem; } .line-item-content-price-detail:nth-child(2n+2) { margin: 0 0.6rem; } } .line-item-content-price-detail-cart { font-size: 0.875rem; font-weight: 700; margin: 0.5rem 0; } .line-item-content-price-note { font-size: 0.938rem; font-weight: 300; font-style: italic; } @media (max-width: 30em) { .line-item-content-price-note { font-size: 0.75rem; } } .line-item-content-price-note-cart { font-size: 0.7rem; margin: 0 0 0.5rem; display: inherit; } .line-item-content-price span { font-family: var(--font-montserrat); } .line-item-content-price-qty { display: flex; height: 1.94rem; border: 1px solid #c6c6c6; align-items: center; max-width: 7.5rem; } .line-item-content-price-qty-button { min-width: 2.5rem; height: 100%; border-radius: 0px; cursor: pointer; font-size: 1.25rem; border: 1px solid #fafafa; background-color: #ffffff; } .line-item-content-price-qty-value { height: 1.94rem; width: 2.5rem; } @media (min-width: 60em) { .line-item-content-price-qty-value-cart { min-width: 46px; min-height: 46px; } .line-item-content-price-qty-value-cart input { min-width: 46px; } } .line-item-content-price-qty-value input { padding: 0px !important; border-radius: 0 !important; max-width: 40px; text-align: center; } .line-item-content-price-qty-remove { display: block; text-decoration: underline; margin: 8px 0px; cursor: pointer; font-size: 0.75rem; font-family: var(--font-montserrat); } .line-item-content-price-qty-reached { color: #d14124; font-size: 0.75rem; margin: 8px 0px; font-weight: 300; } .line-item-content-price-actions { cursor: pointer; } .line-item-content-price-actions-remove { display: inline-block; font-size: 0.85rem; text-decoration: underline; margin: 0; } .line-item-content-price-actions-favourites { text-decoration: underline; display: inline-block; font-size: 0.85rem; margin-left: 0.625rem; } @media (max-width: 60em) { .line-item-content-price-actions { margin-top: -8px; } } .line-item-content-cart-divider, .line-item-content-checkout-divider { display: block; } .line-item-content-flyout-weight { display: flex; column-gap: 5px; } .line-item-content-flyout-divider { display: block; } .line-item-content-remove { margin: 10px 0 1rem 0; text-decoration: underline; } .line-item-content-actions { display: flex; column-gap: 10px; padding-top: 3px; padding-left: 15px; } .line-item-favorites-btn { display: flex; align-items: center; column-gap: 5px; cursor: pointer; } .line-item-favorites-btn svg { width: 17px; height: 20px; fill: #d14124; } .line-item-favorites-flyout { align-items: flex-start; } .line-item-favorites-flyout svg { width: 15px; height: 15px; fill: #d14124; } .line-item-favorites-flyout p, .line-item-favorites-flyout a { font-size: 0.75rem; } .line-item-favorites-label { font-size: 0.85rem; text-decoration: underline; margin: 0; } .wf-button { cursor: pointer; font-family: var(--font-oswald); font-size: 0.75rem; font-weight: 500; text-transform: uppercase; transition: all 0.3s; } @media (min-width: 45em) { .wf-button { font-size: 1rem; } } .wf-button--text { background: transparent; border: none; color: #9e9e9e; } .wf-button--text:hover { color: #333333; } .blur-text { color: transparent; text-shadow: 0 0 8px #000; } .sr-only { border: 0 !important; clip: rect(1px, 1px, 1px, 1px) !important; -webkit-clip-path: inset(50%) !important; clip-path: inset(50%) !important; height: 1px !important; margin: -1px !important; overflow: hidden !important; padding: 0 !important; position: absolute !important; width: 1px !important; white-space: nowrap !important; /* added line */ } .email-form-input-and-button { display: flex; flex-direction: row; background-color: white; border: 1px solid #d8d7d7; border-radius: 1.5625rem; align-items: stretch; justify-content: center; max-width: 37.5rem; width: 100%; } .email-form-input-and-button input { -webkit-background-clip: text !important; padding-left: 1rem; } .email-form-input-and-button input { flex-grow: 2; border: none; border-radius: 1.5625rem; font-size: 1rem; color: gray; outline: none; } .email-form-input-and-button input::placeholder { transform: scale(0.9); transform-origin: 0% 50%; } .email-form-input-and-button input { /* or, for legacy browsers */ } .email-form-input-and-button input::-webkit-input-placeholder { transform: scale(0.9); transform-origin: 0% 50%; } .email-form-input-and-button input:-moz-placeholder { /* Firefox 18- */ transform: scale(0.9); transform-origin: 0% 50%; } .email-form-input-and-button input::-moz-placeholder { /* Firefox 19+ */ transform: scale(0.9); transform-origin: 0% 50%; } .email-form-input-and-button input:-ms-input-placeholder { transform: scale(0.9); transform-origin: 0% 50%; } .email-form-input-and-button button { margin: 0px !important; border: none !important; height: 40px; border-radius: 1.5625rem; background-color: #dc4504 !important; color: white; padding: 1rem 2rem; font-size: 1rem; cursor: pointer; outline: none; display: flex; justify-content: center; align-items: center; } .email-form-input-and-button button:hover { background-color: #b53a03 !important; } .email-form-input-and-button--invalid { border: 1px solid #d14124; } .cart-empty { text-align: center; height: 100%; margin: 50px 0; } .cart-empty-message { text-transform: uppercase; } .cart-empty button { font-family: var(--font-oswald); font-size: 16px; font-style: normal; font-weight: 500; line-height: 16px; letter-spacing: 0.32px; text-transform: uppercase; padding: 12px 25px; background-color: #dc4405; color: white; border: 1px solid #dc4405; border-radius: 20px; cursor: pointer; } @media (min-width: 60em) { .cart-empty button { font-size: 1rem; } } .cart-empty button:hover, .cart-empty button:active { background-color: #872a03; color: white; border-color: #dc4405; } .flatTextPod .text-H1, .flatTextPod .text-H2, .flatTextPod .text-H3, .flatTextPod .text-H4, .flatTextPod .text-H5, .flatTextPod .text-H6 { font-family: var(--font-oswald); line-height: 1.3; font-weight: 500; text-transform: uppercase; margin: 3px 0px; } @media (min-width: 45em) { .flatTextPod .text-H1, .flatTextPod .text-H2, .flatTextPod .text-H3, .flatTextPod .text-H4, .flatTextPod .text-H5, .flatTextPod .text-H6 { font-weight: 700; } } .flatTextPod .text-H1 { font-size: 1.875rem; line-height: 1.2; } @media (min-width: 45em) { .flatTextPod .text-H1 { font-size: 3rem; line-height: 1.125; } } .flatTextPod .text-H2 { font-size: 1.75rem; line-height: 35.6px; } @media (min-width: 45em) { .flatTextPod .text-H2 { font-size: 2rem; line-height: 1.25; } } .flatTextPod .text-H3 { font-size: 1.25rem; line-height: 1.48; } @media (min-width: 45em) { .flatTextPod .text-H3 { font-size: 1.75rem; line-height: 1.48; } } .flatTextPod .text-H4 { font-size: 1.125rem; line-height: 24px; } @media (min-width: 45em) { .flatTextPod .text-H4 { font-size: 1.5rem; line-height: 1.25; } } .flatTextPod .text-H5 { font-size: 1rem; line-height: 23.5px; } @media (min-width: 45em) { .flatTextPod .text-H5 { font-size: 1.25rem; line-height: 1.3; } } .flatTextPod .text-H6 { font-size: 1rem; line-height: 23.5px; } @media (min-width: 45em) { .flatTextPod .text-H6 { font-size: 1.125rem; line-height: 1.48; } } .custom-padding { padding: 32px 0 !important; } .flatTextPod .text-H1, .flatTextPod .text-H2, .flatTextPod .text-H3, .flatTextPod .text-H4, .flatTextPod .text-H5, .flatTextPod .text-H6 { font-family: var(--font-oswald); line-height: 1.3; font-weight: 500; text-transform: uppercase; margin: 3px 0px; } @media (min-width: 45em) { .flatTextPod .text-H1, .flatTextPod .text-H2, .flatTextPod .text-H3, .flatTextPod .text-H4, .flatTextPod .text-H5, .flatTextPod .text-H6 { font-weight: 700; } } .flatTextPod .text-H1 { font-size: 1.875rem; line-height: 1.2; } @media (min-width: 45em) { .flatTextPod .text-H1 { font-size: 3rem; line-height: 1.125; } } .flatTextPod .text-H2 { font-size: 1.75rem; line-height: 35.6px; } @media (min-width: 45em) { .flatTextPod .text-H2 { font-size: 2rem; line-height: 1.25; } } .flatTextPod .text-H3 { font-size: 1.25rem; line-height: 1.48; } @media (min-width: 45em) { .flatTextPod .text-H3 { font-size: 1.75rem; line-height: 1.48; } } .flatTextPod .text-H4 { font-size: 1.125rem; line-height: 24px; } @media (min-width: 45em) { .flatTextPod .text-H4 { font-size: 1.5rem; line-height: 1.25; } } .flatTextPod .text-H5 { font-size: 1rem; line-height: 23.5px; } @media (min-width: 45em) { .flatTextPod .text-H5 { font-size: 1.25rem; line-height: 1.3; } } .flatTextPod .text-H6 { font-size: 1rem; line-height: 23.5px; } @media (min-width: 45em) { .flatTextPod .text-H6 { font-size: 1.125rem; line-height: 1.48; } } .custom-padding { padding: 32px 0 !important; } .dynamic-form-field { position: relative; } .dynamic-form-field span.error { color: #d14124; font-size: 0.8rem; margin-top: 0.1rem; padding-left: 0.1rem; font-weight: 500; position: absolute; top: 100%; } .icon { display: block; } .icon-link { cursor: pointer; } .icon-disabled { opacity: 0.4; cursor: default; pointer-events: none; } .promo-icon.outer-wrapper { font-family: var(--font-oswald); position: absolute; top: 8px; right: 8px; width: 42px; height: 42px; background-color: #f9db0a; border-radius: 50%; border-top-right-radius: 0; padding: 5px; } @media (min-width: 30em) { .promo-icon.outer-wrapper { width: 60px; height: 60px; padding: 8px; } } .promo-icon.outer-wrapper .inner-wrapper { width: 100%; height: 100%; border-radius: 50%; border-top-right-radius: 0; background-color: #fff; padding-left: 2px; } .promo-icon.outer-wrapper .inner-wrapper .first-line-wrapper { display: flex; width: 100%; justify-content: center; align-items: flex-end; } .promo-icon.outer-wrapper .inner-wrapper .first-line-wrapper .promo-quantity { color: #dc4405; font-size: 20px; line-height: 20px; height: 20px; font-weight: bold; } .promo-icon.outer-wrapper .inner-wrapper .first-line-wrapper .promo-quantity + div { font-size: 4px; line-height: 4px; height: 5px; font-weight: 500; } @media (min-width: 30em) { .promo-icon.outer-wrapper .inner-wrapper .first-line-wrapper .promo-quantity + div { font-size: 5px; line-height: 5px; height: 6px; } } @media (min-width: 30em) { .promo-icon.outer-wrapper .inner-wrapper .first-line-wrapper .promo-quantity { font-size: 29px; height: 29px; line-height: 29px; } } @media (min-width: 30em) { .promo-icon.outer-wrapper .inner-wrapper .first-line-wrapper { height: 29px; } } @media (min-width: 30em) { .promo-icon.outer-wrapper .inner-wrapper { padding-left: 0; } } .promo-icon.outer-wrapper .inner-wrapper .second-line-wrapper { font-size: 9px; line-height: 9px; font-weight: 800; display: flex; color: #dc4405; justify-content: center; padding-left: 1px; height: 9px; margin-top: -1px; } @media (min-width: 30em) { .promo-icon.outer-wrapper .inner-wrapper .second-line-wrapper { font-size: 12px; height: 12px; line-height: 12px; } } .icon { display: block; } .icon-link { cursor: pointer; } .icon-disabled { opacity: 0.4; cursor: default; pointer-events: none; } .promo-icon.outer-wrapper { font-family: var(--font-oswald); position: absolute; top: 8px; right: 8px; width: 42px; height: 42px; background-color: #f9db0a; border-radius: 50%; border-top-right-radius: 0; padding: 5px; } @media (min-width: 30em) { .promo-icon.outer-wrapper { width: 60px; height: 60px; padding: 8px; } } .promo-icon.outer-wrapper .inner-wrapper { width: 100%; height: 100%; border-radius: 50%; border-top-right-radius: 0; background-color: #fff; padding-left: 2px; } .promo-icon.outer-wrapper .inner-wrapper .first-line-wrapper { display: flex; width: 100%; justify-content: center; align-items: flex-end; } .promo-icon.outer-wrapper .inner-wrapper .first-line-wrapper .promo-quantity { color: #dc4405; font-size: 20px; line-height: 20px; height: 20px; font-weight: bold; } .promo-icon.outer-wrapper .inner-wrapper .first-line-wrapper .promo-quantity + div { font-size: 4px; line-height: 4px; height: 5px; font-weight: 500; } @media (min-width: 30em) { .promo-icon.outer-wrapper .inner-wrapper .first-line-wrapper .promo-quantity + div { font-size: 5px; line-height: 5px; height: 6px; } } @media (min-width: 30em) { .promo-icon.outer-wrapper .inner-wrapper .first-line-wrapper .promo-quantity { font-size: 29px; height: 29px; line-height: 29px; } } @media (min-width: 30em) { .promo-icon.outer-wrapper .inner-wrapper .first-line-wrapper { height: 29px; } } @media (min-width: 30em) { .promo-icon.outer-wrapper .inner-wrapper { padding-left: 0; } } .promo-icon.outer-wrapper .inner-wrapper .second-line-wrapper { font-size: 9px; line-height: 9px; font-weight: 800; display: flex; color: #dc4405; justify-content: center; padding-left: 1px; height: 9px; margin-top: -1px; } @media (min-width: 30em) { .promo-icon.outer-wrapper .inner-wrapper .second-line-wrapper { font-size: 12px; height: 12px; line-height: 12px; } } .pod-media { position: relative; display: flex; justify-content: center; align-items: center; width: 100%; } .pod-media--image-container { width: 100%; } .pod-media img { object-fit: cover; } .pod-media--background { position: absolute; width: 100%; height: 100%; z-index: -1; top: 0; left: 0; } .pod-media .video-player:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.1); opacity: 0; transition: all 0.2s; } .pod-media .video-player:hover:before { opacity: 1; } .pod-media .video-player video { width: 100% !important; height: 100% !important; } .pod-media .video-player video:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); } .pod-media .video-player button { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .pod-media .video-player .play-button { background-color: #f0f0f0; border: none; border-radius: 50%; width: 3.75rem; height: 3.75rem; cursor: pointer; } .pod-media .video-player .play-icon { position: absolute; left: 50%; top: 50%; transform: translate(-40%, -50%); width: 0; height: 0; border-top: 0.9375rem solid transparent; border-bottom: 0.9375rem solid transparent; border-left: 1.5625rem solid #555; } .pod-media .video-player .play-button:hover .play-icon { border-left-color: #f00; } .pod-media .video-player .stop-button { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border: none; border-radius: 50%; cursor: pointer; width: 3.75rem; height: 3.75rem; } .pod-media .video-player .stop-icon::before, .pod-media .video-player .stop-icon::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 0.25rem; height: 1.5rem; background-color: #fff; } .pod-media .video-player .stop-icon::before { transform: translate(-0.625rem, -50%); } .pod-media .video-player .stop-icon::after { transform: translate(0.3125rem, -50%); } .pod-media .video-player .stop-button:hover .stop-icon::before, .pod-media .video-player .stop-button:hover .stop-icon::after { background-color: #f00; } .pod-media { position: relative; display: flex; justify-content: center; align-items: center; width: 100%; } .pod-media--image-container { width: 100%; } .pod-media img { object-fit: cover; } .pod-media--background { position: absolute; width: 100%; height: 100%; z-index: -1; top: 0; left: 0; } .pod-media .video-player:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.1); opacity: 0; transition: all 0.2s; } .pod-media .video-player:hover:before { opacity: 1; } .pod-media .video-player video { width: 100% !important; height: 100% !important; } .pod-media .video-player video:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); } .pod-media .video-player button { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .pod-media .video-player .play-button { background-color: #f0f0f0; border: none; border-radius: 50%; width: 3.75rem; height: 3.75rem; cursor: pointer; } .pod-media .video-player .play-icon { position: absolute; left: 50%; top: 50%; transform: translate(-40%, -50%); width: 0; height: 0; border-top: 0.9375rem solid transparent; border-bottom: 0.9375rem solid transparent; border-left: 1.5625rem solid #555; } .pod-media .video-player .play-button:hover .play-icon { border-left-color: #f00; } .pod-media .video-player .stop-button { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border: none; border-radius: 50%; cursor: pointer; width: 3.75rem; height: 3.75rem; } .pod-media .video-player .stop-icon::before, .pod-media .video-player .stop-icon::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 0.25rem; height: 1.5rem; background-color: #fff; } .pod-media .video-player .stop-icon::before { transform: translate(-0.625rem, -50%); } .pod-media .video-player .stop-icon::after { transform: translate(0.3125rem, -50%); } .pod-media .video-player .stop-button:hover .stop-icon::before, .pod-media .video-player .stop-button:hover .stop-icon::after { background-color: #f00; } .notify-out-of-stock-pdp__container { background-color: #f5f5f5; border-radius: 0.25rem; padding: 1.25rem; padding-bottom: 1.5625rem; line-height: normal; font-weight: 400; } .notify-out-of-stock-pdp__content h5 { font-size: 1.125rem; font-weight: 500; } .notify-out-of-stock-pdp__content > p { margin-top: 0.625rem; margin-bottom: 1.25rem; } .notify-out-of-stock-pdp__content input { color: #3d3935; } .notify-out-of-stock-pdp__content button { text-transform: uppercase; white-space: nowrap; padding-left: 1.8125rem; padding-right: 1.8125rem; } .notify-out-of-stock-pdp__content button[disabled] { color: #9e9c9a; fill: #9e9c9a; background-color: #d8d7d7; cursor: not-allowed; } .notify-out-of-stock-pdp__submit { font-weight: 500; line-height: 16px; font-family: var(--font-oswald); } .notify-out-of-stock-pdp__error { text-align: center; background: #dc4405; color: #fff; font-size: 0.875rem; font-weight: 500; visibility: visible; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; padding: 0.6875rem; } .notify-out-of-stock-pdp__error p { margin: 0; } .notify-out-of-stock-pdp .border-bottom-radius { padding: 0.6875rem; } .notify-out-of-stock-pdp .email-is-invalid { display: block; margin: 4px; font-size: 0.875rem; font-weight: 600; color: #d14124; background-color: inherit; } .how-to-video { --icon-size: 34px; --icon-offset: 10px; display: flex; justify-content: space-between; align-items: center; font-family: var(--font-oswald); font-size: 1.25rem !important; background-color: #000000; color: #ffffff; text-transform: uppercase; font-weight: 400; padding: 10px; } .how-to-video__button { width: auto; position: relative; padding-left: calc(var(--icon-size) + var(--icon-offset)) !important; } .how-to-video__play-icon { position: absolute; left: var(--icon-offset); } .country-of-origin { display: flex; justify-content: space-between; border-bottom: 1px solid #e0e0e0; padding-bottom: 0.5rem; } .country-of-origin__label, .country-of-origin__country { font-size: 0.875rem; font-weight: 600; } @media (min-width: 60em) { .country-of-origin__label, .country-of-origin__country { font-size: 1rem; font-weight: 500; } } .product-gift-banner { background-color: #ffffff; padding: 10px; border: 2px solid #dc4405; border-radius: 0.3125rem; font-size: 0.875rem; font-weight: 400; } @media (min-width: 45em) { .product-gift-banner { font-size: 1rem; } } .product-gift-banner__content { display: flex; flex-direction: column; gap: 3px; } .product-gift-banner__header { display: flex; align-items: center; gap: 8px; } .product-gift-banner__title { font-weight: 600; } .product-gift-banner__icon { margin-top: -10px; margin-bottom: -10px; } .product-gift-banner p { margin: 0; } .product-tile-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; } .product-tile-carousel__title { display: flex; align-items: center; justify-content: space-between; text-transform: uppercase; } .product-tile-carousel__title .text-H2 { font-family: var(--font-oswald); letter-spacing: 0%; font-size: 1.75rem; line-height: 1.2; text-transform: uppercase; font-weight: 500; margin-bottom: 24px; } @media (min-width: 45em) { .product-tile-carousel__title .text-H2 { font-size: 2rem; line-height: 1.25; margin-bottom: 16px; } } .product-tile-carousel__title a { font-weight: 700; text-align: right; text-decoration: none; } .product-tile-carousel__title--centered { justify-content: center; } .product-tile-carousel__title--centered a { display: none; } .product-tile-carousel .slick-slide > div { margin: 0 0.5rem; } .product-tile-carousel .slick-list { margin: 0 -0.5rem; padding-bottom: 10px; } @media (min-width: 45em) { .product-tile-carousel .slick-list { padding-bottom: 0px; } } .product-tile-carousel .slick-track { display: flex !important; } .product-tile-carousel .slick-slide { height: inherit !important; } .product-tile-carousel .slick-slide > div, .product-tile-carousel .slick-slide > div > div { height: 100%; } .product-tile-carousel .product-carousel-item__circular-loader { color: #dc4405; height: 100; margin: auto; margin-top: 50%; display: table; } .product-tile { --product-tile-gap: 5px; flex: 1 1; display: grid; height: 100%; width: 100%; position: relative; } @supports not (aspect-ratio: 1) { .product-tile { padding-bottom: 1rem; } } .product-tile { grid-template: "product-gallery" min-content "product-info-wrapper" 1fr "product-footer-wrapper" min-content/100%; gap: var(--product-tile-gap); justify-content: center; } @media (min-width: 45em) { .product-tile { --product-tile-gap: 11px; } } @media (min-width: 35em) { .slider .product-tile, .product-tile--featured .product-tile { max-width: 23rem; margin: 0 auto; } } @media (max-width: 45em) { .product-tile { box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.0509803922); border-radius: 12px; overflow: hidden; min-width: 160px; } } .product-tile__link { position: absolute; inset: 0; z-index: 1; } .product-tile__link-wrapper { margin-top: calc(-1 * var(--product-tile-gap)); padding-top: var(--product-tile-gap); } .product-tile__info-wrapper { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; height: 100%; } @media (min-width: 45em) { .product-tile__info-wrapper { gap: 4px; margin-bottom: 10px; padding: 0 10px; } } @media (max-width: 45em) { .product-tile__info-wrapper { padding-inline: 10px; } } @media (max-width: 45em) { .product-tile__info-wrapper .product-tile__rating .star { font-size: 12.5px !important; } } .product-tile__footer-wrapper { display: flex; flex-direction: column; justify-content: flex-end; } @media (min-width: 45em) { .product-tile__footer-wrapper { padding: 0 10px; } } .product-tile__footer-wrapper__action { z-index: 2; } .product-tile a { text-decoration: none; } .product-tile__gallery-wrapper { --icon-spacing: 0.4375rem; --icon-size: 1.5625rem; grid-area: product-gallery; display: block; } @supports (aspect-ratio: 1) { .product-tile__gallery-wrapper { aspect-ratio: 1; } } .product-tile__gallery-wrapper { position: relative; overflow: hidden; } @media (min-width: 45em) { .product-tile__gallery { --icon-spacing: 0.625rem; --icon-size: 2.375rem; } } .product-tile__gallery .date-badge { background: #d14124; color: #ffffff; font-family: var(--font-oswald); font-style: normal; font-weight: 500; position: absolute; bottom: 0; padding: 6px 12px; height: unset; } .product-tile__gallery__carousel .arrow[disabled] { display: none; } .product-tile__gallery__carousel .arrow { width: 40px; height: 40px; top: 50%; border-radius: 50%; background-color: transparent; } .product-tile__gallery__carousel .arrow svg { display: block; margin: auto; } .product-tile__gallery__carousel .arrow { z-index: 2; } .product-tile__gallery__carousel .slick-list { padding-bottom: 0; } .product-tile__gallery .product-image-carousel-slider { height: 100%; } .product-tile__gallery .product-image-carousel-slider .slick-list { height: inherit; } .product-tile__gallery .product-image-carousel-slider .slick-track { height: inherit; } .product-tile__gallery__image { height: auto; position: relative; overflow: hidden; } .product-tile__gallery__image img { object-fit: cover; height: auto !important; } .product-tile__gallery__image__favorite { position: absolute; top: var(--icon-spacing); left: var(--icon-spacing); border-radius: 100%; cursor: pointer; z-index: 2; transition: color 0.3s ease; display: flex; flex-direction: column; justify-content: center; align-items: center; } .product-tile__gallery__image__favorite .favorite-btn { background: transparent; border: none; color: #3d3935; cursor: pointer; padding: 0; text-align: left; height: auto; min-height: 0; min-width: 0; font-size: 1rem; font-weight: 500; line-height: normal; transition: none; text-transform: none; } .product-tile__gallery__image__favorite .favorite-btn:hover, .product-tile__gallery__image__favorite .favorite-btn:active, .product-tile__gallery__image__favorite .favorite-btn:focus { color: #3d3935; background-color: transparent; border-color: transparent; } .product-tile__gallery__image__favorite .favorite-btn svg { width: var(--icon-size); height: var(--icon-size); display: block; } @media (min-width: 45em) { .product-tile__gallery__image__favorite .favorite-btn svg { width: unset; height: unset; } } .product-tile__gallery__out-of-stock { position: relative; left: 0; display: flex; justify-content: center; align-items: center; } .product-tile__gallery__out-of-stock__btn-icon { margin-right: 0.4rem; } .product-tile__gallery__out-of-stock__text { background: #ffffff; border-radius: 20px; border: 1px solid #dc4405; color: #dc4405; cursor: pointer; font-family: var(--font-oswald); font-weight: 500; text-transform: uppercase; font-size: 0.75rem; padding: 0.5rem 0.6875rem; pointer-events: auto; } @media (min-width: 45em) { .product-tile__gallery__out-of-stock__text { font-size: 1rem; padding: 0.625rem 1.25rem; } } .product-tile__gallery__out-of-stock__text_overlay { color: #3d3935; font-family: var(--font-oswald); font-weight: 500; text-transform: uppercase; font-size: 0.75rem; padding: 0.5rem 0.6875rem; } @media (min-width: 45em) { .product-tile__gallery__out-of-stock__text_overlay { font-size: 1rem; padding: 0.625rem 1.25rem; } } .product-tile__gallery__out-of-stock__text:hover { border: 1px solid #872a03; color: #872a03; } .product-tile__gallery__gift-icon { position: absolute; top: var(--icon-spacing); right: var(--icon-spacing); width: var(--icon-size); height: var(--icon-size); padding: 10px; background-color: #dc4405; border-radius: 50%; } .product-tile__gallery__gift-icon svg { position: absolute; inset: 0; margin: auto; width: 50%; } .product-tile__gallery__gift-icon svg path { fill: #ffffff; } .product-tile__title { grid-area: product-title; overflow: hidden; width: 100%; } .product-tile__title h2 { color: #3d3935; font-family: var(--font-oswald); font-size: 1rem; text-align: left; line-height: 20px; font-weight: 500; font-style: normal; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .product-tile__title a { display: flex; height: 100%; } @media (min-width: 45em) { .product-tile__title h2 { font-family: var(--font-oswald); font-size: 1.125rem; line-height: 1.5rem; font-weight: 700; letter-spacing: 0.05px; color: #3d3935; text-transform: uppercase; } } .product-tile__subtext { color: #777472; font-size: 0.6875rem; font-style: italic; font-weight: 400; text-align: left; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; padding-bottom: 4px; } @supports (-webkit-line-clamp: 2) { .product-tile__subtext { white-space: initial; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } } .product-tile__subtext::before { content: "*"; } .product-tile__badges { grid-area: product-badges; display: flex; gap: 3px; align-items: center; flex-wrap: wrap; } .product-tile__badges__item { border: 1px solid; border-radius: 0.75rem; padding: 0.5rem; text-transform: uppercase; font-size: 0.75rem; } .product-tile__badges .badge-container { display: flex; flex-wrap: wrap; margin: 0; } .product-tile__badges .badge-container:not(:last-child) { margin-right: 5px; } .product-tile__badges .badge-container .badge { margin: 0; padding: 4.36px 8.7px; } .product-tile__badges .badge-container .badge span { line-height: 1; white-space: pre; } .product-tile__rating { grid-area: product-rating; } .product-tile__packaging { text-align: left; font-size: 12px; font-weight: 400; font-family: var(--font-montserrat); line-height: 16px; } @media (min-width: 45em) { .product-tile__packaging { font-size: 0.875rem; line-height: 20px; } } .product-tile__pricing { grid-area: product-pricing; display: flex; flex-direction: column; justify-content: flex-end; margin-bottom: 0.4375rem; width: 100%; text-align: left; color: #3d3935; } @media (max-width: 45em) { .product-tile__pricing { padding-inline: 10px; } } .product-tile__pricing-details { display: flex; flex-direction: column; gap: 3px; } .product-tile__pricing__final-price-by-weight { font-family: var(--font-montserrat); font-size: 0.75rem; font-weight: 500; display: none; line-height: normal; color: #3d3935; } .product-tile__pricing__price-per-unit { font-weight: 600; font-size: 12px; line-height: 16px; font-family: var(--font-montserrat); white-space: normal; text-align: left; width: 60%; } .product-tile__pricing__price-per-unit.discounted-wrapper { display: flex; gap: 0.3rem; flex-wrap: wrap-reverse; } .product-tile__pricing__price-per-unit.discounted-wrapper .discounted { color: #dc4405; display: block; } .product-tile__pricing__price-per-unit.discounted-wrapper .price-before-discount { font-weight: 400; display: block; text-decoration: line-through; } .product-tile__pricing__total-price { align-self: flex-end; font-weight: 500; font-size: 1.125rem; text-align: right; text-wrap: nowrap; width: 100%; display: flex; justify-content: space-between; align-items: flex-end; } .product-tile__pricing__total-price__value { font-family: var(--font-oswald); font-size: 18px; font-weight: 500; line-height: normal; } .product-tile__pricing__total-price__value__approx { display: none; font-size: 0.75rem; font-family: var(--font-montserrat); font-weight: 500; color: #3d3935; line-height: normal; text-align: right; text-transform: lowercase; } @media (min-width: 45em) { .product-tile__pricing__total-price__value__approx { display: inline-block; } } .product-tile__pricing__total-price__value__approx-icon { display: inline-block; margin-left: 0.25rem; transform: translateY(1px); font-size: 18px; font-weight: 600; font-family: var(--font-oswald); text-transform: uppercase; line-height: 26px; } @media (min-width: 45em) { .product-tile__pricing__total-price__value__approx-icon { display: none; font-size: 20px; } } .product-tile__pricing__total-price__value__each { display: none; font-size: 0.75rem; font-family: var(--font-montserrat); font-weight: 500; color: #3d3935; line-height: normal; text-align: right; text-transform: uppercase; } @media (min-width: 45em) { .product-tile__pricing__total-price__value__each { display: inline-block; } } .product-tile__pricing__total-price__value:has(.discounted) { min-width: -moz-fit-content; min-width: fit-content; } .product-tile__pricing__total-price__value .price-before-discount { font-size: 16px; font-weight: 400; text-decoration: line-through; } .product-tile__pricing__total-price__value .price-value-text.discounted { color: #d14124; } @media (min-width: 45em) { .product-tile__pricing { margin-bottom: 0.9375rem; } .product-tile__pricing__final-price-by-weight { display: block; } .product-tile__pricing__price-per-unit { font-size: 0.875rem; } .product-tile__pricing__total-price { font-weight: 700; font-size: 1.25rem; } .product-tile__pricing__total-price__value { line-height: 0.875rem; font-weight: 600; font-size: 20px; line-height: 26px; text-transform: uppercase; font-family: var(--font-oswald); } } .product-tile__actions { grid-area: product-actions; text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; padding-bottom: 10px; } .product-tile__actions .quick-add { position: relative; z-index: 1; } .product-tile__actions .add-to-basket { display: flex; align-items: center; gap: 0.5rem; background-color: #d14124; text-transform: uppercase; border-radius: 20px; color: #ffffff; cursor: pointer; font-size: 16px; padding: 0.8rem 1.25rem; border: none; outline: none; transition: background-color 0.3s ease; } .product-tile__actions .add-to-basket--out-of-stock { background-color: #3d3935; display: flex; align-items: center; gap: 0.5rem; margin: 0 auto; } .product-tile__actions .add-to-basket--out-of-stock:hover { background-color: #3d3935 !important; } .product-tile__actions .add-to-basket:hover { background-color: #872a03; } .product-tile__actions .line-item-favorites-btn { margin: 1rem 0 0 0; } .product-tile__actions .action { margin: 0; } @media (max-width: 30em) { .product-tile__actions .quick-add button.action.w-icon.quick-add__atc--oos { padding-left: 8px; padding-right: 8px; } } .modal-notify--container { bottom: 0; left: 0; overflow-y: scroll; position: fixed; right: 0; top: 0; z-index: 2000; } .modal-notify--overlay { align-items: center; box-sizing: border-box; display: flex; justify-content: center; min-height: 100%; padding: 7.5rem 0; } .modal-notify--content { display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; background-color: #ffffff; padding: 1.1875rem; border-radius: 0.75rem; max-width: 42.3125rem; width: 100%; min-height: 13.4375rem; margin: 0 0.625rem; } .modal-notify--content section { max-width: 32.25rem; width: 100%; } @media (min-width: 45em) { .modal-notify--content { min-height: 20.75rem; } } .modal-notify--close { border: 0; background-color: transparent; cursor: pointer; height: 37px; min-width: 0; padding: 0.25rem; position: absolute; right: 10px; top: 10px; width: 37px; } .modal-notify--bis-form { margin: 0 auto; max-height: 15.4375rem; } .modal-notify--bis-form__title { display: flex; justify-content: space-between; margin-bottom: 0.875rem; align-items: flex-start; width: 100%; } .modal-notify--bis-form__title > div { display: flex; align-items: center; gap: 0.625rem; } .modal-notify--bis-form__title h2 { font-family: var(--font-oswald); font-size: 1.125rem; font-style: normal; font-weight: 500; line-height: 1.25rem; letter-spacing: 0.1px; color: #3d3935; text-transform: uppercase; } @media (min-width: 45em) { .modal-notify--bis-form__title { flex-direction: column-reverse; align-items: center; margin-bottom: 1.875rem; } .modal-notify--bis-form__title button { align-self: flex-end; } .modal-notify--bis-form__title h2 { text-align: center; font-size: 2rem; line-height: 2.5rem; } .modal-notify--bis-form__title > div { flex-direction: column; align-items: center; gap: 1.5rem; } .modal-notify--bis-form__title .icon-success_green_check svg { width: 3.75rem; height: 3.75rem; } .modal-notify--bis-form__title .modal-notify--bis-form__close { top: 1.25rem; right: 1.25rem; position: absolute; } } .modal-notify--bis-form form label { font-family: var(--font-montserrat); font-size: 0.875rem; font-style: normal; font-weight: 500; line-height: normal; } .modal-notify--bis-form form label::after { content: "*"; color: #dc4405; margin-left: 0.25rem; } .modal-notify--bis-form form input { border: 1px solid #c6c6c6; border-radius: 0.5rem; } .modal-notify--bis-form__btn { cursor: pointer; margin-top: 1.4375rem; width: 100%; font-family: var(--font-oswald); font-style: normal; font-weight: 500; line-height: 1rem; letter-spacing: 0.02rem; text-transform: uppercase; font-size: 0.875rem !important; } @media (min-width: 30em) { .modal-notify--bis-form__btn { font-size: 1rem !important; padding: 0.625rem 1.25rem !important; margin-top: 2.125rem; } } .modal-notify--bis-form--error { visibility: hidden; } .modal-notify--bis-form--error-visible { text-align: center; border-radius: 8px; margin-top: 1rem; background: #d14124; color: #fff; font-size: 0.875rem; font-weight: 500; padding: 0.6875rem; visibility: visible; } .modal-notify--bis-form-wide { margin: 0 auto; text-align: center; } .modal-notify--bis-form-wide__title { font-size: 1.125rem; font-weight: 500; line-height: 1.6875rem; margin-bottom: 0.625rem; margin-top: 0; } .modal-notify--bis-form-wide--error { visibility: hidden; } .modal-notify--bis-form-wide--error-visible { background: #d14124; color: #fff; font-size: 0.875rem; font-weight: 500; padding: 0.6875rem; text-align: center; visibility: visible; } .bis-notification { position: absolute; display: flex; flex-direction: column; justify-content: center; align-items: center; inset: 0; text-align: center; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.5); z-index: 1; pointer-events: none; } .bis-notification .oos__title { position: relative; margin-top: 40%; } .disabled { opacity: 0.8; pointer-events: none; } .responsive-media-pod img { object-fit: cover; } @layer base { html, body { padding: 0; margin: 0; font-family: var(--font-montserrat); } h1, h2, h3, h4, h5, h6 { font-family: var(--font-oswald); } h1 { font-size: 48px; } h2 { font-size: 32px; } h3 { font-size: 28px; } h4 { font-size: 24px; } h5 { font-size: 20px; } h6 { font-size: 18px; } a { color: inherit; text-decoration: none; } * { box-sizing: border-box; } } .recipe-card { flex: 1 1; display: grid; height: 100%; } @supports not (aspect-ratio: 1) { .recipe-card { padding-bottom: 1rem; } } .recipe-card { grid-template: "recipe-card-gallery" min-content "recipe-card-info-wrapper" 1fr "recipe-card-footer-wrapper" min-content/100%; gap: 5px; justify-content: center; } @media (min-width: 45em) { .recipe-card { gap: 11px; } } @media (min-width: 35em) { .recipe-card { max-width: 23rem; margin: 0 auto; width: inherit; } } @media (max-width: 45em) { .recipe-card { box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.0509803922); border-radius: 12px; overflow: hidden; min-width: 160px; } } .recipe-card__title { grid-area: recipe-card-title; overflow: hidden; } .recipe-card__title h2 { color: #3d3935; font-family: var(--font-oswald); font-size: 1rem; font-style: normal; text-align: left; font-style: normal; text-transform: uppercase; font-weight: 500; line-height: 26.7px; /* 148.333% */ } .recipe-card__title a { display: flex; height: 100%; } .recipe-card__gallery { grid-area: recipe-card-gallery; display: block; } @supports (aspect-ratio: 1) { .recipe-card__gallery { aspect-ratio: 1; } } .recipe-card__gallery { position: relative; overflow: hidden; z-index: 0; } .recipe-card__gallery__image { height: auto; position: relative; overflow: hidden; } .recipe-card__gallery__image img { object-fit: cover; height: auto; } .recipe-card__gallery .pod-media img { width: 100%; height: auto; } .recipe-card__info-wrapper { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; height: 100%; } @media (min-width: 45em) { .recipe-card__info-wrapper { gap: 4px; } } @media (max-width: 45em) { .recipe-card__info-wrapper { padding-inline: 10px; } } .recipe-card__info { display: flex; flex-wrap: wrap; font-family: var(--font-montserrat); font-weight: 600; font-size: 0.8rem; margin-bottom: 14px; } .recipe-card__info__item { text-wrap: nowrap; padding-right: 24px; } .recipe-card__info__item span { padding-left: 8px; font-weight: 400; } @media (min-width: 45em) { .recipe-card__info { gap: 4px; } } @media (max-width: 45em) { .recipe-card__info { padding-inline: 10px; font-size: 0.7rem; } } .recipe-card__actions { grid-area: recipe-card-actions; text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; padding-bottom: 10px; } .recipe-card__actions .recipe-card-button { max-width: 60%; } .recipe-card__actions .action { margin: 0; } .recipe-card--message-no-recipes { display: block; position: relative; text-align: center; width: 100%; max-width: 90em; } .recipe-card--container { display: block; width: 100%; text-align: center; grid-column: 1/-1; } .recipe-card--container--button { border-radius: 2rem !important; max-width: 33%; margin: 1rem auto; } @media (max-width: 40em) { .recipe-card--container--button { margin: 1rem 20px 0 0 !important; max-width: 100%; } } .recipe-card .badge-container { display: flex; z-index: 1; margin: 0 0 12px 0; } @media (max-width: 40em) { .recipe-card-button { margin: 0 !important; } } .container { justify-content: space-between; font-size: 1rem; max-width: 25rem; } .container > div:first-child { min-width: -moz-fit-content; min-width: fit-content; font-size: 1.75rem; } .container > div:nth-child(2) { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 5; /* number of lines to show */ -webkit-box-orient: vertical; max-height: 6.5rem; } @media (max-width: 60em) { .container > div:nth-child(2) { width: 100%; font-size: 1rem; -webkit-line-clamp: 3; /* number of lines to show */ max-height: 5rem; } } .container > div:last-child { position: relative; padding: 4px 0 0 0px; min-width: 2rem; margin-left: 10px; } @media (max-width: 60em) { .container { width: 100%; font-size: 1.15rem; } } .variant--outlined { background-color: #fafafa; } .yotpo-star-rating { text-align: left !important; display: flex; align-items: center; gap: 2px; } .yotpo-star-rating svg { max-height: unset; max-width: unset; } .yotpo-star-rating .total-reviews { font-weight: 400; font-size: 0.875rem; } .clickable-stars { cursor: pointer; } .rich-text-pod__text-color--white { color: #ffffff; } .rich-text-pod__text-color--white * { color: inherit !important; } .rich-text-pod__text-color--black { color: #000000; } .rich-text-pod__text-color--black * { color: inherit !important; } .rich-text-pod__text-color--wf-black { color: #3d3935; } .rich-text-pod__text-color--wf-black * { color: inherit !important; } .rich-text-pod__text-alignment--center-aligned { text-align: center; } .rich-text-pod__text-alignment--center-aligned * { text-align: inherit !important; } .rich-text-pod__text-alignment--left-aligned { text-align: left; } .rich-text-pod__text-alignment--left-aligned * { text-align: inherit !important; } .rich-text-pod__text-alignment--right-aligned { text-align: right; } .rich-text-pod__text-alignment--right-aligned * { text-align: inherit !important; } .social-media-embed-modal__close-button { position: absolute; top: 0; right: 0; color: #ffffff; background-color: rgba(0, 0, 0, 0.5); transform: translateY(-120%); } @media (min-width: 60em) { .social-media-embed-modal__close-button { transform: unset; transform: translateX(120%); } } .social-media-embed-modal__youtube-container { position: relative; padding-bottom: 56.25%; height: 0; } .social-media-embed-modal__youtube-iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000000; border: 0; } .social-media-embed-modal__instagram { display: flex; justify-content: center; overflow: auto; } .social-media-embed-modal__instagram iframe { margin: 0 !important; } .customer-addresses { text-align: center; } .customer-addresses .form__field { text-align: left; } .customer-addresses__list { display: grid; grid-template-columns: 1fr; grid-gap: 1em; } @media (min-width: 45em) { .customer-addresses__list { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 75em) { .customer-addresses__list { grid-template-columns: repeat(3, 1fr); } } .customer-addresses__actions { margin-top: 1.875rem; } .customer-address { border: 1px solid #e0e0e0; display: flex; flex-direction: column; padding: 1.5rem; text-align: center; } .customer-address__title { font-family: var(--font-oswald); font-size: 1rem; font-weight: 700; text-transform: uppercase; } .customer-address__name { font-family: var(--font-oswald); font-size: 1rem; font-weight: 500; text-transform: uppercase; } .customer-address__type { color: #d14124; font-family: var(--font-oswald); font-size: 0.875rem; font-weight: 700; text-transform: uppercase; margin-top: 0.625rem; } .customer-address__address { font-size: 1rem; margin: 1rem 0; } .customer-address__actions { margin-top: auto; } .customer-address__actions .action { margin: 0.625rem 0.25rem 0; min-height: 0; min-width: 10em; padding: 0.25rem 1rem; } .form--customer-address { margin: 2rem; } [data-address=root] { display: flex; flex-flow: row wrap; justify-content: space-between; } [data-line-count="1"] { flex-basis: 100%; } [data-line-count="2"] { width: 100%; } @media (min-width: 45em) { [data-line-count="2"] { flex-basis: 49%; } } [data-line-count="3"] { width: 100%; } @media (min-width: 45em) { [data-line-count="3"] { flex-basis: 32%; } } .customer-address-form__modal { display: flex; flex-direction: column; justify-content: center; align-items: center; } .customer-address-form { background-color: #ffffff; border-radius: 1.5625rem; max-width: 90rem; padding: 1rem; } @media (min-width: 35em) { .customer-address-form { padding: 2rem; } } .customer-address-form { margin: 0 auto; } .customer-address-form h2 { text-align: center; margin-bottom: 2rem; text-transform: uppercase; } .customer-address-form .form__actions { margin-top: 2rem; text-align: center; } .customer-address-form .form__actions button { margin: 0; } .customer-address-form .form__actions p { cursor: pointer; } .customer-address-form .error input:not(:focus), .customer-address-form .error select:not(:focus) { border: 1px solid #d14124; border-radius: 8px; } .slider-wrapper { width: 100%; max-width: 90rem; margin: 0 auto; } .container-slider { background-position: center; background-size: cover; height: inherit; position: relative; width: 100%; } .container-slider .arrow { z-index: 1; position: absolute; display: block; background-color: transparent; top: 50%; transform: translateY(-50%); height: 2.5rem; width: 2.5rem; fill: white; border: none; cursor: pointer; } .container-slider .disabled-disabled { opacity: 0.5; } .container-slider .arrow-left { left: 8px; } .container-slider .arrow-right { right: 8px; } .container-slider .disabled-arrow { cursor: not-allowed; background-color: transparent; fill: hsla(0, 0%, 100%, 0.3); } .banner-media-tile { width: 100%; text-align: center; contain: content; position: relative; display: flex; } .banner-media-tile img { width: 100%; display: block; } .banner-media-tile .responsive-media-pod img { z-index: -1; } .banner-media-tile .banner-content { padding: 1.8rem; } .banner-media-tile .banner-content__cta-wrapper { display: flex; flex-direction: column; align-items: flex-start; } @media (min-width: 45em) { .banner-media-tile .banner-content__cta-wrapper { flex-direction: row; gap: 1rem; width: 100%; } } .banner-media-tile { --min-banner-height: 280px; min-height: var(--min-banner-height); } .banner-media-tile.banner-title--height-short { --min-banner-height: 116px; } .banner-media-tile.banner-title--height-medium { --min-banner-height: 588px; } .banner-media-tile.banner-title--height-tall { --min-banner-height: 588px; } .banner-media-tile.banner-title--height-fit-to-image .responsive-media-pod img { height: auto !important; position: static !important; } .banner-media-tile.banner-title--height-fit-to-image .responsive-media-pod { width: 100%; } .banner-media-tile.banner-title--height-fit-to-image .banner-content { position: absolute; top: 0; left: 0; height: 100%; width: 100%; } @media (min-width: 45em) { .banner-media-tile { --min-banner-height: 350px; } .banner-media-tile .banner-content { padding: 2.8rem; } .banner-media-tile.banner-title--height-short { --min-banner-height: 150px; } .banner-media-tile.banner-title--height-medium { --min-banner-height: 300px; } .banner-media-tile.banner-title--height-tall { --min-banner-height: 350px; } } .banner-media-tile .caption { width: 100%; background-color: #ffffff; white-space: pre-wrap; text-align: left; min-width: 8.5rem; margin: auto; display: flex; flex-direction: column; justify-content: center; } .banner-media-tile .caption--default, .banner-media-tile .caption--left, .banner-media-tile .caption--center { background-color: transparent; width: 100%; } .banner-media-tile .caption--default .description p, .banner-media-tile .caption--left .description p, .banner-media-tile .caption--center .description p { color: #fff; font-size: 2rem; font-weight: 400; line-height: 1.17; text-shadow: 0.625rem 0.5rem 1.125rem #000; text-transform: uppercase; } .banner-media-tile .caption--center { text-align: center; } .banner-media-tile .caption--center .banner-content__cta-wrapper { align-items: center; justify-content: center; } @media (min-width: 45em) { .banner-media-tile .caption--center .banner-content__cta-wrapper a.action { width: auto; } } .banner-media-tile .caption--left { text-align: left; } .banner-media-tile .caption--right { text-align: right; } .banner-media-tile .caption p { color: #000000; font-size: 1.2rem; font-weight: 400; line-height: 1.17; width: 100%; margin: 1em 0; } .banner-media-tile .caption h2 { font-size: 1.75rem; } .banner-media-tile .caption a.action { margin-top: 20px; width: auto; min-width: 152px !important; } @media (max-width: 30em) { .banner-media-tile .caption a.action { height: 40px; font-size: 16px; line-height: 16px; } } .banner-media-tile .description { display: block; } .banner-media-tile .description p { color: #3d3935; font-weight: 300; line-height: 1.4; } .banner-media-tile .title { display: block; } .banner-media-tile .title h2 { line-height: 1.3; font-weight: 700; text-transform: uppercase; } .banner-media-tile .media--canada-banner-collection { position: absolute; width: 45%; height: 200px; margin: auto; bottom: 1.5rem; left: 1.5rem; } .cart-inner-container { max-width: 1200px; margin: auto; padding: 1rem; } @media (min-width: 48em) { .cart-inner-container { padding: 0 2rem; max-width: 90rem; margin: 2rem auto; width: 100%; } } .cart-page-title { font-size: 2em; margin: 0.5rem 0 1rem; margin-top: 0; display: block; text-transform: uppercase; } .cart-content-wrapper { display: flex; flex-direction: column; max-width: 90rem; margin: 0 auto; gap: 30px; justify-content: center; padding: 2.5rem 1rem; padding-bottom: 1rem; } .cart-content-wrapper .cart-content-items { flex: 1 1; } @media (min-width: 48em) { .cart-content-wrapper { flex-direction: row; } } @media (min-width: 75em) { .cart-content-wrapper { padding: 2rem; } } .cart-content-wrapper .cart-summary { flex: 1 1; } @media (min-width: 48em) { .cart-content-wrapper .cart-summary { max-width: 25rem; } } .cart-content-wrapper .cart-summary .cart-content-delivery { max-width: unset; } .cart-content-wrapper .cart-summary .totals-wrapper { display: flex; flex-direction: column; gap: 24px; padding: 32px 16px; background: #f5f5f5; border-radius: 0 0 12px 12px; font-weight: 400; margin: 0 -1rem; } @media (min-width: 48em) { .cart-content-wrapper .cart-summary .totals-wrapper { margin: unset; } } .cart-content-wrapper .cart-summary .totals-wrapper .cart-summary-title { text-align: center; } @media (min-width: 48em) { .cart-content-wrapper .cart-summary .totals-wrapper .cart-summary-title { display: none; } } .cart-content-wrapper .cart-summary .subtotal { display: flex; flex-direction: column; align-items: center; gap: 16px; } .cart-content-wrapper .cart-summary .subtotal > div { width: 100%; display: flex; gap: 5px; justify-content: space-between; } .cart-content-wrapper .cart-summary .taxes { display: flex; justify-content: space-between; align-items: center; text-align: right; gap: 10px; } .cart-content-wrapper .cart-summary .subtotal, .cart-content-wrapper .cart-summary .taxes, .cart-content-wrapper .cart-summary .total { background: #ffffff; padding: 12px; border-radius: 12px; } .cart-content-wrapper .cart-summary .total { display: flex; flex-direction: column; gap: 12px; } .cart-content-wrapper .cart-summary .total .total-estimated, .cart-content-wrapper .cart-summary .total .total-temporary-hold { display: flex; justify-content: space-between; align-items: center; } .cart-content-wrapper .cart-summary .total .total-description { margin: 0; text-align: left; font-size: 0.75rem; } .cart-content-wrapper .cart-summary .total .total-description b { display: block; color: #777472; } .cart-content-wrapper .cart-summary .shipping-cost-value, .cart-content-wrapper .cart-summary .total-temporary-hold-value, .cart-content-wrapper .cart-summary .total-estimated-value { font-family: var(--font-oswald); font-weight: 500; } .cart-content-wrapper .cart-summary .shipping-cost-value { text-transform: uppercase; font-size: 1.125rem; } .cart-content-wrapper .cart-summary .subtotal-value { font-family: var(--font-oswald); font-weight: 500; text-transform: uppercase; font-size: 1.125rem; } .cart-content-wrapper .cart-summary .subtotal-value.discounted { color: #d14124; } .cart-content-wrapper .cart-summary .total-estimated-label { font-size: 0.875rem; font-weight: 700; } @media (min-width: 48em) { .cart-content-wrapper .cart-summary .total-estimated-label { font-size: 1rem; } } .cart-content-wrapper .cart-summary .total-estimated-value { font-size: 1.125rem; } @media (min-width: 48em) { .cart-content-wrapper .cart-summary .total-estimated-value { font-size: 1.25rem; } } .cart-content-wrapper .cart-summary .total-temporary-hold-label-container { display: flex; flex-wrap: nowrap; gap: 6px; } .cart-content-wrapper .cart-summary .total-temporary-hold-label-container .icon { cursor: pointer; } .cart-content-wrapper .cart-summary .total-temporary-hold-label-container .total-temporary-hold-label { font-size: 0.75rem; font-weight: 700; } @media (min-width: 48em) { .cart-content-wrapper .cart-summary .total-temporary-hold-label-container .total-temporary-hold-label { font-size: 0.875rem; } } .cart-content-wrapper .cart-summary .total-temporary-hold-value { font-size: 0.875rem; } @media (min-width: 48em) { .cart-content-wrapper .cart-summary .total-temporary-hold-value { font-size: 1rem; } } .cart-content-wrapper .cart-summary .login-notice { text-align: center; font-size: 0.875rem; } .cart-content-wrapper .cart-summary .login-notice a { text-decoration: underline; text-wrap: nowrap; } @media (min-width: 48em) { .cart-content-wrapper .cart-summary .login-notice { font-size: 1rem; } } .cart-content-wrapper .cart-summary.cart-summary--legacy .shipping-selector, .cart-content-wrapper .cart-summary.cart-summary--legacy .taxes, .cart-content-wrapper .cart-summary.cart-summary--legacy .totals-wrapper .total { display: none; } .cart-content-wrapper-items { width: 100%; } .cart-content-wrapper-actions-checkout { margin: 0 !important; border-radius: 25px; } .cart-content-wrapper-actions-checkout-continue { font-size: 1rem; text-decoration: underline; cursor: pointer; } .cart-content-wrapper .checkout-button, .cart-content-wrapper .login-notice { display: none; } @media (min-width: 48em) { .cart-content-wrapper .checkout-button, .cart-content-wrapper .login-notice { display: block; } } .cart-content-wrapper .checkout-button a { width: 100%; } @media (max-width: 48em) { .cart-sticky-header-active { position: fixed; top: 209.5px; left: 0; z-index: 10; width: 100%; background-color: #f5f5f5; transition: all 0.5s; } .cart-active-top { top: 251.5px; } .cart-sticky-header-hidden { position: fixed; top: 121px; left: 0; z-index: 10; width: 100%; background-color: #f5f5f5; transition: all 0.5s; } .cart-hidden-top { top: 163px; } .cart-sticky-footer { position: fixed; bottom: 0px; background-color: #f5f5f5; z-index: 100; left: 0px; width: 100%; box-shadow: 0px -5px 5px rgba(0, 0, 0, 0.1); } .cart-sticky-footer.cart-content-wrapper { gap: 16px; padding: 24px 16px; } .cart-sticky-footer .checkout-button, .cart-sticky-footer .login-notice { display: block; } } .cart-sticky-footer.cart-content-wrapper .total { max-height: 500px; transition: max-height 0.3s; padding: 0; } .cart-sticky-footer.cart-content-wrapper .total .total-content > div { padding: 12px 12px 0 12px; } .cart-sticky-footer.cart-content-wrapper .total .total-content > div:last-child { padding-bottom: 12px; } .cart-sticky-footer.cart-content-wrapper .total.hidden { max-height: 0; overflow: hidden; transition: max-height 0.3s; } @media (min-width: 48em) { .cart-sticky-footer.cart-content-wrapper { display: none; } } .total-temporary-hold__modal { display: grid; place-items: center; font-weight: 400; } .total-temporary-hold__modal p { margin: 0; } @media (min-width: 48em) { .total-temporary-hold__modal { text-align: center; } .total-temporary-hold__modal-close { position: absolute; right: 0; transform: translateX(150%); } } .total-temporary-hold__modal-header { display: flex; justify-content: space-between; align-items: center; position: relative; } .total-temporary-hold__modal-header h6 { font-family: var(--font-oswald); font-size: 1.125rem; font-weight: 500; } @media (min-width: 48em) { .total-temporary-hold__modal-header { justify-content: center; } .total-temporary-hold__modal-header h6 { font-size: 2rem; } } .total-temporary-hold__modal-content { background-color: #ffffff; border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 20px; max-width: min(90vw, 37.5rem); } .total-temporary-hold__modal-content p { margin: 0; } @media (min-width: 48em) { .total-temporary-hold__modal-content { padding: 24px 80px; border-radius: 24px; } .total-temporary-hold__modal-content p { font-size: 1.125rem; } } .total-temporary-hold__modal-notice, .total-temporary-hold__modal-final-note { font-weight: bold; } .total-temporary-hold__modal-body { overflow-y: auto; max-height: 50vh; display: flex; flex-direction: column; gap: 20px; } .total-temporary-hold__modal-footer .action { width: 100%; } .shipping-selector { background: #ffffff; padding: 12px; border-radius: 12px; display: flex; flex-direction: column; gap: 12px; } .shipping-selector .shipping-instructions-container, .shipping-selector .shipping-cost { display: flex; justify-content: space-between; align-items: center; } .shipping-selector .shipping-instructions-select-container { white-space: nowrap; font-weight: 500; cursor: pointer; } .shipping-selector .shipping-instructions-select-container .shipping-instructions-select { text-decoration: underline; } .shipping-selector .shipping-instructions-select-container .shipping-instructions-arrow { transform: translateY(2px); display: inline-block; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .shipping-selector .shipping-instructions-select-container.active .shipping-instructions-arrow { transform: rotate(180deg) translateY(2px); } .shipping-selector .shipping-instructions-text { font-size: 14px; } .shipping-selector .shipping-buttons { display: flex; justify-content: center; gap: 16px; } .shipping-selector .shipping-buttons button.disabled { opacity: 0.5; } .shipping-selector .shipping-buttons button.action { width: 100%; } .shipping-selector .shipping-buttons { max-height: 0; transition: max-height 0.15s ease-out; overflow: hidden; } .shipping-selector .shipping-buttons .action.action--secondary.disabled { cursor: not-allowed; } .shipping-selector .shipping-buttons.active { max-height: 500px; transition: max-height 0.25s ease-in; } .klaviyo-page-section { max-width: 30em; margin: 2rem auto; padding: 0 1rem; } .chevron-container { cursor: pointer; height: 25px; width: 25px; transition: transform 0.2s ease; } .chevron-container__opened { transform: translateY(0) rotate(180deg); } .chevron-container svg { display: block; width: 30px; fill: #ffffff; height: 30px; } .chevron-down { width: 16px; } .chevron-down svg { transform: scale(1.3); fill: #3d3935; transition-duration: 0.2s; transition-timing-function: linear; } .chevron-up { width: 16px; } .chevron-up svg { transform: scale(1.3) rotate(-180deg) translateX(3px); fill: #3d3935; transition-duration: 0.2s; transition-timing-function: linear; } .footer { display: block; position: relative; padding: 1.25rem; background: #e0e0e0; } .footer--kiosk { background: #ffffff; min-height: 5rem; } .footer--kiosk .site-footer { display: none; } .footer .site-footer { margin-left: auto; margin-right: auto; max-width: 90rem; } .footer .site-footer__menu { max-width: 65.5rem; margin: 0 auto; text-align: center; } .footer .site-footer__menu .social-icons { padding-top: 2rem; } .footer .site-footer__copyright { display: flex; align-items: center; justify-content: center; padding-bottom: 1rem; font-weight: 700; text-transform: uppercase; } .footer .site-footer__logo { display: flex; align-items: center; justify-content: center; } .footer .site-footer__your-privacy-choices-container { border-bottom: 1px solid #d8d7d7; padding-bottom: 1rem; max-width: 65.5rem; margin: 0 auto; margin-bottom: 0.6rem; } .footer .site-footer__your-privacy-choices-container > div { cursor: pointer; display: flex; gap: 0.3rem; align-items: center; width: -moz-fit-content; width: fit-content; margin: 0 auto; } .footer .site-footer__your-privacy-choices-container .icon-container { width: 2rem; height: 1rem; } .footer .container-mobile { padding-top: 1.5em; } .footer .container-mobile .link__title { font-family: var(--font-oswald); font-size: 18px; font-style: normal; font-weight: 500; line-height: 26.7px; /* 148.333% */ text-transform: uppercase; color: #3d3935; } @media (max-width: 30em) { .footer .container-mobile .link__title { font-size: 16px; line-height: 23.7px; /* 148.125% */ } } .footer .container-mobile .link--level2 { font-size: 0.9rem; margin: 0.5rem 0; } .footer .container-mobile svg { fill: black; } .footer .linklist--footer-menu { padding: 1.3rem 0 1rem; text-align: left; } @media (max-width: 45em) { .footer .linklist--footer-menu { padding: 0 0 1rem; text-align: center; } } .footer .linklist--footer-menu ul { list-style: none; padding: 0; margin: 0; } .footer .linklist--footer-menu .linklist__links--level1 { padding: 0; } @media (min-width: 45em) { .footer .linklist--footer-menu .linklist__links--level1 { display: flex; justify-content: space-between; } } @media (min-width: 45em) { .footer .linklist--footer-menu .link--level1 { max-width: 12.5rem; } } .footer .linklist--footer-menu .link--level2 { font-size: 0.875rem; margin: 1rem 0; } @media (min-width: 45em) { .footer .linklist--footer-menu .link--level2 { font-size: 1rem; margin: 0.25rem 0; } } .footer .linklist--footer-menu .link__title { font-family: var(--font-oswald); font-size: 18px; font-style: normal; font-weight: 500; line-height: 26.7px; /* 148.333% */ text-transform: uppercase; color: #3d3935; margin: 2rem 0; } @media (max-width: 30em) { .footer .linklist--footer-menu .link__title { font-size: 16px; line-height: 23.7px; /* 148.125% */ } } @media (min-width: 45em) { .footer .linklist--footer-menu .link__title { margin: 1rem 0; } } .footer .linklist--footer-menu .link__anchor { text-decoration: none; } .footer .linklist--footer-menu .link__icon { display: inline-block; width: 1.5rem; height: 1.5rem; vertical-align: middle; } .form-container-row-page-section { background-color: #f5f5f5; padding: 1rem 0 3rem 0; } @media (min-width: 45em) { .form-container-row-page-section { padding: 3rem 1.875rem; } } @media (min-width: 75em) { .form-container-row-page-section { padding: 3rem 0 4.375rem 0; } } .form-container-row-page-section .title-container { margin: 2rem 0 2.5rem 0; } .form-container-row-page-section .title-container .text-H2 { font-family: var(--font-oswald); letter-spacing: 0%; font-size: 1.75rem; line-height: 1.2; text-transform: uppercase; font-weight: 500; } @media (min-width: 45em) { .form-container-row-page-section .title-container .text-H2 { font-size: 2rem; line-height: 1.25; } } .form-container-row-page-section .title-container__subtitle { margin: 0; } .form-container-row-page-section .title-container--center { text-align: center; } .form-container-row-page-section .title-container--left { text-align: left; } .form-container-row-page-section .title-container--with-link { display: flex; justify-content: space-between; align-items: center; } .gallery-row-page-section-container { max-width: 90rem; position: relative; margin: 0 auto; width: 100%; } .gallery-row-page-section { margin: 1.5rem auto; padding: 0 0.5rem; } @media (min-width: 45em) { .gallery-row-page-section { margin: 3rem auto; } } @media (min-width: 45em) { .gallery-row-page-section { padding: 0 1.875rem; } } @media (min-width: 75em) { .gallery-row-page-section { padding: 0; } } .gallery-row-page-section .title-container { margin: 1rem 0; } .gallery-row-page-section .title-container__subtitle { margin: 0; } .gallery-row-page-section .title-container--center { text-align: center; } .gallery-row-page-section .title-container--left { text-align: left; } .gallery-row-page-section .title-container--with-link { display: flex; justify-content: space-between; align-items: center; gap: 3em; } .gallery-row-page-section .title-container--with-link a { text-align: right; } @media (min-width: 45em) { .gallery-row-page-section .title-container--with-link { flex-direction: row; text-align: unset; justify-content: space-between; align-items: center; } } .gallery-row-page-section a { text-decoration: underline; font-weight: 400; } .gallery-row-page-section--checkout a { text-decoration: none !important; } .gallery-row-page-section--pre-checkout--loading a { opacity: 0.5; pointer-events: none; } .gallery-row-page-section--pre-checkout--loading a:hover { cursor: not-allowed; } .gallery-row-page-section--image-type-icon .text--overlay { max-width: 110px; } .gallery-row__container { display: flex; justify-content: center; text-align: center; overflow: hidden; flex-wrap: wrap; gap: 1rem; } .gallery-row__item { flex: 1 1; margin: 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: space-between; min-width: 18.75rem; } .gallery-row__item--with-link { height: 100%; } .gallery-row__item .action { margin: 0 !important; margin-bottom: 1rem !important; } .gallery-row__item .image-container { width: 100%; position: relative; height: 100%; } .gallery-row__item .image-container .image--circle img { aspect-ratio: 1; border-radius: 50%; max-width: 19.8125rem; object-fit: cover; } .gallery-row__item .image-container .image--circle .pod-media--image-container { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; } .gallery-row__item .image-container .image--square img, .gallery-row__item .image-container .image--rectangle img { border-radius: 0; width: 100%; } .gallery-row__item .image-container .image--square + .text--overlay, .gallery-row__item .image-container .image--rectangle + .text--overlay { background-color: rgba(0, 0, 0, 0.2); } .gallery-row__item .image-container .image--square img { aspect-ratio: 1/1; height: 100%; object-fit: cover; } .gallery-row__item .image-container .image--rectangle, .gallery-row__item .image-container .image--rectangle-show-full-image { height: 12.5rem; } .gallery-row__item .image-container .image--rectangle img, .gallery-row__item .image-container .image--rectangle-show-full-image img { aspect-ratio: 16/9; } .gallery-row__item .image-container .image--rectangle img { object-fit: cover; } .gallery-row__item .image-container .image--rectangle-show-full-image img { object-fit: contain; } @media (max-width: 30em) { .gallery-row__item .text--center, .gallery-row__item .text--left { word-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; } } .gallery-row__item .text--center { text-align: center; -webkit-hyphens: auto; hyphens: auto; } .gallery-row__item .text--left { text-align: left; -webkit-hyphens: auto; hyphens: auto; } @media (max-width: 40em) { .gallery-row__item .text--left { width: 100%; } } .gallery-row__item .text--overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .gallery-row__item .text--overlay.text__paragraph { margin-top: 4rem; } .gallery-row__item .text__content p { padding: 11px; text-align: left; } @media (min-width: 45em) { .gallery-row__item .text__content p { padding: 1rem; text-align: center; } } .gallery-row__item .text__content--left p, .gallery-row__item .text__content--center p, .gallery-row__item .text__content--right p { text-align: inherit; } .gallery-row__item .text__content--left { text-align: left; } .gallery-row__item .text__content--center { text-align: center; } .gallery-row__item .text__content--right { text-align: right; } .gallery-row__item--border { border-radius: 1rem; overflow: hidden; } .gallery-row__item--border-gray { border: 1px solid grey; } .gallery-row__item--border-black { border: 1px solid #000; } .gallery-row__item--background-gray { background-color: #f5f5f5; } .gallery-row__item--background-white { background-color: #ffffff; } @media (min-width: 35em) { .gallery-row__item--fixed-width { flex: 0 1; margin: 0; padding: 1.5rem; } } .gallery-row__item--card { flex: auto; } @media (min-width: 45em) { .gallery-row__item--card { max-width: 20rem; } } .gallery-row__item--card .text__content p { padding: 0 !important; margin-top: 0 !important; } .gallery-row-one-line__container { flex-wrap: nowrap; } .gallery-row-one-line__item { min-width: min-content; } @media (min-width: 45em) and (max-width: 75em) { .gallery-row-one-line__item { min-width: auto; } } @media (min-width: 75em) { .gallery-row-one-line__item { min-width: 18.75rem; } } .media--with-link { text-decoration: none !important; } .MuiDrawer-paper { z-index: 1; } @media (min-width: 60em) { .cart-toast { width: 360px; overflow: hidden; max-height: 400px; } } .cart-toast-content { background-color: #fff; display: flex; flex-direction: column; align-items: center; width: 100%; } .cart-toast-content h2 { align-self: flex-start; } .cart-toast { position: relative; top: 0; right: 0; bottom: 0; width: 100%; } .cart-toast-title { order: 1; padding-left: 1rem; font-size: 0.75rem; font-weight: 300; } @media (min-width: 60em) { .cart-toast-title { text-align: center; font-weight: 300; font-size: 0.875rem; } } .cart-toast-items { overflow: auto; order: 2; width: 100%; } .cart-toast-items-inner { display: block; height: 100%; padding: 0 0.5rem; overflow-y: auto; width: 100%; overflow: hidden; } .cart-toast-items-inner .line-item-flyout { gap: 2rem; } @media (min-width: 60em) { .cart-toast-items-inner { width: 336px; } } .cart-toast-delivery-amount { color: #3d3935; font-size: 0.75rem; font-weight: 700; margin: 0; padding: 0.5rem 0; text-align: center; } .cart-toast-delivery-amount span { color: #d14124; } .cart-toast-shipping { order: 3; width: 100%; } .cart-toast-shipping-amount { background-color: #fafafa; margin: 0 auto; } .cart-toast-shipping-amount-free { background-color: #d14124; margin: 0 auto; } .cart-toast-shipping-amount-message { color: #3d3935; font-size: 12px; font-weight: 700; margin: 0; padding: 0.5rem 0; text-align: center; } .cart-toast-shipping-amount-message span { color: #d14124; } @media (min-width: 60em) { .cart-toast-shipping-amount-message { font-size: 0.85rem; } } .cart-toast-shipping-amount-free p { color: #fff; } .cart-toast-footer { background-color: #fafafa; border-radius: 46px; order: 3; width: 100%; } .cart-toast-footer-container { padding: 12px; } .cart-toast-footer-action { background: #3d3935; border: 1px solid #3d3935; color: #ffffff; display: inline-block; fill: #ffffff; font-family: var(--font-oswald); /* Required for styling */ font-size: 0.75rem; font-weight: 700; line-height: 1.2; padding: 1em 1.25em; text-align: center; text-decoration: none; text-transform: uppercase; transition: background-color 0.2s, border-color 0.2s; position: relative; } .cart-toast-footer-action:active, .cart-toast-footer-action:focus, .cart-toast-footer-action:hover { background-color: #22201d; border-color: #22201d; color: #ffffff; fill: #ffffff; } .cart-toast-footer-button { font-size: 0.75rem; font-weight: 700; width: 100%; } @media (min-width: 60em) { .cart-toast-footer-button { font-size: 1rem; padding: 9px; border-radius: 46px; } } .cart-toast-delivery { position: relative; margin: 0 auto; width: 100%; max-width: 385px; } .cart-toast-delivery-message { color: #ffffff; font-size: 0.75rem; font-weight: 700; margin: 0; padding: 0.5rem 0; text-align: center; } .cart-toast-delivery-amount { color: #3d3935; font-size: 12px; font-weight: 700; margin: 0; padding: 0.5rem 0; text-align: center; background: #fafafa; } .cart-toast-delivery-amount span { margin-left: 2px; } @media (min-width: 60em) { .cart-toast-delivery { max-width: 385px; } .cart-toast-delivery-message { font-size: 0.85rem; } .cart-toast-delivery-amount { font-size: 12px; } } .cart-toast-delivery__fit-to-panel { margin: auto !important; max-width: 385px !important; } .cart-toast-red-text { color: #d14124; } .main-nav--mobile { width: 100%; } .main-nav--mobile .main-nav-item { display: flex; flex-direction: column; align-items: center; text-align: center; border: 2px solid #e0e0e0; margin: 0.625rem 0; padding: 0.625rem; cursor: pointer; } .main-nav--mobile .main-nav-item:hover__title { color: #22201d; } .main-nav--mobile .main-nav-item__icon, .main-nav--mobile .main-nav-item svg { height: 1.875rem; width: 1.875rem; } .main-nav--mobile .main-nav-item__title { font-family: var(--font-oswald); font-size: 1.125rem; font-weight: 700; text-transform: uppercase; } .main-nav--mobile .main-nav-item__description { font-size: 0.7rem; font-weight: 300; margin-top: 5px; } .shop-drawer { display: flex; flex-direction: column; gap: 16px; } .shop-drawer__header { width: 100%; display: flex; flex-direction: column; text-transform: uppercase; gap: 16px; } .shop-drawer__header__back-wrapper { display: flex; align-items: center; color: #777472; } .shop-drawer__header__back-text span { color: #777472; font-weight: 500; font-size: 0.8125rem; font-family: var(--font-montserrat); } .shop-drawer__header__title { font-family: var(--font-oswald); font-weight: 500; font-size: 1.125rem; line-height: 1.5rem; padding: 0 16px; } .shop-drawer__content__links { display: flex; flex-direction: column; gap: 8px; text-transform: capitalize; } .shop-drawer__content__link { width: 100%; font-weight: 700; display: flex; justify-content: space-between; align-items: center; position: relative; cursor: pointer; } .shop-drawer__content__link span { position: relative; font-family: var(--font-montserrat); font-weight: 500; font-size: 1rem; line-height: 1.375rem; } .account-menu.nav-link { padding: 0; } .account-menu--desktop { display: flex; height: 44px; padding: 5px 1px; flex-direction: column; justify-content: center; align-items: flex-start; gap: 10px; cursor: pointer; } .account-menu__spacer { flex: 1 1; } .account-menu-link { padding: 0px; } .account-menu-link.nav-link { padding: 0; } @media (max-width: 48em) { .account-menu-link p { margin-left: 3px; } } .account-menu-join-wrapper { display: flex; gap: 0.5rem; align-items: center; } .account-menu-section { display: flex; align-items: center; gap: 8px; } .account-menu-section-session { margin: 0; } .account-menu-section-user { display: flex; align-items: center; gap: 8px; } .account-menu-section-username { color: #3d3935; text-align: right; font-family: var(--font-montserrat); font-size: 14px; font-style: normal; font-weight: 500; line-height: 16px; letter-spacing: 0.4px; text-transform: capitalize; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: min(11ch, 18vw); } .account-menu-section-icon { height: 1.25rem; width: 1rem; } .account-menu-section-chevron-icon { width: 12px; height: 24px; } @media (max-width: 75em) { .account-menu-section-session { margin-left: 3px; font-size: 0.9em; } } @media (max-width: 75em) and (max-width: 671px) { .account-menu-section-session { display: none; } } .account-menu-options { display: none; height: 0; transition: 0.3s height ease-in-out; } .account-menu-options-active { background-color: #ffffff; position: absolute; transition: 0.3s ease-in-out; z-index: 11; height: -moz-fit-content; height: fit-content; display: flex; flex-direction: column; align-self: stretch; padding: 8px 0px; flex: 1 0; margin-top: 2rem; border-radius: 8px; width: 244px; box-shadow: 0px 2px 15px 0px rgba(0, 0, 0, 0.1); } @media (max-width: 45em) { .account-menu-options-active { right: 0; } } .account-menu-options-active a { color: #3d3935; text-align: justify; font-family: var(--font-montserrat); font-size: 14px; font-style: normal; font-weight: 500; line-height: 100%; text-transform: capitalize; } .account-menu-options-active .nav-link { text-transform: capitalize; } .account-menu-options-active .nav-link:hover { background-color: #f5f5f5; } .store-menu--desktop { display: none; } @media (min-width: 60em) { .store-menu--desktop { display: flex; } } @media (max-width: 1060px) { .store-menu--desktop { margin-left: auto; } } .store-menu__spacer { flex: 1 1; } .store-menu .nav-link { padding: 0; } .store-menu-link { padding: 0px; } @media (max-width: 48em) { .store-menu-link p { margin: 0px; } } .store-menu-join-wrapper { display: flex; gap: 8px; align-items: center; } .store-menu-section { display: "flex"; flex-direction: "column"; } .store-menu-section-session { margin: 0; } .store-menu-section-icon { height: 1.375rem; width: 1rem; } @media (max-width: 75em) { .store-menu-section-session { margin-left: 3px; font-size: 0.9em; } } .nav-link { padding: 10px; text-transform: uppercase; font-size: 14px; font-weight: 500; text-align: center; display: flex; align-items: center; gap: 3px; cursor: pointer; } .cart { max-width: 1200px; margin: auto; padding: 1rem; } .cart-title { display: none; } .cart-title--center { text-align: center; } @media (min-width: 60em) { .cart-title { font-size: 2em; margin: 0.5rem 0 1.5rem; display: block; text-transform: uppercase; } } .cart-content { display: grid; margin: 1rem 0; } @media (min-width: 60em) { .cart-content { grid-gap: 1em; grid-template-columns: 3fr minmax(16rem, 2fr); } } .cart-content-item { padding: 0 !important; margin-bottom: 1rem; } .cart-content-sidebar { background-color: #f5f5f5; margin: 20px 0 0; text-align: center; } @media (min-width: 60em) { .cart-content-sidebar { background-color: transparent; margin: 0; } } .cart-content-delivery { position: relative; margin: 0 auto; width: 100%; } @media (min-width: 60em) { .cart-content-delivery { max-width: 385px; } } .cart-content-delivery-message { background-color: #d14124; color: #ffffff; font-size: 0.75rem; font-weight: 700; margin: 0; padding: 0.5rem 0; text-align: center; } .cart-content-delivery-progress-bar { position: relative; background-color: #e0e0e0; min-height: 34px; border-top-right-radius: 20px; } .cart-content-delivery-fade-out { position: absolute; z-index: 1; width: 100%; } @keyframes fadeout { 0% { opacity: 1; } 100% { opacity: 0; } } .cart-content-delivery-fade-out { animation: 1s ease 2s normal forwards 1 fadeout; animation-delay: 1200ms; animation-timing-function: ease-out; animation-duration: 600ms; } .cart-content-delivery-amount { position: absolute; color: #3d3935; font-size: 0.75rem; font-weight: 700; margin: auto; padding: 0; text-align: center; width: 100%; inset: 0; display: block; height: 50%; } .cart-content-delivery-amount span { margin-left: 2px; } @media (min-width: 60em) { .cart-content-delivery-message { font-size: 12px; } .cart-content-delivery-amount { font-size: 12px; } } .cart-content-main { padding: 1rem; display: inline-block; width: 100%; } @media (min-width: 60em) { .cart-content-main { background-color: #f5f5f5; padding: 1.5rem; margin: 0 auto; max-width: 385px; } } .cart-content-main-total { align-items: center; display: flex; justify-content: space-between; padding: 0; } .cart-content-main-total-price { font-weight: 500; font-size: 1.4rem; } .cart-content-actions { text-align: center; } .cart-content-actions-checkout { display: block; margin: 1em 0; cursor: pointer; background: #3d3935; width: 100%; border: 1px solid #3d3935; color: #ffffff; display: inline-block; font-family: var(--font-oswald); font-size: 0.75rem; font-weight: 700; line-height: 1.2; min-height: 3.66666em; min-width: 12em; padding: 1em 1.25em; text-decoration: none; text-transform: uppercase; } .cart-content-actions-checkout:hover, .cart-content-actions-checkout:active { background-color: #22201d; border-color: #22201d; color: #ffffff; } .cart-content-actions-checkout-pointer { background-color: #545454; pointer-events: none; } .cart-content-actions-checkout-pointer-a { pointer-events: none; } .cart-content-actions-continue { font-size: 0.75rem; text-decoration: underline; cursor: pointer; } .cart-empty { text-align: center; height: 100%; margin: 50px 0; } .cart-empty-message { text-transform: uppercase; } .cart-empty-button { font-size: 0.75rem; font-weight: 700; font-size: 1rem; padding: 12px 25px; background-color: transparent; color: #d14124; border-radius: 25px; text-transform: uppercase; border: 1px solid #d14124; cursor: pointer; } @media (min-width: 60em) { .cart-empty-button { font-size: 1rem; } } .cart-empty-button:hover, .cart-empty-button:active { background-color: transparent; color: #d14124; border-color: #d14124; } @media (min-width: 60em) { .cart-flyout { width: 420px; } } .cart-flyout { position: relative; z-index: 1004; top: 0; right: 0; bottom: 0; width: 100%; height: 100%; } .cart-flyout ::-webkit-scrollbar { appearance: none; -webkit-appearance: none; width: 7px; } .cart-flyout ::-webkit-scrollbar-thumb { border-radius: 4px; background-color: rgba(0, 0, 0, 0.5); box-shadow: 0 0 1px rgba(255, 255, 255, 0.5); -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 0.5); } @media (max-width: 60em) { .cart-flyout__content { position: fixed; } } .cart-flyout__content { background-color: #ffffff; display: flex; flex-direction: column; height: 100%; width: 100%; } .delivery-amount__message { color: #3d3935; font-size: 0.75rem; font-weight: 700; margin: 0; padding: 0.5rem 0; text-align: center; } .delivery-amount__message span { color: #d14124; } .delivery-amount { background-color: #fafafa; margin: 0 auto; } .delivery-amount--free { background-color: #d14124; margin: 0 auto; } .delivery-amount__message { color: #3d3935; font-size: 0.75rem; font-weight: 700; margin: 0; padding: 0.5rem 0; text-align: center; } .delivery-amount__message span { color: #d14124; } @media (min-width: 60em) { .delivery-amount__message { font-size: 0.85rem; } } .delivery-amount--free p { color: #ffffff; } .delivery-amount__currency { color: #d14124; } .delivery-amount__hide { display: none; } .cart-flyout__header { position: relative; z-index: 1; display: flex; flex: 0 0 3.875rem; padding: 0 1rem; background-color: #ffffff; } .cart-flyout__title { align-items: center; display: flex; flex: 1 0 auto; justify-content: space-between; font-size: 1.125rem; } .cart-flyout__back { display: flex; align-items: center; min-height: 100%; margin-right: 0.3125rem; } .cart-flyout__back-button { background: transparent; border: none; color: #3d3935; cursor: pointer; padding: 0; text-align: left; height: auto; min-height: 0; min-width: 0; font-size: 1rem; font-weight: 500; line-height: normal; transition: none; text-transform: none; display: inline-block; height: 30px; width: 30px; } .cart-flyout__basket { position: relative; } .cart-flyout__basket-icon { display: inline-block; height: 37px; vertical-align: middle; width: 37px; } .cart-flyout__basket-flame { position: absolute; bottom: 2px; font-style: normal; right: -15px; height: 37px; width: 37px; } .cart-flyout__basket-flame:before { content: attr(data-count); color: #ffffff; font-size: 0.625rem; left: 50%; position: absolute; text-align: center; top: 50%; transform: translateX(-50%) translateY(-50%); } .cart-flyout__basket-flame svg { fill: #d14124; } .cart-flyout__subtotal span { display: inline-block; vertical-align: middle; margin-left: 5px; } .cart-flyout__subtotal-label { font-size: 0.6875rem; } .cart-flyout__subtotal-value { font-size: 1.375rem; font-weight: 500; } .cart-flyout__items { overflow: auto; } .cart-flyout__items-inner { display: block; height: 100%; padding: 1rem 0.75rem 0px 0.75rem; overflow-y: auto; width: 100%; -ms-overflow-style: -ms-autohiding-scrollbar; } .cart-flyout__empty { margin-top: 8rem; text-align: center; height: 50vh; } .cart-flyout__empty p { margin: 16px 0 16px 0; font-size: 1.2em; } .cart-flyout__empty-message { text-transform: capitalize; } @media (min-width: 60em) { .cart-flyout__empty-button { font-size: 1rem; padding: 1.125rem 0.9375rem; } } .cart-flyout__empty-button { font-size: 0.75rem; font-weight: 700; padding: 0.8125rem 0.625rem; cursor: pointer; } .cart-flyout__footer { background-color: #fafafa; margin-top: auto; box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.2), 0px 3px 14px 0px rgba(0, 0, 0, 0.12), 0px 8px 10px 0px rgba(0, 0, 0, 0.14); } .cart-flyout__footer-button { line-height: 1.2rem; color: #ffffff; fill: #ffffff; background-color: #3d3935; border: 1px solid #3d3935; padding: 1em 1.25em !important; margin: 0px; } @media (min-width: 60em) { .cart-flyout__footer-button { font-size: 1rem; padding: 9px; border-radius: 46px; } } .cart-flyout__footer-button { font-size: 0.75rem; font-weight: 700; width: 100%; } .cart-flyout__footer-button a { color: #ffffff; } .pointer { color: #ffffff; line-height: 1.2rem; background-color: #545454; pointer-events: none; } .cart-flyout__spend { width: 100%; height: 35px; background-color: #545454; } .cart-flyout__overlay { background-color: #d14124; vertical-align: middle; height: 100%; width: 23.375rem; color: #ffffff; margin-top: 1rem; justify-content: center; display: flex; font-size: 15px; border-top-right-radius: 1.563rem; align-items: center; } .cart-flyout__overlay strong { padding: 0 5px; } .cart-flyout__footer-container { padding: 12px; } .MuiDrawer-paper { z-index: 1; } @media (min-width: 60em) { .cart-toast { width: 360px; overflow: hidden; max-height: 400px; } } .cart-toast-content { background-color: #fff; display: flex; flex-direction: column; align-items: center; width: 100%; } .cart-toast-content h2 { align-self: flex-start; } .cart-toast { position: relative; top: 0; right: 0; bottom: 0; width: 100%; } .cart-toast-title { order: 1; padding-left: 1rem; font-size: 0.75rem; font-weight: 300; } @media (min-width: 60em) { .cart-toast-title { text-align: center; font-weight: 300; font-size: 0.875rem; } } .cart-toast-items { overflow: auto; order: 2; width: 100%; } .cart-toast-items-inner { display: block; height: 100%; padding: 0 0.5rem; overflow-y: auto; width: 100%; overflow: hidden; } .cart-toast-items-inner .line-item-flyout { gap: 2rem; } @media (min-width: 60em) { .cart-toast-items-inner { width: 336px; } } .cart-toast-delivery-amount { color: #3d3935; font-size: 0.75rem; font-weight: 700; margin: 0; padding: 0.5rem 0; text-align: center; } .cart-toast-delivery-amount span { color: #d14124; } .cart-toast-shipping { order: 3; width: 100%; } .cart-toast-shipping-amount { background-color: #fafafa; margin: 0 auto; } .cart-toast-shipping-amount-free { background-color: #d14124; margin: 0 auto; } .cart-toast-shipping-amount-message { color: #3d3935; font-size: 12px; font-weight: 700; margin: 0; padding: 0.5rem 0; text-align: center; } .cart-toast-shipping-amount-message span { color: #d14124; } @media (min-width: 60em) { .cart-toast-shipping-amount-message { font-size: 0.85rem; } } .cart-toast-shipping-amount-free p { color: #fff; } .cart-toast-footer { background-color: #fafafa; border-radius: 46px; order: 3; width: 100%; } .cart-toast-footer-container { padding: 12px; } .cart-toast-footer-action { background: #3d3935; border: 1px solid #3d3935; color: #ffffff; display: inline-block; fill: #ffffff; font-family: var(--font-oswald); /* Required for styling */ font-size: 0.75rem; font-weight: 700; line-height: 1.2; padding: 1em 1.25em; text-align: center; text-decoration: none; text-transform: uppercase; transition: background-color 0.2s, border-color 0.2s; position: relative; } .cart-toast-footer-action:active, .cart-toast-footer-action:focus, .cart-toast-footer-action:hover { background-color: #22201d; border-color: #22201d; color: #ffffff; fill: #ffffff; } .cart-toast-footer-button { font-size: 0.75rem; font-weight: 700; width: 100%; } @media (min-width: 60em) { .cart-toast-footer-button { font-size: 1rem; padding: 9px; border-radius: 46px; } } .cart-toast-delivery { position: relative; margin: 0 auto; width: 100%; max-width: 385px; } .cart-toast-delivery-message { color: #ffffff; font-size: 0.75rem; font-weight: 700; margin: 0; padding: 0.5rem 0; text-align: center; } .cart-toast-delivery-amount { color: #3d3935; font-size: 12px; font-weight: 700; margin: 0; padding: 0.5rem 0; text-align: center; background: #fafafa; } .cart-toast-delivery-amount span { margin-left: 2px; } @media (min-width: 60em) { .cart-toast-delivery { max-width: 385px; } .cart-toast-delivery-message { font-size: 0.85rem; } .cart-toast-delivery-amount { font-size: 12px; } } .cart-toast-delivery__fit-to-panel { margin: auto !important; max-width: 385px !important; } .cart-toast-red-text { color: #d14124; } @media (min-width: 60em) { .find-similar-flyout { width: 520px; } } .find-similar-flyout { position: relative; z-index: 1004; top: 0; right: 0; bottom: 0; width: 100%; } .find-similar-flyout ::-webkit-scrollbar { appearance: none; -webkit-appearance: none; width: 7px; } .find-similar-flyout ::-webkit-scrollbar-thumb { border-radius: 4px; background-color: rgba(0, 0, 0, 0.5); box-shadow: 0 0 1px rgba(255, 255, 255, 0.5); -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 0.5); } @media (max-width: 60em) { .find-similar-flyout__content { position: fixed; } } .find-similar-flyout__content { background-color: #ffffff; display: flex; flex-direction: column; max-height: 100vh; min-height: 100%; } .find-similar-flyout__header { position: relative; z-index: 1; display: flex; flex: 0 0 3.875rem; padding: 0 1rem; background-color: #ffffff; } .find-similar-flyout__title { align-items: center; display: flex; flex: 1 0 auto; justify-content: space-between; font-size: 1.125rem; } @media (max-width: 60em) { .find-similar-flyout__title h5 { font-weight: 500; } } .find-similar-flyout__back { min-height: 100%; z-index: 999; } @media (max-width: 60em) { .find-similar-flyout__back { background-color: rgba(61, 57, 53, 0.8); } } .find-similar-flyout__back-button { background: transparent; border: none; cursor: pointer; padding: 0; text-align: left; height: auto; min-height: 0; min-width: 0; font-size: 1rem; line-height: normal; transition: none; text-transform: none; display: inline-block; position: relative; height: 24px; width: 24px; margin-top: 1.3rem; margin-left: 0.5rem; } .find-similar-flyout__title-label { font-size: 0.6875rem; } .find-similar-flyout__items { overflow: auto; } .find-similar-flyout__items-inner { display: block; height: 100%; padding: 1rem 0px 0px 0.75rem; overflow-y: auto; width: 100%; -ms-overflow-style: -ms-autohiding-scrollbar; } .find-similar-flyout__items-inner-item { display: grid; position: relative; width: 100%; grid-template-columns: repeat(2, 1fr); grid-row-gap: 0.5rem; grid-column-gap: 0.75rem; } .mobile-nav-menu__main-link span { font-family: var(--font-oswald); font-weight: 500; font-size: 1.125rem; line-height: 1.5rem; text-transform: uppercase; } .mobile-nav-menu .link--active { color: #dc4405; } .mobile-nav-menu__shop-link span { font-family: var(--font-montserrat); font-weight: 500; font-size: 1rem; line-height: 1.375rem; } .mobile-nav-menu__shop-link.link--active svg path { fill: #dc4405; } .mobile-nav-menu__header { width: 100%; display: flex; justify-content: space-between; align-items: flex-start; margin: 1rem 0; } .mobile-nav-menu__content { overflow: auto; } .mobile-nav-menu__paper { width: 85%; max-width: 26.5625rem; display: flex; padding: 25px 0.5rem; } .mobile-nav-menu .become-a-member--mobile { padding: auto; margin: 0; width: 100%; } .mobile-nav-menu__account-dropdown-menu { display: block !important; } .mobile-nav-menu__account-dropdown-menu > * { margin: 0; } .mobile-nav-menu__account-dropdown-menu .account-menu-options { display: block; max-height: 0; overflow: hidden; transition: max-height 0.3s ease-in-out; } .mobile-nav-menu__account-dropdown-menu .account-menu-options-active { position: relative; max-height: 100vh; } .mobile-nav-menu__close-button { position: fixed !important; top: 12px; right: 10px; } .mobile-nav-menu__close-button svg path { fill: #ffffff; } .mobile-nav-menu__customer-link { display: flex; align-items: center; gap: 10px; } .mobile-nav-menu__customer-link .icon { height: 20px; width: 20px; } .mobile-nav-menu .account-favorites-link { margin-top: -1rem; } .nav-and-logo-container .mobile-nav-menu__burger-button { padding: 0; } @media (min-width: 1060px) { .nav-and-logo-container .mobile-nav-menu__burger-button { display: none; } } .zip-code-pop-up__modal { overflow-y: scroll; left: 0; top: 0; bottom: 0; right: 0; position: fixed; z-index: 2000; } .zip-code-pop-up__modal .action { margin: 0 !important; } .zip-code-pop-up__modal__overlay { display: flex; justify-content: center; align-items: center; background-color: hsla(0, 0%, 100%, 0.5); padding: 7.5rem 0; min-height: 100%; box-sizing: border-box; } .zip-code-pop-up__modal__content { background: #fff; position: relative; padding: 1.5rem; width: 90%; background-color: #fff; box-shadow: 0 2px 20px 10px #e0e0e0; } @media (min-width: 45em) { .zip-code-pop-up__modal__content { width: 600px; max-width: 100%; } } .zip-code-pop-up__modal__content .trade-area { display: flex; justify-content: center; align-items: center; min-height: 450px; text-align: center; padding: 2rem 0; } @media (min-width: 45em) { .zip-code-pop-up__modal__content .trade-area { height: 500px; min-height: 0; padding: 3rem 0; } } .zip-code-pop-up__modal__content .trade-area__close-modal-button { background: transparent; border: none; color: #3d3935; cursor: pointer; text-align: left; height: auto; min-height: 0; min-width: 0; font-size: 1rem; font-weight: 500; line-height: normal; transition: none; text-transform: none; position: absolute; right: 10px; top: 10px; height: 40px; padding: 0.25rem; width: 40px; } .zip-code-pop-up__modal__content .trade-area__content { background: #fff; position: inherit; padding: 1.5rem; width: 90%; max-width: 320px; } @media (min-width: 45em) { .zip-code-pop-up__modal__content .trade-area__content { width: 600px; max-width: 100%; } } .zip-code-pop-up__modal__content .trade-area__title { font-size: 1rem; margin-bottom: 0.5rem; } @media (min-width: 45em) { .zip-code-pop-up__modal__content .trade-area__title { font-size: 1.2rem; } } .zip-code-pop-up__modal__content .trade-area__copy { font-size: 0.9rem; font-weight: 500; max-width: 325px; margin: 0 auto 1.5rem; } .zip-code-pop-up__modal__content .trade-area__zip { background-color: #fff; border: 1px solid #e0e0e0; border-radius: 0; display: block; font-family: var(--font-montserrat); font-size: 0.9rem; font-weight: 300; height: 44px; margin: 1.5rem auto 1rem; padding: 0; text-align: center; width: 100%; } .zip-code-pop-up__modal__content .trade-area__zip input { text-align: center; } .zip-code-pop-up__modal__content .trade-area__zip input:focus::placeholder { color: transparent; } @media (min-width: 30em) { .zip-code-pop-up__modal__content .trade-area__zip { width: 320px; } } .zip-code-pop-up__modal__content .trade-area__change-location-wrapper { align-items: center; display: flex; justify-content: center; margin: 1rem 0; } .zip-code-pop-up__modal__content .trade-area__change-location-pin { margin-left: -10px; height: 30px; width: 30px; display: inline-block; } .zip-code-pop-up__modal__content .trade-area__change-location-button { background: transparent; text-align: left; height: auto; min-height: 0; font-size: 1rem; font-weight: 500; line-height: normal; transition: none; background-color: transparent; border: 0; color: #3d3935; cursor: pointer; font-family: var(--font-montserrat); font-size: 0.75rem; font-weight: 300; min-width: 0; padding: 1rem 0; text-decoration: underline; text-transform: none; } .zip-code-pop-up__modal__content .trade-area .notification { margin-top: 1rem; margin-bottom: 1rem; } .zip-code-pop-up__trade-area__content form { display: flex; flex-direction: column; justify-content: center; align-items: center; } .zip-code-bar { grid-area: zipcode-bar; background-color: #3d3935; color: #fff; font-size: 0.75rem; text-transform: uppercase; font-family: var(--font-oswald); /* Required for styling */ border-bottom: 1px solid #3d3935; overflow: hidden; position: relative; z-index: 0; } .zip-code-bar__summary:focus-visible { outline: revert; outline-offset: -2px; } .zip-code-bar__find-store { align-items: center; display: flex; justify-content: center; height: 100%; min-height: 37px; } .zip-code-bar__find-store svg { height: 30px; width: 30px; } .zip-code-bar__find-store-message { background: transparent; border: none; color: #3d3935; cursor: pointer; padding: 0; text-align: left; height: auto; min-height: 0; min-width: 0; font-size: 1rem; font-weight: 500; line-height: normal; transition: none; text-transform: none; } .zip-code-bar__find-store-message:hover, .zip-code-bar__find-store-message:active, .zip-code-bar__find-store-message:focus { color: #3d3935; background-color: transparent; border-color: transparent; } .zip-code-bar__find-store-message { color: inherit; text-transform: uppercase; font-family: var(--font-oswald); font-weight: 300; font-size: 0.875rem; margin: 0; cursor: pointer; } .zip-code-bar__find-store-message:hover, .zip-code-bar__find-store-message:focus { color: #c6c6c6; } .zip-code-bar__target { height: 30px; width: 30px; animation: fadeout 1s ease infinite alternate; } @keyframes fadeout { 0% { opacity: 1; } 25% { opacity: 0.75; } 50% { opacity: 0.5; } 75% { opacity: 0.25; } 100% { opacity: 0; } } .zip-code-bar__target svg { fill: #fff; } .zip-code-bar__available { display: flex; align-items: center; width: 95%; gap: 1rem; margin: 0 auto; padding: 0.375rem 0; justify-content: space-between; } @media (min-width: 30em) { .zip-code-bar__available { justify-content: center; } } .zip-code-bar__unavailable { align-items: center; display: flex; justify-content: center; padding: 0.375rem 0; } .zip-code-bar__item { display: flex; flex: 1.5 1; flex-direction: column; flex-wrap: wrap; align-items: center; } @media (min-width: 45em) { .zip-code-bar__item { flex-direction: row; flex: 0 1 auto; gap: 0.3125rem; flex-wrap: nowrap; } } .zip-code-bar__item__label { white-space: nowrap; } .zip-code-bar__item__value { font-weight: 500; white-space: nowrap; } .zip-code-bar .active { background-color: #f5f5f5; margin-bottom: 1.25rem; } .zip-code-bar .active svg { fill: #fff; } .zip-code-bar .active::after { color: white; } .zip-code-bar .active .icon::after { color: white; } @media (min-width: 45em) { .zip-code-bar { font-size: 0.875rem; } } .zip-code-bar .trade__content { display: flex; gap: 2rem; justify-content: center; color: #3d3935; margin: 0 auto; padding: 1.563rem; } @media (max-width: 45em) { .zip-code-bar .trade__content { display: block; } } .zip-code-bar .trade__content .trade__services { display: flex; justify-content: center; flex: 1 1; } @media (min-width: 35em) { .zip-code-bar .trade__content .trade__services { flex: initial; } } .zip-code-bar .trade__content .trade__services .trade__service { position: relative; flex-basis: 100%; max-width: 11.5rem; } @media (min-width: 45em) { .zip-code-bar .trade__content .trade__services .trade__service { max-width: 15rem; padding-left: 2.625rem; } } .zip-code-bar .trade__content .trade__services .trade__service--icon { display: block; height: 2rem; width: 2rem; top: 0; left: 0; position: absolute; } .zip-code-bar .trade__content .trade__services .trade__service--icon svg { fill: #000000; } .zip-code-bar .trade__content .trade__services .trade__service--text { font-size: 0.875rem; margin: 0 0 0.938rem; } @media (min-width: 45em) { .zip-code-bar .trade__content .trade__services .trade__service--text { font-size: 1rem; } } @media screen and (max-width: 768px) { .zip-code-bar .trade__content .trade__services .trade__service--text { margin-left: 3em; } } .zip-code-bar .trade__content .trade__actions { flex: 1 1; } @media (min-width: 35em) { .zip-code-bar .trade__content .trade__actions { flex: initial; } } .zip-code-bar .trade__content .trade__actions button { margin: 0; } .zip-code-bar .trade__content .trade__actions { display: flex; flex-direction: column; align-items: center; } .zip-code-bar .trade__content .trade__actions button { background: #3d3935; border: none; color: #ffffff; font-size: 0.75rem; padding: 0.75rem 0.9375rem; } @media (max-width: 45em) { .zip-code-bar .trade__content .trade__actions button { max-width: 11.5rem; } } .zip-code-bar .trade__content .trade__actions .trade__continue { background: transparent; border: none; color: #3d3935; cursor: pointer; padding: 0; text-align: left; height: auto; min-height: 0; min-width: 0; font-size: 1rem; font-weight: 500; line-height: normal; transition: none; text-transform: none; font-size: 0.875rem; font-family: var(--font-montserrat); margin-top: 0.625rem; text-decoration: underline; z-index: 1; } .zip-code-pop-up__modal { overflow-y: scroll; left: 0; top: 0; bottom: 0; right: 0; position: fixed; z-index: 2000; } .zip-code-pop-up__modal .action { margin: 0 !important; } .zip-code-pop-up__modal__overlay { display: flex; justify-content: center; align-items: center; background-color: hsla(0, 0%, 100%, 0.5); padding: 7.5rem 0; min-height: 100%; box-sizing: border-box; } .zip-code-pop-up__modal__content { background: #fff; position: relative; padding: 1.5rem; width: 90%; background-color: #fff; box-shadow: 0 2px 20px 10px #e0e0e0; } @media (min-width: 45em) { .zip-code-pop-up__modal__content { width: 600px; max-width: 100%; } } .zip-code-pop-up__modal__content .trade-area { display: flex; justify-content: center; align-items: center; min-height: 450px; text-align: center; padding: 2rem 0; } @media (min-width: 45em) { .zip-code-pop-up__modal__content .trade-area { height: 500px; min-height: 0; padding: 3rem 0; } } .zip-code-pop-up__modal__content .trade-area__close-modal-button { background: transparent; border: none; color: #3d3935; cursor: pointer; text-align: left; height: auto; min-height: 0; min-width: 0; font-size: 1rem; font-weight: 500; line-height: normal; transition: none; text-transform: none; position: absolute; right: 10px; top: 10px; height: 40px; padding: 0.25rem; width: 40px; } .zip-code-pop-up__modal__content .trade-area__content { background: #fff; position: inherit; padding: 1.5rem; width: 90%; max-width: 320px; } @media (min-width: 45em) { .zip-code-pop-up__modal__content .trade-area__content { width: 600px; max-width: 100%; } } .zip-code-pop-up__modal__content .trade-area__title { font-size: 1rem; margin-bottom: 0.5rem; } @media (min-width: 45em) { .zip-code-pop-up__modal__content .trade-area__title { font-size: 1.2rem; } } .zip-code-pop-up__modal__content .trade-area__copy { font-size: 0.9rem; font-weight: 500; max-width: 325px; margin: 0 auto 1.5rem; } .zip-code-pop-up__modal__content .trade-area__zip { background-color: #fff; border: 1px solid #e0e0e0; border-radius: 0; display: block; font-family: var(--font-montserrat); font-size: 0.9rem; font-weight: 300; height: 44px; margin: 1.5rem auto 1rem; padding: 0; text-align: center; width: 100%; } .zip-code-pop-up__modal__content .trade-area__zip input { text-align: center; } .zip-code-pop-up__modal__content .trade-area__zip input:focus::placeholder { color: transparent; } @media (min-width: 30em) { .zip-code-pop-up__modal__content .trade-area__zip { width: 320px; } } .zip-code-pop-up__modal__content .trade-area__change-location-wrapper { align-items: center; display: flex; justify-content: center; margin: 1rem 0; } .zip-code-pop-up__modal__content .trade-area__change-location-pin { margin-left: -10px; height: 30px; width: 30px; display: inline-block; } .zip-code-pop-up__modal__content .trade-area__change-location-button { background: transparent; text-align: left; height: auto; min-height: 0; font-size: 1rem; font-weight: 500; line-height: normal; transition: none; background-color: transparent; border: 0; color: #3d3935; cursor: pointer; font-family: var(--font-montserrat); font-size: 0.75rem; font-weight: 300; min-width: 0; padding: 1rem 0; text-decoration: underline; text-transform: none; } .zip-code-pop-up__modal__content .trade-area .notification { margin-top: 1rem; margin-bottom: 1rem; } .zip-code-pop-up__trade-area__content form { display: flex; flex-direction: column; justify-content: center; align-items: center; } .site-header { position: -webkit-sticky; position: sticky; top: 0; z-index: 12; background-color: #ffffff; margin-bottom: 85px; } .site-header__main { position: relative; margin: 0 auto; background-color: #ffffff; z-index: 1; display: flex; justify-content: center; border-bottom: 1px solid #d8d7d7; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1); } .site-header__main__inner { max-width: 90rem; width: 100%; position: relative; z-index: 1; display: flex; gap: 1.25rem; align-items: center; padding: 1rem 1.25rem; background-color: white; justify-content: space-between; flex-wrap: wrap; } @media (max-width: 360px) { .site-header__main__inner { padding: 1rem 8px; } } @media (min-width: 1230px) { .site-header__main__inner { gap: 1.25rem; flex-wrap: nowrap; justify-content: center; } } @media (min-width: 676px) and (max-width: 1060px) { .site-header__main__inner { gap: 0.8rem; } } @media (max-width: 676px) { .site-header__main__inner { gap: 0.5rem; } } .site-header__main .nav-and-logo-container { display: flex; align-items: center; flex-wrap: nowrap; gap: 8px; } .site-header__main .site-header-main-logo .primary-logo .pod-media--image-container { width: 125px; height: 17px; } @media (min-width: 45em) { .site-header__main .site-header-main-logo .primary-logo .pod-media--image-container { width: 169px; height: 23px; } } .site-header__main .site-header-main-logo .primary-logo img { width: 100%; height: auto !important; } .site-header__main-nav { display: none; } @media (min-width: 70rem) { .site-header__main-nav { display: block; white-space: nowrap; } } .site-header__main-nav ul { list-style: none; display: flex; gap: 1.25rem; } .site-header__main-nav ul li { text-transform: uppercase; white-space: nowrap; font-size: 0.875rem; font-weight: 500; color: #3d3935; } .site-header__main .searchbar { width: 100%; min-width: 150px; position: relative; z-index: 1; order: 1; } .site-header__main .searchbar__hits-ref-wrapper { position: absolute; width: 100%; } @media (min-width: 1230px) { .site-header__main .searchbar { order: 0; } } .site-header__main .searchbar .ais-SearchBox-loadingIndicator { display: none; } .site-header__main .searchbar .ais-Hits { margin-top: 0.5rem; position: relative; } .site-header__main .searchbar .ais-Hits .ais-Hits-list { width: 100%; background-color: white; z-index: 99999; list-style-type: none; border-bottom: 1px solid #d8d7d7; padding-left: 24px; } @media (max-width: 60em) { .site-header__main .searchbar .ais-Hits .ais-Hits-list { padding: 16px 16px 32px 16px; } } .site-header__main .searchbar .ais-Hits .ais-Hits-list .searchbar--hit { display: flex; justify-content: space-between; align-items: center; padding: 0.8rem 0.5rem; font-weight: 0; font-weight: 300; } @media (min-width: 60em) { .site-header__main .searchbar .ais-Hits .ais-Hits-list .searchbar--hit:hover { background-color: #f5f5f5; } } @media (max-width: 60em) { .site-header__main .searchbar .ais-Hits .ais-Hits-list .searchbar--hit { justify-content: flex-start; gap: 16px; } } .site-header__main .searchbar .ais-Hits .ais-Hits-list .searchbar--hit .ais-Highlight-highlighted { font-weight: 600; background-color: transparent; } @media (max-width: 60em) { .site-header__main .searchbar .ais-Hits .ais-Hits-list .searchbar--hit .ais-Highlight-highlighted { font-weight: 700; font-size: 14px; line-height: 14px; letter-spacing: 0%; } } .site-header__main .searchbar .ais-Hits .ais-Hits-list .searchbar--hit .ais-Highlight-highlighted .arrow-icon { rotate: -90deg; background-color: white; } @media (max-width: 60em) { .site-header__main .searchbar .ais-Hits .ais-Hits-list .searchbar--hit .ais-Highlight-highlighted .ais-Highlight-nonHighlighted { font-weight: 400; font-size: 14px; line-height: 14px; letter-spacing: 0%; } } .site-header__main .searchbar .ais-SearchBox { height: 36px; } .site-header__main .searchbar .ais-SearchBox .ais-SearchBox-form { display: flex; position: relative; height: 100%; } .site-header__main .searchbar .ais-SearchBox .ais-SearchBox-form input[type=search]::-webkit-search-cancel-button { -webkit-appearance: none; display: none; } .site-header__main .searchbar .ais-SearchBox .ais-SearchBox-form input[type=search]::-moz-search-cancel-button { display: none; } .site-header__main .searchbar .ais-SearchBox .ais-SearchBox-form .ais-SearchBox-input { padding-left: 20px; } @media (max-width: 45em) { .site-header__main .searchbar .ais-SearchBox .ais-SearchBox-form .ais-SearchBox-input { padding-left: 12px; } } .site-header__main .searchbar .ais-SearchBox .ais-SearchBox-form .ais-SearchBox-input { border: 1px solid #d8d7d7; border-radius: 1.25rem; font: inherit; height: 100%; } .site-header__main .searchbar .ais-SearchBox .ais-SearchBox-form .ais-SearchBox-reset { display: none; } .site-header__main .searchbar .ais-SearchBox .ais-SearchBox-form .ais-SearchBox-submit { display: grid; place-items: center; border: 0; background-color: #dc4405; border-radius: 100%; position: absolute; right: 0; top: 0; height: 36px; width: 36px; cursor: pointer; } .site-header__main .searchbar .ais-SearchBox .ais-SearchBox-form .ais-SearchBox-submit .search-icon__submit { padding: 20%; } .site-header__main .searchbar .ais-SearchBox .ais-SearchBox-form .ais-SearchBox-submit .search-icon__submit svg { fill: #ffffff; height: 100%; width: 100%; } .site-header__main .searchbar .ais-SearchBox .ais-SearchBox-form .search-icon__loading { display: grid; place-items: center; border: 0; background-color: #dc4405; border-radius: 100%; position: absolute; right: 0; top: 0; height: 36px; width: 36px; } .site-header__main .searchbar .ais-SearchBox .ais-SearchBox-form .search-icon__loading .loading-icon { padding: 20%; } .site-header__main .searchbar .ais-SearchBox .ais-SearchBox-form .search-icon__loading .loading-icon svg { height: 100%; width: 100%; } .site-header__main .searchbar .ais-SearchBox .ais-SearchBox-form .search-icon__loading .loading-icon svg circle { stroke: #ffffff; } @media (max-width: 60em) { .site-header__main .searchbar .ais-SearchBox { width: 100%; } } .site-header__main .navbar__action-links { display: flex; margin-left: auto; gap: 0.5rem; align-items: center; } @media (min-width: 26.5em) { .site-header__main .navbar__action-links { gap: 1rem; } } @media (max-width: 1060px) { .site-header__main .navbar__action-links { margin-left: auto; } } .site-header__main div.become-a-member-button { padding: 0.625rem 1.25rem; } .site-header__main .become-a-member-button#become-a-member-button { font-size: 16px; font-weight: 500; letter-spacing: 0.02rem; margin: 0; display: none; } .site-header__main .become-a-member-button#become-a-member-button--is-member { background: #325f6d; border: none; } .site-header__main .become-a-member-button#become-a-member-button--is-member:hover { background: #2a525e; } @media (min-width: 45em) { .site-header__main .become-a-member-button#become-a-member-button { display: block; white-space: nowrap; } } @media (max-width: 512px) { .site-header__main .become-a-member-button#become-a-member-button { display: none; } } .site-header__main .cart-wrapper { display: flex; position: relative; align-items: center; gap: 1rem; } @media (max-width: 650px) { .site-header__main .cart-wrapper { margin-top: 0.3rem; } } .site-header__main .cart-wrapper .site-header__cart-subtotal { display: flex; align-items: center; cursor: pointer; } .site-header__main .cart-wrapper .site-header__cart-subtotal .site-header__cart-text { font-weight: 500; } @media (max-width: 650px) { .site-header__main .cart-wrapper .site-header__cart-subtotal .site-header__cart-text { display: none; } } .site-header__main .cart-wrapper .site-header__cart-subtotal .site-header__main-item { display: flex; text-decoration: none; margin-left: 1.5rem; min-width: -moz-fit-content; min-width: fit-content; } @media (min-width: 1060px) { .site-header__main .cart-wrapper .site-header__cart-subtotal .site-header__main-item { align-items: center; margin-left: 0.1rem; } } @media (max-width: 1059px) { .site-header__main .cart-wrapper .site-header__cart-subtotal .site-header__main-item { align-items: center; margin-left: 0.1rem; } } .site-header__main .cart-wrapper .site-header__cart-subtotal .site-header__main-item svg { height: 1.5625rem; width: 1.5625rem; } .site-header__main .cart-wrapper .site-header__cart-subtotal .site-header__main-item--search-trigger { border: 0; background: transparent; padding: 0 0.1875rem; } @media (min-width: 1060px) { .site-header__main .cart-wrapper .site-header__cart-subtotal .site-header__main-item--search-trigger { display: none; } } @media (max-width: 1059px) { .site-header__main .cart-wrapper .site-header__cart-subtotal .site-header__main-item--search { margin-left: 0; } } @media (min-width: 1060px) { .site-header__main .cart-wrapper .site-header__cart-subtotal .site-header__main-item--search { flex-grow: 1; } } @media (max-width: 1059px) { .site-header__main .cart-wrapper .site-header__cart-subtotal .site-header__main-item--stores { display: none; } } .site-header__main .cart-wrapper .site-header__cart-subtotal .site-header__main-item--cart { background: transparent; border: none; color: #3d3935; cursor: pointer; padding: 0; text-align: left; height: auto; min-height: 0; min-width: 0; font-size: 1rem; font-weight: 500; line-height: normal; transition: none; text-transform: none; } .site-header__main .cart-wrapper .site-header__cart-subtotal .site-header__main-item--cart:hover, .site-header__main .cart-wrapper .site-header__cart-subtotal .site-header__main-item--cart:active, .site-header__main .cart-wrapper .site-header__cart-subtotal .site-header__main-item--cart:focus { color: #3d3935; background-color: transparent; border-color: transparent; } .site-header__main .cart-wrapper .site-header__cart-subtotal .site-header__main-item--cart { position: relative; min-width: 2.4rem; margin-bottom: -6px; } .site-header__main .cart-wrapper .site-header__cart-subtotal .site-header__main-item--cart-flame { position: absolute; top: -0.4375rem; font-style: normal; right: -0.6rem; } .site-header__main .cart-wrapper .site-header__cart-subtotal .site-header__main-item--cart-flame svg { fill: #d14124; height: 2.3125rem; width: 2.3125rem; } .site-header__main .cart-wrapper .site-header__cart-subtotal .site-header__main-item--cart-flame::before { content: attr(data-count); color: #ffffff; font-size: 0.625rem; font-style: normal; left: 50%; position: absolute; text-align: center; top: 50%; transform: translateX(-50%) translateY(-70%); } @media (max-width: 1059px) { .site-header__main .cart-wrapper .site-header__cart-subtotal .site-header__main-item--account { display: none; } } .site-header__main .cart-wrapper .site-header__cart-subtotal .site-header__main-item--mobile-nav-trigger { background: transparent; border: none; color: #3d3935; cursor: pointer; padding: 0; text-align: left; height: auto; min-height: 0; min-width: 0; font-size: 1rem; font-weight: 500; line-height: normal; transition: none; text-transform: none; } .site-header__main .cart-wrapper .site-header__cart-subtotal .site-header__main-item--mobile-nav-trigger:hover, .site-header__main .cart-wrapper .site-header__cart-subtotal .site-header__main-item--mobile-nav-trigger:active, .site-header__main .cart-wrapper .site-header__cart-subtotal .site-header__main-item--mobile-nav-trigger:focus { color: #3d3935; background-color: transparent; border-color: transparent; } .site-header__main .cart-wrapper .site-header__cart-subtotal .site-header__main-item--mobile-nav-trigger { min-width: -moz-fit-content; min-width: fit-content; display: grid; height: 1.5625rem; width: 1.5625rem; } @media (min-width: 1060px) { .site-header__main .cart-wrapper .site-header__cart-subtotal .site-header__main-item--mobile-nav-trigger { display: none; } } .site-header__main .my-favorites-icon-link { align-self: center; display: none; } @media (min-width: 48em) { .site-header__main .my-favorites-icon-link { display: block; } } .site-header__main .my-favorites-icon-link, .site-header__main .my-favorites-icon-link .icon { height: 24px; width: 24px; } .site-header__main .my-favorites-icon-link--filled svg { fill: #d14124; } .site-header .header-zipcode-and-category__active, .site-header .header-zipcode-and-category__hidden { transition: all 0.5s; position: absolute; width: 100%; } .site-header .header-zipcode-and-category__active { top: 100%; z-index: 0; } @media (max-width: 48em) { .site-header .header-zipcode-and-category__hidden { transform: translateY(-100%); z-index: -1; } } .site-header__mobile-spacer { flex: 2 1; } @media (min-width: 45em) { .site-header__mobile-spacer { display: none; } } .site-header--kiosk { margin-bottom: 2.95rem; } .site-header--kiosk .site-header__main { border: unset; box-shadow: unset; } .site-header--kiosk .site-header__main__inner { flex-wrap: wrap; justify-content: space-between; gap: 0.5rem; } .site-header--kiosk .site-header__main__inner .searchbar { order: 2; } .site-header--kiosk .site-header__main .account-menu, .site-header--kiosk .site-header__main .become-a-member-link, .site-header--kiosk .site-header__main .mobile-nav-menu__burger-button, .site-header--kiosk .site-header__main .store-menu, .site-header--kiosk .site-header__main-nav { display: none; } .site-header--kiosk .site-header__main__inner { width: 100%; } @media (max-width: 60em) { .ais-SearchBox-container { display: flex; justify-content: space-between; align-items: center; } .ais-SearchBox-cancel { padding: 10px 20px; font-family: var(--font-montserrat); border-radius: 20px; cursor: pointer; font-weight: 400; font-size: 12px; line-height: 14px; border: none; background: none; } .ais-SearchBox-image { border-radius: 50%; object-fit: fill; } } .ais-SearchBox-input::placeholder { font-size: 14px; font-weight: 500; font-family: var(--font-montserrat); letter-spacing: 0%; } @media (max-width: 26.5em) { .ais-SearchBox-input::placeholder { font-size: 12px; } } .header-notification-list-container { min-height: 40px; background-color: transparent; } .header-notification-list-container .slick-dots { z-index: 999; } .header-notification-list-container .header-notification-wrapper { background-color: #dc4405; } .header-notification-list-container .header-notification { display: flex; height: 40px; padding: 21px; align-items: center; gap: 13px; max-width: 90rem; padding-left: 20px; margin: 0 auto; } .header-notification-list-container .header-notification__content-wrapper { display: flex; align-items: center; gap: 13px; overflow: hidden; } .header-notification-list-container .header-notification__text-content { color: #ffffff; font-feature-settings: "clig" off, "liga" off; font-family: var(--font-oswald); font-size: 14px; font-style: normal; font-weight: 700; line-height: 14px; /* 100% */ letter-spacing: 0.1px; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; } @media (min-width: 45em) { .header-notification-list-container .header-notification__content-wrapper { align-items: baseline; } } .header-notification-list-container .header-notification__flat-text-pod { overflow: hidden; } .header-notification-list-container .header-notification__flat-text-pod [class^=text-] { margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .header-notification-list-container .header-notification__link-pod { color: #ffffff; text-decoration: underline; font-size: 0.875rem; white-space: nowrap; } .header-notification-list-container .header-notification__link-pod a:hover { color: #ffffff; } .card-layout-page-section { max-width: 90rem; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); flex-wrap: wrap; width: 100%; } .card-layout-page-section--reverse div:first-child { order: 1; } @media (min-width: 45em) { .card-layout-page-section--reverse div:first-child { order: 0; } } .media-tile-collection { margin: 0 auto; max-width: 100vw; position: relative; } @media (min-width: 90em) { .media-tile-collection { max-width: 90rem; } } .media-tile-collection .media-tile-row { display: flex; flex-wrap: wrap; flex-direction: row; min-height: inherit; justify-content: space-between; overflow: hidden; } @media (min-width: 45em) { .media-tile-collection .media-tile-row--inverted { flex-direction: row-reverse; } } .media-tile-collection .media-tile-row .pod-media { display: flex; position: relative; width: 100%; order: -1; } .media-tile-collection .media-tile-row .pod-media--video { height: auto; min-height: 12rem; } @media (min-width: 45em) { .media-tile-collection .media-tile-row .pod-media { width: 50%; order: 0; max-height: 600px; } } .media-tile-collection .media-tile-row .pod-media .pod-media--image-container { height: 100% !important; } .media-tile-collection .media-tile-row .pod-media img { width: -webkit-fill-available; width: -moz-available; max-height: unset; height: 100%; } .media-tile-collection .caption { width: 100%; background-color: #ffffff; white-space: pre-wrap; position: relative; padding: 1.8rem; } @media (min-width: 45em) { .media-tile-collection .caption { padding: 2.2rem; } } .media-tile-collection .caption--center { text-align: center; } .media-tile-collection .caption--left, .media-tile-collection .caption--default { text-align: left; width: 100%; } @media (max-width: 45em) { .media-tile-collection .caption--left .text-H1, .media-tile-collection .caption--default .text-H1 { text-align: center; } } .media-tile-collection .caption--right { text-align: right; } .media-tile-collection .caption--media-left-text-align-left, .media-tile-collection .caption--media-right-text-align-left, .media-tile-collection .caption--default { display: flex; position: relative; width: 100%; height: inherit; align-items: center; } @media (min-width: 45em) { .media-tile-collection .caption--media-left-text-align-left, .media-tile-collection .caption--media-right-text-align-left, .media-tile-collection .caption--default { width: 50%; min-height: 400px; } } .media-tile-collection .caption p { color: #000000; font-size: 1.2rem; font-weight: 400; line-height: 1.17; width: 100%; margin: 1em 0; } .media-tile-collection .caption h2 { font-size: 1.75rem; } .media-tile-collection .description { display: block; } .media-tile-collection .description sub { font-size: 0.75em; } .media-tile-collection .description p { color: #3d3935; font-weight: 300; line-height: 1.4; } .media-tile-collection .description ul { padding-left: 1em; } .media-tile-collection .description ul li p { color: #3d3935; font-weight: 300; line-height: 1em; } .media-tile-collection .title { display: block; } .media-tile-collection .title h2 { line-height: 1.3; font-weight: 700; text-transform: uppercase; } .media-tile-collection .media--canada-banner-collection { position: absolute; width: 45%; height: 200px; margin: auto; bottom: 1.5rem; left: 1.5rem; } .media-tile-collection .action-primary { font-size: 0.75rem; font-weight: 700; line-height: 1.2; min-width: 12em; padding: 1em 1.25em; } .media-tile-collection .media--image-object-fit-contain { object-fit: contain; } .media-tile-collection .media--text-background-white { background-color: #ffffff; } .media-tile-collection .media--text-background-grey { background-color: #f5f5f5; } .pod-media .media--image-object-fit-cover img { object-fit: contain; } .shop-by__container { display: grid; justify-content: center; width: 100%; font-family: var(--font-oswald); position: relative; border-bottom: 1px solid #d8d7d7; background: #ffffff; } .shop-by__container__links { display: flex; gap: 1rem; width: 100%; text-align: center; text-transform: uppercase; overflow-x: auto; scroll-behavior: smooth; /* hide scrollbar but allow scrolling */ } .shop-by__container__links { -ms-overflow-style: none; /* for Internet Explorer, Edge */ scrollbar-width: none; /* for Firefox */ overflow-x: scroll; } .shop-by__container__links::-webkit-scrollbar { display: none; /* for Chrome, Safari, and Opera */ } @media (max-width: 65em) { .shop-by__container__links { gap: 0; } } .shop-by__container__link { font-weight: 500; list-style: none; white-space: nowrap; } .shop-by__container__link a { display: inline-block; padding: 0.75rem 1rem; min-height: 46.5px; } .shop-by__container__link:hover > a { cursor: pointer; text-underline-offset: 1rem; text-decoration-thickness: 4px; color: #d14124; text-decoration: underline; } @media (hover: none) { .shop-by__container__link:hover > a { color: unset; text-decoration: unset; } } .shop-by__container .grandchild__sub-options-wrapper { position: absolute; left: 0; width: 100%; padding: 2rem; border-top: 1px solid #d8d7d7; border-bottom: 1px solid #d8d7d7; background-color: #ffffff; display: flex; flex-wrap: nowrap; justify-content: center; } .shop-by__container .grandchild__sub-options-wrapper .grandchild, .shop-by__container .grandchild__sub-options-wrapper .spotlight-image-wrapper { padding: 0; } .shop-by__container .grandchild__sub-options-wrapper .grandchild { position: relative; align-self: flex-start; border: none; background-color: unset; } .shop-by__container .grandchild__sub-options-wrapper .spotlight-image-wrapper img { display: block; height: auto; min-width: 400px; object-fit: contain; } .shop-by__container .grandchild { display: grid; grid-template-columns: repeat(4, 150px); grid-column-gap: 40px; column-gap: 40px; max-width: 1040px; min-width: 380px; padding: 40px; } @media only screen and (min-width: 720px) and (max-width: 1024px) { .shop-by__container .grandchild { grid-template-columns: repeat(2, 150px); width: auto; column-gap: 30px; } } @media only screen and (min-width: 1025px) and (max-width: 1200px) { .shop-by__container .grandchild { grid-template-columns: repeat(3, 150px); width: auto; column-gap: 30px; } } @media only screen and (min-width: 1201px) { .shop-by__container .grandchild { grid-template-columns: repeat(4, 150px); column-gap: 20px; width: auto; } } .shop-by__container .grandchild .shop-by__container__link { text-align: left; height: 20px; } .shop-by__container .grandchild .shop-by__container__link .grandchild__link { font-weight: 400; line-height: 20px; text-transform: none; padding: unset; } .shop-by__container__sub-options { display: none; position: absolute; z-index: 1; justify-content: center; align-items: center; flex-wrap: wrap; left: 0; width: 100%; gap: 0.5rem; background-color: #f5f5f5; border-top: 1px solid #d8d7d7; border-bottom: 1px solid #d8d7d7; font-size: 1rem; padding: 0 40px; } .shop-by__container__sub-options:hover a { text-decoration: none; border-bottom: unset; } .shop-by__container__sub-options:nth-child(even) .shop-by__container__sub-options { background-color: #ffffff; font-size: 1rem; line-height: 1rem; font-family: var(--font-montserrat); } .shop-by__container__sub-options:nth-child(even) .shop-by__container__sub-options a { text-transform: capitalize; font-weight: 500; } @media (min-width: 45em) { .shop-by__container__sub-options { display: flex; } } @media only screen and (min-width: 720px) and (max-width: 1024px) { .shop-by__container .grandchild__sub-options-wrapper .spotlight-image-wrapper img { min-width: 340px; } } .product-detail-container { margin: 0 auto; width: 100%; max-width: 90rem; } .product-detail-container h1 { font-size: 2rem; font-weight: 400; text-transform: none; text-align: center; } .product-detail-container a { font-size: 14px; cursor: pointer; } @media (min-width: 60em) { .product-details { display: flex; flex-direction: row; gap: 20px; padding: 0px 20px 0px 20px; } } .product-details .product-gallery { max-width: 100%; flex: 2.5 1; justify-content: center; } @media (min-width: 120em) { .product-details .product-gallery { justify-content: space-between; flex: 3 1; } } .product-details .product-gallery .react-slideshow-container { position: relative; } .product-details .product-gallery .react-slideshow-container .nav { border: none; } .product-details .product-gallery .react-slideshow-container .nav:focus .icon { outline: 2px solid #d14124; outline-offset: 2px; } .product-details .product-gallery .react-slideshow-container .prev-arrow, .product-details .product-gallery .react-slideshow-container .next-arrow { position: absolute; width: 48px; height: 48px; background-color: rgba(255, 255, 255, 0.6980392157); } .product-details .product-gallery .react-slideshow-container .next-arrow { right: 0; top: 40%; } .product-details .product-gallery .react-slideshow-container .prev-arrow { left: 0; top: 40%; } .product-details .product-gallery .pod-media--image { object-fit: cover; margin: auto; } .product-details .product-gallery .slider-image--nutrition .pod-media--image { object-fit: contain; } .product-details .product-gallery .thumbnail-slider { max-height: 6rem; margin-right: 20px; width: 20%; display: flex; flex-direction: column; } .product-details .product-gallery .thumbnail-slider__wrapper { border: none; width: 100%; margin-bottom: 0.5rem; cursor: pointer; } .product-details .product-gallery .thumbnail-slider__wrapper img { max-width: 100%; } .product-details .product-gallery .thumbnail-slider__wrapper:focus { outline: 2px solid #d14124; outline-offset: 2px; } .product-details .product-gallery .thumbnail-slider__wrapper.selected { transition: all 0.3s; } @media (max-width: 720px) { .product-details .product-gallery .thumbnail-slider { display: none; } } @media (min-width: 960px) { .product-details .product-gallery .thumbnail-slider { width: 100px; } } .product-details .product-gallery .slider { flex: 1 1; display: block; width: 100%; min-width: 21.875rem; position: relative; } .product-details .product-gallery .slider .pod-media--image-container { aspect-ratio: 1; } .product-details .product-gallery .slider img { display: block; } .product-details .product-gallery .slider, .product-details .product-gallery .slider img { max-width: 100vw; } @media (min-width: 45em) { .product-details .product-gallery .slider, .product-details .product-gallery .slider img { max-width: 35rem; } } @media (min-width: 75em) { .product-details .product-gallery .slider, .product-details .product-gallery .slider img { max-width: 40.625rem; } } .product-details .product-gallery .slider .promo-icon.outer-wrapper { width: 72px; height: 72px; padding: 10px; } @media (min-width: 30em) { .product-details .product-gallery .slider .promo-icon.outer-wrapper { width: 100px; height: 100px; padding: 14px; } } .product-details .product-gallery .slider .promo-icon.outer-wrapper .inner-wrapper .first-line-wrapper { height: 34px; } @media (min-width: 30em) { .product-details .product-gallery .slider .promo-icon.outer-wrapper .inner-wrapper .first-line-wrapper { height: 50px; } } .product-details .product-gallery .slider .promo-icon.outer-wrapper .inner-wrapper .first-line-wrapper .promo-quantity { font-size: 34px; height: 34px; line-height: 34px; } @media (min-width: 30em) { .product-details .product-gallery .slider .promo-icon.outer-wrapper .inner-wrapper .first-line-wrapper .promo-quantity { font-size: 50px; height: 50px; line-height: 47px; } } .product-details .product-gallery .slider .promo-icon.outer-wrapper .inner-wrapper .first-line-wrapper .promo-quantity + div { font-size: 7px; line-height: 5px; height: 7px; font-weight: 500; } @media (min-width: 30em) { .product-details .product-gallery .slider .promo-icon.outer-wrapper .inner-wrapper .first-line-wrapper .promo-quantity + div { font-size: 8px; line-height: 7px; height: 11px; } } .product-details .product-gallery .slider .promo-icon.outer-wrapper .inner-wrapper .second-line-wrapper { font-size: 16px; font-weight: 500; height: 17px; line-height: 17px; margin-top: -3px; padding-left: 2px; } @media (min-width: 30em) { .product-details .product-gallery .slider .promo-icon.outer-wrapper .inner-wrapper .second-line-wrapper { font-size: 21px; height: 21px; line-height: 21px; margin-top: -5px; } } @media (max-width: 424px) { .product-details .product-gallery { min-height: 380px; } } .product-details .product-gallery .product-gallery__how-to-video { margin-top: 0.75rem; } .product-details .slider-image { position: relative; display: block; } .product-details .slider-image img { width: 100%; height: 100%; object-fit: cover; } @media (max-width: 424px) { .product-details .slider-image img { object-fit: contain; } } .product-details .slider-image video { margin: 100px auto; } .product-details .slider-image--nutrition img { height: 100%; } .product-details { /* ProductAccordion */ } .product-details .product-accordion { grid-area: accordion; } .product-details h1 { font-size: 32px; line-height: 1.5; font-weight: 500; text-transform: uppercase; text-align: left; } .product-details .mobile__image-scrollbar { display: flex; } @media (min-width: 720px) { .product-details .mobile__image-scrollbar { display: none; } } .product-details .date-badge-pdp { background: #d14124; color: #ffffff; font-family: var(--font-oswald); font-style: normal; font-weight: 500; z-index: 1; width: -moz-fit-content; width: fit-content; bottom: 0; padding: 4px 12px; } .product-details .kosher-icons { display: flex; flex-direction: row; gap: 0.5rem; } .product-details .product-info__title-wrapper { display: flex; flex-direction: column; gap: 0px; } .product-details .product-title { text-transform: uppercase; } @media (max-width: 30em) { .product-details .product-title { margin-top: 0.5rem; font-size: 24px; } } .product-details .product-title--with-subtext { line-height: normal; } .product-details .product-info__subtext { font-size: 0.6875rem; font-style: italic; font-weight: 400; } .product-details .product-info__subtext::before { content: "*"; } .product-details .product-tile__price-per-unit { margin-bottom: 1.125rem; } .product-details .product-info { padding: 20px; min-height: 300px; position: relative; display: block; flex-direction: column; } @media (min-width: 60em) { .product-details .product-info { flex: 1.5 1; top: 0; width: 45%; padding: 0px; display: flex; } } @media (min-width: 120em) { .product-details .product-info { flex: 2.2 1; } } @media (max-width: 30em) { .product-details .product-info { padding: 0 20px; } } @media (max-width: 45em) { .product-details .product-info__rating { height: 16px; } } .product-details .product-info .product-info__content { display: flex; flex-direction: column; gap: 10px; } @media (min-width: 60em) { .product-details .product-info .product-info__content { gap: 16px; } } .product-details .product-info__packaging-wrapper { display: flex; justify-content: space-between; align-items: flex-end; } .product-details .product-info__packaging-wrapper span.price { line-height: initial; } .product-details .product-info .weight { font-size: 0.875rem; font-weight: 400; } .product-details .product-info .weight-ca { margin: 0px 0px; font-size: 1rem; font-weight: 400; } .product-details .product-info .country { font-size: 1rem; font-weight: 400; margin: 0.5rem 0; } .product-details .product-info .price-per-unit { font-size: 1rem; line-height: 1.33; font-weight: 600; } .product-details .product-info .price-per-unit :nth-child(2n+2) { margin: 0 1rem; } @media (min-width: 45em) { .product-details .product-info .price-per-unit { font-size: 1rem; line-height: 1.43; } } @media (min-width: 75em) { .product-details .product-info .price-per-unit { grid-area: price-per-unit; } } .product-details .product-info .price-per-unit__before-discount { text-decoration: line-through; } .product-details .product-info .price-per-unit span.price-per-unit__discounted { margin: 0; margin-left: 5px; color: #d14124; } .product-details .product-info .price { display: flex; flex-direction: column; width: auto; font-weight: bold; font-size: 2rem; height: unset; } .product-details .product-info .price .price__wrapper { display: flex; align-items: baseline; } .product-details .product-info .price p { margin: 0; line-height: 40px; font-family: var(--font-oswald); font-weight: 500; height: min-content; } .product-details .product-info__footer { display: flex; width: 100%; gap: 1rem; margin: 1.5rem 0 0.3rem 0; flex-wrap: wrap; } @media (min-width: 60em) { .product-details .product-info__footer { justify-content: flex-start; } } .product-details .product-info__footer .restricted-product-info { display: flex; align-items: center; line-height: 19.5px; font-weight: 600; padding: 1rem; color: #d14124; justify-content: center; border: 2px solid #dc4405; } .product-details .product-info__footer .restricted-product-info__zipcode { font-weight: 700; } .product-details .product-info__footer .restricted-product-info__icon { width: 3rem; display: flex; align-items: center; } @media (max-width: 30em) { .product-details .product-info__footer .restricted-product-info__icon { width: 5rem; } } @media (min-width: 60em) and (max-width: 75em) { .product-details .product-info__footer .restricted-product-info__icon { width: 4rem; } } .product-details .product-info__footer .product-info__footer-inner { width: 100%; display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: 1rem; } .product-details .product-info__footer .product-info__footer-inner .quick-add { text-align: center; } @media (max-width: 60em) { .product-details .product-info__footer .product-info__footer-inner .quick-add--quantity-selector-wrapper { margin: unset; } } .product-details .product-info__footer .product-info__footer-inner .quick-add .quantity-selector-button-up--disabled { border-left: none !important; } @media (min-width: 60em) { .product-details .product-info__footer .product-info__footer-inner { justify-content: flex-start; } .product-details .product-info__footer .product-info__footer-inner .actions-wrapper .favorite-btn { background: transparent; border: none; color: #3d3935; cursor: pointer; padding: 0; text-align: left; height: auto; min-height: 0; min-width: 0; font-size: 1rem; font-weight: 500; line-height: normal; transition: none; text-transform: none; } .product-details .product-info__footer .product-info__footer-inner .actions-wrapper .favorite-btn:hover, .product-details .product-info__footer .product-info__footer-inner .actions-wrapper .favorite-btn:active, .product-details .product-info__footer .product-info__footer-inner .actions-wrapper .favorite-btn:focus { color: #3d3935; background-color: transparent; border-color: transparent; } .product-details .product-info__footer .product-info__footer-inner .actions-wrapper .favorite-btn svg { margin-bottom: -8px; } } .product-details .product-info__footer .product-info__footer-inner.discounted .price { order: unset; } .product-details .product-info__footer .product-info__footer-inner.discounted .price p { line-height: normal; } .product-details .product-info__footer .product-info__footer-inner.discounted .price p.price-before-discount { font-size: 20px; font-weight: 600; text-decoration: line-through; line-height: 38px; } .product-details .product-info__footer .product-info__footer-inner.discounted .price p.discounted-price { color: #d14124; margin-left: 5px; } .product-details .product-info__footer .product-info__footer-inner.discounted .price .averageMessage { text-transform: lowercase; line-height: unset; height: unset; font-family: var(--font-montserrat); color: #d14124; margin-left: 5px; } .product-details .product-info__footer .product-info__footer-inner.discounted .price-per-unit__before-discount { text-decoration: line-through; } .product-details .product-info__footer .product-info__footer-inner.discounted .price-per-unit__discounted { margin: 0; margin-top: 5px; color: #d14124; } .product-details .product-info__footer .actions-wrapper { display: flex; align-items: center; text-align: left; gap: 1rem; } @media (max-width: 60em) { .product-details .product-info__footer .actions-wrapper { width: 100%; } .product-details .product-info__footer .actions-wrapper .quick-add { flex-grow: 1; max-width: 280px; text-align: left; } } @media (max-width: 47.5em) { .product-details .product-info__footer .actions-wrapper { justify-content: space-between; flex-basis: 100%; } } .product-details .product-info__footer__sticky { border-top: 1px solid #d8d7d7; width: 100%; display: flex; text-align: left; position: fixed; bottom: -80px; left: 0; background-color: #fff; align-items: center; z-index: 1060; flex-direction: row; height: 4.5rem; transition: bottom 0.3s ease-in-out; } @media (min-width: 60em) { .product-details .product-info__footer__sticky { height: 5rem; } } .product-details .product-info__footer__sticky.visible { bottom: 0; } .product-details .product-info__footer__sticky .product-info__footer { margin: 0; } .product-details .product-info__footer__sticky .product-info__footer-inner { flex-wrap: unset; flex-flow: nowrap; align-items: center; padding: 16px 20px; justify-content: space-between; } .product-details .product-info__footer__sticky .quick-add { width: 90%; height: unset; } @media (max-width: 60em) { .product-details .product-info__footer__sticky .quick-add--quantity-selector-wrapper { width: 100%; } .product-details .product-info__footer__sticky .quick-add--quantity-selector-wrapper .quantity-selector { width: 100%; flex-flow: nowrap; } .product-details .product-info__footer__sticky .quick-add--quantity-selector-wrapper .quantity-selector label { width: 100%; } } @media (max-width: 60em) { .product-details .product-info__footer__sticky .quick-add--quantity-selector-wrapper .quantity-selector-input { width: 100%; max-width: unset; } } .product-details .product-info__footer__sticky .quick-add .action--add-to-cart { width: 100%; } .product-details .product-info__footer__sticky .quick-add .icon { display: none; } @media (min-width: 60em) { .product-details .product-info__footer__sticky .quick-add { width: unset; } .product-details .product-info__footer__sticky .quick-add .action--add-to-cart { width: unset; } .product-details .product-info__footer__sticky .quick-add { font-size: 18px; } .product-details .product-info__footer__sticky .quick-add .icon { display: unset; } } .product-details .product-info__footer__sticky .product-info__content__wrapper { display: flex; gap: 0; } @media (min-width: 60em) { .product-details .product-info__footer__sticky .product-info__content__wrapper { align-items: center; gap: 1rem; } .product-details .product-info__footer__sticky .product-info__content__wrapper:has(.price.discounted) { gap: 2rem; } } .product-details .product-info__footer__sticky .product-info__content__wrapper .price.discounted { order: unset; } .product-details .product-info__footer__sticky .product-info__content__wrapper .price.discounted p { line-height: normal; } .product-details .product-info__footer__sticky .product-info__content__wrapper .price.discounted p.price-before-discount { font-size: 20px; font-weight: 600; text-decoration: line-through; line-height: 38px; } .product-details .product-info__footer__sticky .product-info__content__wrapper .price.discounted p.discounted-price { color: #d14124; margin-left: 5px; } .product-details .product-info__footer__sticky .product-info__content__wrapper .price.discounted .averageMessage { text-transform: lowercase; line-height: unset; height: unset; font-family: var(--font-montserrat); color: #d14124; margin-left: 5px; } @media (max-width: 60em) { .product-details .product-info__footer__sticky .favorite-btn { background: transparent; border: none; color: #3d3935; cursor: pointer; padding: 0; text-align: left; height: auto; min-height: 0; min-width: 0; font-size: 1rem; font-weight: 500; line-height: normal; transition: none; text-transform: none; } .product-details .product-info__footer__sticky .favorite-btn:hover, .product-details .product-info__footer__sticky .favorite-btn:active, .product-details .product-info__footer__sticky .favorite-btn:focus { color: #3d3935; background-color: transparent; border-color: transparent; } .product-details .product-info__footer__sticky .favorite-btn svg { margin-top: 6px; } } .product-details .product-info__footer__sticky .actions-wrapper { gap: 30px; } .product-details .product-info__footer__sticky .actions-wrapper a { width: unset; flex-basis: unset; color: #3d3935; font-family: var(--font-oswald); font-size: 16px; font-style: normal; font-weight: 500; line-height: 16px; letter-spacing: 0.32px; text-transform: uppercase; } @media (min-width: 60em) { .product-details .product-info .pricingMessage { max-width: 21rem; text-align: right; } } .product-details .product-info .pricingMessage { font-size: 0.8rem; font-weight: 300; display: flex; justify-content: flex-start; } .product-details .product-info .averageMessage { position: relative; font-weight: 500; font-size: 0.75rem; margin-left: 0.2rem; } .product-details .product-info .educational-points-wrapper { display: flex; flex-direction: column; gap: 12px; } .product-details .product-info .educational-points-wrapper .educational-point { display: flex; align-items: center; } .product-details .product-info .educational-points-wrapper .educational-point img { width: 30px; height: 30px; object-fit: cover; } .product-details .product-info .educational-points-wrapper .educational-point .text { padding-left: 8px; font-size: 14px; font-weight: 600; } .product-details .prop65-warning { margin-bottom: 1rem; } .product-details .promotion-banner { font-size: 16px; font-weight: 500; line-height: 23.7px; border: 4px solid #f9db07; padding: 10px 10px; text-align: center; color: #d14124; font-family: var(--font-oswald); text-transform: uppercase; } @media (min-width: 30em) { .product-details .promotion-banner { font-size: 20px; line-height: 26px; } } .badge-container { display: flex; gap: 0.6rem; width: -moz-fit-content; width: fit-content; } .badge-container .badge { right: 0.6rem; box-sizing: border-box; border: 1px solid #000; border-radius: 6px; background-color: #ffffff; color: #3d3935; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; min-width: 55px; padding: 0.3rem; pointer-events: none; } @media (min-width: 45em) { .badge-container .badge { width: auto; height: auto; } } .badge-container .badge__name { font-size: 0.75rem; font-weight: 500; font-family: var(--font-oswald); /* Required for styling */ line-height: normal; text-align: center; text-transform: uppercase; } @media (min-width: 45em) { .badge-container .badge__name { font-size: 12px; } } .badge-container .badge--undefined, .badge-container .badge-- { display: none; } .badge-container .badge--badge { background-color: #ffffff; } .badge-container .badge--organic { color: #007a33; border-color: #007a33; } .badge-container .badge--grass-fed { color: #007a33; border-color: #007a33; } @media (max-width: 45em) { .badge-container .badge--grass-fed { width: 100%; } } .badge-container .badge--usda-choice { color: #3d3935; border-color: #3d3935; } .badge-container .badge--usda-prime { color: #dc4405; border-color: #dc4405; } .badge-container .badge--black-angus { color: #777472; border-color: #777472; } .badge-container .badge--wagyu { color: #777472; border-color: #777472; } .badge-container .badge--wild-caught { color: #001e62; border-color: #001e62; } .badge-container .badge--brand { background-color: #3d3935; } .badge-container .badge--quality { background-color: #3d3935; } .badge-container .badge--out-of-stock { color: #ffffff; background-color: #3d3935; } .badge-container .badge--new { color: #ffffff; background-color: #dc4405; border-color: #dc4405; } .badge-container .badge--easy { color: #ffffff; background-color: #dc4405; border-color: #dc4405; } .badge-container .badge--gluten-free { color: #3d3935; border-color: #777472; } .badge-container .badge--status { position: absolute; bottom: 0; left: 0; top: auto; right: auto; z-index: 10; } .badge-container .badge--bundle { background-color: #d14124; border-color: #d14124; border-radius: 0 0.75rem 0 0; color: #ffffff; font-family: var(--font-oswald); font-size: 0.875rem; font-weight: 700; margin-top: 0.75rem; padding: 0.25rem 0.75rem 0.25rem 0.5rem; text-transform: uppercase; width: -moz-fit-content; width: fit-content; } .badge-container .badge--new-product, .badge-container .badge--overstock-price, .badge-container .badge--previously-ordered { position: static; border-radius: 0; height: 1.5rem; margin-top: 0.6rem; margin-left: 0px; width: -moz-fit-content; width: fit-content; } @media (min-width: 45em) { .badge-container .badge--new-product .badge__name, .badge-container .badge--out-of-stock .badge__name, .badge-container .badge--overstock-price .badge__name, .badge-container .badge--previously-ordered .badge__name { font-size: 0.75rem; } } .breadcrumb-wrapper { max-width: 90rem; margin: 0 auto; padding: 10px; } @media (min-width: 45em) { .breadcrumb-wrapper { padding-left: 20px; } } /* ReadMore/ReadLess */ .read-or-hide { color: #3d3935; cursor: pointer; font-weight: 400; text-decoration: underline; margin-inline: 0.25rem; } .product-accordion .subtitle { font-weight: 700; margin-bottom: 1rem; } .product-accordion__button { cursor: pointer; background: linear-gradient(180deg, #f5f5f5, #ffffff 10.42%, #ececec 97.4%); color: #3d3935; border: 1px solid #e0e0e0; border-radius: 0.25rem; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; text-decoration: none !important; margin-right: 0.625rem; display: flex; align-items: center; padding: 0.125rem 0.75rem 0.125rem 0.5rem; min-height: 2.75rem; width: -moz-fit-content; width: fit-content; gap: 10px; } .product-accordion__button svg { height: 2rem; width: 2rem; fill: #000000 !important; } .product-accordion__button .recipe-icon { fill: none !important; } .product-accordion div.accordion-item__icon { margin: 0; } @media (min-width: 60em) { .product-accordion div.accordion-item__icon { margin-right: 0.5rem; } } .image-wrapper { display: flex; } .image-wrapper img:first-child { display: flex; object-fit: contain; } .expandable-content { display: block; position: relative; margin: 10px 0; } /* Modal ModalRenderer */ .modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background-color: rgba(0, 0, 0, 0.5); outline: 0; z-index: 9999; } .modal__wrapper { min-width: 50vw; min-height: 50vh; } .modal__layout { background: white; height: 100%; width: 100%; border-radius: 15px; padding: 15px; } .modal__header { display: flex; justify-content: flex-end; font-size: 25px; } .modal__body { padding-top: 10px; overflow-y: auto; max-height: 90vh; } .modal__close { cursor: pointer; font-size: 1.5rem; border: none; background: none; } @media (min-width: 768px) { .modal .modal__wrapper { min-width: 400px; min-height: 50px; } } /* AccordionItem */ .accordion-item__container { width: 100%; max-width: 65.125rem; margin: 0 auto; } @media (max-width: 60em) { .accordion-item__container { width: 100%; } } .accordion-item__container .accordion-item { display: flex; flex-direction: column; border-bottom: 1px solid #e0e0e0; width: 100%; justify-content: center; } .accordion-item__container .accordion-item__header, .accordion-item__container .accordion-item__content { width: 100%; max-width: 47.375rem; margin: 0 auto; } .accordion-item__container .accordion-item__header { position: relative; display: flex; justify-content: space-between; align-items: center; cursor: pointer; } .accordion-item__container .accordion-item__header h3 { width: calc(100% - 8rem); padding: 0.5rem 0; letter-spacing: normal; margin: 0; font-family: var(--font-montserrat); text-transform: none; font-family: var(--font-montserrat); font-size: 16px; font-style: normal; font-weight: 500; line-height: normal; color: #3d3935; } @media (min-width: 60em) { .accordion-item__container .accordion-item__header h3 { width: calc(100% - 12rem); max-width: 31.25rem; margin: 0 0rem; font-size: 1rem; font-weight: 500; } } .accordion-item__container .accordion-item__icon { position: relative; align-self: center; margin: 0 1rem; transition: 0.5s ease; } @media (min-width: 45em) { .accordion-item__container .accordion-item__icon { margin-right: 1.25rem; } } .accordion-item__container .accordion-item__icon-vertical { position: absolute; top: 50%; left: 50%; display: block; width: 0.125rem; height: 0.875rem; background: #3d3935; transform: translate(-50%, -50%); transition: 0.5s; } .accordion-item__container .accordion-item__icon-horizontal { position: absolute; top: 50%; left: 50%; display: block; width: 0.875rem; height: 0.125rem; background: #3d3935; transform: translate(-50%, -50%); } .accordion-item__container .accordion-item__content { position: relative; display: block; height: 0; overflow-x: hidden; overflow-y: auto; opacity: 0; border-top: none; display: block; padding-left: 0rem; visibility: hidden; } .accordion-item__container .accordion-item__content .content-text { font-weight: 400 !important; padding-left: 0rem; } .accordion-item__container .accordion-item__content p, .accordion-item__container .accordion-item__content li { margin-bottom: 20px; text-align: left; font-size: 16px; } .accordion-item__container .accordion-item__content ul { margin-top: 20px; padding-left: 20px; } .accordion-item__container .accordion-item__content li { list-style-type: disc; line-height: 1.5; } .accordion-item__container .accordion-item.active .accordion-item__header { border-bottom: none; text-transform: unset; } .accordion-item__container .accordion-item.active .accordion-item__header .icon-chevron { transform: rotateZ(180deg); } .accordion-item__container .accordion-item.active .accordion-item__content { margin-top: -15px; transition: height 0.5s ease, opacity 0.5s ease; } .accordion-item__container .accordion-item.active .accordion-item__icon-vertical { background: #000000; transform: translate(-50%, -50%) rotate(90deg); } .accordion-item__container .accordion-item.active .accordion-item__icon-horizontal { background: #000000; } .accordion-item__container .accordion-item.active .accordion-item__content { height: 100%; padding-bottom: 10px; opacity: 1; visibility: visible; } /* Bundles */ .bundle--make-gif-container { padding: 0 10px; border: 2px solid #d14124; border-radius: 5px; max-width: 400px; font-family: var(--font-montserrat); margin-top: 10px; } .bundle--make-gif-container--title-wrapper--title { margin-top: 10px; } .bundle--make-gif-container--title-wrapper--title h6 { margin-bottom: 0; margin-top: 10px; text-transform: none; font-family: var(--font-montserrat); font-size: 18px; } .bundle--make-gif-container--content { margin-top: 5px; font-size: 0.9em; } .bundle--in-the-box--title-wrapper { display: flex; gap: 8px; margin: 1rem 0; } .bundle--in-the-box--title-wrapper--icon { width: 24px; height: 24px; } .bundle--in-the-box--content ul { list-style-position: inside; margin: 0; padding: 0; font-weight: 400; } .bundle--in-the-box--content ul li { text-transform: capitalize; } .bundle--in-the-box--content ul li a { font-size: 1rem; text-decoration: underline; text-transform: capitalize; } /* Product set */ .product-set__title-wrapper { display: flex; gap: 0.5rem; } .product-set__title-wrapper__icon { width: 1.5rem; } .product-set__content-list ul { list-style-position: inside; margin: 0; padding: 0; font-weight: 400; } .product-set__content-list ul li a { text-decoration: underline; text-transform: capitalize; font-size: 1rem; } /* RecipesCarousel */ @layer base { .recipe-tile-carousel html, .recipe-tile-carousel body { padding: 0; margin: 0; font-family: var(--font-montserrat); } .recipe-tile-carousel h1, .recipe-tile-carousel h2, .recipe-tile-carousel h3, .recipe-tile-carousel h4, .recipe-tile-carousel h5, .recipe-tile-carousel h6 { font-family: var(--font-oswald); } .recipe-tile-carousel h1 { font-size: 48px; } .recipe-tile-carousel h2 { font-size: 32px; } .recipe-tile-carousel h3 { font-size: 28px; } .recipe-tile-carousel h4 { font-size: 24px; } .recipe-tile-carousel h5 { font-size: 20px; } .recipe-tile-carousel h6 { font-size: 18px; } .recipe-tile-carousel a { color: inherit; text-decoration: none; } .recipe-tile-carousel * { box-sizing: border-box; } } .recipe-tile-carousel { text-align: center; } .recipe-tile-carousel .recipe-tile { display: grid; grid-template: "recipe-gallery" min-content "recipe-title" 1fr "recipe-info" min-content/100%; grid-gap: 0.5rem; gap: 0.5rem; text-align: center; width: 100%; height: 100%; } @media (max-width: 30em) { .recipe-tile-carousel .recipe-tile { margin-bottom: 35px; } } .recipe-tile-carousel .recipe-tile__title { grid-area: recipe-title; font-size: 1rem !important; font-weight: 500; line-height: 1.5rem; overflow: hidden; text-transform: uppercase; text-align: left; } .recipe-tile-carousel .recipe-tile__title a { font: inherit; text-decoration: none; } @media (min-width: 45em) { .recipe-tile-carousel .recipe-tile__title { font-size: 1.25rem !important; } } .recipe-tile-carousel .recipe-tile__gallery { grid-area: recipe-gallery; position: relative; width: 100%; height: 70%; overflow: hidden; min-height: 9rem; } @media (min-width: 75em) { .recipe-tile-carousel .recipe-tile__gallery { min-height: 10rem; } } .recipe-tile-carousel .recipe-tile__link { font-size: 1rem; } .recipe-tile-carousel .recipe-tile__link .recipe-tile-responsive-image { position: relative; display: block; } .recipe-tile-carousel .recipe-tile__link .recipe-tile-responsive-image img { object-fit: cover; } .recipe-tile-carousel .recipe-tile__pricing { align-self: flex-end; } @media (min-width: 75em) { .recipe-tile-carousel .recipe-tile__pricing { grid-area: price; } } @media (max-width: 45em) { .recipe-tile-carousel .recipe-tile__pricing { padding-inline: 10px; } } .recipe-tile-carousel .recipe-tile--message-no-recipes { display: block; position: relative; text-align: center; width: 100%; max-width: 90em; } .recipe-tile-carousel .recipe-tile--container { display: block; width: 100%; text-align: center; } .recipe-tile-carousel .recipe-tile--container--button { border-radius: 2rem !important; max-width: 33%; margin: 1rem auto; } @media (max-width: 40em) { .recipe-tile-carousel .recipe-tile--container--button { margin: 1rem 20px 0 0 !important; max-width: 100%; } } .recipe-tile-carousel .recipe-tile__recipe-info { grid-area: recipe-info; text-align: left; width: 100%; font-size: 0.75rem; line-height: 1rem; } .recipe-tile-carousel .recipe-tile__recipe-info span { display: block; } @media (min-width: 45em) { .recipe-tile-carousel .recipe-tile__recipe-info { font-size: 0.875rem; line-height: 1.25rem; } } .recipe-tile-carousel .recipe-tile .badge-container { position: absolute; top: 0; right: 0.6rem; display: flex; z-index: 1; } @media (max-width: 40em) { .recipe-tile-carousel .recipe-tile-button { margin: 0 !important; } } .recipe-tile-carousel__button { margin-top: 1rem; font-size: 0.875rem; font-weight: 500; width: unset; } @media (min-width: 45em) { .recipe-tile-carousel__button { margin-top: 2rem; } } .recipe-tile-carousel a.recipe-tile-carousel__button { color: #3d3935; } .recipe-tile-carousel a.recipe-tile-carousel__button:hover { color: #ffffff; } .recipe-tile-carousel .carousel .arrow { top: 25%; } @media (min-width: 30em) { .recipe-tile-carousel .carousel .arrow { top: 33%; } } .recipe-tile-carousel .carousel .slick-list { margin: 0 -5px; } .recipe-tile-carousel .carousel .slick-slide > div { padding: 0 5px; } @media (min-width: 45em) { .recipe-tile-carousel .carousel .slick-list { margin: 0 -10px; } .recipe-tile-carousel .carousel .slick-slide > div { padding: 0 10px; } } .recipe-tile-carousel .carousel .slick-track { display: flex !important; align-items: stretch; margin-left: 0; } .recipe-tile-carousel .carousel .slick-slide { height: inherit !important; width: 100% !important; } .recipe-tile-carousel .carousel .slick-slide, .recipe-tile-carousel .carousel .slick-slide > div, .recipe-tile-carousel .carousel .slick-slide > div > div { height: 100% !important; } /* ProductDisclaimer */ .product-disclaimer__container { padding: 32px 52px; } /* Custom CSS class to apply on the Freshchat icon widget, only when sticky footer is visible in the UI.*/ .freshchat-custom-positioning { bottom: 5rem !important; transition: bottom 0.3s ease-in-out; } /* --- How to customize widgets? --- 1. Preview a widget (button at top). 2. Inspect the elements you want to change, and change them. 3. Copy the css code back here. 4. Preview, and save when you are satisfied with the results. /* ---------------------------------- */ .product__reviews { padding: 1.25rem; } .modal__content .yotpo { padding: 0 0.75rem !important; } .yotpo * { font-family: var(--font-montserrat) !important; } .yotpo .yotpo-label-container { display: none; } .yotpo .yotpo-logo-link-new { display: flex; justify-content: center; align-items: center; } .yotpo .yotpo-logo-title { color: #3d3935 !important; font-family: var(--font-montserrat); font-weight: 400; } .yotpo .yotpo-icon-yotpo-logo { color: #d14124 !important; } .yotpo .yotpo-regular-box { padding: 1.25rem 0; margin: 0 !important; } @media (max-width: 60em) { .yotpo .new-yotpo-small-box { margin: 35px 0 0; } } @media (min-width: 60em) { .yotpo .yotpo-display-wrapper { display: inline-block !important; } } .yotpo .bottom-line-items { display: flex; justify-content: center; align-items: center; margin-bottom: 0; -webkit-padding-end: 0 !important; padding-inline-end: 0 !important; min-height: 7.75rem !important; } @media (max-width: 60em) { .yotpo .bottom-line-items { width: 100% !important; } } .yotpo .bottom-line-items .rating-stars-container { float: none; margin-left: 0; margin-right: 0.625rem; } .yotpo .bottom-line-items .rating-stars-container .rating-star { height: 1.5rem; } .yotpo .bottom-line-items .reviews-qa-label { font-size: 1rem !important; font-family: var(--font-montserrat) !important; color: #3d3935; width: -moz-fit-content; width: fit-content; } .yotpo .bottom-line-items .yotpo-icon-star { font-size: 1.5rem !important; } .yotpo .yotpo-star-distribution-wrapper { width: calc(100% - 51px) !important; height: auto !important; margin-left: auto !important; float: none !important; } @media (max-width: 60em) { .yotpo .yotpo-star-distribution-wrapper { margin-right: auto !important; } } @media (min-width: 60em) { .yotpo .yotpo-star-distribution-wrapper { width: 180px !important; margin-top: 0.625rem !important; } } .yotpo .yotpo-regular-box { padding: 0 !important; } .yotpo .yotpo-regular-box.yotpo-review { padding: 1rem 0 2rem !important; } .yotpo .yotpo-distribution-row { width: 100% !important; } .yotpo .yotpo-star-distribution-bar { width: 90% !important; } @media (min-width: 60em) { .yotpo .yotpo-star-distribution-bar { width: 100px !important; } } .yotpo .yotpo-star-distribution-score-value { color: #3d3935 !important; } .yotpo .yotpo-star-distribution-bar-score { background-color: #d14124 !important; } .yotpo .yotpo-star-distribution-bar, .yotpo .yotpo-star-distribution-bar-score { height: 0.625rem !important; } .yotpo .write-question-review-buttons-container { padding-top: 20px !important; flex-direction: row !important; } @media (min-width: 60em) { .yotpo .write-question-review-buttons-container { display: inline-block !important; padding-top: 0 !important; transform: translateY(50%); } .yotpo .write-question-review-buttons-container .yotpo-default-button { display: block !important; margin-left: 0 !important; margin-right: 0 !important; margin-bottom: 1rem !important; } } .yotpo .write-question-review-buttons-container .write-question-review-button { padding: 0.875rem !important; height: unset !important; } .yotpo .write-question-review-buttons-container .write-question-review-button .write-question-review-button-text { font-family: var(--font-oswald) !important; font-weight: bold !important; font-size: 12px !important; text-transform: uppercase; } .yotpo .write-question-review-buttons-container .write-review-button { background: linear-gradient(180deg, #64615d 0%, #3d3935 6.25%, #181818 100%) !important; border: 1px solid #000000 !important; box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1) !important; border-radius: 20px !important; height: 44px !important; } .yotpo .write-question-review-buttons-container .write-review-button:hover { background: linear-gradient(180deg, #64615d 0%, #3d3935 6.25%, #181818 100%) !important; color: #ffffff !important; } .yotpo .write-question-review-buttons-container .write-question-button { background: linear-gradient(180deg, #f5f5f5 0%, #ffffff 10.42%, #ececec 97.4%) !important; border: 1px solid #e0e0e0 !important; box-sizing: border-box !important; box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.06) !important; border-radius: 20px !important; height: 44px !important; } .yotpo .write-question-review-buttons-container .write-question-button:hover { background: linear-gradient(180deg, #f5f5f5 0%, #ffffff 10.42%, #ececec 97.4%) !important; color: #3d3935 !important; } .yotpo .write-question-review-buttons-container .yotpo-review .yotpo-user-name, .yotpo .write-question-review-buttons-container .yotpo-review .yotpo-main { color: #3d3935 !important; } .yotpo .write-question-review-buttons-container .yotpo-review .content-title { font-size: 1rem !important; font-weight: 700 !important; } .yotpo .yotpo-question { padding: 1rem 0 2rem !important; } .yotpo .yotpo-question .content-question { color: #3d3935 !important; padding-top: 0.5rem !important; } .yotpo .yotpo-question .content-question a { word-break: break-all; } .yotpo .yotpo-question .yotpo-comments-box { border-left-color: #e0e0e0 !important; margin-left: 1.25rem !important; } .yotpo .yotpo-question .yotpo-comment-box { margin-left: 1.25rem !important; } @media (min-width: 60em) { .yotpo .yotpo-question .yotpo-comment-box { margin-left: 3.1875rem !important; } } .yotpo .avg-score { display: none; } .yotpo .reviews-qa-labels-container { position: relative !important; float: none !important; padding-top: 20px !important; padding-bottom: 20px; border-bottom: 1px solid #e0e0e0; display: inherit; height: 3rem !important; } @media (max-width: 60em) { .yotpo .reviews-qa-labels-container { margin-left: 0 !important; } } .yotpo .reviews-qa-labels-container .reviews-qa-label { top: 0 !important; width: auto !important; height: auto !important; } @media (max-width: 60em) { .yotpo .reviews-qa-labels-container .reviews-qa-label { padding-top: 0 !important; margin-left: 0 !important; } } .yotpo .bottom-line-items { -webkit-padding-end: 0 !important; padding-inline-end: 0 !important; -webkit-padding-start: 0 !important; padding-inline-start: 0 !important; float: none !important; margin-bottom: 0 !important; } .yotpo .bottom-line-only-container { display: block !important; width: auto !important; } .yotpo .form-input-error { display: block !important; font-size: 0.725rem !important; } .yotpo-main-widget { max-width: 43rem; } @media (min-width: 60em) { .main-widget:not(.yotpo-no-reviews):before { content: " "; display: block; border-top: 1px solid #e0e0e0; top: 2rem; position: relative; } } .main-widget .bottom-line-items { margin: 0 !important; padding: 0 !important; float: none !important; display: block !important; } .bottom-line-items-container-desktop { height: 100% !important; } @media (min-width: 60em) { .bottom-line-items-container-desktop { border-top: none !important; border-bottom: none !important; padding: 0 !important; position: unset; padding: 0; width: 100%; margin: 0 !important; display: grid; } .bottom-line-items-container-desktop .border-line-items-wrapper { align-self: center; } .bottom-line-items-container-desktop .bottom-line-items, .bottom-line-items-container-desktop .bottom-line-only-container, .bottom-line-items-container-desktop .reviews-qa-labels-container { height: 100% !important; } .bottom-line-items-container-desktop .reviews-qa-labels-container { height: 100%; width: 14.75rem !important; border-bottom: none !important; border-right: 1px solid #e0e0e0 !important; } } @media (min-width: 60em) and (min-width: 60em) { .bottom-line-items-container-desktop .reviews-qa-labels-container { margin-right: 6rem !important; } } @media (max-width: 60em) { .bottom-line-items-container-desktop .bottom-line-items { height: 100% !important; } .bottom-line-items-container-desktop .yotpo-star-distribution-wrapper { padding-right: 0 !important; } } .bottom-line-items-container-mobile { height: unset !important; border-bottom: none !important; } .bottom-line-items-wrapper { flex-direction: row !important; width: 100% !important; position: unset !important; place-content: flex-end; transform: unset !important; } @media (min-width: 60em) { .bottom-line-items-wrapper { display: flex !important; } } .avg-score, .yotpo-reviews-filters, .yotpo-filter-stars, .yotpo-icon-dialog, .yotpo-icon-write-no-frame, .yotpo-reviews-header { display: none !important; } .write-question-review-buttons-container { height: 100%; float: unset !important; display: flex; flex-direction: column; gap: 16px; place-items: flex-end; place-content: center; } .write-question-review-button-text { color: #3d3935 !important; } .write-review-button span { color: #ffffff !important; } .yotpo-default-button:not(.yotpo-icon-btn) { width: 135px; height: 105px; } .yotpo-star-distribution-score-value { font-family: var(--font-montserrat) !important; font-size: 0.875rem !important; font-weight: 400 !important; } .yotpo-icon-profile { background: #3d3935 !important; border-radius: 50% 0% 50% 50% !important; } @media (max-width: 60em) { .yotpo-icon-profile { width: 2.25rem !important; height: 2.25rem !important; margin-right: 0.875rem !important; } } @media (min-width: 60em) { .yotpo-icon-profile { margin-right: 3rem !important; } } .yotpo-icon-circle-checkmark { background: #d14124 !important; border-radius: 50% 0% 50% 50% !important; position: absolute !important; left: 29px !important; top: 0px !important; font-size: 10px !important; color: #ffffff !important; border: solid 3px #d14124 !important; } .yotpo-icon-circle-checkmark::before { content: "\e60a" !important; } .yotpo-user-letter { font-size: 1.125rem !important; font-family: var(--font-oswald) !important; font-weight: 700 !important; } @media (max-width: 60em) { .yotpo-user-letter { top: 0.625rem !important; } } @media (min-width: 60em) { .yotpo-user-letter { font-size: 26px !important; } } .yotpo-store-owner .yotpo-icon-profile { background: #d14124 !important; } .yotpo-store-owner img.yotpo-store-avatar { width: 1.25rem !important; height: 1.25rem !important; margin-left: 0.575rem; margin-top: 0.5rem; } @media (min-width: 60em) { .yotpo-store-owner img.yotpo-store-avatar { width: 1.625rem !important; height: 1.625rem !important; margin-left: 0.625rem; margin-top: 0.5rem; } } .yotpo-store-owner .yotpo-icon-circle-checkmark { display: none !important; } @media (max-width: 60em) { .yotpo-icon-circle-checkmark { left: 1.375rem !important; width: 0.75rem !important; height: 0.75rem !important; font-size: 0.5rem !important; } } .yotpo-default-button { background: #d14124 !important; font-weight: 700 !important; } .yotpo-user-name, .content-review, .y-label, .yotpo-review-date, .vote-btn { font-family: var(--font-montserrat) !important; font-style: normal !important; font-weight: normal !important; font-size: 14px !important; line-height: 20px !important; color: #3d3935 !important; } .yotpo-user-title { font-family: var(--font-montserrat) !important; font-style: normal !important; font-weight: normal !important; font-size: 14px !important; line-height: 20px !important; color: #d14124 !important; } .content-title { font-family: var(--font-montserrat) !important; font-style: normal !important; font-weight: 700 !important; font-size: 1rem !important; line-height: 24px !important; color: #3d3935 !important; padding-bottom: 0 !important; } @media (max-width: 60em) { .yotpo-review .yotpo-main, .yotpo-review .yotpo-footer, .yotpo-question .yotpo-main, .yotpo-question .yotpo-footer { margin-left: 0 !important; } } @media (min-width: 60em) { .yotpo-review .yotpo-main, .yotpo-review .yotpo-footer, .yotpo-question .yotpo-main, .yotpo-question .yotpo-footer { margin-left: 5.875rem !important; } } .yotpo-no-reviews { width: 100%; } .yotpo-no-reviews .yotpo-first-review { margin-top: 1rem !important; } .yotpo-no-reviews .write-question-review-buttons-container { transform: translateY(0) !important; } .yotpo-no-reviews .yotpo-questions .write-first-question-button { margin-left: 0 !important; } .yotpo-no-reviews .yotpo-first-review-stars { display: none; } .yotpo-no-reviews .reviews-qa-label { left: 0 !important; } .write-first-review-button, .write-first-question-button { border-radius: 20px !important; height: 44px !important; min-width: -moz-fit-content !important; min-width: fit-content !important; } .yotpo-nav-tab.yotpo-active span { color: #d14124 !important; } .modal__content .yotpo-no-reviews { max-width: 35rem; margin: 0 auto; padding-bottom: 1rem; position: relative; display: block !important; } .modal__content .yotpo-no-reviews .bottom-line-items-container-mobile { padding: 1.5rem 0 0 !important; } .modal__content .yotpo-no-reviews .bottom-line-items-container-desktop .bottom-line-items-wrapper .bottom-line-only .bottom-line-only-container { float: none !important; } @media (min-width: 60em) { .modal__content .yotpo-no-reviews .write-question-review-buttons-container { transform: translateY(50%) !important; } } .yotpo-pager .yotpo-page-element { color: #d14124 !important; border-color: #d14124 !important; } .yotpo-pager .yotpo-page-element:hover { border-color: #d14124 !important; color: #d14124 !important; } .yotpo-or { font-weight: 400 !important; } /* stylelint-enable */ .yotpo-nav-content { padding: 0 20px !important; } @layer base { html, body { padding: 0; margin: 0; font-family: var(--font-montserrat); } h1, h2, h3, h4, h5, h6 { font-family: var(--font-oswald); } h1 { font-size: 48px; } h2 { font-size: 32px; } h3 { font-size: 28px; } h4 { font-size: 24px; } h5 { font-size: 20px; } h6 { font-size: 18px; } a { color: inherit; text-decoration: none; } * { box-sizing: border-box; } } .recipes-detail-page .recipe-breadcrumbs { width: 100%; padding: 1rem 0; color: #3d3935; } .recipes-detail-page .recipe-breadcrumbs a { display: flex; justify-content: flex-start; align-items: center; font-family: var(--font-montserrat); font-style: normal; text-transform: uppercase; font-size: 14px; font-weight: 500; line-height: 14px; padding: 0 1rem; } .recipes-detail-page .recipe-breadcrumbs span { margin: auto 0; } .recipes-detail-page .main-content { display: grid; grid-template-columns: 1fr; grid-template-areas: "gallery" "header"; } @media (min-width: 45em) { .recipes-detail-page .main-content { grid-template-columns: 1.5fr 1.4fr; grid-template-areas: "header gallery"; max-width: 90rem !important; margin: 0 auto !important; } } .recipes-detail-page .main-content__header { display: flex; width: 720px; padding: 50px 85px; flex-direction: column; align-items: flex-start; gap: 35px; flex-shrink: 0; } @media (max-width: 45em) { .recipes-detail-page .main-content__header { width: auto; display: inline-flex; flex-direction: column; align-items: flex-start; padding: 20px; gap: 16px; } } .recipes-detail-page .main-content__header h1 span { display: block; color: #d14124; } .recipes-detail-page .main-content__header h1 { width: 482px; text-align: left; color: #3d3935; font-family: var(--font-oswald); font-size: 48px; font-weight: 500; line-height: 54px; letter-spacing: 0; text-transform: uppercase; } @media (max-width: 45em) { .recipes-detail-page .main-content__header h1 { width: 320px; font-size: 30px; line-height: 36px; letter-spacing: 0px; } } .recipes-detail-page .main-content__badges { display: block; width: 100%; min-width: 150px; min-height: 40px; margin: 1rem 0 0; } .recipes-detail-page .main-content__recipe-info { display: flex; flex-wrap: wrap; justify-content: flex-start; text-align: left; width: 100%; margin: 1rem 0; } .recipes-detail-page .main-content__recipe-info span { display: block; margin-right: 14px; padding-right: 14px; border-right: 1px solid #3d3935; font-size: 16px; line-height: 26px; text-transform: uppercase; font-weight: 400; height: 29px; } .recipes-detail-page .main-content__recipe-info span b { font-weight: 600; text-transform: uppercase; } .recipes-detail-page .main-content__recipe-info span:last-of-type { border-right: none; } .recipes-detail-page .main-content__gallery { grid-area: gallery; position: relative; min-height: 40vh; overflow: hidden; } .recipes-detail-page .main-content__gallery img { width: 100%; height: 100%; } @media (min-width: 45em) { .recipes-detail-page .recipe-section { margin: 2rem; display: flex; } } .recipes-detail-page .recipe-section .divider { width: 1px; background-color: #e0e0e0; margin: 1.875rem 0; display: none; } @media (min-width: 45em) { .recipes-detail-page .recipe-section .divider { display: flex; } } .recipes-detail-page .recipe-section .ingredient-list, .recipes-detail-page .recipe-section .cooking-directions { flex-basis: 50%; width: 100%; padding: 2rem; } @media (min-width: 45em) { .recipes-detail-page .recipe-section .ingredient-list, .recipes-detail-page .recipe-section .cooking-directions { max-width: 40rem; margin: 0 auto; } } .recipes-detail-page .recipe-section .ingredient-list h2, .recipes-detail-page .recipe-section .cooking-directions h2 { margin: 2em 0; text-wrap: nowrap; } .recipes-detail-page .recipe-section .ingredient-list { background-color: #f5f5f5; border-radius: 10px; } .recipes-detail-page .recipe-section .ingredient-list__content { border-top: 2px solid #dfdfdf; } .recipes-detail-page .recipe-section .ingredient-list__content p { font-size: 0.875rem; } .recipes-detail-page .recipe-section .ingredient-list__content table td p { margin: 0; } .recipes-detail-page .recipe-section .ingredient-list__content table td { border: none; padding: 0.625rem 0 0 0; } .recipes-detail-page .recipe-section .ingredient-list__content table tr { border: none; } .recipes-detail-page .recipe-section .ingredient-list__content .non-wf-ingredient { display: grid; grid-template-columns: 2fr 1fr; } .recipes-detail-page .recipe-section .ingredient-list__content .non-wf-ingredient p { padding: 0; margin: 1rem 0; } .recipes-detail-page .recipe-section .ingredient-list .ingredient-item { display: flex; justify-content: space-between; align-items: center; font-size: 0.875rem; border-bottom: 1px solid #dfdfdf; border-top: 1px solid #dfdfdf; gap: 0.5rem; } .recipes-detail-page .recipe-section .ingredient-list .ingredient-item:first-child { border-top: none; } .recipes-detail-page .recipe-section .ingredient-list .ingredient-item:last-child { border-bottom: none; } .recipes-detail-page .recipe-section .ingredient-list .ingredient-item a { text-decoration: underline; width: 65%; } .recipes-detail-page .recipe-section .ingredient-list .ingredient-item_cart-add-or-update { min-width: -moz-fit-content; min-width: fit-content; } @media (min-width: 60em) { .recipes-detail-page .recipe-section .ingredient-list .ingredient-item { gap: 1rem; } } .recipes-detail-page .recipe-section .ingredient-list .ingredient-item { padding: 0.625rem 0; } .recipes-detail-page .recipe-section .ingredient-list .ingredient-item--is_in_cart { color: #757575; -webkit-text-decoration: line-through #757575; text-decoration: line-through #757575; } .recipes-detail-page .recipe-section .ingredient-list .ingredient-item p { padding: 0; margin: 0; } .recipes-detail-page .recipe-section .cooking-directions { counter-reset: ingredient-count; } .recipes-detail-page .recipe-section .cooking-directions .direction-item { display: flex; align-items: flex-start; } .recipes-detail-page .recipe-section .cooking-directions .direction-item p { margin-top: 0.5rem; } .recipes-detail-page .recipe-section .cooking-directions .direction-item .question-bullet { flex-shrink: 0; width: 3.125rem; height: 3.125rem; fill: #d14124; position: relative; transform: rotateZ(180deg); } .recipes-detail-page .recipe-section .cooking-directions .direction-item .question-bullet::after { counter-increment: ingredient-count; content: counter(ingredient-count); color: #ffffff; position: absolute; top: 52%; left: 50%; font-family: var(--font-oswald); font-weight: 400; font-size: 0.875rem; transform: translate(-50%, -52%) rotateZ(180deg); } .recipes-detail-page .indicator { position: relative; border: 1px solid #ffffff; margin-top: -5rem; height: 1.875rem; width: 1.875rem; border-radius: 50%; background-color: #9e9e9e; } .recipes-detail-page .indicator:not(last-child) { margin-right: 1.5rem; } .recipes-detail-page .indicator.active { background: #d14124; } .recipes-detail-page ul, .recipes-detail-page ul li, .recipes-detail-page ul ul li { margin: 0; padding: 0; text-indent: 0; list-style-type: none; } .recipe-search { display: block; margin: 0 auto; width: 100%; max-width: 1440px; } .recipe-search--search-box-wrapper { width: 100%; min-width: 100%; } .recipe-search--search-box-wrapper--search-box { margin: 1rem auto; width: 20rem; } .recipe-search--search-box-wrapper--search-box--button-search { display: block; position: absolute; width: 1.7rem; margin-top: -34px; } .recipe-search--results-container { display: flex; flex-wrap: wrap; grid-gap: 2.5rem 1em; position: relative; margin: 0 auto; margin-bottom: 6.25rem; padding: 0; width: 100%; max-width: 90rem !important; } @media (min-width: 35em) { .recipe-search { max-width: none; margin: 0 auto; width: inherit; } } .ais-SearchBox-input { border: none; border-bottom: 1px solid #000; width: 100%; padding: 0.313em 0.625em 0.313em 2.188em; font-size: 0.875rem; line-height: 1.5; } .ais-SearchBox-input:focus { outline: none; border-bottom: 1px solid #dc4405; } .ais-SearchBox-submit { display: contents; position: relative; } .ais-SearchBox-reset { display: none; } .ais-SearchBox-loadingIndicator { display: none; } .no-results-wrapper { grid-column: span 3; margin: 3rem 0rem; font-size: 1.125rem; line-height: 1.3333; font-family: var(--font-oswald); line-height: 1.3; font-weight: 500; text-align: center; } @media (max-width: 35em) { .no-results-wrapper { grid-column: span 2; } } .page-section-rich-text { --standard-width: 43.75rem; width: 100%; max-width: var(--standard-width); background-color: #ffffff; margin: 0 auto; word-break: break-word; padding: 10px 0px; } @media (min-width: 30em) { .page-section-rich-text { padding: 1.25rem 2rem; } .page-section-rich-text--standard-width { max-width: var(--standard-width); } .page-section-rich-text--full-width { max-width: 90rem; } } .page-section-rich-text .caption--left { text-align: left; } .page-section-rich-text .caption--center { text-align: center; } .page-section-rich-text .caption--right { text-align: right; } .page-section-rich-text a { margin: 0 16px; } .page-section-rich-text h1, .page-section-rich-text h2, .page-section-rich-text h3, .page-section-rich-text h4, .page-section-rich-text h5, .page-section-rich-text h6 { padding: 0; } .page-section-rich-text h1, .page-section-rich-text h2, .page-section-rich-text h3 { font-family: var(--font-oswald); } .page-section-rich-text ul > li { font-size: 0.875rem; list-style: disc; margin-left: 16px; } .page-section-rich-text ol, .page-section-rich-text ul { margin: 0; padding: 0; } .page-section-rich-text li { line-height: 2; } .page-section-rich-text ol > li { font-size: 0.875rem; list-style-type: decimal; margin-left: 16px; } .page-section-rich-text strong { font-weight: 700; } .page-section-rich-text p { line-height: 1.43; margin: 12px 0; text-align: left; letter-spacing: 0.72px; } .page-section-rich-text p a { margin: 0; } .page-section-rich-text p b i { display: inline-block; margin-top: 70px; margin-bottom: 70px; } .page-section-rich-text h1 { font-size: 1.875rem; line-height: 2.5rem; margin-bottom: 1.5rem; text-transform: uppercase; } .page-section-rich-text h2 { font-size: 1.75rem; margin: 70px 0; } .page-section-rich-text h3 { font-size: 1.625rem; } .page-section-rich-text h4 { font-size: 1.5rem; } .page-section-rich-text h5 { font-size: 1.375rem; } .page-section-rich-text table { border-collapse: collapse; width: 100%; } .page-section-rich-text table tbody { vertical-align: baseline; } .page-section-rich-text table tr { border-bottom: 1px solid #e0e0e0; } .page-section-rich-text table td, .page-section-rich-text table th { padding: 10px; } .page-section-rich-text table td { font-weight: 100; } @media (max-width: 44.99em) { .page-section-rich-text { padding: 1.25rem; } .page-section-rich-text p { letter-spacing: normal; } } .static-text-page-content { width: 100%; max-width: 700px; background-color: #fff; margin: auto; word-break: break-word; padding: 10px 0; margin-top: 60px; } .static-text-page-content a { margin: 0 16px; } .static-text-page-content h1, .static-text-page-content h2, .static-text-page-content h3, .static-text-page-content h4, .static-text-page-content h5, .static-text-page-content h6 { padding: 0; } .static-text-page-content h1, .static-text-page-content h2, .static-text-page-content h3 { font-family: var(--font-oswald); } .static-text-page-content ul > li { font-size: 0.875rem; list-style: disc; margin-left: 16px; } .static-text-page-content ol, .static-text-page-content ul { margin: 0; padding: 0; } .static-text-page-content li { line-height: 2; } .static-text-page-content ol > li { font-size: 0.875rem; list-style-type: decimal; margin-left: 16px; } .static-text-page-content strong { font-weight: 700; } .static-text-page-content p { line-height: 1.43; text-align: left; letter-spacing: 0.72px; margin-top: 20px; margin-bottom: 0px; } .static-text-page-content p a { margin: 0; } .static-text-page-content p b i { display: inline-block; } .static-text-page-content h1 { font-size: 1.875rem; line-height: 2.5rem; margin-top: 3rem; margin-bottom: 1.5rem; text-transform: uppercase; } .static-text-page-content h2 { font-size: 1.75rem; margin-top: 3rem; margin-bottom: 1.5rem; } .static-text-page-content h3 { font-size: 1.625rem; margin-top: 3rem; margin-bottom: 1.5rem; } .static-text-page-content h4 { font-size: 1.5rem; } .static-text-page-content h5 { font-size: 1.375rem; } .static-text-page-content table { border-collapse: collapse; width: 100%; } .static-text-page-content table tbody { vertical-align: baseline; } .static-text-page-content table tr { border-bottom: 1px solid #e0e0e0; } .static-text-page-content table td, .static-text-page-content table th { padding: 10px; } .static-text-page-content table td { font-weight: 100; } @media (max-width: 44.99em) { .static-text-page-content { padding: 1.25rem; margin: auto; } .static-text-page-content p { letter-spacing: normal; } } .email-footer__container { width: 100%; background: #e0e0e0; } .email-footer { max-width: 1440px; margin-inline: auto; display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 1rem; gap: 1rem; text-align: center; padding: 1rem; } @media (max-width: 790px) { .email-footer { grid-template-columns: 1fr; grid-template-rows: repeat(2, 1fr); } } .email-footer * { background: white; } .email-footer .email-signup-container { display: grid; place-items: center; padding: 2rem 5.5rem; max-width: 100%; grid-gap: 1rem; gap: 1rem; } @media (max-width: 768px) { .email-footer .email-signup-container { padding: 1rem 1rem; } } .email-footer .email-signup-container .success-message-container { width: 100%; padding: 21px; background-color: #6effaa; display: flex; justify-content: center; align-items: center; } .email-footer .email-signup-container .success-message-container .success-message { display: flex; justify-content: center; align-items: center; background-color: inherit; color: #17763b; text-transform: uppercase; font-size: 1rem; font-weight: 700; margin-bottom: 0; margin: 0; } .email-footer .email-signup-container .success-message-container .success-message--follow { font-size: 1.3rem; font-weight: 700; } .email-footer .wildfork-unlimited-container { display: grid; place-items: center; padding: 2rem 1rem; grid-gap: 1rem; gap: 1rem; } .email-footer .wildfork-unlimited-container a { text-decoration: underline; } .email-footer .wildfork-unlimited-container .pod-media { max-width: 317px; } .email-footer .wildfork-unlimited-container .pod-media div img { object-fit: contain; height: min-content; max-width: 80%; } .email-footer .social-media-icons { display: flex; justify-content: space-around; } .email-footer .social-media-icons .pod-media { width: 3rem; margin: 0.5rem; cursor: pointer; } .email-footer .social-media-icons .pod-media div { height: auto !important; } .email-footer .social-media-icons .pod-media img { width: 100%; height: auto; object-fit: contain; } .faq { width: 100%; margin: 10px auto; } @media (min-width: 60em) { .faq { max-width: 1438px; } } .faq-container { width: 95%; max-width: 65.125rem; margin: 20px auto; } @media (max-width: 45em) { .faq-container { width: 95%; margin: 10px auto; } } .faq-container div div { min-height: 0; } @media (min-width: 60em) { .faq-container div div { min-height: 0; } } .faq-container div div .text-H5 { font-size: 18px; font-weight: 600; text-transform: none; color: #3d3935; font-family: var(--font-montserrat); line-height: 28px; } .faq-container-expanded { background-color: #f5f5f5; border-radius: 10px; height: 100%; opacity: 1; transition: height 0.5s ease, opacity 0.5s ease; } .faq-container-content { margin: 32px 32px 0; column-gap: 10px; align-items: flex-start; } @media (max-width: 48em) { .faq-container-content { margin: 16px 16px 0; } } .faq-icon { margin-top: -4px; } .faq-icon svg { position: relative; width: 2rem; height: 2rem; margin-top: 7px; } .store-location-footer-panel__container { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; padding: 55px 8px; } .store-location-footer-panel__container .store-location-footer-panel__block { height: 50%; display: flex; flex-direction: column; justify-content: space-between; align-items: center; } .store-location-footer-panel__container .store-location-footer-panel__block .store-location-footer-panel__icon { width: 4rem; height: 4rem; margin: 0 auto; } .store-location-footer-panel__container .store-location-footer-panel__block .store-location-footer-panel__link { color: #3d3935; text-decoration: underline; } .store-location-footer-panel__container .store-location-footer-panel__block .store-location-footer-panel__link:hover { color: black; font-weight: 600; } .store-location-footer-panel__container .store-location-footer-panel__block .store-location-footer-location-icon { height: 1.5rem; width: 1.5rem; } .store-location-footer-panel__container .store-location-footer-panel__block .your-store-text { font-size: 24px; } .dynamic-form__grid label { text-transform: capitalize; } .dynamic-form__grid .error input:not(:focus), .dynamic-form__grid .error select:not(:focus) { border: 1px solid #d14124; border-radius: 8px; } .dynamic-form__actions { text-align: center; margin-top: 2rem; } .dynamic-form__message__close { color: #0000ee; cursor: pointer; font-weight: 400; } .contact-us-note-text { font-size: 12px; margin: 1rem 0; font-weight: 500; } @media (min-width: 45em) { .contact-us-note-text { margin: 1.5rem 0; } } .container-cards { width: 100%; height: 100%; position: relative; padding: 0.5rem 1rem; } @media (min-width: 45em) { .container-cards { min-height: 25rem !important; padding: 1rem; } } .container-cards--media-background { min-height: 15rem; height: 100%; } .container-cards--media-background img { object-fit: cover; } .container-cards--background-gray { height: 100%; background: #f5f5f5; } .container-cards__title { width: 100%; } .container-list-cards-layout { display: flex; flex-direction: column; justify-content: center; gap: 0.5rem; height: 100%; } .container-carousel-cards-layout { display: flex; flex-direction: column; justify-content: center; height: 100%; } .container-carousel-cards-layout .slick-slider, .container-carousel-cards-layout .slick-list, .container-carousel-cards-layout .slick-track { height: 100%; } .container-carousel-cards-layout .slick-slider .slick-slide > div, .container-carousel-cards-layout .slick-list .slick-slide > div, .container-carousel-cards-layout .slick-track .slick-slide > div { height: 100%; } .container-carousel-cards-layout .arrow { top: 48% !important; } .container-carousel-cards-layout .slick-dots { margin-bottom: 2rem; } .container-grid-cards-layout { height: 100%; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 1rem; } .list-cards__container.list-cards__object-fit--cover .pod-media img { object-fit: cover; } .list-cards__container.list-cards__object-fit--contain * .pod-media img { object-fit: contain; } .form-container form input, .form-container form select, .form-container form textarea { border-radius: 0.5rem; border: 1px solid #777472; } .form-container form input:focus, .form-container form select:focus, .form-container form textarea:focus { border: 2px solid #777472; outline: none; } .form-container form input.error, .form-container form select.error, .form-container form textarea.error { border: 1px solid #dc4405; } .form-container form input:disabled, .form-container form select:disabled, .form-container form textarea:disabled { background-color: #f5f5f5; border: 1px solid #f5f5f5; } .form-container form select { position: inherit !important; display: block; } .form-container form select, .form-container form select ::selection { background-color: #ffffff; } .form-container form label { margin-bottom: 0.05rem; color: #3d3935; font-size: 0.875rem; font-weight: 700; } .form-container form label.required:after { content: "*"; color: #dc4405; } .form-container form .form-input { position: relative; text-align: left; } .form-container form .form-input span.error { color: #dc4405; font-size: 0.875rem; font-weight: 600; display: block; padding-left: 0.1rem; margin-top: 0.1rem; position: relative; top: 100%; } .form-container form .checkbox-wrapper { display: flex; align-items: center; justify-content: center; } .form-container form .checkbox-wrapper input { width: 24px; height: 24px; flex-shrink: 0; border: 1px solid #777472; border-radius: 4px; background-color: white; cursor: pointer; } .form-container form .checkbox-wrapper label { color: #3d3935; font-size: 0.875rem; font-weight: 700; text-align: left; cursor: pointer; } .form-container form .checkbox-wrapper label a { text-decoration: underline; color: rgb(0, 95, 204); } .form-container--contact-us form { border-radius: 1rem; border: 1px solid #ffffff; background-color: #ffffff; padding: 0.875rem; max-width: 56.25rem; margin: 0 auto; display: flex; flex-direction: column; align-items: center; } @media (min-width: 45em) { .form-container--contact-us form { padding: 4rem 6.5rem; } } .form-container--contact-us form button { width: 100%; font-size: 1.125rem !important; border-radius: 2.5rem !important; font-weight: 500; } .form-container--contact-us form button.action { margin: 0 !important; padding: 0.625rem 1.5rem; } @media (min-width: 45em) { .form-container--contact-us form button { font-weight: 700; font-size: 1.5rem !important; } } .preview-icon div.icon { height: 24px; width: 17px; top: 33px; position: absolute; right: 0; margin-right: 14px; } .preview-icon .password-visibility-toggle { display: inline-flex; align-items: center; cursor: pointer; } .preview-icon .password-visibility-toggle:focus-visible .icon { outline: 2px solid #001e62; outline-offset: 2px; } .preview-icon .eye-open.icon { top: 30px; } .breadcrumb-wrapper .breadcrumb { list-style: none; display: flex; padding: 0; margin: 0; color: #3d3935; text-transform: uppercase; font-weight: 500; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .breadcrumb-wrapper .breadcrumb .breadcrumb-item { display: flex; align-items: center; } .breadcrumb-wrapper .breadcrumb .breadcrumb-item, .breadcrumb-wrapper .breadcrumb .breadcrumb-item a { font-size: 0.8125rem; } .breadcrumb-wrapper .breadcrumb .breadcrumb-item:not(:last-child):after { content: ">"; margin: 0 0.4rem; } .breadcrumb-wrapper .breadcrumb .back-btn { cursor: pointer; font-size: 0.8125rem; text-transform: uppercase; background-color: transparent; border: none; font-family: var(--font-montserrat); font-weight: 500; } .breadcrumb-wrapper .breadcrumb .current { font-weight: 700; } .standard-button__btn--disabled { color: #979797; pointer-events: none; } .select-container { position: relative; display: flex; flex-direction: column; flex: 1 1; } .select-container select { border: 1px transparent solid; background-clip: padding-box; display: block; box-sizing: border-box; width: 100%; height: 100%; padding: 0.9285714286em 0.78571em; padding-bottom: 0.7285714286em; padding-top: 1.1285714286em; word-break: normal; line-height: inherit; font-size: 16px; background-color: white; color: #333333; border-color: #d9d9d9; } .select-container select:focus { outline: none; border-color: #d14124; box-shadow: 0 0 0 1px #d14124; } .select-container label { color: rgb(115, 115, 115); position: absolute; pointer-events: none; transform: translate(0, 5px) scale(1); transform-origin: top left; color: #737373; opacity: 1; font-size: 13px; font-weight: 800; line-height: 1; left: 16px; font-weight: normal; } .input-blue select:focus { border-color: rgb(0, 95, 204); box-shadow: 0 0 0 1px rgb(0, 95, 204); outline-color: rgb(0, 95, 204); } .form-text-field__text__field { display: flex; flex-direction: column; margin-bottom: 1em; } .form-text-field__text__field-error { border-bottom: 2px solid #ff0000; } .form-text-field__standard_outlined label { margin-left: 0.625rem; margin-left: 0; font-size: 14px; } .form-text-field__standard_outlined input { border-radius: 0; outline: none; transition: 200ms cubic-bezier(0, 0, 0.2, 1) 0ms; } .form-text-field__standard_outlined input:focus { border: 2px solid #3d3935; border-color: inherit; outline: none; box-shadow: none; border-radius: 5px; } .form-text-field__standard_outlined:focus-within { transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; } .form-text-field__standard_outlined:focus-within ::before, .form-text-field__standard_outlined:focus-within ::after, .form-text-field__standard_outlined:focus-within :hover::before { border-bottom: none; } .form-text-field__standard_outlined:focus-within label { color: #9e9e9e; } .form-text-field__error input:not(:focus) { border: 1px solid #d14124; border-radius: 0px; } .text-field__input-container { position: relative; flex: 1 1; } .text-field__input-container input { border: 1px transparent solid; background-clip: padding-box; display: block; box-sizing: border-box; width: 100%; height: 100%; padding: 1.25rem 0.625rem 0.5rem 1em; word-break: normal; line-height: inherit; font-size: 16px; background-color: white; color: #333333; border-color: #d9d9d9; } .text-field__input-container input:focus { outline: none; border-color: #d14124; box-shadow: 0 0 0 1px #d14124; } .text-field__input-container input::placeholder { transform: translate3d(0, -4px, 0); text-align: center; } .text-field__input-container label { position: absolute; pointer-events: none; transform: translate(0, 18px) scale(1); transform-origin: top left; transition: 200ms cubic-bezier(0, 0, 0.2, 1) 0ms; color: #737373; opacity: 1; font-size: 14px; line-height: 1; left: 16px; font-weight: normal; } .text-field__input-container:focus-within label { transform: translate(0, 6px) scale(0.8); color: gray; } .text-field__input-container .filled { transform: translate(0, 6px) scale(0.8); } .text-field__input-container .tooltip { position: absolute; top: 14px; right: 10px; margin-right: 13px; } .text-field__input-blue input:focus { border-color: rgb(0, 95, 204); box-shadow: 0 0 0 1px rgb(0, 95, 204); outline-color: rgb(0, 95, 204); } .text-field__text-field--error input:not(:focus) { border: 1px solid red; } .text-field__error input:not(:focus) { border: 1px solid #d14124; border-radius: 0px; } .text-field__previewicon { height: 24px; width: 19px; top: 13px; position: absolute; right: 0; margin-right: 4px; } .horizontal-scroll-container__prev .icon { transform: translate(-1px, 1px); } .horizontal-scroll-container__next .icon { transform: translate(1px, 1px); } .read-more__description h1, .read-more__description h2 { font-size: 2rem; font-weight: 400; text-transform: none; text-align: center; } .read-more__description h1 { font-size: 1.875rem; line-height: 1.15; font-weight: 700; text-transform: uppercase; text-align: left; } .read-more__description h2 { font-size: 2rem; font-weight: 400; text-transform: none; text-align: center; } .read-more__description h3 { font-size: 1.125rem; } .read-more__description h4 { font-size: 0.875rem; } .read-more__description h5 { font-size: 0.75rem; } .read-more__description ul, .read-more__description ol { margin-left: 3rem; } .read-more__description strong { font-weight: 700; } .read-more__description b { font-weight: 600; } .read-more__description i { font-style: italic; } .read-more__description a { font-size: 1rem; color: #d14124; } .read-more__description a:hover { text-decoration: underline; } .wf-message { border: 2px solid; background-color: #ffffff; text-align: left; padding: 1rem 0.5rem; display: flex; gap: 0.375rem; font-size: 1rem; line-height: 19.5008px; } @media (min-width: 48em) { .wf-message { align-items: center; gap: 0.5rem; padding: 1rem; } } .wf-message.success { border-color: #007a33; } .wf-message.success-fill { background-color: #007a33; color: #ffffff; } @media (min-width: 45em) { .wf-message.success-fill { width: -moz-fit-content; width: fit-content; } } .wf-message.error { color: #d14124; border-color: #dc4405; } .wf-message.dark { border-radius: 0.5rem; border-color: #3d3935; } .wf-message .wf-message__content { display: flex; flex-direction: column; gap: 0.5rem; } .wf-message .wf-message__heading { font-weight: 600; } .wf-message .wf-message__heading a { text-decoration: unset; text-decoration: underline; color: #dc4405; } .wf-message .wf-message__body { font-weight: 400; } .wf-message .wf-message__icon .icon { height: 2.25rem; width: 2.25rem; } .prop65-warning { margin: 0; } .prop65-warning a { font-size: inherit; } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip: rect(0 0 0 0); overflow: hidden; white-space: nowrap; } .notFoundWrapper { margin: 150px 0px; display: flex; flex-direction: column; text-align: center; justify-content: center; align-items: center; row-gap: 20px; } .notFoundWrapper--link { text-decoration: underline; } .generic-error__container { width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 21px; } .generic-error__container__heading { color: #d14124; text-align: center; } .generic-error__container__message { display: flex; text-align: center; } .generic-error__container__details { margin-top: 0; display: flex; text-align: center; } .generic-error__container > * { margin-bottom: 13px; } .generic-error__container pre { margin-top: 4rem; max-width: 100%; text-wrap: wrap; } .membership__box { padding-top: 60px; padding-bottom: 60px; min-height: 50px; background-color: #f5f5f5; position: relative; display: flex; width: 100%; flex-direction: column; flex: 1 1 auto; justify-content: center; } .membership__box-content { z-index: 4; position: relative; min-height: 1px; } .membership__box-content iframe { max-height: 100%; max-width: 100%; object-fit: contain; width: 100%; height: 820px; border-style: none; } .membership__box-vertical-align { display: flex; width: 100%; } .membership__box-wrapper { position: relative; margin: 0 auto; flex: 1 1 auto; border-color: #ececec; min-height: 0px; max-width: 1440px; background-color: #f5f5f5; } .membership__content { display: flex; flex-wrap: wrap; min-height: inherit; max-height: inherit; justify-content: space-between; } .membership__content__left { width: 100%; } @media (min-width: 1200px) { .membership__content__left { width: 33%; } } .membership__content__right { width: 100%; } @media (min-width: 1200px) { .membership__content__right { width: 65%; } } .membership__image { background-repeat: no-repeat; background-size: cover; min-height: 940px; background-position: center center; } .membership__frame-container { padding: 20px; border-width: 1px; border-radius: 24px; min-height: 50px; background-color: #fff; } .membership__title { padding-top: 10px; padding-bottom: 44px; text-align: left; } .find-a-store__container { position: relative; height: 100%; width: 100%; } .find-a-store__header { row-gap: 18px; border-top: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0; padding: 15px 20px 15px 55px; display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-end; flex-wrap: nowrap; } @media (max-width: 700px) { .find-a-store__header { flex-wrap: wrap; justify-content: center; max-width: 500px; } } .find-a-store__header { width: 100%; } .find-a-store__header > * { margin-right: 18px; } .find-a-store__header input, .find-a-store__header input { width: 100%; max-width: 300px; } .find-a-store__header input:not(:focus), .find-a-store__header input:not(:focus) { border: none; border-radius: 0; } .find-a-store__header input:focus, .find-a-store__header input:focus-visible, .find-a-store__header input:focus, .find-a-store__header input:focus-visible { border: none; outline: none; } .find-a-store__header__heading { white-space: nowrap; min-width: 280px; order: 2; display: flex; position: relative; } .find-a-store__header__zip-field-row { display: flex; order: 4; } .find-a-store__header__zip-field-row .input-field-prime__field-container { position: relative; flex: 1 1; min-width: 300px; max-width: 320px; } .find-a-store__header__zip-field-row .input-field-prime__field-container:not(:focus), .find-a-store__header__zip-field-row .input-field-prime__field-container:not(:focus-within) { border-bottom: 1px solid #3d3935; } .find-a-store__header__zip-field-row .input-field-prime__field-container:focus, .find-a-store__header__zip-field-row .input-field-prime__field-container:focus-within, .find-a-store__header__zip-field-row .input-field-prime__field-container:focus-visible { border: 2px solid #3d3935; border-radius: 5px; } .find-a-store__header__zip-field-row .input-field-prime__clear-button { cursor: pointer; opacity: 0; display: flex; justify-content: center; align-items: center; width: 34px; padding: 0px; margin: 0px; border: 2px solid #3d3935; border-radius: 5px; background-color: #7f776f; color: white; } .find-a-store__header__zip-field-row .input-field-prime__clear:hover { opacity: 1; } .find-a-store__header input { max-width: 300px; } .find-a-store__header__geolocate-container { display: flex; border: 1px solid #3d3935; padding: 0 !important; min-width: 34px; cursor: pointer; order: 6; } @media (max-width: 700px) { .find-a-store__header__geolocate-container { order: 3; } } .find-a-store__header__geolocate-container__icon { width: 40px; height: 40px; } .find-a-store__header__geolocate-container__icon svg { width: 40px; height: 40px; } .find-a-store__header__geolocate-container__icon svg:hover { fill: white; } .find-a-store__header__geolocate-container__icon:hover { background-color: #3d3935; } .find-a-store__header__distance-button { box-sizing: border-box; width: 152px; display: flex; cursor: pointer; color: #3d3935; } .find-a-store__header__distance-button__label { font-family: var(--font-oswald); font-size: 0.875rem; font-weight: 300; margin-right: 0.75rem; text-transform: uppercase; } .find-a-store__header__distance-button__selection { font-size: 0.875rem; font-weight: 600; margin-right: 3px; } .find-a-store__header__distance-button__icon { width: 20px; transition: all 0.25s ease-in-out; } .find-a-store__header__distance-button__icon svg { transform-origin: center center; fill: #3d3935; } .find-a-store__header__distance-button__icon--flip svg { transform: rotateX(-180deg); } .find-a-store__header__distance-button { order: 8; } @media (max-width: 700px) { .find-a-store__header__distance-button { order: 12; } } .find-a-store__header__distance-button:hover { color: #d14124; } .find-a-store__header__distance-button:hover svg { fill: #000; } .find-a-store__header button { line-height: 1.15; margin: 0; order: 10; padding: 0.6875rem 1.25rem; margin-right: 18px; } @media (max-width: 700px) { .find-a-store__header button { order: 7; } } .find-a-store__header__action { height: 40px; align-items: center; border: none; border-radius: 2.5rem; display: inline-flex; font-family: var(--font-oswald); font-size: 1rem; font-weight: 500; justify-content: center; min-height: 2.5rem; position: relative; text-decoration: none; text-transform: uppercase; cursor: pointer; } .find-a-store__header__action--primary { background: #3d3935; color: #fff; } .find-a-store__header__action--primary:hover { background: #000; color: #fff; } .find-a-store__distance-section { visibility: hidden; opacity: 0; width: 100%; height: 0; padding: 0; border-bottom: 1px solid #e0e0e0; transition: all 0.25s ease-in-out; display: flex; justify-content: center; } .find-a-store__distance-section__radio-group { display: flex; align-items: center; flex-wrap: wrap; min-width: 300px; } .find-a-store__distance-section__radio-group label { margin-right: 21px; } .find-a-store__distance-section__radio-group input[type=radio]:checked::after { color: #d14124; } .find-a-store__distance-section__radio-button-group { display: flex; align-items: center; justify-content: center; height: 55px; } .find-a-store__distance-section--expanded { visibility: visible; opacity: 1; height: 144px; padding: 15px; } .find-a-store__map-section { display: flex; flex-direction: column; justify-content: flex-start; } .find-a-store__map-section__alternative-content { display: flex; justify-content: center; width: 100%; padding-top: 34px; font-size: 18px; } @media (min-width: 800px) { .find-a-store__map-section { flex-direction: row; max-height: calc(100vh - 13rem); } } .find-a-store__map-section__store-list { flex: 4 1; max-width: 480px; padding-bottom: 34px; } .find-a-store__map-section__store-list__header { padding: 20px; } .find-a-store__map-section__store-list__header__heading-line { display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: center; } .find-a-store__map-section__store-list__header__heading-line h3 { font-size: 18px; } .find-a-store__map-section__store-list__header__heading-line span { font-size: 12px; } .find-a-store__map-section__store-list__container { height: calc(100% - 4.5rem); overflow-y: auto; scroll-behavior: scroll; } .find-a-store__map-section__store-list__container > section > div { display: flex; } .find-a-store__map-section__store-list__store { border: 1px solid #a1978c; margin-right: 13px; margin-bottom: 34px; margin-left: 21px; padding: 13px; } .find-a-store__map-section__store-list__store > * { margin-bottom: 8px; } .find-a-store__map-section__store-list__store h3 { font-size: 18px !important; } .find-a-store__map-section__store-list__store-location { display: flex; align-items: center; } .find-a-store__map-section__store-list__store-name--emphasized { color: #dc4405; } .find-a-store__map-section__store-list__store-address span { margin-right: 8px; } .find-a-store__map-section__store-list__location-icon-container { display: flex; position: relative; cursor: pointer; margin-top: 8px; margin-right: 3px; margin-bottom: 3px; margin-left: -8px; } .find-a-store__map-section__store-list__location-icon-container > span:nth-of-type(1) { display: flex; justify-content: center; width: 100%; cursor: pointer; position: absolute; color: #fff; font-family: var(--font-oswald); font-size: 0.7rem; font-weight: 300; left: 0px; top: 3px; z-index: 100; } .find-a-store__map-section__store-list__location-icon-container > svg { position: absolute; } .find-a-store__map-section__store-list__location-icon-container > svg circle { cursor: pointer; display: inline-block; fill: #d14124; } .find-a-store__map-section__store-list__location-icon-container__location-icon { cursor: default; } .find-a-store__map-section__store-list__location-icon-container__location-icon svg { cursor: pointer; width: 34px; height: 28px; fill: #d14124; } .find-a-store__map-section__store-list__location-icon-container:hover circle { fill: #3d3935; } .find-a-store__map-section__store-list__location-icon-container:hover svg { fill: #3d3935; } .find-a-store__map-section__store-list__store-hours { cursor: pointer; display: flex; justify-content: space-between; flex-wrap: nowrap; width: 100%; } .find-a-store__map-section__store-list__store-hours__heading { font-weight: 800; } .find-a-store__map-section__store-list__store-hours__icon { width: 20px; } .find-a-store__map-section__store-list__store-hours__icon svg { transition: all 0.25s ease-in-out; transform-origin: center center; } .find-a-store__map-section__store-list__store-hours__icon--flip svg { transform: rotateX(-180deg); } .find-a-store__map-section__store-list__weekly-store-hours { padding: 13px 13px 13px 0; } @media (max-width: 480px) { .find-a-store__map-section__store-list__weekly-store-hours > div { width: 50%; } } .find-a-store__map-section__store-list__weekly-store-hours > div { width: 45%; display: flex; justify-content: space-between; margin-bottom: 3px; } .find-a-store__map-section__store-list__weekly-store-hours > div > span:nth-of-type(1) { font-weight: 600; } .find-a-store__map-section__store-list__special-link { display: flex; align-items: center; cursor: pointer; } .find-a-store__map-section__store-list__special-link__icon { margin: 0 8px 0 0; width: 18px; height: 18px; } .find-a-store__map-section__store-list__special-link__icon > svg { width: 18px; height: 18px; } .find-a-store__map-section__store-list__special-link__icon__phone { margin: 0 5px 0 0; width: 25px; height: 25px; } .find-a-store__map-section__store-list__special-link__icon__phone > svg { width: 25px; height: 25px; fill: black; } .find-a-store__map-section__store-list__special-link > span { font-family: var(--font-montserrat); } .find-a-store__map-section__store-list__special-link:hover { color: #d14124; } .find-a-store__map-section__store-list__special-link:hover svg { fill: #d14124; } .find-a-store__map-section__store-list__store-hours:hover span { color: #d14124; } .find-a-store__map-section__store-list__store-hours:hover svg { fill: #d14124; stroke-width: 20px; } .find-a-store__map-section__store-list__footer { width: 100%; justify-content: center; padding: 20px; font-size: 16px; position: absolute; bottom: 0; background-color: #ffffff; } .find-a-store__map-section__map-container { flex: 4 1; order: -1; } .find-a-store__map-section__map-container button[title=Close] { visibility: hidden; } @media (min-width: 800px) { .find-a-store__map-section__map-container { flex: 5 1; order: 1; } } .modal-basic-generic .modal__close:hover { color: black; font-weight: 400; } .modal-basic-generic .modal__title { margin-bottom: 5px; } .modal-basic-generic .modal-basic__content { max-width: 610px; display: flex; flex-direction: column; align-items: center; justify-content: center; } .modal-basic-generic .modal-basic__content__message { margin-bottom: 21px; } .modal-basic-generic .modal-basic__content__actions { width: 100%; display: flex; justify-content: space-around; } .modal-basic-generic .modal-basic__content__actions button { cursor: pointer; letter-spacing: 0.02em; white-space: nowrap; margin: 0 0 13px 0; padding: 0.5625rem 1.25rem; background: #3d3935; border: 1px solid #3d3935; border-radius: 2rem !important; color: #ffffff; display: inline-block; fill: #ffffff; font-family: var(--font-oswald); font-size: 0.75rem; font-weight: 700; line-height: 1.2; min-width: 12em; text-align: center; text-decoration: none; text-transform: uppercase; } .modal-basic-generic .modal-basic__content__actions button:hover { background-color: black; } .modal-session-expired { height: 100%; display: flex; align-items: center; justify-content: center; padding: 1rem; } .modal-session-expired__content { border-radius: 0.75rem; background-color: white; max-width: 50rem; padding: 1rem; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 1.5rem; position: relative; max-width: 27.5rem; } @media (min-width: 45em) { .modal-session-expired__content { padding: 2.5rem; } } .modal-session-expired__content__header { width: 100%; font-weight: 500; position: relative; } @media (min-width: 45em) { .modal-session-expired__content__header { position: unset; text-align: center; } } .modal-session-expired__content__header h2 { font-size: 1.125rem; max-width: 25ch; } .modal-session-expired__content__header h2 + p { font-size: 1rem; margin: 0; margin-top: 0.5rem; } @media (min-width: 45em) { .modal-session-expired__content__header h2 { font-size: 2rem; max-width: 20ch; } .modal-session-expired__content__header h2 + p { font-size: 1.125rem; } } .modal-session-expired__content button.action { margin-top: 1rem; margin-right: 0; width: 100%; } .modal-session-expired__content button.action:disabled { cursor: not-allowed; } .modal-session-expired__close { position: absolute; margin: 0; top: 0; right: 0; padding: 0; } @media (min-width: 45em) { .modal-session-expired__close { top: 1.5rem; right: 1.5rem; } } /* Fonts */ .page-section-grill-meter { max-width: 90rem; position: relative; margin: 3rem auto; } .page-section-grill-meter--container { margin-right: auto; margin-left: auto; padding-left: 15px; padding-right: 15px; text-align: center; } @media (min-width: 48em) { .page-section-grill-meter--container { width: 45rem; } } @media (min-width: 62em) { .page-section-grill-meter--container { width: 60rem; } } @media (min-width: 75em) { .page-section-grill-meter--container { width: 70rem; } } .page-section-grill-meter--row { display: flex; justify-content: space-around; width: 100%; padding-top: 3rem; padding-bottom: 1rem; } @media (max-width: 30em) { .page-section-grill-meter--row { flex-direction: column; } } .page-section-grill-meter--col { position: relative; min-height: 1px; width: 33.33333333%; float: left; } @media (max-width: 30em) { .page-section-grill-meter--col { width: 100%; } .page-section-grill-meter--col:nth-child(2) { padding-top: 2rem; } } .page-section-grill-meter--col--label { color: #3d3935; padding: 5px 0; } .page-section-grill-meter--col h2 { font-size: 60px; text-transform: uppercase; color: #dc4405; } .page-section-grill-meter--col h3 { font-size: 20px; text-transform: uppercase; } .page-section-grill-meter--icon-wrapper { width: 95px; margin: 0 auto; } .page-section-grill-meter--call-to-action { margin: 0 auto; } .page-section-grill-meter--call-to-action .action { margin: 0; } .page-section-grill-meter--results-content { display: flex; flex-direction: column; padding-top: 20px; border-radius: 3em; background-color: #d8d7d7; width: 100%; margin: 0 auto; } @media (min-width: 62em) { .page-section-grill-meter--results-content { width: 80%; } } .page-section-grill-meter--results-content--title { width: 100%; } .page-section-grill-meter--results-content--title h2 { font-size: 1.25em; color: #dc4405; line-height: 1.3; font-weight: 700; text-transform: uppercase; } @media (min-width: 45em) { .page-section-grill-meter--results-content--title h2 { font-size: 1.875rem; } } .page-section-grill-meter .quick-add--quantity-selector-wrapper { flex-direction: column; margin: 1rem 0; } .page-section-grill-meter .quantity-selector { justify-content: center; } .page-section-iframe-loader-container { margin: 2rem auto; min-width: 100px; max-width: 1440px; min-height: 40px; max-height: 1080px; overflow: auto; } .page-section-iframe-loader-container--content { width: 100%; height: 100%; border: none; } .vertical-banner-tile { max-width: 23rem; margin: 0 auto; width: inherit; font-size: 25px; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; position: -webkit-sticky; position: sticky; } .vertical-banner-tile::after { content: ""; position: absolute; background: #3d3935; inset: 0; z-index: -1; opacity: 0.2; } @supports not (aspect-ratio: 1) { .vertical-banner-tile { padding-bottom: 1rem; } } @media (min-width: 35em) { .vertical-banner-tile { max-width: 23rem; margin: 0 auto; width: inherit; } } @media (max-width: 45em) { .vertical-banner-tile { box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.0509803922); border-radius: 12px; overflow: hidden; min-width: 160px; } } .vertical-banner-tile__image { height: 100%; position: absolute; overflow: hidden; } .vertical-banner-tile__image img { object-fit: cover; height: auto; } .vertical-banner-tile__image__favorite { position: absolute; top: 0.4375rem; left: 0.4375rem; border-radius: 100%; cursor: pointer; z-index: 20; transition: color 0.3s ease; display: flex; flex-direction: column; justify-content: center; align-items: center; } @media (min-width: 45em) { .vertical-banner-tile__image__favorite { top: 0.625rem; left: 0.625rem; } } .vertical-banner-tile__image__favorite .favorite-btn { background: transparent; border: none; color: #3d3935; cursor: pointer; padding: 0; text-align: left; height: auto; min-height: 0; min-width: 0; font-size: 1rem; font-weight: 500; line-height: normal; transition: none; text-transform: none; } .vertical-banner-tile__image__favorite .favorite-btn:hover, .vertical-banner-tile__image__favorite .favorite-btn:active, .vertical-banner-tile__image__favorite .favorite-btn:focus { color: #3d3935; background-color: transparent; border-color: transparent; } .vertical-banner-tile__image__favorite .favorite-btn svg { width: 1.5625rem; height: 1.4688rem; } @media (min-width: 45em) { .vertical-banner-tile__image__favorite .favorite-btn svg { width: unset; height: unset; } } .vertical-banner-caption { max-width: 80%; margin: auto; } .vertical-banner-caption .flatTextPod .text-H2 { margin-bottom: 1rem; } @media (max-width: 580px) { .vertical-banner-caption .flatTextPod .text-H2 { font-size: 1.3rem; } } .vertical-banner-media.responsive-media-pod img { z-index: -1; } .membership-terms-consent { margin-top: 1rem; display: flex; align-items: flex-start !important; gap: 0.5rem; } .membership-terms-consent input { margin-top: 3px; cursor: pointer; } .membership-terms-consent label { color: #000000; cursor: pointer; font-size: 0.875rem; } .membership-terms-consent .membership-consent-highlight { color: #d14124; font-weight: 600; } .membership-terms-consent .membership-consent-highlight a { color: #0000ee; } .membership-terms-consent .membership-consent-highlight a:hover { text-decoration: underline; } .billing-address-checkbox { margin-top: 1.625rem; } .update-payment-button-container { display: flex; justify-content: center; align-items: center; } .item { display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding: 0px; gap: 30px; margin-bottom: 15px; height: 98px; position: relative; } @media (max-width: 30em) { .item { gap: 10px; padding: 10px; } } @media (max-width: 75em) { .item { gap: 10px; } } .item-info { display: flex; flex-direction: row; align-items: flex-start; padding: 0px; gap: 12px; height: 98px; flex: none; order: 0; align-self: stretch; flex-grow: 0; } @media (min-width: 75em) { .item-info { gap: 24px; } } .item-image { position: relative; width: 98px; height: 98px; flex: none; order: 0; flex-grow: 0; } .item-image-placeholder { display: table; font-weight: 500; width: 98px; height: 100%; } .item-image-placeholder span { display: table-cell; vertical-align: middle; text-align: center; border: 1px solid #c6c6c6; background: #fafafa; } .item-image-favorite { z-index: 10; position: absolute; width: 100px; top: -8px; left: -8px; } .item-description { display: flex; flex-direction: column; align-items: flex-start; padding: 0px; width: 210px; flex: none; order: 1; flex-grow: 1; } @media (min-width: 45em) { .item-description { width: 30ch; } } .item-description__promotion-text { font-family: var(--font-oswald); font-weight: 500; font-size: 16px; line-height: 26px; text-transform: uppercase; color: #dc4405; } .item-desc1 { display: flex; flex-direction: column; align-items: flex-start; padding: 0px; gap: 2px; flex: none; order: 0; align-self: stretch; flex-grow: 0; } .item-title { font-family: var(--font-oswald); font-style: normal; font-weight: 600; font-size: 20px; line-height: 30px; text-transform: uppercase; color: #3d3935; flex: none; order: 0; align-self: stretch; flex-grow: 0; } .item-title a { max-height: 3em; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .item-measurements { font-family: var(--font-montserrat); font-style: normal; font-weight: 400; font-size: 16px; line-height: 20px; display: flex; align-items: center; color: #777472; flex: none; order: 1; flex-grow: 0; } .item-btns { width: 140px; } .item-btns .quick-add--quantity-selector-wrapper .quantity-selector { box-shadow: 0px 1.02px 2.04px rgba(16, 24, 40, 0.05); border-radius: 66.25px; } .item-btns .quick-add--quantity-selector-wrapper .quantity-selector-button { background: #fffbfe; } .item-btns .quick-add--quantity-selector-wrapper .quantity-selector-button-up, .item-btns .quick-add--quantity-selector-wrapper .quantity-selector-button-down, .item-btns .quick-add--quantity-selector-wrapper .quantity-selector-input { border: 1px solid #fffbfe; } .item-btns .quick-add--quantity-selector-wrapper .quantity-selector-button-up::after, .item-btns .quick-add--quantity-selector-wrapper .quantity-selector-button-up::before, .item-btns .quick-add--quantity-selector-wrapper .quantity-selector-button-down::after, .item-btns .quick-add--quantity-selector-wrapper .quantity-selector-button-down::before { background-color: #d14124; } .item-price { display: flex; flex-direction: column; align-items: flex-end; padding: 0px; gap: 9px; min-width: 170px; order: 2; flex-grow: 0; } .item-total-price { display: flex; flex-direction: row; justify-content: flex-end; align-items: flex-end; padding: 0px; gap: 4px; flex: none; order: 0; align-self: stretch; flex-grow: 0; } .item-price-approx { font-family: var(--font-montserrat); font-weight: 500; font-size: 12px; line-height: 15px; color: #3d3935; } .item-price-approx__discounted { color: #d14124; } .item-price-value { font-family: var(--font-oswald); font-style: normal; font-weight: 500; font-size: 24px; line-height: 30px; display: flex; align-items: flex-end; text-align: right; text-transform: uppercase; color: #3d3935; flex: none; order: 1; flex-grow: 0; } .item-price-unit { height: 16px; font-family: var(--font-oswald); font-style: normal; font-weight: 500; font-size: 16px; line-height: 16px; display: flex; align-items: center; text-align: right; letter-spacing: 0.02em; text-transform: uppercase; color: #3d3935; flex: none; order: 1; align-self: stretch; flex-grow: 0; justify-content: flex-end; } .item-remove { margin: 0 auto; width: 24px; height: 24px; flex: none; order: 3; flex-grow: 0; cursor: pointer; } .item-remove-button { background: transparent; border: none; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; } .card { display: flex; flex-direction: column; padding: 0px; gap: 10px; margin-bottom: 20px; background: #ffffff; box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05); border-radius: 10px; } .card img { width: 135px; height: auto; border-radius: 10px 0 0 0; } .card-product-details { display: flex; flex-direction: row; align-items: flex-start; padding: 0px 8px 0px 0px; gap: 8px; width: 100%; } .card-product-actions { display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding: 0px 20px 8px 100px; gap: 8px; height: 52px; flex: none; order: 1; align-self: stretch; flex-grow: 0; } .card-product-image { width: 100px; height: 100px; position: relative; } .card-product-description { display: flex; flex-direction: column; padding: 8px 0px 0px; gap: 8px; width: 65%; } .card-product-title { font-family: var(--font-oswald); font-weight: 500; font-size: 16px; line-height: 20px; text-transform: uppercase; } .card-top { display: flex; flex-direction: column; padding: 0px; gap: 4px; } .card-bottom__price-wrapper { display: flex; flex-direction: row; justify-content: space-between; align-items: flex-end; padding: 0px; width: 100%; gap: 4px; } .card-bottom__promotion-text { margin-top: 0.5rem; font-weight: 500; line-height: 16px; font-size: 14px; text-transform: uppercase; font-family: var(--font-oswald); color: #dc4405; letter-spacing: 0.28px; } .card-total-price { display: flex; flex-direction: row; align-items: flex-end; padding: 0px; gap: 0.25rem; } .approx { font-family: var(--font-montserrat); font-weight: 500; font-size: 12px; } .approx__discounted { color: #d14124; } .price { font-family: var(--font-oswald); font-weight: 600; font-size: 20px; line-height: 26px; order: 1; } .price:has(.price__discounted) { display: flex; gap: 4px; align-items: flex-end; } .price__discounted { color: #dc4405; } .price__before-discount { font-size: 12px; font-weight: 400; text-decoration: line-through; color: #777472; line-height: 20px; margin-right: 0px; } @media (min-width: 75em) { .price__before-discount { margin-right: 4px; } } .unit-price { font-weight: 600; font-size: 12px; } .unit-price__discount-wrapper { font-weight: 600; font-size: 12px; display: flex; gap: 4px; flex-wrap: wrap-reverse; } @media (min-width: 75em) { .unit-price__discount-wrapper { align-items: flex-end; } } .unit-price__discount-wrapper .discounted { color: #d14124; } @media (min-width: 75em) { .unit-price__discount-wrapper .discounted { font-size: 16px; line-height: 16px; } } .unit-price__discount-wrapper .price-before-discount { font-weight: 400; text-decoration: line-through; } @media (min-width: 75em) { .unit-price__discount-wrapper .price-before-discount { font-size: 14px; line-height: 14px; } } .card-product-measurement { width: 218px; height: 21.23px; font-family: var(--font-montserrat); font-style: normal; font-weight: 400; font-size: 14px; line-height: 18px; display: flex; align-items: center; color: #777472; flex: none; order: 1; align-self: stretch; flex-grow: 0; } .card-actions-left { cursor: pointer; width: -moz-fit-content; height: 100%; align-items: center; display: flex; } .card-actions-right { display: flex; flex-direction: row; align-items: center; padding: 0px; gap: 8px; height: 44px; flex: none; order: 0; flex-grow: 0; } .card-product-favorite .product-tile__gallery__image__favorite { z-index: 1; } .save-for-later { color: rgb(209, 65, 36); cursor: pointer; font-weight: 500; font-family: var(--font-oswald); text-decoration: underline; } @media (max-width: 600px) { .card { max-width: 100%; } } @media (min-width: 75em) { .mini-nav-carousel { padding-left: 1rem; padding-top: 1rem; } } .mini-nav-carousel .slick-slide > div { margin: 0 0.5rem; } @media (min-width: 45em) { .mini-nav-carousel .slick-list { padding-bottom: 1rem; margin-top: 1rem; } } .mini-nav-carousel .slick-track { display: flex !important; } .mini-nav-carousel .slick-slide { height: inherit !important; text-align: center; margin-right: 1rem; } @media (min-width: 60em) { .mini-nav-carousel .slick-slide { max-width: 7rem; } } .mini-nav-carousel .slick-slide > div, .mini-nav-carousel .slick-slide > div > div { height: 100%; } .mini-nav-carousel__image { aspect-ratio: 1; border-radius: 50%; max-width: 19rem; object-fit: cover; } .mini-nav-carousel__image :hover { opacity: 0.85; border-radius: 50%; background-color: #fff; } .mini-nav-carousel__text { display: block; font-family: var(--font-oswald); font-size: 14px; color: #3d3935; margin-top: 5px; margin-bottom: 10px; text-align: center; text-decoration: none; font-style: normal; font-weight: normal; position: relative; white-space: wrap; } @media (max-width: 60em) { .mini-nav-carousel__text { font-size: 20px; } } @media (max-width: 75em) { .mini-nav-carousel .arrow { top: 35%; } } @media (max-width: 45em) { .mini-nav-carousel .arrow { top: 41%; margin: 0 -10px; } } .mini-nav-carousel .arrow:disabled { display: none; } .autocomplete-container { position: fixed; display: flex; flex-grow: 1; margin-top: 1rem; background: #f2f2f2; filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25)); border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; left: 50%; transform: translateX(-50%); } @media (min-width: 60em) { .autocomplete-container { width: 95%; } } @media (min-width: 75em) { .autocomplete-container { width: unset; } } .product-container { flex: 1 1; display: flex; flex-direction: column; background-color: #f2f2f2; padding: 1.375rem 1.5rem 2.063rem; white-space: nowrap; border-bottom-right-radius: 10px; border: 1px solid rgba(128, 128, 128, 0.3490196078); border-left: none; width: 46.438rem; } .product-header { padding-bottom: 0.688rem; font-weight: 400; } .product-image { width: 100%; line-height: 0; } .product-image:has(.placeholder) { display: flex; flex-direction: column; justify-content: center; height: 156px; } .product-information { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; } .product-text-wrapper { margin-top: 6px; word-wrap: break-word; font-family: var(--font-oswald); font-style: normal; font-weight: 500; font-size: 1rem; line-height: 20px; color: #3d3935; white-space: normal; text-transform: uppercase; margin: 0.75rem 0 0.5rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; width: 100%; } .product-image-container { display: flex; flex-direction: row; gap: 1.5rem; } .product-item { width: 9.75rem; display: flex; flex-direction: column; justify-content: space-between; position: relative; } .product-item .link-wrapper { position: absolute; inset: 0; z-index: 1; } .product-item .quick-add { height: 45px; width: 100%; } .product-item .quick-add .quick-add__atc--oos { width: 20px !important; white-space: normal !important; padding: 20px 16px !important; } .product-item .quick-add .quick-add__atc--oos__text-content { width: 90px; } .product-item .quick-add .action--add-to-cart { width: 100%; } .product-item .product-tile__actions { padding-bottom: 0; } .product-item .product-tile__actions button.actions--change-to-shop { white-space: normal; z-index: 1; } .product-item .product-tile__actions .max-quantity-text { display: none; } .product-item .product-tile__pricing { margin-top: 1.125rem; } .product-item .product-tile__pricing .product-tile__packaging { display: none; } .product-item .product-tile__pricing .product-tile__pricing__price-per-unit { font-size: 12px; width: 50%; } .product-item .product-tile__pricing .product-tile__pricing__total-price__value { font-size: 18px; font-weight: 500; } .product-item .product-tile__pricing .product-tile__pricing__total-price__value__approx-icon { display: inline-block; transform: translateY(3px); } .results { position: absolute; z-index: 1; background-color: #ffffff; border-radius: 0px !important; margin-top: 36px; display: none; margin-left: 5px; width: 100%; } .item-wrapper { cursor: pointer; gap: 10px; display: flex; background: #f2f2f2; align-items: center; width: 100%; font-size: 14px; min-height: 50px; } .item-result { display: flex; justify-content: space-between; padding: 0.5rem 1.5rem; align-items: center; width: inherit; font-family: var(--font-montserrat); font-weight: 400; } .active { background-color: #f2f2f2; } .inactive { background-color: #ffffff; } .suggestion-wrapper { border-bottom-left-radius: 10px; border: 1px solid rgba(128, 128, 128, 0.3490196078); border-right: none; background-color: #ffffff; width: calc(100% - 46.438rem); } @media (min-width: 75em) { .suggestion-wrapper { min-width: 25.25rem; } } .placeholder { background-color: #d7d7d7; color: #000000; font-size: 10px; font-weight: 400; font-family: var(--font-oswald); display: flex; justify-content: center; align-items: center; text-transform: uppercase; width: 100%; aspect-ratio: 1/1; text-align: center; white-space: normal; line-height: normal; } @media (max-width: 60em) { .mph-container { padding: 16px; gap: 28px; display: flex; flex-direction: column; } } @media (max-width: 26.5em) { .mph-container { gap: 20px; } } .mph-results { position: absolute; z-index: 9999; width: 100%; background-color: #ffffff; filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25)); border: 1.5px solid #e8e7f2; border-radius: 0px 0px 10px 10px; } @media (max-width: 60em) { .mph-results { max-height: 75vh; overflow: scroll; } } .mph-item-wrapper { z-index: 99999; cursor: pointer; padding: 24px; gap: 10px; display: flex; height: 50px; align-items: center; background-color: #ffffff; } @media (min-width: 60em) { .mph-item-wrapper:hover { background-color: #f2f2f2; } } @media (max-width: 60em) { .mph-item-wrapper { height: 14px; padding: 0px; } } .mph-item-result { display: flex; justify-content: space-between; width: 100%; } .mph-list-header { height: 14px; left: 16px; top: 78px; font-family: var(--font-montserrat); font-style: normal; font-weight: 700; font-size: 16px; line-height: 14px; color: #3d3935; letter-spacing: 0px; } @media (min-width: 60em) { .mph-list-header { padding: 24px; text-transform: uppercase; font-size: 12px; color: #9e9c9a; } } @media (max-width: 26.5em) { .mph-list-header { font-size: 14px; font-weight: 600; line-height: 12px; } } .mph-item-title { font-family: var(--font-montserrat); font-style: normal; font-weight: 700; font-size: 14px; line-height: 14px; color: #3d3935; text-transform: capitalize; } @media (max-width: 60em) { .mph-item-title { font-weight: 500; font-size: 14px; color: #3d3935; } } @media (max-width: 26.5em) { .mph-item-title { font-size: 12px; } } .tc-item-wrapper { display: flex; flex-wrap: wrap; gap: 8px; } .tc-item-title { border: 1px solid #777472; padding: 4px 10px; border-radius: 8px; cursor: pointer; font-size: 14px; font-family: var(--font-montserrat); font-weight: 600; } @media (max-width: 26.5em) { .tc-item-title { font-size: 12px; } } .tc-container { display: flex; flex-direction: column; gap: 28px; padding: 16px; position: relative; z-index: inherit; } .rs-container { padding: 16px; gap: 28px; display: flex; flex-direction: column; } @media (max-width: 26.5em) { .rs-container { gap: 20px; } } .rs-item-result { display: flex; justify-content: space-between; width: 100%; align-items: center; } @media (max-width: 20em) { .rs-item-result a { width: 80%; } } .rs-icon-wrapper { display: flex; gap: 6px; align-items: center; } .rs-item-title { font-family: var(--font-montserrat); font-style: normal; font-weight: 500; font-size: 14px; line-height: 18px; color: #3d3935; text-transform: capitalize; min-width: 280px; } @media (max-width: 26.5em) { .rs-item-title { font-size: 12px; line-height: 14px; min-width: 240px; } } .rs-icon-update { color: #3d3935; } @media (max-width: 26.5em) { .rs-icon-update { font-size: 20px; } } @media (max-width: 26.5em) { .rs-icon-delete > svg { font-size: 20px; } } .rs-item-wrapper { z-index: 99999; cursor: pointer; padding: 24px; gap: 10px; display: flex; height: 50px; align-items: center; background-color: #ffffff; } @media (min-width: 60em) { .rs-item-wrapper:hover { background-color: #f2f2f2; } } @media (max-width: 60em) { .rs-item-wrapper { height: 24px; padding: 0px; } } .product-tile__gallery__image { min-height: 160px; } @media (min-width: 20em) { .product-tile__gallery__image { min-height: 170px; } } @media (min-width: 26.5em) { .product-tile__gallery__image { min-height: 183px; } } @media (min-width: 30em) { .product-tile__gallery__image { min-height: 204px; } } @media (min-width: 45em) { .product-tile__gallery__image { min-height: 220px; } } @media (min-width: 48em) { .product-tile__gallery__image { min-height: 252px; } } @media (min-width: 60em) { .product-tile__gallery__image { min-height: 320px; } } @media (min-width: 75em) { .product-tile__gallery__image { min-height: 254px; } } .product-tile__gallery__image.canada { min-height: unset; aspect-ratio: 1; } .col_1 { min-height: 398px; } @media (min-width: 75em) { .col_1 { min-height: 254px; } } @media (min-width: 48em) { .product-tile-carousel .product-tile__gallery__image { min-height: 332px; } } .product-info-skeleton { width: 100%; margin: 0 auto; } .product-info-skeleton__footer-inner { display: flex; justify-content: space-between; } .product-info-skeleton__footer-inner > span { width: 25%; } @media (min-width: 60em) { .product-info-skeleton__footer-sticky-inner { width: 280px; } } .product-info-skeleton__fav-btn { width: 50px; } /* Fonts */ .input-group { display: flex; gap: 10px; padding-top: 0px !important; margin-bottom: 0px !important; } .input-group input { flex: 1 1; padding: 8px; border: 1px solid #aaa; border-radius: 5px; } .input-group input::placeholder { transform: translate3d(0, 0, 0); text-align: left; } .form-text-field__text__field { margin-bottom: 0px; width: 80%; }