/*------------------------------------*\
#SETTINGS
\*------------------------------------*/
/*------------------------------------*\
#TYPOGRAPHY
\*------------------------------------*/
/* $font-size-yotta : 8.875rem !default; // 142px */
/* $font-size-zetta : 7.375rem !default; // 118px */
/* $font-size-exa : 6.250rem !default; // 100px */
/* $font-size-kilo : 1.750rem !default; // 28px */
/* $font-size-hecto : 1.500rem !default; // 24px */
/* $font-size-base : 1.000rem !default; // 16px Base font size */
/* $font-size-centi : 0.750rem !default; // 12px */
/* $font-size-micro : 0.625rem !default; // 10px */
/*------------------------------------*\
#COLORS
\*------------------------------------*/
/* $color-grey-2: #E6E9ED !default; */
/*------------------------------------*\
#SPACING-DEFAULTS
\*------------------------------------*/
/*------------------------------------*\
#ELEMENT-DEFAULTS
\*------------------------------------*/
/*------------------------------------*\
#BREAKPOINTS
\*------------------------------------*/
/**
* Returns the value of the `$key` value of a provided `$map`.
*/
/**
* Uses `getProperty()` to return a value from the `$colors` map.
*/
/**
* Uses `getProperty()` to return a value from the `$breakpoints` map.
*/
/*------------------------------------*\
#TYPOGRAPHY
\*------------------------------------*/
/*------------------------------------*\
#COLORS
\*------------------------------------*/
/*------------------------------------*\
#ELEMENT-DEFAULTS
\*------------------------------------*/
/*------------------------------------*\
#HEADER-DEFAULTS
\*------------------------------------*/
/*------------------------------------*\
#HORIZONTAL-SPACING
\*------------------------------------*/
/*------------------------------------*\
#BREAKPOINTS
\*------------------------------------*/
/*------------------------------------*\
#TRANSITIONS
\*------------------------------------*/
/*------------------------------------*\
#TOOLS
\*------------------------------------*/
/**
* Responsive Mixin
* This mixin is designed for a _cleaner_ first approach
* This means that css isn't overridden but rather replaced for
* different viewport widths; making it easier to inspect/debug css
*
* Usage:
* @include media-query(exclude-medium) { ... }
* @include media-query(medium-up-to-site) { ... }
* ... etc
*/
/**
* [Adds styles to allow an element's height scale proportionatelly]
* @param {[Number]} $width
* @param {[Number]} $height
*/
/**
* [Calculates the percentage aspect ratio (what % height is compared to the width)]
* @param {[Number]} $width
* @param {[Number]} $height
* @return {[Number(%)]}
*/
/**
* *****REMEMBER TO USE MARGIN OR PADDING AND NOT TOP/BOTTOM******
* [Calculates the center of an element in relation to a provided width and height.
* Useful to place an absolute element at the center of another when
* the positioned element cannot be the target's child ]
* @param {[Number]} $width
* @param {[Number]} $height
* @return {[Number(%)]}
*/
/**
* [In the awful case you can't use Flexbox to vertically align something]
* @param {[type]} $transform: false [Use transforms to align instead of the absolute trick]
* @param {[type]} $pos: absolute [position type]
* @param {[type]} $posAdj: 0 [position adjustment. If $transform is true, this value only affects the 'top' property.]
* @param {[type]} $alignHorizontal: false [Includes horizontal alignment]
*/
/**
* Generate Enumerated Class
* Iterates from 0 to the specified length and generates classes that set the specified property
* @param {[String]} $classname: required [Required: Specify the class name]
* @param {[String]} $property: $classname [Optional: Specify the enumerated property (if it's different from the name of the class)]
* @param {[Number]} $length: 10 [Optional: Specify the end of the loop]
* @param {[String]} $units: null [Optional: specify units to append to the enumerated property]
*/
/**
* [Strip the pesky units from values]
* @param {[Number]} $value
*/
/**
* [Fluid Type]
*/
/**
* Set size for color swatch
* @param {String} $size
* @param {String} $inset
*/
/*------------------------------------*\
#EXTERNALS
\*------------------------------------*/
.store-locator__detect-location {
margin-top: 0.5rem;
}
.store-locator__result-check:checked + .store-locator__result-content {
background-color: #E6E9ED;
}
.store-locator__result-content {
display: block;
padding: 40px 0;
}
.store-locator__result-content:hover {
cursor: pointer;
background-color: #F7F7F7;
}
.only-instock-checkbox-wrap {
margin-top: 40px;
}
.only-instock-checkbox-wrap input {
display: none;
}
.only-instock-checkbox-wrap input:checked + label:before {
left: 19px;
}
.only-instock-checkbox-wrap input:checked + label:after {
background-color: #000000;
}
.only-instock-checkbox-wrap label {
font-size: 14px;
font-weight: 400;
color: #323952;
padding-left: 44px;
position: relative;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
cursor: pointer;
}
.only-instock-checkbox-wrap label:before {
content: "";
position: absolute;
width: 14px;
height: 14px;
left: 3px;
border-radius: 50%;
background-color: #fff;
z-index: 2;
-webkit-transition: 0.2s ease-in-out left;
transition: 0.2s ease-in-out left;
}
.only-instock-checkbox-wrap label:after {
content: "";
position: absolute;
left: 0;
width: 36px;
background: #C6C6C6;
height: 20px;
border-radius: 20px;
z-index: 1;
-webkit-transition: 0.2s ease-in-out background;
transition: 0.2s ease-in-out background;
}
.storesnearyou {
padding: 19px 0;
margin-top: 30px;
border-bottom: solid 0.0625rem #E6E9ED;
border-top: solid 0.0625rem #E6E9ED;
font-size: 14px;
line-height: 17px;
}
@media (max-width: 47.9375rem) {
.storesnearyou {
margin-top: 40px;
}
}
.store-locator__results {
overflow: auto;
margin: 0;
width: auto;
}
.store-locator__result-item {
position: relative;
border-bottom: solid 0.0625rem #E6E9ED;
position: relative;
}
.store-locator__result-item address {
color: #000;
font-size: 14px;
}
.store-locator__result-item .store-name {
margin-bottom: 10px;
max-width: 75%;
color: #000;
}
@media (max-width: 47.9375rem) {
.store-locator__result-item .store-name {
max-width: calc(100% - 175px);
}
}
.store-locator__result-item .store-map {
margin-bottom: -10px;
max-width: 75%;
display: block;
}
@media (max-width: 47.9375rem) {
.store-locator__result-item .store-map {
max-width: calc(100% - 175px);
}
}
.store-locator__result-item .store-hours {
margin-bottom: 10px;
}
.store-locator__result-item .product-availability__item {
position: absolute;
right: 2px;
top: 40px;
color: #000;
}
@media (max-width: 47.9375rem) {
.store-locator__result-item .product-availability__item {
font-size: 14px;
}
}
.store-locator__result-item .product-availability__item:after {
content: "";
position: absolute;
left: -14px;
width: 8px;
height: 8px;
top: 6px;
border-radius: 100%;
background: red;
}
.store-locator__result-item .button-wrap {
position: absolute;
top: 40px;
right: 2px;
pointer-events: none;
}
.store-locator__result-item .button-wrap .button {
width: 150px;
padding: 9px 0;
border-radius: 5px;
background: transparent;
color: #000;
border: 1px solid #000;
font-size: 18px;
line-height: 25px;
letter-spacing: 0;
}
.store-locator__result-item .button-wrap .button.filled {
color: #fff;
background: #000;
width: 170px;
}
.store-locator__result-item .button-wrap .button[disabled], .store-locator__result-item .button-wrap .button.disabled, .store-locator__result-item .button-wrap .button[data-disabled] {
pointer-events: none;
cursor: pointer;
}
.store-locator__no-results {
margin: 40px auto 0;
}
@media (max-width: 47.9375rem) {
.store-locator__no-results {
margin-top: 20px;
}
}
.store-locator__actions {
padding-top: 1rem;
padding-bottom: 1rem;
}
@media (min-width: 48rem) {
.store-locator__results {
max-height: 30rem;
}
}
@media (max-width: 47.9375rem) {
.modal--store-locator {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.modal--store-locator .store-locator__form > .row {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
}
.modal--store-locator .window-modal__content {
max-width: 620px;
padding: 70px 40px 40px;
border-radius: 10px;
}
@media (max-width: 47.9375rem) {
.modal--store-locator .window-modal__content {
width: calc(100% - 40px);
max-width: calc(100% - 40px);
min-height: 282px;
max-height: 100%;
padding: 70px 20px 40px;
margin-top: 0;
overflow-y: scroll;
}
}
.modal--store-locator .window-modal__close {
top: 30px;
right: 40px;
height: 20px;
width: 21px;
}
.modal--store-locator .window-modal__close::after {
content: url('data:image/svg+xml; utf8, ');
width: 20px;
height: 21px;
}
@media (max-width: 47.9375rem) {
.modal--store-locator .window-modal__close {
right: 20px;
}
}
.modal--store-locator .form-intro__title {
margin: 0 auto 20px;
font-weight: 400;
font-size: 18px;
line-height: 22px;
letter-spacing: 0;
}
.modal--store-locator .form-control-label {
font-size: 12px;
line-height: 14px;
letter-spacing: 0;
}
.modal--store-locator .store-locator-input {
width: 100%;
max-width: 220px;
margin-right: 10px;
}
@media (max-width: 47.9375rem) {
.modal--store-locator .store-locator-input {
width: 58.5%;
padding-right: 10px;
margin-right: 0;
}
}
.modal--store-locator .store-locator-selector {
width: 100%;
max-width: 150px;
margin-right: 10px;
}
@media (max-width: 47.9375rem) {
.modal--store-locator .store-locator-selector {
width: 41.5%;
margin-right: 0;
}
}
@media screen and (min-width: 590px) and (max-width: 767px) {
.modal--store-locator .store-locator-selector {
max-width: calc(100% - 220px);
width: calc(100% - 220px);
}
.modal--store-locator .store-locator-selector .form-group {
max-width: 150px;
}
}
.modal--store-locator .store-locator-btn {
width: 100%;
max-width: 150px;
}
.modal--store-locator .store-locator-btn button {
font-size: 18px;
line-height: 25px;
letter-spacing: 0;
border-radius: 5px;
}
.modal--store-locator .store-locator__detect-location {
width: auto;
margin-top: 20px;
}
@media (max-width: 47.9375rem) {
.modal--store-locator .store-locator__detect-location {
margin-top: 18px;
margin-left: 15px;
}
}
.modal--store-locator .store-locator__detect-location button {
text-transform: capitalize;
font-family: "National", sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 17px;
letter-spacing: 0;
}
.store-locator__result-content.disabled:hover {
cursor: not-allowed;
}
/*------------------------------------*\
#COMPONENTS
\*------------------------------------*/
.cart {
padding-top: 2.25rem;
padding-bottom: 2.25rem;
}
.cart.cart--empty {
padding-top: 4.25rem;
padding-bottom: 5.5rem;
}
.cart.cart--empty .cart__header {
margin-bottom: 1rem;
}
.cart.cart--empty .cart__empty-message a {
text-decoration: underline;
}
@media (max-width: 30rem) {
.cart.cart--empty .cart__empty-message a {
white-space: nowrap;
}
}
.cart.cart--empty .cart__empty-message a:hover {
text-decoration: none;
}
.cart.cart--empty .pdp__recommendations {
padding-top: 4.5rem;
}
.cart.cart--empty .pdp__recommendations hr {
display: none;
}
.cart.cart--empty .pdp__recommendations .recommendations {
padding-left: 0;
padding-right: 0;
}
.cart.cart--empty .pdp__recommendations .recommendations .row .product-grid {
margin-top: -0.625rem;
margin-bottom: -0.625rem;
}
.cart.cart--empty .pdp__recommendations .recommendations .row .product-grid .col-6 {
margin-top: 0.625rem;
margin-bottom: 0.625rem;
}
.cart.cart--empty .pdp__recommendations .recommendations h2 {
font-family: aktiv-grotesk-condensed, sans-serif;
font-size: 21px !important;
font-weight: 400 !important;
text-transform: uppercase !important;
text-align: center;
margin: 1vw auto 3vw;
border: unset;
}
.cart.cart--empty .pdp__recommendations .recommendations .product-tile__image {
opacity: 1;
}
@media only screen and (min-width: 48rem) {
.cart.cart--empty .pdp__recommendations .recommendations {
padding-left: 0.625rem;
padding-right: 0.625rem;
}
.cart.cart--empty .pdp__recommendations .recommendations .row .product-grid,
.cart.cart--empty .pdp__recommendations .recommendations .row .product-grid .col-6 {
margin-top: 0;
margin-bottom: 0;
}
.cart.cart--empty .pdp__recommendations .recommendations h2 {
margin: 1vw auto;
}
}
.cart.cart--empty .saveforlater {
margin-top: 5rem;
}
.cart__header {
margin-bottom: 2.25rem;
}
.cart__items {
border-top: solid 0.0625rem #EFEFEF;
border-bottom: solid 0.0625rem #EFEFEF;
}
.cart__items-footer {
padding-top: 1rem;
padding-bottom: 1rem;
}
.cart__empty-signin {
margin-top: 30px;
text-align: center;
}
.cart__empty-signin .button {
min-width: 372px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
@media (max-width: 30rem) {
.cart__empty-signin .button {
min-width: 0;
width: 100%;
}
}
.idme-promo-message {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 100%;
height: 45px;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background-color: #dcfdf6;
border: 1px solid #76D5B3;
border-radius: 3px;
font-weight: 600;
font-size: 16px;
line-height: 100%;
letter-spacing: 0;
text-align: center;
}
@media (max-width: 47.9375rem) {
.idme-promo-message {
height: 38px;
margin-bottom: 10px;
font-size: 14px;
padding: 0 5px;
}
}
.cart-coupon,
.cart-promotion {
margin-bottom: 1rem;
padding: 0.75rem 1rem;
border-radius: 0.1875rem;
}
.cart-coupon:first-child,
.cart-promotion:first-child {
margin-top: 2rem;
}
.cart-coupon {
background-color: #F7F7F7;
border: solid 0.0625rem #EFEFEF;
}
.cart-coupon.inline-prompt-container.toggle--active {
margin: 18px 0 32px;
}
.cart-coupon__remove-action {
margin-left: 0.5rem;
}
.cart-promotion {
border: solid 0.0625rem #00D3A7;
background-color: #d3fff6;
}
.cart-promotion__discount {
margin-left: 0.25em;
}
.cart__summary-section .prompt-container svg.icon {
display: none;
}
.approaching-discounts__item {
margin: 1rem 0;
}
.scroll-to-promo {
text-decoration: underline;
}
.cart__promotions {
scroll-margin-top: 150px;
scroll-margin-bottom: 150px;
}
.cart__applypromo {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
margin-bottom: 15px;
}
.cart__summary-section:not(:last-child) {
margin-bottom: 1.5rem;
}
#bolt-button-wrapper {
max-width: none;
}
#bolt-button-wrapper [data-tid=instant-bolt-checkout-button] > svg {
max-width: 100%;
width: 100%;
background-color: #292C2E;
border-radius: 5px;
}
#bolt-button-wrapper [data-tid=apple-pay-button] {
width: 100%;
background-color: black;
border-radius: 5px;
}
.cart__checkout-actions {
z-index: 0;
position: relative;
}
@media (max-width: 47.9375rem) {
.cart__checkout-actions {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background: #FFF;
border-top: 1px solid #C7C7C7;
padding: 15px 10px;
z-index: 100;
margin: 0;
}
.cart__checkout-actions.cart__summary-section:not(:last-child) {
margin: 0;
}
.cart__checkout-actions #bolt-button-wrapper {
max-width: none;
}
.cart__checkout-actions [data-tid=instant-bolt-checkout-button] > svg,
.cart__checkout-actions [data-tid=apple-pay-button] {
max-width: none;
width: 100%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-radius: 5px;
display: block;
}
.cart__checkout-actions svg[class*=__bolt] g.b {
fill: #000 !important;
}
.cart__checkout-actions svg[class*=__bolt] rect.brect {
stroke: #000 !important;
}
.cart__checkout-actions #or-buy-with {
color: #7C7C7C !important;
font-size: 14px !important;
line-height: 18px !important;
margin: 10px 0 !important;
text-transform: lowercase;
}
}
.cart__checkout-action:not(:first-child) {
margin-top: 1.5rem;
}
.cart__checkout-action.button--apple-pay:not(:first-child), .cart__checkout-action.button--apple-pay:hover:not(:first-child), .cart__checkout-action.button--apple-pay:active:not(:first-child) {
margin-top: 1.5rem;
}
@media (max-width: 47.9375rem) {
.cart__summary {
margin-top: 2rem;
}
}
.idme-discount a {
text-decoration: underline;
}
.total-list__row:not(:first-child) {
margin-top: 0.75em;
}
.saveforlater {
margin-top: 2rem;
padding: 1rem;
border: solid 0.0625rem #EFEFEF;
border-radius: 0.25rem;
}
.saveforlater .saveforlater__price-qty .price .strike-through {
text-decoration: none;
}
.saveforlater__add-to-cart-cta {
margin-top: 1.25rem;
}
@media (max-width: 47.9375rem) {
.saveforlater__price-qty {
margin-top: 1.25rem;
}
}
.idme-container {
border-top: 1px solid #b9b9b9;
margin-top: 20px;
color: black;
margin-bottom: -10px;
border-bottom: 1px solid #b9b9b9;
}
@media (min-width: 64.0625rem) {
.idme-container {
margin-bottom: -30px;
border-bottom: none;
}
}
.idme-container .idme-switch {
height: 50px;
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: relative;
background-image: url('data:image/svg+xml; utf8, ');
background-position: calc(100% - 6px), center;
background-repeat: no-repeat;
background-size: 16px 17px;
font-weight: 500;
font-size: 14px;
letter-spacing: 0;
line-height: 150%;
cursor: pointer;
}
.idme-container .idme-switch.active {
background-image: url('data:image/svg+xml; utf8, ');
}
.idme-container .idme-switch .verify-with {
margin-left: 5px;
margin-right: 8px;
}
.idme-container .idme-switch .idme-logo {
display: block;
width: 47px;
height: 17px;
background-image: url('data:image/svg+xml; utf8, ');
background-position: center;
background-repeat: no-repeat;
background-size: 47px 17px;
}
.idme-container .idme-content {
display: none;
margin-bottom: 15px;
}
.idme-container .idme-switch.active + .idme-content {
display: block;
}
.idme-container #idme-custom-widget-button {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 44px;
min-width: 220px;
width: 100%;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
background-color: #08833D;
border-radius: 3px;
}
symbol#idme-custom-wallet .idme-st0 {
fill-rule: evenodd;
clip-rule: evenodd;
fill: #08833d;
}
symbol#idme-custom-wallet .idme-st1 {
fill-rule: evenodd;
clip-rule: evenodd;
fill: #ffffff;
}
symbol#idme-custom-wallet .idme-st2 {
enable-background: new;
}
symbol#idme-custom-wallet .idme-st3 {
fill: #ffffff;
}
.idme-subtext-switch {
display: block;
margin: 10px 0 5px;
font-weight: 400;
font-size: 12px;
line-height: 18px;
letter-spacing: 0;
text-decoration: underline;
cursor: pointer;
}
.idme-subtext-content {
display: none;
font-weight: 400;
font-size: 12px;
line-height: 18px;
letter-spacing: 0;
}
.idme-subtext-switch.active + .idme-subtext-content {
display: block;
}
.idme-trigger-link {
background: #08833d;
border-radius: 5px;
text-align: center;
}
.idme-subtext p {
font-size: 14px;
line-height: 20px;
color: #000;
text-align: center;
letter-spacing: 0;
}
.idme-button {
margin: 10px 0;
width: 100%;
height: 45px;
background-color: #08833d;
text-align: center;
border-radius: 5px;
}
.idme-button > img {
display: inline-block;
vertical-align: middle;
height: 45px;
}
#idme-verification .idme-trigger {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
margin: 5px 0 0;
}
#idme-verification .idme-trigger .idme-description {
display: none;
margin: 10px auto;
padding-bottom: 0;
}
/*# sourceMappingURL=cartMain.css.map*/