/*-------------------------------------------
* 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(--prestige-heading-font-family);
    --theme-heading-font-size: var(--prestige-heading-font-size);
    --theme-heading-letter-spacing: var(--prestige-heading-letter-spacing);
    --theme-heading-text-transform: var(--prestige-heading-text-transform);

    --theme-text-line-height: 1.7;
    --theme-text-letter-spacing: var(--text-letter-spacing);
    --theme-text-price-color: rgb(var(--prestige-text-color) / .65);

    --theme-button-padding-block: .65rem;
    --theme-button-padding-inline: 1.75rem;
    --theme-button-text-transform: var(--button-text-transform);
    --theme-button-font-size: var(--text-sm);
    --theme-button-letter-spacing: var(--button-letter-spacing);
    --theme-button-border-radius: var(--button-border-radius);
    --theme-button-background-color: rgb(var(--prestige-button-background-color));
    --theme-button-text-color: rgb(var(--prestige-button-text-color));
    --theme-button-font-family: var(--prestige-button-font-family);

    /* 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: 2.5rem;
    --ooo-wl-page-product-card-container-column-gap: 1.5rem;

    /* product card vendor */
    --ooo-wl-page-product-card-vendor-font-family: var(--theme-heading-font-family);
    --ooo-wl-page-product-card-vendor-font-size: .625rem;
    --ooo-wl-page-product-card-vendor-line-height: var(--theme-text-line-height);
    --ooo-wl-page-product-card-vendor-letter-spacing: var(--theme-heading-letter-spacing);
    --ooo-wl-page-product-card-vendor-text-transform: var(--theme-heading-text-transform);

    /* product card title */
    --ooo-wl-page-product-card-title-font-family: var(--theme-heading-font-family);
    --ooo-wl-page-product-card-title-font-size: var(--theme-heading-font-size);
    --ooo-wl-page-product-card-title-line-height: var(--theme-text-line-height);
    --ooo-wl-page-product-card-title-letter-spacing: var(--theme-heading-letter-spacing);
    --ooo-wl-page-product-card-title-text-transform: var(--theme-heading-text-transform);

    /* product card price */
    --ooo-wl-page-product-card-price-font-family: var(--theme-heading-font-family);
    --ooo-wl-page-product-card-price-font-size: var(--theme-heading-font-size);
    --ooo-wl-page-product-card-price-line-height: var(--theme-text-line-height);
    --ooo-wl-page-product-card-price-color: var(--theme-text-price-color);
    --ooo-wl-page-product-card-price-letter-spacing: var(--theme-heading-letter-spacing);
    --ooo-wl-page-product-card-price-color-compare: rgb(var(--on-sale-text));

    /* product card compare at price */
    --ooo-wl-page-product-card-compare-at-price-font-family: var(--theme-heading-font-family);
    --ooo-wl-page-product-card-compare-at-price-font-size: var(--theme-heading-font-size);
    --ooo-wl-page-product-card-compare-at-price-line-height: var(--theme-text-line-height);
    --ooo-wl-page-product-card-compare-at-price-color: var(--theme-text-price-color);
    --ooo-wl-page-product-card-compare-at-price-letter-spacing: var(--theme-heading-letter-spacing);

    /* product card unit price */
    --ooo-wl-page-product-card-unit-price-font-family: var(--theme-heading-font-family);
    --ooo-wl-page-product-card-unit-price-font-size: var(--theme-heading-font-size);
    --ooo-wl-page-product-card-unit-price-line-height: var(--theme-text-line-height);
    --ooo-wl-page-product-card-unit-price-color: var(--theme-text-price-color);
    --ooo-wl-page-product-card-unit-price-letter-spacing: var(--theme-heading-letter-spacing);

    /* product card form */
    --ooo-wl-page-product-card-form-select-font-size: var(--text-base);
    --ooo-wl-page-product-card-form-select-padding-block: var(--input-padding-block);
    --ooo-wl-page-product-card-form-select-padding-inline: var(--input-padding-inline) calc(3 * var(--input-padding-inline));
    --ooo-wl-page-product-card-form-select-border-radius: var(--input-border-radius);
    --ooo-wl-page-product-card-form-select-letter-spacing: var(--theme-text-letter-spacing);
    --ooo-wl-page-product-card-form-select-error-border-color: rgb(var(--error-text));

    --ooo-wl-page-product-card-form-button-font-family: var(--theme-button-font-family);
    --ooo-wl-page-product-card-form-button-font-size: var(--theme-button-font-size);
    --ooo-wl-page-product-card-form-button-height: auto;
    --ooo-wl-page-product-card-form-button-padding: var(--theme-button-padding-block) var(--theme-button-padding-inline);
    --ooo-wl-page-product-card-form-button-margin-block: 0;
    --ooo-wl-page-product-card-form-button-text-transform: var(--theme-button-text-transform);
    --ooo-wl-page-product-card-form-button-letter-spacing: var(--theme-button-letter-spacing);
    --ooo-wl-page-product-card-form-button-border-radius: var(--theme-button-border-radius);
    --ooo-wl-page-product-card-form-button-background: var(--theme-button-background-color);
    --ooo-wl-page-product-card-form-button-color: var(--theme-button-text-color);

    /* 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-font-family: var(--theme-button-font-family);
    --ooo-wl-page-empty-button-font-size: var(--theme-button-font-size);
    --ooo-wl-page-empty-button-padding: var(--theme-button-padding-block) var(--theme-button-padding-inline);
    --ooo-wl-page-empty-button-border-radius: var(--theme-button-border-radius);
    --ooo-wl-page-empty-button-text-transform: var(--theme-button-text-transform);
    --ooo-wl-page-empty-button-letter-spacing: var(--theme-button-letter-spacing);
    --ooo-wl-page-empty-button-color: var(--theme-button-text-color);
    --ooo-wl-page-empty-button-background: var(--theme-button-background-color);

    /* 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-font-family: var(--theme-button-font-family);
    --ooo-wl-page-not-accessible-button-font-size: var(--theme-button-font-size);
    --ooo-wl-page-not-accessible-button-width: 100%;
    --ooo-wl-page-not-accessible-button-padding: var(--theme-button-padding-block) var(--theme-button-padding-inline);
    --ooo-wl-page-not-accessible-button-text-transform: var(--theme-button-text-transform);
    --ooo-wl-page-not-accessible-button-letter-spacing: var(--theme-button-letter-spacing);
    --ooo-wl-page-not-accessible-button-border-radius: var(--theme-button-border-radius);
    --ooo-wl-page-not-accessible-button-color: var(--theme-button-text-color);
    --ooo-wl-page-not-accessible-button-background: var(--theme-button-background-color);

    /* 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-font-family: var(--theme-button-font-family);
    --ooo-wl-popup-button-font-size: var(--theme-button-font-size);
    --ooo-wl-popup-button-padding: var(--theme-button-padding-block) var(--theme-button-padding-inline);
    --ooo-wl-popup-button-text-transform: var(--theme-button-text-transform);
    --ooo-wl-popup-button-letter-spacing: var(--theme-button-letter-spacing);
    --ooo-wl-popup-button-border-radius: var(--theme-button-border-radius);
    --ooo-wl-popup-button-color: var(--theme-button-text-color);
    --ooo-wl-popup-button-background: var(--theme-button-background-color);

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

@media screen and (min-width: 1000px) {
    :root {
        --ooo-wl-page-product-card-container-row-gap: 4rem;
        --ooo-wl-page-product-card-container-column-gap: 3rem;
    }
}

@media screen and (min-width: 1400px) {
    :root {
        --ooo-wl-page-product-card-container-row-gap: 4rem;
        --ooo-wl-page-product-card-container-column-gap: 3.75rem;
    }
}

/*-------------------------------------------
* Wishlist page - tooltip notification
*------------------------------------------*/
ooo-wl-page-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-text-transform: var(--theme-button-text-transform);
    --ooo-wl-product-page-button-letter-spacing: var(--theme-button-letter-spacing);
    --ooo-wl-product-page-button-border-radius: var(--theme-button-border-radius);
    --ooo-wl-product-page-button-padding-inline: var(--theme-button-padding-inline);
    --ooo-wl-product-page-button-padding-block: var(--theme-button-padding-block);
    --ooo-wl-product-page-button-height: auto;
}