/* CK will not use subthemes its just for MegaMenu */

.subtheme-ck-pride {
  --title-background: linear-gradient(
    90deg,
    #1898ac 0%,
    #65aed5 20%,
    #3064af 40%,
    #d65461 60%,
    #d8215e 80%,
    #7c629b 100%
  );
  --title-background-clip: text;
  --title-webkit-text-fill-color: transparent;

  --component-promo-title-background: var(--title-background);
  --component-promo-titlebackground-clip: var(--title-background-clip);
  --component-promo-title-webkit-text-fill-color: var(--title-webkit-text-fill-color);

  --component-hero-title-background: var(--title-background);
  --component-hero-titlebackground-clip: var(--title-background-clip);
  --component-hero-title-webkit-text-fill-color: var(--title-webkit-text-fill-color);

  --component-twoimages-title-background: var(--title-background);
  --component-twoimages-titlebackground-clip: var(--title-background-clip);
  --component-twoimages-title-webkit-text-fill-color: var(--title-webkit-text-fill-color);
}

.subtheme-ck-pride-product-grid {
  --ProductGrid-title-color: #ffffff;
  --price-display-primary-color: #ffffff;
  --ProductGrid-more-colours-color: #ffffff;
  --with-wrapper-mobile-bottom-spacing: 4px;
  --with-wrapper-tablet-bottom-spacing: 16px;
  --grid-lg-offset: 16px;
}

.subtheme-ck-chalkfullwidth {
  --component-cmsproductgrid-margin-left: 0px;
  --component-cmsproductgrid-margin-right: 0px;

  --component-smartcards-padding-bottom: 4px;
  --component-smartcards-padding-bottom-desktop: 16px;

  --color-component-background: #fff9f1;
  --categoryEntries-background-colour: #fff9f1;

  --header-pre-hover-background-color: #fff9f1;
  --header-pre-hover-color: #fff9f1;
  --header-pre-hover-icon-count-color: #000;

  --grid-lg-gutter-size: 16px;
  --grid-xs-gutter-size: 4px;
  --with-wrapper-mobile-bottom-spacing: 4px;
  --with-wrapper-tablet-bottom-spacing: 16px;

  --component-dynamic_grid-gap: 4px;
  --component-dynamic_grid-gap-desktop: 16px;
  --grid-lg-offset: 16px;
  --grid-xs-offset: 4px;

  --component-hero-wrapper-padding-bottom: 4px;
  --component-hero-wrapper-padding-bottom-desktop: 16px;

  --promo-background-color: #fff9f1;
}

.subtheme-ck-chalkfullwidth-beige {
  --component-cmsproductgrid-margin-left: 0px;
  --component-cmsproductgrid-margin-right: 0px;

  --component-smartcards-padding-bottom: 24px;
  --component-smartcards-padding-bottom-desktop: 16px;

  --color-component-background: #fff9f1;
  --categoryEntries-background-colour: #fff9f1;

  --grid-lg-gutter-size: 16px;
  --grid-xs-gutter-size: 8px;
  --with-wrapper-mobile-bottom-spacing: 8px;
  --with-wrapper-tablet-bottom-spacing: 16px;

  --component-dynamic_grid-gap: 4px;
  --component-dynamic_grid-gap-desktop: 16px;
  --grid-lg-offset: 16px;
  --grid-xs-offset: 8px;

  --component-hero-wrapper-padding-bottom: 4px;
  --component-hero-wrapper-padding-bottom-desktop: 16px;

  --promo-background-color: #fff9f1;
  --component-smartcards-typography-color: #fff9f1;

  --button-tertiary-font-color: #fff9f1;
  --button-tertiary-font-color-hover: #fff9f1;
  --button-tertiary-text-decoration-color: #fff9f1;
  --button-tertiary-text-decoration-color-focus: : #fff9f1;

  --header-pre-hover-background-color: #fff9f1;
  --header-pre-hover-color: #000000;
  --header-pre-hover-icon-count-color: #fff9f1;
}

.subtheme-ck-chalkborders {
  --color-component-background: #fff9f1;
  --categoryEntries-background-colour: #fff9f1;

  --with-wrapper-mobile-bottom-spacing: 4px;
  --with-wrapper-tablet-bottom-spacing: 16px;

  --grid-lg-offset: 16px;
}

.subtheme-ck-chalkkerning {
  --color-component-background: #fff9f1;

  --component-hero-title-letter-spacing-tablet: 14px;
  --component-hero-title-letter-spacing-mobile: 8px;

  --component-promo-title-letter-spacing-tablet: 14px;
  --component-promo-title-letter-spacing-mobile: 8px;

  --component-hero-text-colour: #fff9f1;
  --button-tertiary-font-color: #fff9f1;
  --button-tertiary-font-color-hover: #fff9f1;
  --button-tertiary-text-decoration-color: #fff9f1;
  --button-tertiary-text-decoration-color-focus: #fff9f1;

  --with-wrapper-mobile-bottom-spacing: 8px;
  --with-wrapper-tablet-bottom-spacing: 16px;
}

.subtheme-ck-sale {
  --component-split-wrapper-padding-top-desktop: 40px;
  --component-split-wrapper-padding-top: 0.75rem;
  --component-split-wrapper-padding-bottom-desktop: 40px;
  --component-split-wrapper-padding-bottom: 0.75rem;
  --component-split-background-colour: #733838;
  --component-split-typography-colour: #fff5eb;
  --component-split-subtitle-typography-colour: #fff5eb;
  --component-split-cta-direction-tablet: row;

  --component-campaign-title-color-dark: #fff5eb;
  --component-campaign-title-typography-colour: #fff5eb;

  --component-splash-content-text-colour: #fff5eb;
  --component-splash-content-background-colour: #733838;
  --component-splash-cta-font-colour: #000000;
  --component-splash-cta-border-colour: #fff5eb;
  --component-splash-cta-background-colour: #fff5eb;
  --component-splash-cta-hover-background-colour: #fff5eb;
  --component-splash-cta-hover-border-colour: #fff5eb;

  --countdown-typography-dark-theme-color: #fff5eb;
  --countdown-typography-light-theme-color: #fff5eb;

  --component-smartcards-padding-bottom: 0.75rem;
  --component-smartcards-padding-bottom-desktop: 40px;
  --component-smartcards-typography-color: #fff5eb;

  --typography-color: #fff5eb;
  --color-component-background: #733838;

  --component-dynamic-title-text-colour: #fff5eb;
  --component-dynamic-subtitle-text-colour: #fff5eb;
  --component-dynamic-padding-bottom: 0.75rem;
  --component-dynamic-padding-bottom-desktop: 0px;
  --component-dynamic-cta-colour: #fff5eb;
  --component-dynamic-background-colour: #733838;

  --button-primary-background-color: #fff5eb;
  --button-primary-background-color-hover: transparent;
  --button-primary-font-color: #733838;
  --button-primary-border: 1px solid #733838;
  --button-primary-border-hover: 1px solid #fff5eb;
  --button-primary-font-color-hover: #fff5eb;

  --button-secondary-background-color: transparent;
  --button-secondary-background-color-hover: #fff5eb;
  --button-secondary-font-color: #fff5eb;
  --button-secondary-font-color-hover: #733838;
  --button-secondary-border: 1px solid #fff5eb;
  --button-secondary-border-hover: 1px solid #fff5eb;

  --button-tertiary-font-color: #fff5eb;
  --button-tertiary-font-color-hover: #fff5eb;
  --button-tertiary-text-decoration-color-focus: #fff5eb;
  --button-tertiary-text-decoration-color: #fff5eb;

  --promo-mobile-negative-margin: -16px;
  --promo-text-color: #fff5eb;
  --promo-background-color: #733838;

  --promo-code-button-text-color: #fff5eb;
  --promo-code-button-border-color: #fff5eb;
  --promo-code-button-icon-color: #fff5eb;

  --header-pre-hover-background-color: #733838;
  --header-pre-hover-color: #fff5eb;
  --header-pre-hover-icon-count-color: #733838;
}

.subtheme-ck-public {
  --header-pre-hover-background-color: #733838;
  --header-pre-hover-color: #ffffff;
  --header-pre-hover-icon-count-color: #733838;

  --color-component-background: #733838;
  --categoryEntries-background-colour: #733838;
  --typography-color: #ffffff;

  --button-primary-background-color: #ffffff;
  --button-primary-background-color-hover: transparent;
  --button-primary-font-color: #733838;
  --button-primary-border: 1px solid #ffffff;
  --button-primary-border-hover: 1px solid #ffffff;
  --button-primary-font-color-hover: #ffffff;

  --button-secondary-background-color: transparent;
  --button-secondary-background-color-hover: #ffffff;
  --button-secondary-font-color: #ffffff;
  --button-secondary-font-color-hover: #733838;
  --button-secondary-border: 1px solid #ffffff;
  --button-secondary-border-hover: 1px solid #ffffff;

  --button-tertiary-font-color: #ffffff;
  --button-tertiary-font-color-hover: #ffffff;
  --button-tertiary-text-decoration-color-focus: #ffffff;
  --button-tertiary-text-decoration-color: #ffffff;

  --promo-text-color: #ffffff;
  --promo-background-color: #733838;

  --promo-code-button-text-color: #ffffff;
  --promo-code-button-border-color: #ffffff;
  --promo-code-button-icon-color: #ffffff;
}

.subtheme-ck-vip {
  --header-pre-hover-background-color: #243757;
  --header-pre-hover-color: #ffffff;
  --header-pre-hover-icon-count-color: #243757;

  --color-component-background: #243757;
  --categoryEntries-background-colour: #243757;
  --typography-color: #ffffff;

  --button-primary-background-color: #ffffff;
  --button-primary-background-color-hover: transparent;
  --button-primary-font-color: #243757;
  --button-primary-border: 1px solid #ffffff;
  --button-primary-border-hover: 1px solid #ffffff;
  --button-primary-font-color-hover: #ffffff;

  --button-secondary-background-color: transparent;
  --button-secondary-background-color-hover: #ffffff;
  --button-secondary-font-color: #ffffff;
  --button-secondary-font-color-hover: #334a70;
  --button-secondary-border: 1px solid #ffffff;
  --button-secondary-border-hover: 1px solid #ffffff;

  --button-tertiary-font-color: #ffffff;
  --button-tertiary-font-color-hover: #ffffff;
  --button-tertiary-text-decoration-color-focus: #ffffff;
  --button-tertiary-text-decoration-color: #ffffff;

  --promo-text-color: #ffffff;
  --promo-background-color: #243757;

  --promo-code-button-text-color: #ffffff;
  --promo-code-button-border-color: #ffffff;
  --promo-code-button-icon-color: #ffffff;
}

.subtheme-ck-lastchance {
  --header-pre-hover-background-color: #fcf9f1;
  --header-pre-hover-color: #733838;
  --header-pre-hover-icon-count-color: #fcf9f1;
  --header-pre-hover-icon-fill: #733838;

  --color-component-background: #fcf9f1;
  --categoryEntries-background-colour: #fcf9f1;
  --typography-color: #733838;

  --button-primary-background-color: #733838;
  --button-primary-background-color-hover: transparent;
  --button-primary-font-color: #f1ebdd;
  --button-primary-border: 1px solid #733838;
  --button-primary-border-hover: 1px solid #733838;
  --button-primary-font-color-hover: #733838;

  --button-secondary-background-color: transparent;
  --button-secondary-background-color-hover: #733838;
  --button-secondary-font-color: #733838;
  --button-secondary-font-color-hover: #fcf9f1;
  --button-secondary-border: 1px solid #733838;
  --button-secondary-border-hover: 1px solid #733838;

  --button-tertiary-font-color: #733838;
  --button-tertiary-font-color-hover: #733838;
  --button-tertiary-text-decoration-color-focus: #733838;
  --button-tertiary-text-decoration-color: #733838;

  --promo-text-color: #733838;
  --promo-background-color: #fcf9f1;

  --promo-code-button-text-color: #733838;
  --promo-code-button-border-color: #733838;
  --promo-code-button-icon-color: #733838;
}

.subtheme-ck-inverted {
  --header-pre-hover-color: #000000;
  --header-pre-hover-icon-count-color: #ffffff;
}

.subtheme-ck-seamless {
  --grid-lg-gutter-size: 0px;
  --grid-xs-gutter-size: 0px;
  --component-dynamic_grid-gap-desktop: 0px;
  --component-dynamic_grid-gap: 0px;
  --component-flex_module-gap: 0px;
  --component-flex_module-gap-desktop: 0px;
}

.subtheme-ck-black {
  --header-pre-hover-background-color: #000000;
  --header-pre-hover-color: #ffffff;
  --header-pre-hover-icon-count-color: #000000;

  --typography-color: #ffffff;
  --color-component-background: #000000;

  --promo-code-button-text-color: #ffffff;
  --promo-code-button-border-color: #ffffff;
  --promo-code-button-icon-color: #ffffff;

  --promo-text-color: #ffffff;
  --promo-background-color: #000000;

  --component-visualNav-wrapper-padding-bottom: 0.75rem;
  --component-visualNav-wrapper-padding-bottom-desktop: 40px;

  --component-twoimages-padding-top: 20px;
  --component-twoimages-padding-top-desktop: 40px;
  --component-twoimages-padding-bottom: 20px;
  --component-twoimages-padding-bottom-desktop: 40px;
  --component-twoimages-bodyText-colour: #ffffff;

  --ProductGrid-title-color: #ffffff;
  --price-display-primary-color: #ffffff;
  --price-display-wasp-color: #ffffff;
  --ProductGrid-more-colours-color: #ffffff;

  --component-dynamic-title-text-colour: #ffffff;
  --component-dynamic-subtitle-text-colour: #ffffff;
  --component-dynamic-padding-bottom: 0.75rem;
  --component-dynamic-padding-bottom-desktop: 0px;
  --component-dynamic-cta-colour: #ffffff;
  --component-dynamic-background-colour: #000000;

  --component-seo-module-restricted-font-color: #fff;
  --component-seo-module-title-font-color: #fff;
  --component-seo-module-link-font-color: #fff;
  --component-seo-module-hover-link-font-color: #fff;
  --component-seo-module-padding: 40px 20px;
  --component-seo-module-padding-desktop: 64px 40px;
  --component-seo-module-border-bottom: 1px solid white;
  --component-seo-module-margin: 0px 0px -40px 0px;
}

.subtheme-ck-prefallfullwidth {
  --component-cmsproductgrid-margin-left: 0px;
  --component-cmsproductgrid-margin-right: 0px;

  --component-smartcards-padding-bottom: 8px;
  --component-smartcards-padding-bottom-desktop: 16px;
  --typography-color: #fff5eb;
  --color-component-background: #fff5eb;
  --categoryEntries-background-colour: #fff5eb;

  --header-pre-hover-background-color: #fff5eb;
  --header-pre-hover-color: #fff5eb;
  --header-pre-hover-icon-count-color: #000;

  --grid-lg-gutter-size: 16px;
  --grid-xs-gutter-size: 8px;
  --with-wrapper-mobile-bottom-spacing: 8px;
  --with-wrapper-tablet-bottom-spacing: 16px;

  --component-dynamic_grid-gap: 8px;
  --component-dynamic_grid-gap-desktop: 16px;
  --grid-lg-offset: 16px;
  --grid-xs-offset: 8px;

  --component-hero-wrapper-padding-bottom: 8px;
  --component-hero-wrapper-padding-bottom-desktop: 16px;

  --component-dynamic_grid-text-color: #fff5eb;

  --component-smartcards-typography-color: #fff5eb;

  --promo-background-color: #fff5eb;

  --component-hero-text-colour: #fff5eb;

  --button-primary-background-color: #fff5eb;
  --button-primary-background-color-hover: transparent;
  --button-primary-font-color: #000;
  --button-primary-border: 1px solid #fff5eb;
  --button-primary-border-hover: 1px solid #fff5eb;
  --button-primary-font-color-hover: #fff5eb;

  --button-secondary-background-color: transparent;
  --button-secondary-background-color-hover: #fff5eb;
  --button-secondary-font-color: #fff5eb;
  --button-secondary-font-color-hover: #000;
  --button-secondary-border: 1px solid #fff5eb;
  --button-secondary-border-hover: 1px solid #fff5eb;

  --button-tertiary-font-color: #fff5eb;
  --button-tertiary-font-color-hover: #fff5eb;
  --button-tertiary-text-decoration-color-focus: #fff5eb;
  --button-tertiary-text-decoration-color: #fff5eb;
}

.subtheme-ck-prefallborders {
  --color-component-background: #fff5eb;
  --categoryEntries-background-colour: #fff5eb;
  --with-wrapper-mobile-bottom-spacing: 8px;
  --with-wrapper-tablet-bottom-spacing: 16px;
  --grid-lg-offset: 16px;
}

.subtheme-ck-test {
  --typography-color: #fff5eb;
  --color-component-background: #fff5eb;

  /* HERO */
  --component-hero-text-colour: #fff5eb;
  /* PROMO */
  --promo-text-color: #000;
  /* RECOMMENDATIONS */
  --component-recommendations-text-color: #000;
}

.subtheme-ck-borders-medium {
  --component-cmsproductgrid-margin-left: 0px;
  --component-cmsproductgrid-margin-right: 0px;

  --component-smartcards-padding-bottom: 8px;
  --component-smartcards-padding-bottom-desktop: 16px;

  --color-component-background: transparent;
  --categoryEntries-background-colour: transparent;

  --grid-lg-gutter-size: 16px;
  --grid-xs-gutter-size: 8px;
  --with-wrapper-mobile-bottom-spacing: 8px;
  --with-wrapper-tablet-bottom-spacing: 16px;

  --component-dynamic_grid-gap: 8px;
  --component-dynamic_grid-gap-desktop: 16px;
  --grid-lg-offset: 16px;
  --grid-xs-offset: 8px;

  --component-hero-wrapper-padding-bottom: 8px;
  --component-hero-wrapper-padding-bottom-desktop: 16px;

  --promo-background-color: transparent;
}

.subtheme-ck-borders-small {
  --component-cmsproductgrid-margin-left: 0px;
  --component-cmsproductgrid-margin-right: 0px;

  --component-smartcards-padding-bottom: 8px;
  --component-smartcards-padding-bottom-desktop: 8px;

  --color-component-background: transparent;
  --categoryEntries-background-colour: transparent;

  --grid-lg-gutter-size: 8px;
  --grid-xs-gutter-size: 8px;
  --with-wrapper-mobile-bottom-spacing: 8px;
  --with-wrapper-tablet-bottom-spacing: 8px;

  --component-dynamic_grid-gap: 8px;
  --component-dynamic_grid-gap-desktop: 8px;
  --grid-lg-offset: 8px;
  --grid-xs-offset: 8px;

  /* to overwrite the promo negative margin */
  --promo-desktop-negative-margin: 8px;
  --promo-mobile-negative-margin: 8px;

  --component-hero-wrapper-padding-bottom: 8px;
  --component-hero-wrapper-padding-bottom-desktop: 8px;

  --promo-background-color: transparent;
}

.subtheme-ck-borders-small-kerning {
  --component-cmsproductgrid-margin-left: 0px;
  --component-cmsproductgrid-margin-right: 0px;

  --component-smartcards-padding-bottom: 8px;
  --component-smartcards-padding-bottom-desktop: 8px;

  --component-hero-typography-max-width: 800px;

  --color-component-background: transparent;
  --categoryEntries-background-colour: transparent;

  --grid-lg-gutter-size: 8px;
  --grid-xs-gutter-size: 8px;
  --with-wrapper-mobile-bottom-spacing: 8px;
  --with-wrapper-tablet-bottom-spacing: 8px;

  --component-dynamic_grid-gap: 8px;
  --component-dynamic_grid-gap-desktop: 8px;
  --grid-lg-offset: 8px;
  --grid-xs-offset: 8px;

  --promo-background-color: transparent;
  --promo-desktop-negative-margin: 8px;
  --promo-mobile-negative-margin: 8px;

  --component-hero-title-letter-spacing-tablet: 14px;
  --component-hero-title-letter-spacing-mobile: 8px;

  --component-promo-title-letter-spacing-tablet: 14px;
  --component-promo-title-letter-spacing-mobile: 8px;

  --promo-text-color: #341e0f;
  --button-tertiary-font-color: #341e0f;
  --button-tertiary-font-color-hover: #341e0f;
  --button-tertiary-text-decoration-color: #341e0f;
  --button-tertiary-text-decoration-color-focus: #341e0f;

  --header-pre-hover-background-color: #f3ece2;
  --header-pre-hover-color: #000000;
  --header-pre-hover-icon-count-color: #f3ece2;
}

/* LEAVE those ones at the end of file to have highest priority */

.subtheme-ck-borders-xs {
  --component-cmsproductgrid-margin-left: 0px;
  --component-cmsproductgrid-margin-right: 0px;

  --component-smartcards-padding-bottom: 8px;
  --component-smartcards-padding-bottom-desktop: 8px;

  --grid-lg-gutter-size: 8px;
  --grid-xs-gutter-size: 8px;
  --with-wrapper-mobile-bottom-spacing: 8px;
  --with-wrapper-tablet-bottom-spacing: 8px;

  --component-dynamic_grid-gap: 8px;
  --component-dynamic_grid-gap-desktop: 8px;
  --grid-lg-offset: 8px;
  --grid-xs-offset: 8px;

  /* to overwrite the promo negative margin */
  --promo-desktop-negative-margin: 8px;
  --promo-mobile-negative-margin: 8px;

  --component-hero-wrapper-padding-bottom: 8px;
  --component-hero-wrapper-padding-bottom-desktop: 8px;

  --component-flex_module-gap: 8px;
  --component-flex_module-gap-desktop: 8px;
}

.subtheme-ck-borders-md {
  --component-cmsproductgrid-margin-left: 0px;
  --component-cmsproductgrid-margin-right: 0px;

  --component-smartcards-padding-bottom: 8px;
  --component-smartcards-padding-bottom-desktop: 16px;

  --grid-lg-gutter-size: 16px;
  --grid-xs-gutter-size: 8px;
  --with-wrapper-mobile-bottom-spacing: 8px;
  --with-wrapper-tablet-bottom-spacing: 16px;

  --component-dynamic_grid-gap: 8px;
  --component-dynamic_grid-gap-desktop: 16px;
  --grid-lg-offset: 16px;
  --grid-xs-offset: 8px;

  /* to overwrite the promo negative margin */
  --promo-desktop-negative-margin: 16px;
  --promo-mobile-negative-margin: 8px;

  --component-hero-wrapper-padding-bottom: 8px;
  --component-hero-wrapper-padding-bottom-desktop: 16px;

  --component-flex_module-gap: 8px;
  --component-flex_module-gap-desktop: 16px;
}

.subtheme-ck-borders-seamless {
  --grid-lg-gutter-size: 0px;
  --grid-xs-gutter-size: 0px;
  --component-dynamic_grid-gap-desktop: 0px;
  --component-dynamic_grid-gap: 0px;
  --component-flex_module-gap: 0px;
  --component-flex_module-gap-desktop: 0px;
}

/* .subtheme-ck-color-sale {
} */
.subtheme-ck-color-transparent {
  --promo-background-color: transparent;
  --color-component-background: transparent;
  --categoryEntries-background-colour: transparent;
}

/* .subtheme-ck-color-black {
} */
.subtheme-ck-type-kerning {
  --component-hero-title-letter-spacing-tablet: 14px;
  --component-hero-title-letter-spacing-mobile: 8px;

  --component-promo-title-letter-spacing-tablet: 14px;
  --component-promo-title-letter-spacing-mobile: 8px;

  --component-smartcards-title-letter-spacing-tablet: 14px;
  --component-smartcards-letter-spacing-mobile: 8px;
}

.subtheme-ck-recommendations-campaign {
  --component-recommendations-background-color: #efebe5;
}

.subtheme-ck-light {
  --button-primary-background-color: var(--color-palette-white);
  --button-primary-background-color-hover: transparent;
  --button-primary-font-color: var(--color-brand-primary);
  --button-primary-border: var(--button-primary-border-width) solid var(--color-palette-white);
  --button-primary-border-hover: var(--button-primary-border-width) solid
    var(--color-brand-secondary);
  --button-primary-font-color-hover: var(--color-palette-white);

  /* ----------------------------  */
  /* SECONDARY */
  --button-secondary-background-color: transparent;
  --button-secondary-background-color-hover: var(--color-palette-white);
  --button-secondary-font-color: var(--color-palette-white);
  --button-secondary-font-color-hover: var(--color-brand-primary);
  --button-secondary-border: var(--button-secondary-border-width) solid var(--color-palette-white);
  --button-secondary-border-hover: var(--button-secondary-border-width) solid
    var(--color-palette-white);

  /* ----------------------------  */
  /* HIGHLIGHT */
  --button-highlight-background-color: var(--color-palette-white);
  --button-highlight-background-color-hover: transparent;
  --button-highlight-font-color: var(--color-brand-primary);
  --button-highlight-border: var(--button-primary-border-width) solid var(--color-palette-white);
  --button-highlight-border-hover: var(--button-primary-border-width) solid
    var(--color-brand-secondary);
  --button-highlight-font-color-hover: var(--color-palette-white);

  /* ----------------------------  */
  /* DESTRUCTIVE */
  --button-destructive-font-color: var(--button-primary-font-color);
  --button-destructive-font-color-hover: var(--button-primary-font-color-hover);
  --button-destructive-background-color: var(--button-primary-background-color);
  --button-destructive-background-color-hover: var(--button-primary-background-color-hover);
  --button-destructive-border: var(--button-primary-border);
  --button-destructive-border-hover: var(--button-primary-border-hover);

  /* ----------------------------  */
  /* TERTIARY */
  --button-tertiary-font-color: var(--color-palette-white);
  --button-tertiary-text-decoration-color: var(--color-palette-white);
  --button-tertiary-font-color-hover: var(--color-palette-white);
  --button-tertiary-font-color-focus: var(--color-palette-white);
  --button-tertiary-text-decoration-color-focus: var(--color-palette-white);
  --button-tertiary-disabled-font-color: var(--color-palette-gray-300);

  /* ----------------------------  */
  /* SUCCESS */
  --button-success-background-color: var(--color-feedback-green-500);
  --button-success-border: var(--button-success-border);
  --button-success-font-color: var(--button-primary-font-color);
  --button-success-font-color-hover: var(--button-primary-font-color-hover);

  --typography-color: #ffffff;
  --font-other-kicker-color: #ffffff;
}

.subtheme-ck-eoss {
  --promo-background-color: #c51718;
  --color-component-background: #c51718;

  --header-pre-hover-background-color: #c51718;
  --header-pre-hover-color: #fff;
  --header-pre-hover-icon-count-color: #fff;

  --promo-text-color: #ffffff;
  --promo-code-button-text-color: #ffffff;
  --promo-code-button-border-color: #ffffff;
  --promo-code-button-icon-color: #ffffff;

  --button-primary-font-color: #c51718;
}

.subtheme-ck-members-week {
  --subtheme-bg: #f9f9fb;
  --subtheme-font: #37393e;

  --promo-background-color: var(--subtheme-bg);
  --color-component-background: var(--subtheme-bg);

  --header-pre-hover-background-color: var(--subtheme-bg);
  --header-pre-hover-color: #16161a;
  --header-pre-hover-icon-count-color: #16161a;

  --promo-text-color: var(--subtheme-font);
  --promo-code-button-text-color: var(--subtheme-font);
  --promo-code-button-border-color: var(--subtheme-font);
  --promo-code-button-icon-color: var(--subtheme-font);

  --button-primary-background-color: var(--subtheme-font);
  --button-primary-background-color-hover: transparent;
  --button-primary-font-color: var(--subtheme-bg);
  --button-primary-border: 1px solid var(--subtheme-font);
  --button-primary-border-hover: 1px solid var(--subtheme-font);
  --button-primary-font-color-hover: var(--subtheme-font);

  --button-secondary-background-color: transparent;
  --button-secondary-background-color-hover: var(--subtheme-font);
  --button-secondary-font-color: var(--subtheme-font);
  --button-secondary-font-color-hover: var(--subtheme-bg);
  --button-secondary-border: 1px solid var(--subtheme-font);
  --button-secondary-border-hover: 1px solid var(--subtheme-font);
  --button-secondary-border-color-hover: var(--subtheme-font);

  --button-tertiary-font-color: var(--subtheme-font);
  --button-tertiary-font-color-hover: var(--subtheme-font);
  --button-tertiary-text-decoration-color-focus: var(--subtheme-font);
  --button-tertiary-text-decoration-color: var(--subtheme-font);
}

.subtheme-ck-mothers-day {
  --subtheme-bg: #fbf6f3;
  --subtheme-font: #000;

  --promo-background-color: var(--subtheme-bg);
  --color-component-background: var(--subtheme-bg);

  --header-pre-hover-background-color: var(--subtheme-bg);
  --header-pre-hover-color: #000;
  --header-pre-hover-icon-count-color: #000;

  --promo-text-color: var(--subtheme-font);
  --promo-code-button-text-color: var(--subtheme-font);
  --promo-code-button-border-color: var(--subtheme-font);
  --promo-code-button-icon-color: var(--subtheme-font);

  --button-primary-background-color: var(--subtheme-font);
  --button-primary-background-color-hover: transparent;
  --button-primary-font-color: var(--subtheme-bg);
  --button-primary-border: 1px solid var(--subtheme-font);
  --button-primary-border-hover: 1px solid var(--subtheme-font);
  --button-primary-font-color-hover: var(--subtheme-font);

  --button-secondary-background-color: transparent;
  --button-secondary-background-color-hover: var(--subtheme-font);
  --button-secondary-font-color: var(--subtheme-font);
  --button-secondary-font-color-hover: var(--subtheme-bg);
  --button-secondary-border: 1px solid var(--subtheme-font);
  --button-secondary-border-hover: 1px solid var(--subtheme-font);
  --button-secondary-border-color-hover: var(--subtheme-font);

  --button-tertiary-font-color: var(--subtheme-font);
  --button-tertiary-font-color-hover: var(--subtheme-font);
  --button-tertiary-text-decoration-color-focus: var(--subtheme-font);
  --button-tertiary-text-decoration-color: var(--subtheme-font);
}

.subtheme-ck-singlesday {
  --color-foreground: #da291a;
  --color-background: #f2ede9;

  --color-interaction-brand-primary-hover: #ad2216;
  --color-transparent-brand-primary-transparent-10: rgba(218, 41, 26, 0.1);
  --color-feedback-error: #ad2216;

  --component-hero-wrapper-padding-bottom-desktop: 40px;
  --component-hero-wrapper-padding-bottom: 0;
  --component-hero-text-colour: var(--color-foreground);

  --countdown-typography-dark-theme-color: var(--color-foreground);
  --countdown-typography-light-theme-color: var(--color-foreground);

  --component-split-background-colour: var(--color-background);
  --component-split-typography-colour: var(--color-foreground);
  --component-split-subtitle-typography-colour: var(--color-foreground);
  --event-sign-up-form-typography-color: var(--color-foreground);

  --component-campaign-title-color-dark: var(--color-foreground);
  --component-campaign-title-typography-colour: var(--color-foreground);

  --typography-color: var(--color-foreground);
  --font-other-kicker-color: var(--color-foreground);
  --color-component-background: var(--color-background);

  --component-flex_module-gap: 0px;
  --component-flex_module-gap-desktop: 0px;
  --component-flex_module-background-color: var(--color-background);

  --component-recommendations-background-color: var(--color-background);

  --button-primary-background-color: var(--color-foreground);
  --button-primary-background-color-hover: transparent;
  --button-primary-font-color: var(--color-background);
  --button-primary-border: 1px solid var(--color-foreground);
  --button-primary-border-hover: 1px solid var(--color-foreground);
  --button-primary-font-color-hover: var(--color-foreground);

  --button-secondary-background-color: transparent;
  --button-secondary-background-color-hover: var(--color-foreground);
  --button-secondary-font-color: var(--color-foreground);
  --button-secondary-font-color-hover: var(--color-background);
  --button-secondary-border: 1px solid var(--color-foreground);
  --button-secondary-border-hover: 1px solid var(--color-foreground);
  --button-secondary-border-color-hover: var(--color-foreground);

  --button-tertiary-font-color: var(--color-foreground);
  --button-tertiary-font-color-hover: var(--color-foreground);
  --button-tertiary-text-decoration-color-focus: var(--color-foreground);
  --button-tertiary-text-decoration-color: var(--color-foreground);

  --promo-text-color: var(--color-foreground);
  --promo-background-color: var(--color-background);

  --promo-code-button-text-color: var(--color-foreground);
  --promo-code-button-border-color: var(--color-foreground);
  --promo-code-button-icon-color: var(--color-foreground);

  --header-pre-hover-background-color: var(--color-background);
  --header-pre-hover-color: var(--color-foreground);
  --header-pre-hover-icon-count-color: var(--color-background);
  --mm-promo-highlight-pre-hover-desktop-colour: var(--color-foreground);

  --component-countdown-typography-dark-theme-color: var(--color-foreground);
  --component-countdown-typography-light-theme-color: var(--color-foreground);

  --categoryEntries-background-colour: var(--color-background);
  --categoryEntries-heading-text-colour: var(--color-foreground);
  --categoryEntries-subheading-text-colour: var(--color-foreground);
}

.subtheme-ck-earlyaccess {
  --color-foreground: #000000;
  --color-background: #f2ede9;

  --component-hero-wrapper-padding-bottom-desktop: 40px;
  --component-hero-wrapper-padding-bottom: 0;

  --component-split-background-colour: var(--color-background);

  --color-component-background: var(--color-background);

  --component-flex_module-gap: 0px;
  --component-flex_module-gap-desktop: 0px;
  --component-flex_module-background-color: var(--color-background);

  --button-secondary-background-color: transparent;
  --button-secondary-background-color-hover: var(--color-foreground);
  --button-secondary-font-color: var(--color-foreground);
  --button-secondary-font-color-hover: var(--color-background);
  --button-secondary-border: 1px solid var(--color-foreground);
  --button-secondary-border-hover: 1px solid var(--color-foreground);
  --button-secondary-border-color-hover: var(--color-foreground);

  --component-recommendations-background-color: var(--color-background);

  --promo-background-color: var(--color-background);

  --header-pre-hover-background-color: var(--color-background);
  --header-pre-hover-color: var(--color-foreground);
  --header-pre-hover-icon-count-color: var(--color-background);
  --mm-promo-highlight-pre-hover-desktop-colour: var(--color-foreground);

  --categoryEntries-background-colour: var(--color-background);
}

.subtheme-ck-blackfriday {
  --color-foreground: #000000;
  --color-background: #da291a;

  --component-hero-wrapper-padding-bottom-desktop: 40px;
  --component-hero-wrapper-padding-bottom: 0;

  --component-split-background-colour: var(--color-background);

  --color-component-background: var(--color-background);

  --component-flex_module-gap: 0px;
  --component-flex_module-gap-desktop: 0px;
  --component-flex_module-background-color: var(--color-background);

  --button-secondary-background-color: transparent;
  --button-secondary-background-color-hover: var(--color-foreground);
  --button-secondary-font-color: var(--color-foreground);
  --button-secondary-font-color-hover: var(--color-background);
  --button-secondary-border: 1px solid var(--color-foreground);
  --button-secondary-border-hover: 1px solid var(--color-foreground);
  --button-secondary-border-color-hover: var(--color-foreground);

  --component-recommendations-background-color: var(--color-background);

  --promo-background-color: var(--color-background);

  --header-pre-hover-background-color: var(--color-background);
  --header-pre-hover-color: var(--color-foreground);
  --header-pre-hover-icon-count-color: var(--color-background);
  --mm-promo-highlight-pre-hover-desktop-colour: var(--color-foreground);

  --categoryEntries-background-colour: var(--color-background);
}

.subtheme-ck-futura-font-ck-sale {
  --subtheme-font-family: Futura LT Pro Book;
  --subtheme-font-weight: 400;
  --subtheme-font-style: normal;

  /*  Desktop H1 typography */
  --font-heading-lg-h1-font-size: 6.25rem;
  --font-heading-lg-h1-font-weight: var(--subtheme-font-weight);
  --font-heading-lg-h1-font-family: var(--subtheme-font-family);
  --font-heading-lg-h1-font-style: var(--subtheme-font-style);
  --typography-h1-heading-tablet-letter-spacing: -4px;
  --font-heading-lg-h1-line-height: 0.9;

  /*  Mobile H1 typography */
  --font-heading-xs-h1-font-size: var(--sizes-spacing-48);
  --font-heading-xs-h1-font-weight: var(--subtheme-font-weight);
  --font-heading-xs-h1-font-family: var(--subtheme-font-family);
  --font-heading-xs-h1-font-style: var(--subtheme-font-style);
  --typography-h1-heading-mobile-letter-spacing: -1.92px;
  --font-heading-xs-h1-line-height: 0.9;

  /*  Desktop XL typography */
  --font-heading-lg-title-xl-font-size: 7.5rem;
  --font-heading-lg-title-xl-font-weight: var(--subtheme-font-weight);
  --font-heading-lg-title-xl-font-family: var(--subtheme-font-family);
  --font-heading-lg-title-xl-font-style: var(--subtheme-font-style);
  --font-heading-lg-title-xl-letter-spacing: -4px;
  --font-heading-lg-title-xl-line-height: 0.9;

  /*  Mobile XL typography */
  --font-heading-xs-title-xl-font-size: var(--sizes-spacing-56);
  --font-heading-xs-title-xl-font-weight: var(--subtheme-font-weight);
  --font-heading-xs-title-xl-font-family: var(--subtheme-font-family);
  --font-heading-xs-title-xl-font-style: var(--subtheme-font-style);
  --font-heading-xs-title-xl-letter-spacing: -4px;
  --font-heading-xs-title-xl-line-height: 0.9;

  /*  Desktop H2 typography */
  --font-heading-lg-h2-font-size: 3.625rem;
  --font-heading-lg-h2-font-weight: var(--subtheme-font-weight);
  --font-heading-lg-h2-font-family: var(--subtheme-font-family);
  --font-heading-lg-h2-font-style: var(--subtheme-font-style);
  --font-heading-lg-h2-letter-spacing: -4px;
  --font-heading-lg-h2-line-height: 0.9;

  /*  Mobile H2 typography */
  --font-heading-xs-h2-font-size: var(--sizes-spacing-40);
  --font-heading-xs-h2-font-weight: var(--subtheme-font-weight);
  --font-heading-xs-h2-font-family: var(--subtheme-font-family);
  --font-heading-xs-h2-font-style: var(--subtheme-font-style);
  --font-heading-xs-h2-letter-spacing: -2.5px;
  --font-heading-xs-h2-line-height: 0.9;

  /* Hero module */
  --component-hero-title-letter-spacing-tablet: -4px;
  --component-hero-title-letter-spacing-mobile: -4px;
  --component-hero-typography-max-width: 60vw;
  --component-hero-collectionTitle-padding: 0 0 2.625rem 0;

  /* Promo module */
  --component-promo-title-letter-spacing-tablet: -4px;
  --component-promo-title-letter-spacing-mobile: -4px;
}