:root[data-theme="lal"] {

    /* palette */
    --lal-lime: #e8ff36;
    --lal-warm-white: #ebe2de;
    --lal-light-grey: #f8f8f8;
    --lal-grey: #f5f5f5;
    --lal-warm-grey: #e3e3e3;
    --lal-dark-grey: #989898;
    --lal-green: #2b8b68;
    --lal-red: #8e0000;
    --lal-orange: #f36641;

    /* colors */
    --colors-surface-primary: light-dark(var(--lal-grey), hsl(from var(--colors-background) h s calc(l + 10)));
    --colors-surface-secondary: light-dark(var(--lal-warm-white), hsl(from var(--colors-background) h s calc(l + 20)));
    --colors-surface-disabled: light-dark(var(--lal-warm-grey), hsl(from var(--colors-background) h s calc(l + 30)));
    --colors-text: light-dark(var(--black), var(--white));
    --colors-text-secondary: var(--lal-dark-grey);
    --colors-text-disabled: var(--lal-grey);
    --colors-error: var(--lal-red);
    --colors-warning: var(--lal-orange);
    --colors-success: var(--lal-green);
    --colors-info: var(--colors-text);
    --colors-brand-default-primary: var(--lal-lime);
    --colors-brand-default-secondary: var(--black);

    /* border */
    --border-width: 1px;
    --border-color: var(--lal-warm-grey);

    /* radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-xxl: 100px;

    /* links */
    --links-color: var(--colors-text);
    --links-color-hover: var(--colors-text-secondary);
    --links-color-active: var(--colors-text-secondary);
    --links-hover-text-decoration: underline;

    /* form */
    --form-field-background: var(--colors-background);
    --form-field-border-color: var(--lal-warm-grey);
    --form-field-border-radius: var(--radius-md);
    --form-field-min-height: 44px;
    --form-input-placeholder: var(--lal-dark-grey);
    --form-dropdown-hover: var(--lal-grey);
    --form-dropdown-selected: var(--lal-grey);
    --form-radio-grid-columns: 2;

    /* billboard */
    --billboard-carousel-arrow-icon: arrow;
    --billboard-carousel-arrow-background-icon: var(--colors-text);
    --billboard-carousel-arrow-icon-color: var(--colors-background);
    --billboard-carousel-arrow-border-radius: var(--radius-xxl);
    --billboard-carousel-arrow-disabled-color: var(--lal-dark-grey);

    /* carousel */
    --carousel-arrow-background: var(--colors-text);
    --carousel-arrow-color: var(--colors-background);
    --carousel-arrow-border-radius: var(--radius-xxl);
    --carousel-arrow-shadow: none;
    --carousel-dot-size: 6px;
    --carousel-dot-color: transparent;
    --carousel-dot-color-active: var(--colors-text);
    --carousel-dot-border-color: var(--colors-text);

    /* panel */
    --panel-header-background: var(--colors-surface-primary);
    --panel-header-text: var(--colors-text);

    /* buttons */

    --buttons-primary-background: var(--black);
    --buttons-primary-text: var(--white);
    --buttons-primary-border-color: transparent;
    --buttons-primary-border-radius: none;
    --buttons-primary-padding: 1.2rem 2.8rem;
    --buttons-primary-min-height: 5rem;
    --buttons-primary-font-family: var(--font-family-main-bold);
    --buttons-primary-font-size: 1.4rem;
    --buttons-primary-font-weight: 600;
    --buttons-primary-line-height: 1.8rem;
    --buttons-primary-text-transform: uppercase;

    --buttons-secondary-background: transparent;
    --buttons-secondary-text: var(--colors-text);
    --buttons-secondary-border-color: var(--colors-text);
    --buttons-secondary-border-radius: none;
    --buttons-secondary-padding: 1.2rem 2.8rem;
    --buttons-secondary-min-height: 5rem;
    --buttons-secondary-font-family: var(--font-family-main-bold);
    --buttons-secondary-font-size: 1.4rem;
    --buttons-secondary-font-weight: 600;
    --buttons-secondary-line-height: 1.8rem;
    --buttons-secondary-text-transform: uppercase;

    --buttons-a2c-background: var(--lal-lime);
    --buttons-a2c-text: var(--black);
    --buttons-a2c-border-color: transparent;
    --buttons-a2c-border-radius: none;
    --buttons-a2c-padding: 1.2rem 2.8rem;
    --buttons-a2c-min-height: 5rem;
    --buttons-a2c-font-family: var(--font-family-main-bold);
    --buttons-a2c-font-size: 1.4rem;
    --buttons-a2c-font-weight: 600;
    --buttons-a2c-line-height: 1.8rem;
    --buttons-a2c-text-transform: uppercase;

    --buttons-preview-background: var(--lal-warm-white);
    --buttons-preview-text: var(--black);
    --buttons-preview-border-color: var(--black);
    --buttons-preview-border-radius: none;
    --buttons-preview-padding: 1.2rem 2.8rem;
    --buttons-preview-min-height: 5rem;
    --buttons-preview-font-family: var(--font-family-main-bold);
    --buttons-preview-font-size: 1.4rem;
    --buttons-preview-font-weight: 600;
    --buttons-preview-line-height: 1.8rem;
    --buttons-preview-text-transform: uppercase;

    --buttons-disabled-background: var(--lal-grey);
    --buttons-disabled-text: var(--lal-dark-grey);
    --buttons-disabled-border-color: transparent;
    --buttons-disabled-border-radius: none;
    --buttons-disabled-padding: 1.2rem 2.8rem;
    --buttons-disabled-min-height: 5rem;
    --buttons-disabled-font-family: var(--font-family-main-bold);
    --buttons-disabled-font-size: 1.4rem;
    --buttons-disabled-font-weight: 600;
    --buttons-disabled-line-height: 1.8rem;
    --buttons-disabled-text-transform: uppercase;

    --buttons-link-background: transparent;
    --buttons-link-text: var(--colors-text);
    --buttons-link-border-color: transparent;
    --buttons-link-border-radius: var(--radius-sm);
    --buttons-link-padding: 0;
    --buttons-link-min-height: 0rem;
    --buttons-link-font-family: var(--font-family-main-bold);
    --buttons-link-font-size: 1.3rem;
    --buttons-link-line-height: 2rem;
    --buttons-link-font-weight: 600;

    --buttons-button-link-background: transparent;
    --buttons-button-link-text: var(--colors-text);
    --buttons-button-link-border-color: transparent;
    --buttons-button-link-border-radius: none;
    --buttons-button-link-padding: 0;
    --buttons-button-link-min-height: 0rem;
    --buttons-button-link-font-family: var(--font-family-main-bold);
    --buttons-button-link-font-size: 1.4rem;
    --buttons-button-link-line-height: 1.8rem;
    --buttons-button-link-text-transform: uppercase;
    --buttons-button-link-font-weight: 600;
    --buttons-button-link-text-decoration: underline;

    --buttons-upsell-primary-background: transparent;
    --buttons-upsell-primary-text: var(--colors-text);
    --buttons-upsell-primary-border-color: var(--colors-text);
    --buttons-upsell-primary-border-radius: var(--radius-sm);
    --buttons-upsell-primary-padding: 0.8rem 1.2rem;
    --buttons-upsell-primary-min-height: 4rem;
    --buttons-upsell-primary-font-family: var(--font-family-main-regular);
    --buttons-upsell-primary-font-size: 1.3rem;
    --buttons-upsell-primary-line-height: 1.8rem;

    /* button */


    --button-sizes-normal-radius: none;
    --button-sizes-normal-padding: 1.2rem 2.8rem;
    --button-sizes-normal-min-height: 5rem;
    --button-sizes-normal-font-family: var(--font-family-main-bold);
    --button-sizes-normal-font-size: 1.4rem;
    --button-sizes-normal-line-height: 1.8rem;
    --button-sizes-normal-text-transform: uppercase;
    --button-sizes-normal-font-weight: 600;

    --button-sizes-small-radius: none;
    --button-sizes-small-padding: 0.8rem 1.2rem;
    --button-sizes-small-min-height: 4rem;
    --button-sizes-small-font-family: var(--font-family-main-regular);
    --button-sizes-small-font-size: 1.4rem;
    --button-sizes-small-line-height: 2rem;

    --button-sizes-xsmall-radius: none;
    --button-sizes-xsmall-padding: 0.3rem 0.8rem;
    --button-sizes-xsmall-min-height: 2.4rem;
    --button-sizes-xsmall-font-family: var(--font-family-main-regular);
    --button-sizes-xsmall-font-size: 1.2rem;
    --button-sizes-xsmall-line-height: 1.4rem;


    --button-colors-primary-background: var(--colors-text);
    --button-colors-primary-text: var(--colors-background);
    --button-colors-primary-border-color: var(--colors-text);

    --button-colors-secondary-background: var(--lal-warm-white);
    --button-colors-secondary-text: var(--black);
    --button-colors-secondary-border-color: var(--black);

    --button-colors-cta-background: var(--lal-lime);
    --button-colors-cta-text: var(--black);
    --button-colors-cta-border-color: transparent;

    --button-colors-ghost-background: transparent;
    --button-colors-ghost-text: var(--colors-text);
    --button-colors-ghost-border-color: var(--colors-text);

    --button-link-color: var(--colors-text);
    --button-link-color-hover: var(--colors-text-secondary);
    --button-link-text-decoration: underline;

    /* typography */
    --typography-default-font-size: 14;


    --typography-rules-headline1-font-family: var(--font-family-main-bold);
    --typography-rules-headline1-font-size: 2.4rem;
    --typography-rules-headline1-line-height: 2.8rem;
    --typography-rules-headline1-letter-spacing: 0.05rem;
    --typography-rules-headline1-text-transform: uppercase;
    --typography-rules-headline1-font-weight: 700;

    --typography-rules-headline2-font-family: var(--font-family-main-bold);
    --typography-rules-headline2-font-size: 2.2rem;
    --typography-rules-headline2-line-height: 2.6rem;
    --typography-rules-headline2-letter-spacing: 0.05rem;
    --typography-rules-headline2-text-transform: uppercase;
    --typography-rules-headline2-font-weight: 700;

    --typography-rules-headline3-font-family: var(--font-family-main-bold);
    --typography-rules-headline3-font-size: 2.2rem;
    --typography-rules-headline3-line-height: 2.6rem;
    --typography-rules-headline3-letter-spacing: 0.05rem;
    --typography-rules-headline3-text-transform: uppercase;
    --typography-rules-headline3-font-weight: 700;

    --typography-rules-headline4-font-family: var(--font-family-main-bold);
    --typography-rules-headline4-font-size: 2rem;
    --typography-rules-headline4-line-height: 2.4rem;
    --typography-rules-headline4-text-transform: uppercase;
    --typography-rules-headline4-font-weight: 600;

    --typography-rules-headline5-font-family: var(--font-family-main-regular);
    --typography-rules-headline5-font-size: 2rem;
    --typography-rules-headline5-line-height: 2.4rem;

    --typography-rules-headline6-font-family: var(--font-family-main-bold);
    --typography-rules-headline6-font-size: 1.5rem;
    --typography-rules-headline6-line-height: 2rem;
    --typography-rules-headline6-font-weight: 700;

    --typography-rules-headline7-font-family: var(--font-family-main-regular);
    --typography-rules-headline7-font-size: 1.4rem;
    --typography-rules-headline7-line-height: 1.8rem;
    --typography-rules-headline7-font-weight: 500;

    --typography-rules-headline8-font-family: var(--font-family-main-bold);
    --typography-rules-headline8-font-size: 1.4rem;
    --typography-rules-headline8-line-height: 1.8rem;
    --typography-rules-headline8-letter-spacing: 0.05rem;
    --typography-rules-headline8-text-transform: uppercase;
    --typography-rules-headline8-font-weight: 600;

    --typography-rules-headline9-font-family: var(--font-family-main-bold);
    --typography-rules-headline9-font-size: 1.4rem;
    --typography-rules-headline9-line-height: 1.8rem;
    --typography-rules-headline9-letter-spacing: 0.05rem;
    --typography-rules-headline9-text-transform: uppercase;
    --typography-rules-headline9-font-weight: 700;

    --typography-rules-headline10-font-family: var(--font-family-main-bold);
    --typography-rules-headline10-font-size: 1.3rem;
    --typography-rules-headline10-line-height: 1.6rem;
    --typography-rules-headline10-font-weight: 600;
    --typography-rules-headline10-text-transform: uppercase;

    --typography-rules-headline11-font-family: var(--font-family-main-bold);
    --typography-rules-headline11-font-size: 1.4rem;
    --typography-rules-headline11-line-height: 1.6rem;
    --typography-rules-headline11-font-weight: 700;

    --typography-rules-headline12-font-family: var(--font-family-main-bold);
    --typography-rules-headline12-font-size: 2rem;
    --typography-rules-headline12-line-height: 2.4rem;
    --typography-rules-headline12-font-weight: 600;

    --typography-rules-text1-font-family: var(--font-family-main-regular);
    --typography-rules-text1-font-size: 1.3rem;
    --typography-rules-text1-line-height: 1.8rem;

    --typography-rules-text2-font-family: var(--font-family-main-bold);
    --typography-rules-text2-font-size: 1.3rem;
    --typography-rules-text2-line-height: 2rem;
    --typography-rules-text2-font-weight: 600;

    --typography-rules-text3-font-family: var(--font-family-main-regular);
    --typography-rules-text3-font-size: 1.2rem;
    --typography-rules-text3-line-height: 1.6rem;
    --typography-rules-text3-letter-spacing: 0;

    --typography-rules-text4-font-family: var(--font-family-main-bold);
    --typography-rules-text4-font-size: 1.2rem;
    --typography-rules-text4-line-height: 1.6rem;
    --typography-rules-text4-font-weight: 600;

    --typography-rules-text5-font-family: var(--font-family-main-regular);
    --typography-rules-text5-font-size: 1.3rem;
    --typography-rules-text5-line-height: 1.7rem;

    --typography-rules-text6-font-family: var(--font-family-main-bold);
    --typography-rules-text6-font-size: 1.2rem;
    --typography-rules-text6-line-height: 1.4rem;
    --typography-rules-text6-font-weight: 600;

    --typography-rules-text7-font-family: var(--font-family-main-regular);
    --typography-rules-text7-font-size: 1.2rem;
    --typography-rules-text7-line-height: 1.4rem;

    --typography-rules-text8-font-family: var(--font-family-main-regular);
    --typography-rules-text8-font-size: 1rem;
    --typography-rules-text8-line-height: 1.4rem;

    --typography-rules-text9-font-family: var(--font-family-main-bold);
    --typography-rules-text9-font-size: 1rem;
    --typography-rules-text9-line-height: 1.4rem;
    --typography-rules-text9-font-weight: 600;

    --typography-rules-caption1-font-family: var(--font-family-main-regular);
    --typography-rules-caption1-font-size: 1.2rem;
    --typography-rules-caption1-line-height: 1.6rem;

    --typography-rules-caption2-font-family: var(--font-family-main-regular);
    --typography-rules-caption2-font-size: 1.2rem;
    --typography-rules-caption2-line-height: 1.6rem;
    --typography-rules-caption2-font-weight: 600;

    --typography-rules-paragraph1-font-family: var(--font-family-main-regular);
    --typography-rules-paragraph1-font-size: 1.3rem;
    --typography-rules-paragraph1-line-height: 2rem;

    --typography-rules-paragraph2-font-family: var(--font-family-main-bold);
    --typography-rules-paragraph2-font-size: 1.3rem;
    --typography-rules-paragraph2-line-height: 2rem;
    --typography-rules-paragraph2-font-weight: 600;

    --typography-rules-paragraph3-font-family: var(--font-family-main-regular);
    --typography-rules-paragraph3-font-size: 1.6rem;
    --typography-rules-paragraph3-line-height: 2rem;
    --typography-rules-paragraph3-font-weight: 600;

    --typography-rules-paragraph4-font-family: var(--font-family-main-regular);
    --typography-rules-paragraph4-font-size: 1.6rem;
    --typography-rules-paragraph4-line-height: 2.4rem;

    --typography-rules-disclaimer1-font-family: var(--font-family-main-regular);
    --typography-rules-disclaimer1-font-size: 1rem;
    --typography-rules-disclaimer1-line-height: 1.4rem;

    --typography-rules-disclaimer2-font-family: var(--font-family-main-bold);
    --typography-rules-disclaimer2-font-size: 1rem;
    --typography-rules-disclaimer2-line-height: 1.4rem;

    --typography-rules-links1-font-family: var(--font-family-main-bold);
    --typography-rules-links1-font-size: 1.2rem;
    --typography-rules-links1-line-height: 1.8rem;

    --typography-rules-button1-font-family: var(--font-family-main-bold);
    --typography-rules-button1-font-size: 1.4rem;
    --typography-rules-button1-line-height: 1.8rem;
    --typography-rules-button1-text-transform: uppercase;
    --typography-rules-button1-font-weight: 600;

    --typography-rules-button2-font-family: var(--font-family-main-bold);
    --typography-rules-button2-font-size: 1.4rem;
    --typography-rules-button2-font-weight: 600;
    --typography-rules-button2-line-height: 1.8rem;
    --typography-rules-button2-text-transform: uppercase;

    --typography-rules-ribbons1-font-family: var(--font-family-main-regular);
    --typography-rules-ribbons1-font-size: 1.1rem;
    --typography-rules-ribbons1-line-height: 1.1rem;
    --typography-rules-ribbons1-letter-spacing: 0.05rem;
    --typography-rules-ribbons1-text-transform: uppercase;
    --typography-rules-ribbons1-font-weight: 600;

    /* ecommerce */
    --free-gift-background: var(--lal-grey);
    --sticky-message-background: var(--black);
    --product-image-background-bland: var(--white);
    --product-image-aspect-ratio: 1 / 1;
    --star: var(--lal-lime);
    --star-inactive: var(--lal-dark-grey);
    --sale-price-color: var(--lal-red);
    --crossed-price-color: var(--lal-dark-grey);
    --discount-message-color: var(--colors-text);
    --discount-message-background: var(--lal-light-grey);
    --ribbon-background: var(--black);
    --ribbon-text: var(--white);
    --ribbon-border-radius: none;
    --bundle-ribbon-background: var(--lal-lime);
    --bundle-ribbon-text: var(--black);
    --media-gallery-gap-d-t: var(--spacing-xs);
    --featured-articles-layout: clean;
    --category-page-title-justify: center;
    --category-header-layout: vertical;
    --ribbon-oos-background: var(--lal-dark-grey);
    --ribbon-oos-text-color: var(--white);
    --ribbon-secondary-background: var(--lal-lime);
    --ribbon-secondary-text-color: var(--black);
    --ribbon-just-added-background: var(--colors-surface-secondary);
    --ribbon-just-added-text-color: var(--colors-text);
    --related-category-background: var(--lal-grey);
    --related-category-text: var(--colors-text);
    --related-category-background-hover: var(--colors-text);
    --related-category-text-hover: var(--white);
    --related-category-radius: var(--radius-sm);
    --related-category-border: transparent;
    --related-category-border-hover: transparent;
    --review-summary-background: var(--lal-light-grey);
    --review-summary-border: var(--lal-warm-grey);
    --checkout-header-background: var(--colors-surface-primary);
    --checkout-loyalty-text: var(--colors-text);
    --checkout-check-icon-background: var(--colors-text);

    /* layout */
    --layout-announcements-bar-background: var(--colors-brand-default-primary);
    --layout-announcements-bar-text: var(--colors-brand-default-secondary);
    --layout-homepage-header-scheme: dark;
    --layout-footer-main-background: var(--lal-warm-white);
    --layout-footer-main-text: var(--black);
    --layout-footer-newsletter-background: var(--lal-lime);
    --layout-footer-newsletter-text: var(--black);
    --layout-footer-secondary-background: var(--colors-background);
    --layout-footer-secondary-text: var(--black);

    /* rewards */
    --rewards-intro-svg-display: none;
    --rewards-progress-display: none;
    --rewards-flow-number-background: transparent;
    --rewards-border-color: transparent;
    --rewards-completed-icon: ;

    --rewards-rules-icons-signup: ;
    --rewards-rules-icons-purchase: ;
    --rewards-rules-icons-newsletter: ;
    --rewards-rules-icons-referral: ;
    --rewards-rules-icons-birthday: ;
    --rewards-rules-icons-facebook-like: ;
    --rewards-rules-icons-instagram-follow: ;
    --rewards-rules-icons-review: ;
    --rewards-rules-icons-anniversary: ;
}

:root[data-theme="lal"] {
    @media (min-width: 768px) {
        --typography-rules-headline1-font-size: 4rem;
        --typography-rules-headline1-line-height: 4.4rem;
        --typography-rules-headline2-font-size: 3.2rem;
        --typography-rules-headline2-line-height: 3.8rem;
        --typography-rules-headline3-font-size: 3.2rem;
        --typography-rules-headline3-line-height: 3.8rem;
        --typography-rules-headline6-font-size: 1.6rem;
        --typography-rules-headline9-font-size: 2rem;
        --typography-rules-headline9-line-height: 2.4rem;
        --typography-rules-headline10-font-size: 1.4rem;
        --typography-rules-headline10-line-height: 1.8rem;
        --typography-rules-headline11-font-size: 2rem;
        --typography-rules-headline11-line-height: 2.4rem;
        --typography-rules-text5-font-size: 1.4rem;
        --typography-rules-text5-line-height: 2rem;
        --typography-rules-text6-font-size: 1.3rem;
        --typography-rules-text6-line-height: 2rem;
        --typography-rules-text7-font-size: 1.3rem;
        --typography-rules-text7-line-height: 2rem;
        --typography-rules-paragraph1-font-size: 1.8rem;
        --typography-rules-paragraph1-line-height: 2.4rem;
        --typography-rules-paragraph2-font-size: 1.8rem;
        --typography-rules-paragraph2-line-height: 2.4rem;
        --typography-rules-ribbons1-font-size: 1.4rem;
        --typography-rules-ribbons1-line-height: 1.4rem;
    }
}