/*-------------------------------------------
* Wishlist CSS tokens
* For exceeding file size purposes, this file contains only the CSS variables
* CSS tokens which need to use Themes Settings are in wishlist-css-token.css file
*------------------------------------------*/
:root {
    --theme-success-text: rgb(var(--success-text));
    --theme-success-background: rgb(var(--success-background));
    --theme-error-text: rgb(var(--error-text));
    --theme-error-background: rgb(var(--error-background));

    --theme-heading-font-family: var(--font-heading-family);
    --theme-heading-text-transform: var(--heading-text-transform);

    --theme-text-font-family: var(--font-body-family);
    --theme-text-font-size: var(--text-base);
    --theme-text-letter-spacing: var(--text-letter-spacing);
    --theme-text-line-height: 1.6;

    --theme-button-font-size: 1.5rem;
    --theme-button-letter-spacing: .1rem;
    --theme-button-line-height: calc(1 + .2 / var(--font-body-scale));
    --theme-button-height: calc(4.5rem + var(--buttons-border-width) * 2);
    --theme-button-border-radius: var(--buttons-radius-outset);
    --theme-button-text-transform: var(--button-text-transform);
    --theme-button-text-color: rgb(var(--color-button-text));
    --theme-button-background-color: rgb(var(--color-button));
    --theme-button-shadow-horizontal-offset: var(--buttons-shadow-horizontal-offset);
    --theme-button-shadow-vertical-offset: var(--buttons-shadow-vertical-offset);
    --theme-button-shadow-blur-radius: var(--buttons-shadow-blur-radius);
    --theme-button-shadow-color: var(--color-shadow);
    --theme-button-shadow-opacity: var(--buttons-shadow-opacity);

    /* page content styles */
    --ooo-wl-page-content-separation-color: none;

    /* product card container styles */
    --ooo-wl-page-product-card-gap: 1.25rem;
    --ooo-wl-page-product-card-info-wrapper-gap: .5rem;

    --ooo-wl-page-product-card-container-row-gap: calc(var(--grid-mobile-vertical-spacing) + 1rem);
    --ooo-wl-page-product-card-container-column-gap: var(--grid-mobile-horizontal-spacing);

    /* product card vendor */
    --ooo-wl-page-product-card-vendor-color: rgb(var(--color-foreground) / .7);
    --ooo-wl-page-product-card-vendor-font-size: 1rem;
    --ooo-wl-page-product-card-vendor-font-family: var(--theme-heading-font-family);
    --ooo-wl-page-product-card-vendor-letter-spacing: .13rem;
    --ooo-wl-page-product-card-vendor-line-height: calc(1 + .4 / var(--font-body-scale));
    --ooo-wl-page-product-card-vendor-text-transform: uppercase;
    --ooo-wl-page-product-card-vendor-order: 1;

    /* product card title */
    --ooo-wl-page-product-card-title-font-size:  calc(var(--font-heading-scale) * 1.2rem);
    --ooo-wl-page-product-card-title-font-family: var(--theme-heading-font-family);
    --ooo-wl-page-product-card-title-letter-spacing: calc(var(--font-heading-scale) * .06rem);
    --ooo-wl-page-product-card-title-line-height: calc(1 + .3 / max(1, var(--font-heading-scale)));
    --ooo-wl-page-product-card-title-order: 0;

    /* product card price */
    --ooo-wl-page-product-card-price-color: rgb(var(--color-foreground));
    --ooo-wl-page-product-card-price-font-size: 1.6rem;
    --ooo-wl-page-product-card-price-font-family: var(--theme-text-font-family);
    --ooo-wl-page-product-card-price-letter-spacing: calc(var(--font-heading-scale) * .06rem);
    --ooo-wl-page-product-card-price-line-height: calc(1 + .5 / var(--font-body-scale));
    --ooo-wl-page-product-card-price-order: 2;
    --ooo-wl-page-product-card-price-gap: 1rem;
    --ooo-wl-page-product-card-price-margin-block: .25rem;

    /* product card compare at price */
    --ooo-wl-page-product-card-compare-at-price-color: rgba(var(--color-foreground), .75);
    --ooo-wl-page-product-card-compare-at-price-font-size: 1.3rem;
    --ooo-wl-page-product-card-compare-at-price-font-family: var(--theme-text-font-family);
    --ooo-wl-page-product-card-compare-at-price-letter-spacing: .1rem;
    --ooo-wl-page-product-card-compare-at-price-line-height: calc(1 + .5 / var(--font-body-scale));
    --ooo-wl-page-product-card-price-order-compare: 1;

    /* product card unit price */
    --ooo-wl-page-product-card-unit-price-color: rgba(var(--color-foreground),.7);
    --ooo-wl-page-product-card-unit-price-font-size: 1.1rem;
    --ooo-wl-page-product-card-unit-price-font-family: var(--theme-text-font-family);
    --ooo-wl-page-product-card-unit-price-letter-spacing: .07rem;
    --ooo-wl-page-product-card-unit-price-line-height: calc(1 + .2 / var(--font-body-scale));

    /* product card form */
    --ooo-wl-page-product-card-form-select-color: rgba(var(--color-foreground),.75);
    --ooo-wl-page-product-card-form-select-font-size: 1.2rem;
    --ooo-wl-page-product-card-form-select-font-family: var(--theme-text-font-family);
    --ooo-wl-page-product-card-form-select-letter-spacing: .04rem;
    --ooo-wl-page-product-card-form-select-border-radius: var(--inputs-radius);
    --ooo-wl-page-product-card-form-select-padding-inline: 2rem calc(var(--inputs-border-width) + 3rem);
    --ooo-wl-page-product-card-form-select-padding-block: 0;
    --ooo-wl-page-product-card-form-select-height: 4.5rem;

    --ooo-wl-page-product-card-form-button-color: var(--theme-button-text-color);
    --ooo-wl-page-product-card-form-button-font-size: var(--theme-button-font-size);
    --ooo-wl-page-product-card-form-button-letter-spacing: var(--theme-button-letter-spacing);
    --ooo-wl-page-product-card-form-button-line-height: var(--theme-button-line-height);
    --ooo-wl-page-product-card-form-button-text-transform: var(--theme-button-text-transform);
    --ooo-wl-page-product-card-form-button-background: var(--theme-button-background-color);
    --ooo-wl-page-product-card-form-button-border-radius: var(--theme-button-border-radius);
    --ooo-wl-page-product-card-form-button-padding: 0 3rem;
    --ooo-wl-page-product-card-form-button-height: auto;
    --ooo-wl-page-product-card-form-button-min-height: var(--theme-button-height);
    --ooo-wl-page-product-card-form-button-margin-block: 0;
    --ooo-wl-page-product-card-form-button-outline-border-color: rgb(var(--color-secondary-button-text));
    --ooo-wl-page-product-card-form-button-shadow-horizontal-offset: var(--theme-button-shadow-horizontal-offset);
    --ooo-wl-page-product-card-form-button-shadow-vertical-offset: var(--theme-button-shadow-vertical-offset);
    --ooo-wl-page-product-card-form-button-shadow-blur-radius: var(--theme-button-shadow-blur-radius);
    --ooo-wl-page-product-card-form-button-shadow-color: var(--theme-button-shadow-color);
    --ooo-wl-page-product-card-form-button-shadow-opacity: var(--theme-button-shadow-opacity);


    /* empty page styles */
    --ooo-wl-page-empty-title-font-family: var(--theme-heading-font-family);
    --ooo-wl-page-empty-title-text-transform: var(--theme-heading-text-transform);
    --ooo-wl-page-empty-button-color: var(--theme-button-text-color);
    --ooo-wl-page-empty-button-font-size: var(--theme-button-font-size);
    --ooo-wl-page-empty-button-letter-spacing: var(--theme-button-letter-spacing);
    --ooo-wl-page-empty-button-line-height: var(--theme-button-line-height);
    --ooo-wl-page-empty-button-text-transform: var(--theme-button-text-transform);
    --ooo-wl-page-empty-button-background: var(--theme-button-background-color);
    --ooo-wl-page-empty-button-border-radius: var(--theme-button-border-radius);
    --ooo-wl-page-empty-button-width: 100%;
    --ooo-wl-page-empty-button-padding: 0;
    --ooo-wl-page-empty-button-min-height: var(--theme-button-height);
    --ooo-wl-page-empty-button-shadow-horizontal-offset: var(--theme-button-shadow-horizontal-offset);
    --ooo-wl-page-empty-button-shadow-vertical-offset: var(--theme-button-shadow-vertical-offset);
    --ooo-wl-page-empty-button-shadow-blur-radius: var(--theme-button-shadow-blur-radius);
    --ooo-wl-page-empty-button-shadow-color: var(--theme-button-shadow-color);
    --ooo-wl-page-empty-button-shadow-opacity: var(--theme-button-shadow-opacity);


    /* not accessible page styles */
    --ooo-wl-page-not-accessible-title-font-family: var(--theme-heading-font-family);
    --ooo-wl-page-not-accessible-title-text-transform: var(--theme-heading-text-transform);
    --ooo-wl-page-not-accessible-button-color: var(--theme-button-text-color);
    --ooo-wl-page-not-accessible-button-font-size: var(--theme-button-font-size);
    --ooo-wl-page-not-accessible-button-letter-spacing: var(--theme-button-letter-spacing);
    --ooo-wl-page-not-accessible-button-line-height: var(--theme-button-line-height);
    --ooo-wl-page-not-accessible-button-text-transform: var(--theme-button-text-transform);
    --ooo-wl-page-not-accessible-button-background: var(--theme-button-background-color);
    --ooo-wl-page-not-accessible-button-border-radius: var(--theme-button-border-radius);
    --ooo-wl-page-not-accessible-button-width: 100%;
    --ooo-wl-page-not-accessible-button-padding: 0;
    --ooo-wl-page-not-accessible-button-min-height: var(--theme-button-height);
    --ooo-wl-page-not-accessible-button-shadow-horizontal-offset: var(--theme-button-shadow-horizontal-offset);
    --ooo-wl-page-not-accessible-button-shadow-vertical-offset: var(--theme-button-shadow-vertical-offset);
    --ooo-wl-page-not-accessible-button-shadow-blur-radius: var(--theme-button-shadow-blur-radius);
    --ooo-wl-page-not-accessible-button-shadow-color: var(--theme-button-shadow-color);
    --ooo-wl-page-not-accessible-button-shadow-opacity: var(--theme-button-shadow-opacity);


    /* popup login styles */
    --ooo-wl-popup-title-font-family: var(--theme-heading-font-family);
    --ooo-wl-popup-title-text-transform: var(--theme-heading-text-transform);
    --ooo-wl-popup-button-color: var(--theme-button-text-color);
    --ooo-wl-popup-button-font-size: var(--theme-button-font-size);
    --ooo-wl-popup-button-letter-spacing: var(--theme-button-letter-spacing);
    --ooo-wl-popup-button-line-height: var(--theme-button-line-height);
    --ooo-wl-popup-button-text-transform: var(--theme-button-text-transform);
    --ooo-wl-popup-button-background: var(--theme-button-background-color);
    --ooo-wl-popup-button-border-radius: var(--theme-button-border-radius);
    --ooo-wl-popup-button-padding: 0;
    --ooo-wl-popup-button-min-height: var(--theme-button-height);
    --ooo-wl-popup-button-shadow-horizontal-offset: var(--theme-button-shadow-horizontal-offset);
    --ooo-wl-popup-button-shadow-vertical-offset: var(--theme-button-shadow-vertical-offset);
    --ooo-wl-popup-button-shadow-blur-radius: var(--theme-button-shadow-blur-radius);
    --ooo-wl-popup-button-shadow-color: var(--theme-button-shadow-color);
    --ooo-wl-popup-button-shadow-opacity: var(--theme-button-shadow-opacity);

    /* share wishlist button */
    --ooo-wl-copy-button-font-size: var(--theme-button-font-size);
    --ooo-wl-copy-button-font-family: var(--theme-button-font-family);
    --ooo-wl-copy-button-letter-spacing: var(--theme-button-letter-spacing);
    --ooo-wl-copy-button-line-height: var(--theme-button-line-height);
    --ooo-wl-copy-button-text-transform: var(--theme-button-text-transform);
    --ooo-wl-copy-button-border-radius: var(--theme-button-border-radius);
    --ooo-wl-copy-button-min-height: var(--theme-button-height);
}

@media screen and (min-width: 750px) {
    :root {
        --ooo-wl-page-product-card-container-row-gap: calc(var(--grid-mobile-vertical-spacing) + 1.7rem);
    }
}

/*-------------------------------------------
* Wishlist page - tooltip notification
*------------------------------------------*/
ooo-wl-tooltip {
    --ooo-wl-page-product-card-form-tooltip-success-color: var(--theme-success-text);
    --ooo-wl-page-product-card-form-tooltip-success-background: var(--theme-success-background);
    --ooo-wl-page-product-card-form-tooltip-error-color: var(--theme-error-text);
    --ooo-wl-page-product-card-form-tooltip-error-background: var(--theme-error-background);
    --ooo-wl-page-product-card-form-tooltip-letter-spacing: var(--theme-text-letter-spacing);
}

/*-------------------------------------------
* Product page - Add to wishlist button
*------------------------------------------*/
:root {
    --ooo-wl-product-page-button-font-family: var(--theme-button-font-family);
    --ooo-wl-product-page-button-font-size: var(--theme-button-font-size);
    --ooo-wl-product-page-button-letter-spacing: var(--theme-button-letter-spacing);
    --ooo-wl-product-page-button-line-height: var(--theme-button-line-height);
    --ooo-wl-product-page-button-text-transform: var(--theme-button-text-transform);
    --ooo-wl-product-page-button-height: var(--theme-button-height);
    --ooo-wl-product-page-button-min-width: calc(12rem + var(--buttons-border-width) * 2);
    --ooo-wl-product-page-button-width: 100%;
    --ooo-wl-product-page-button-max-width: 44rem;
    --ooo-wl-product-page-button-border-radius: var(--theme-button-border-radius);
    --ooo-wl-product-page-button-justify-self: start;
}