/* CFS Approved Green CTA theme v1
 * Additive, slug-scoped and reversible: remove/disable the active theme row
 * to return to the current stylesheet without undoing existing CSS.
 */

html body.cfs2030-shell[data-cfs-theme="cfs-approved-green-cta"] {
  --cfs-brand: #4D403A;
  --cfs-on-brand: #FFFFFF;
  --cfs-announcement-bg: #4D403A;
  --cfs-announcement-text: #FFFFFF;
  --cfs-header-bg: #FFFFFF;
  --cfs-header-text: #2D2926;
  --cfs-nav-bg: #FAF8F5;
  --cfs-nav-text: #4D403A;
  --cfs-nav-hover-bg: #DFDACF;
  --cfs-nav-active-bg: #4D403A;
  --cfs-nav-active-text: #FFFFFF;
  --cfs-footer-bg: #DFDACF;
  --cfs-footer-text: #2D2926;
  --cfs-footer-link: #4D403A;
  --cfs-footer-link-hover: #2D2926;
  --cfs-cta-primary: #1F4B3A;
  --cfs-cta-text: #FFFFFF;
  --cfs-cta-hover: #173B2E;
  --cfs-pdp-cta-primary: var(--cfs-cta-primary);
  --cfs-pdp-cta-text: var(--cfs-cta-text);
  --cfs-pdp-cta-hover: var(--cfs-cta-hover);
  --cfs-text-primary: #2D2926;
  --cfs-text-secondary: #4D403A;
  --cfs-text-muted: #6B625D;
  --cfs-page-background: #FAF8F5;
  --cfs-surface: #FFFFFF;
  --cfs-border-subtle: #DFDACF;
  --cfs-border-strong: #4D403A;
  --cfs-panel-bg: #FAF8F5;
  --cfs-link: #4D403A;
  --cfs-link-hover: #2D2926;
  --cfs-sale-urgency: #A6442E;
  --cfs-cta-disabled-bg: #DFDACF;
  --cfs-cta-disabled-text: #6B625D;
  --cfs-focus-ring: #2D2926;
  --cfs-action-secondary-bg: #FFFFFF;
  --cfs-action-secondary-text: #4D403A;
  --cfs-action-secondary-border: #4D403A;
  --cfs-action-secondary-hover-bg: #DFDACF;
  --cfs-action-secondary-hover-text: #2D2926;
  --cfs-sale-badge-text: #FFFFFF;
  --cfs-price-regular: #2D2926;
  --cfs-price-crossed: #6B625D;

  /* Safe compatibility aliases. Functional status and messaging tokens are
     deliberately not remapped. */
  --cfs-theme-white: var(--cfs-surface);
  --cfs-theme-pearl: var(--cfs-page-background);
  --cfs-theme-khaki: var(--cfs-border-subtle);
  --cfs-theme-cacao: var(--cfs-brand);
  --cfs-theme-slate: var(--cfs-text-primary);
  --cfs-theme-text: var(--cfs-text-primary);
  --cfs-on-white: var(--cfs-text-primary);
  --color-navy-text: var(--cfs-text-primary);
  --cfs-card-body: var(--cfs-text-primary);
  --cfs-card-cacao: var(--cfs-brand);
  --cfs-card-line: var(--cfs-border-subtle);
  --cfs-card-sale: var(--cfs-sale-urgency);
  --color-link: var(--cfs-link);
  --color-link-hover: var(--cfs-link-hover);
  --color-price-regular: var(--cfs-price-regular);
  --color-price-strikethrough: var(--cfs-price-crossed);
  --color-border-strong: var(--cfs-border-strong);
  --ink: var(--cfs-text-primary);
  color: var(--cfs-text-primary);
  background: var(--cfs-page-background) !important;
}

/* Keep the visible page canvas connected to the manager's Page background
   value. Checkout and legacy page wrappers previously painted white over the
   body, which made a valid JSON change appear not to work. Cards and form
   surfaces remain independently controlled by --cfs-surface. */
:is(#cfs-approved-page-canvas#cfs-approved-page-canvas#cfs-approved-page-canvas#cfs-approved-page-canvas, html)
body.cfs2030-shell[data-cfs-theme="cfs-approved-green-cta"]
  :where(#main-content.cfs-main-content, .cfs-checkout-shell, .cfs-checkout-shell .checkout-page, .paymentPageNew) {
  background-color: var(--cfs-page-background) !important;
}

html body.cfs2030-shell[data-cfs-theme="cfs-approved-green-cta"]
  :where(input, select, textarea, .card, .product-card, .cfs-product-card, .checkout-card) {
  border-color: var(--cfs-border-subtle);
}

html body.cfs2030-shell[data-cfs-theme="cfs-approved-green-cta"]
  :where(input, select, textarea, .card, .product-card, .cfs-product-card, .checkout-card) {
  background-color: var(--cfs-surface);
}

html body.cfs2030-shell[data-cfs-theme="cfs-approved-green-cta"]
  :where(h1, h2, h3, h4, h5, h6) {
  color: var(--cfs-text-primary);
}

:is(#cfs-approved-theme#cfs-approved-theme#cfs-approved-theme#cfs-approved-theme#cfs-approved-theme#cfs-approved-theme#cfs-approved-theme#cfs-approved-theme#cfs-approved-theme#cfs-approved-theme#cfs-approved-theme#cfs-approved-theme, html)
body.cfs2030-shell[data-cfs-theme="cfs-approved-green-cta"]
  .cfs-checkout-shell .checkout-page :where(h1, h2, h3, h4, h5, h6) {
  color: var(--cfs-text-primary) !important;
  -webkit-text-fill-color: var(--cfs-text-primary) !important;
}

/* Brand surfaces stay brown. The normal wordmark remains brown on light
   surfaces; checkout/dark-surface wordmarks remain white by existing rules. */
html body.cfs2030-shell[data-cfs-theme="cfs-approved-green-cta"]
  :where(.top-sale, .top-promotion, .cfs-promo-strip) {
  background-color: var(--cfs-brand);
}

/* Independently configurable top announcement strip. */
:is(#cfs-approved-announcement#cfs-approved-announcement#cfs-approved-announcement#cfs-approved-announcement, html)
body.cfs2030-shell[data-cfs-theme="cfs-approved-green-cta"] :where(.cfs-announcement, .cfs-mobile-announcement) {
  color: var(--cfs-announcement-text) !important;
  -webkit-text-fill-color: var(--cfs-announcement-text) !important;
  background-color: var(--cfs-announcement-bg) !important;
}

body.cfs2030-shell[data-cfs-theme="cfs-approved-green-cta"] :where(.cfs-announcement, .cfs-mobile-announcement) :where(a, span, strong, svg) {
  color: inherit;
  stroke: currentColor;
}

/* Checkout renders its desktop strip as a pseudo-element and its compact
   mobile strip on the header itself. Both follow the manager-controlled
   announcement colours used by the main storefront strip. */
:is(#cfs-approved-announcement#cfs-approved-announcement#cfs-approved-announcement#cfs-approved-announcement#cfs-approved-announcement#cfs-approved-announcement#cfs-approved-announcement#cfs-approved-announcement#cfs-approved-announcement#cfs-approved-announcement#cfs-approved-announcement#cfs-approved-announcement, html)
body.cfs2030-shell[data-cfs-theme="cfs-approved-green-cta"] .cfs-checkout-shell .transaction-header::before {
  background: var(--cfs-announcement-bg) !important;
}

@media (max-width: 1023.98px) {
  :is(#cfs-approved-announcement#cfs-approved-announcement#cfs-approved-announcement#cfs-approved-announcement#cfs-approved-announcement#cfs-approved-announcement#cfs-approved-announcement#cfs-approved-announcement#cfs-approved-announcement#cfs-approved-announcement#cfs-approved-announcement#cfs-approved-announcement, html)
  body.cfs2030-shell[data-cfs-theme="cfs-approved-green-cta"] .cfs-checkout-shell .transaction-header {
    color: var(--cfs-announcement-text) !important;
    -webkit-text-fill-color: var(--cfs-announcement-text) !important;
    background: var(--cfs-announcement-bg) !important;
  }
}

/* Semantic header and navigation controls. These use separate variables so
   the manager can edit them without changing the logo or purchase CTAs. */
html body.cfs2030-shell[data-cfs-theme="cfs-approved-green-cta"]
  :where(.cfs-site-header, .cfs-desktop-header, .cfs-desktop-main-header, .cfs-mobile-header, .cfs-mobile-main-header, .cfs-minimal-header) {
  color: var(--cfs-header-text) !important;
  background-color: var(--cfs-header-bg) !important;
}

html body.cfs2030-shell[data-cfs-theme="cfs-approved-green-cta"] .cfs-site-header
  :where(.cfs-desktop-search, .cfs-icon-button, .cfs-utility-nav > a, .cfs-account-menu > summary) {
  color: var(--cfs-header-text) !important;
}

:is(#cfs-approved-semantic#cfs-approved-semantic#cfs-approved-semantic#cfs-approved-semantic#cfs-approved-semantic#cfs-approved-semantic, html)
body.cfs2030-shell[data-cfs-theme="cfs-approved-green-cta"] header.cfs-site-header
  :where(.cfs-desktop-search, .cfs-icon-button, .cfs-utility-nav > a, .cfs-account-menu > summary) {
  color: var(--cfs-header-text) !important;
  -webkit-text-fill-color: var(--cfs-header-text) !important;
}

:is(#cfs-approved-semantic#cfs-approved-semantic#cfs-approved-semantic#cfs-approved-semantic#cfs-approved-semantic#cfs-approved-semantic, html)
body.cfs2030-shell[data-cfs-theme="cfs-approved-green-cta"] header.cfs-site-header
  :where(.cfs-desktop-search, .cfs-icon-button, .cfs-utility-nav > a, .cfs-account-menu > summary)
  :where(svg, use, span) {
  color: inherit !important;
  stroke: currentColor !important;
}

html body.cfs2030-shell[data-cfs-theme="cfs-approved-green-cta"] .cfs-brand {
  color: var(--cfs-brand) !important;
}

html body.cfs2030-shell[data-cfs-theme="cfs-approved-green-cta"]
  :where(.cfs-editorial-nav, .cfs-category-nav, .cfs-mobile-menu, .cfs-mobile-menu-bar) {
  color: var(--cfs-nav-text) !important;
  background-color: var(--cfs-nav-bg) !important;
}

/* Navigation background also owns the opened desktop mega-menu and mobile
   drawer levels, so one backend colour picker changes the complete menu rather
   than only the two closed navigation bars. */
:is(#cfs-approved-navigation#cfs-approved-navigation#cfs-approved-navigation#cfs-approved-navigation#cfs-approved-navigation#cfs-approved-navigation#cfs-approved-navigation#cfs-approved-navigation#cfs-approved-navigation#cfs-approved-navigation, html)
body.cfs2030-shell[data-cfs-theme="cfs-approved-green-cta"]
  :where(.cfs-mega-menu, .cfs-mega-main, .cfs-mobile-menu, .cfs-mobile-menu-bar, .cfs-mobile-menu-level, .cfs-mobile-submenu-content) {
  color: var(--cfs-nav-text) !important;
  background-color: var(--cfs-nav-bg) !important;
}

body.cfs2030-shell[data-cfs-theme="cfs-approved-green-cta"]
  :where(.cfs-mega-column, .cfs-mobile-submenu-content)
  :where(a, button, h2, h3) {
  color: var(--cfs-nav-text) !important;
}

body.cfs2030-shell[data-cfs-theme="cfs-approved-green-cta"]
  :where(.cfs-mega-promo, .cfs-mega-trust) {
  background-color: var(--cfs-panel-bg) !important;
  border-color: var(--cfs-border-subtle) !important;
}

html body.cfs2030-shell[data-cfs-theme="cfs-approved-green-cta"]
  :where(.cfs-editorial-nav, .cfs-category-nav, .cfs-mobile-menu-level)
  :where(a, button) {
  color: var(--cfs-nav-text) !important;
}

html body.cfs2030-shell[data-cfs-theme="cfs-approved-green-cta"]
  :where(.cfs-editorial-nav, .cfs-category-nav, .cfs-mobile-menu-level)
  :where(a, button):is(:hover, :focus-visible) {
  color: var(--cfs-nav-text) !important;
  background-color: var(--cfs-nav-hover-bg) !important;
}

html body.cfs2030-shell[data-cfs-theme="cfs-approved-green-cta"]
  :where(.cfs-editorial-nav, .cfs-category-nav, .cfs-mobile-menu-level)
  :where(.active, .is-active, [aria-current="page"], [aria-expanded="true"]) {
  color: var(--cfs-nav-active-text) !important;
  background-color: var(--cfs-nav-active-bg) !important;
}

/* Footer remains a dark brand surface by default, but is now independently
   themeable. Functional newsletter messages retain their own status colours. */
html body.cfs2030-shell[data-cfs-theme="cfs-approved-green-cta"] .cfs-footer {
  color: var(--cfs-footer-text) !important;
  background-color: var(--cfs-footer-bg) !important;
}

html body.cfs2030-shell[data-cfs-theme="cfs-approved-green-cta"] .cfs-footer a {
  color: var(--cfs-footer-link) !important;
}

html body.cfs2030-shell[data-cfs-theme="cfs-approved-green-cta"] .cfs-footer a:is(:hover, :focus-visible) {
  color: var(--cfs-footer-link-hover) !important;
}

html body.cfs2030-shell[data-cfs-theme="cfs-approved-green-cta"] .cfs-mobile-bottom-nav {
  color: var(--cfs-nav-active-text) !important;
  background-color: var(--cfs-nav-active-bg) !important;
}

/* Supersede the legacy palette authority without modifying its source file. */
:is(#cfs-approved-semantic#cfs-approved-semantic#cfs-approved-semantic#cfs-approved-semantic#cfs-approved-semantic#cfs-approved-semantic, html)
body.cfs2030-shell[data-cfs-theme="cfs-approved-green-cta"] .cfs-footer.cfs-footer {
  color: var(--cfs-footer-text) !important;
  background: var(--cfs-footer-bg) !important;
  background-color: var(--cfs-footer-bg) !important;
}

:is(#cfs-approved-semantic#cfs-approved-semantic#cfs-approved-semantic#cfs-approved-semantic#cfs-approved-semantic#cfs-approved-semantic, html)
body.cfs2030-shell[data-cfs-theme="cfs-approved-green-cta"] .cfs-footer.cfs-footer
  :where(h1, h2, h3, h4, h5, h6, p, label, summary, span, strong, b, small, li, div) {
  color: var(--cfs-footer-text) !important;
  -webkit-text-fill-color: var(--cfs-footer-text) !important;
}

:is(#cfs-approved-semantic#cfs-approved-semantic#cfs-approved-semantic#cfs-approved-semantic#cfs-approved-semantic#cfs-approved-semantic, html)
body.cfs2030-shell[data-cfs-theme="cfs-approved-green-cta"] .cfs-footer.cfs-footer a {
  color: var(--cfs-footer-link) !important;
  -webkit-text-fill-color: var(--cfs-footer-link) !important;
}

:is(#cfs-approved-semantic#cfs-approved-semantic#cfs-approved-semantic#cfs-approved-semantic#cfs-approved-semantic#cfs-approved-semantic, html)
body.cfs2030-shell[data-cfs-theme="cfs-approved-green-cta"] .cfs-footer.cfs-footer a:is(:hover, :focus-visible) {
  color: var(--cfs-footer-link-hover) !important;
  -webkit-text-fill-color: var(--cfs-footer-link-hover) !important;
}

/* Social icons must stay visible with either a light or dark theme footer.
   The neutral surface also avoids recolouring third-party brand assets. */
:is(#cfs-approved-socials#cfs-approved-socials#cfs-approved-socials#cfs-approved-socials#cfs-approved-socials#cfs-approved-socials, html)
body.cfs2030-shell[data-cfs-theme="cfs-approved-green-cta"] .cfs-footer.cfs-footer .cfs-socials.cfs-socials a {
  width: 38px !important;
  height: 38px !important;
  padding: 8px !important;
  display: inline-grid !important;
  place-items: center !important;
  border: 1px solid var(--cfs-border-subtle) !important;
  border-radius: 50% !important;
  color: var(--cfs-brand) !important;
  -webkit-text-fill-color: var(--cfs-brand) !important;
  background: var(--cfs-surface) !important;
  background-color: var(--cfs-surface) !important;
  box-shadow: 0 1px 3px rgb(38 38 38 / 12%) !important;
  opacity: 1 !important;
  transition: transform .18s ease, background-color .18s ease, border-color .18s ease !important;
}

:is(#cfs-approved-socials#cfs-approved-socials#cfs-approved-socials#cfs-approved-socials#cfs-approved-socials#cfs-approved-socials, html)
body.cfs2030-shell[data-cfs-theme="cfs-approved-green-cta"] .cfs-footer.cfs-footer .cfs-socials.cfs-socials a:is(:hover, :focus-visible) {
  border-color: var(--cfs-border-strong) !important;
  color: var(--cfs-text-primary) !important;
  -webkit-text-fill-color: var(--cfs-text-primary) !important;
  background: var(--cfs-panel-bg) !important;
  background-color: var(--cfs-panel-bg) !important;
  transform: translateY(-2px);
}

:is(#cfs-approved-socials#cfs-approved-socials#cfs-approved-socials#cfs-approved-socials#cfs-approved-socials#cfs-approved-socials, html)
body.cfs2030-shell[data-cfs-theme="cfs-approved-green-cta"] .cfs-footer.cfs-footer .cfs-socials.cfs-socials a:focus-visible {
  outline: 3px solid var(--cfs-focus-ring) !important;
  outline-offset: 3px !important;
}

:is(#cfs-approved-socials#cfs-approved-socials#cfs-approved-socials#cfs-approved-socials#cfs-approved-socials#cfs-approved-socials, html)
body.cfs2030-shell[data-cfs-theme="cfs-approved-green-cta"] .cfs-footer.cfs-footer .cfs-socials.cfs-socials :where(img, .cfs-social-icon) {
  width: 22px !important;
  height: 22px !important;
  display: block !important;
  object-fit: contain !important;
  color: var(--cfs-brand) !important;
  fill: currentColor !important;
  stroke: currentColor !important;
  filter: brightness(0) saturate(100%) opacity(.88) !important;
  opacity: 1 !important;
}

html body.cfs2030-shell[data-cfs-theme="cfs-approved-green-cta"]
  :where(.cfs-mini-cart-panel__footer, .cfs-info-page__toc, .contents-card, .contact-options) {
  background-color: var(--cfs-panel-bg) !important;
}

html body.cfs2030-shell[data-cfs-theme="cfs-approved-green-cta"]
  :where(.cfs-mini-cart-panel__header span, .cfs-search-panel__help, .cfs-card-rating small, .cfs-price__from) {
  color: var(--cfs-text-muted) !important;
}

html body.cfs2030-shell[data-cfs-theme="cfs-approved-green-cta"]
  :where(.cfs-breadcrumb, .static-article, .cfs-info-page__content, .cfs-sitemap-page)
  a:not(.btn):not([class*="button"]) {
  color: var(--cfs-link) !important;
}

html body.cfs2030-shell[data-cfs-theme="cfs-approved-green-cta"]
  :where(.cfs-breadcrumb, .static-article, .cfs-info-page__content, .cfs-sitemap-page)
  a:not(.btn):not([class*="button"]):is(:hover, :focus-visible) {
  color: var(--cfs-link-hover) !important;
}

/* Secondary/outline actions are kept visually below the green commerce path. */
html body.cfs2030-shell[data-cfs-theme="cfs-approved-green-cta"]
  :where(.cfs-button--secondary, .cfs-cart-continue, .cfs-active-filter-clear) {
  color: var(--cfs-action-secondary-text) !important;
  -webkit-text-fill-color: var(--cfs-action-secondary-text) !important;
  background-color: var(--cfs-action-secondary-bg) !important;
  border-color: var(--cfs-action-secondary-border) !important;
}

html body.cfs2030-shell[data-cfs-theme="cfs-approved-green-cta"]
  :where(.cfs-button--secondary, .cfs-cart-continue, .cfs-active-filter-clear):is(:hover, :active) {
  color: var(--cfs-action-secondary-hover-text) !important;
  -webkit-text-fill-color: var(--cfs-action-secondary-hover-text) !important;
  background-color: var(--cfs-action-secondary-hover-bg) !important;
  border-color: var(--cfs-action-secondary-border) !important;
}

/* Deliberately narrow purchase-action set. It excludes normal navigation,
   filters, content links, badges and payment-provider branded controls. */
:is(#cfs-approved-theme#cfs-approved-theme#cfs-approved-theme#cfs-approved-theme#cfs-approved-theme#cfs-approved-theme#cfs-approved-theme#cfs-approved-theme#cfs-approved-theme#cfs-approved-theme#cfs-approved-theme#cfs-approved-theme, html)
body.cfs2030-shell[data-cfs-theme="cfs-approved-green-cta"]
  :where(
    .cfs-home-hero-primary,
    .cfs-range-primary,
    .cfs-mini-cart-panel__checkout,
    .cfs-product-card:not(:has(.stockInfo.outOfStock)) .cfs-card-cta,
    .cfs-card-add-to-cart,
    .addToCartBtn,
    .cfs-pdp-add-btn,
    .add-to-cart,
    .addToCart,
    .add_to_cart,
    .cfs-add-to-cart,
    .configBtn,
    .bc-live-configure,
    [data-bundle-add],
    [data-sticky-basket],
    .checkOutBtn,
    .checkoutBtn,
    .cfs-checkout-button,
    .cfs-mobile-checkout > a,
    #paymentButtonsBlock > a[data-cfs-checkout-link]:not(#btnClearpayPayment):not(#btnAtoaPayment),
    #proceedWithsecureCheckoutBtn,
    .retry-button,
    .pay-button,
    .mobile-payment-bar button
  ) {
  color: var(--cfs-cta-text) !important;
  -webkit-text-fill-color: var(--cfs-cta-text) !important;
  background-color: var(--cfs-cta-primary) !important;
  border-color: var(--cfs-cta-primary) !important;
}

:is(#cfs-approved-theme#cfs-approved-theme#cfs-approved-theme#cfs-approved-theme#cfs-approved-theme#cfs-approved-theme#cfs-approved-theme#cfs-approved-theme#cfs-approved-theme#cfs-approved-theme#cfs-approved-theme#cfs-approved-theme, html)
body.cfs2030-shell[data-cfs-theme="cfs-approved-green-cta"]
  :where(
    .cfs-home-hero-primary,
    .cfs-range-primary,
    .cfs-mini-cart-panel__checkout,
    .cfs-product-card:not(:has(.stockInfo.outOfStock)) .cfs-card-cta,
    .cfs-card-add-to-cart,
    .addToCartBtn,
    .cfs-pdp-add-btn,
    .add-to-cart,
    .addToCart,
    .add_to_cart,
    .cfs-add-to-cart,
    .configBtn,
    .bc-live-configure,
    [data-bundle-add],
    [data-sticky-basket],
    .checkOutBtn,
    .checkoutBtn,
    .cfs-checkout-button,
    .cfs-mobile-checkout > a,
    #paymentButtonsBlock > a[data-cfs-checkout-link]:not(#btnClearpayPayment):not(#btnAtoaPayment),
    #proceedWithsecureCheckoutBtn,
    .retry-button,
    .pay-button,
    .mobile-payment-bar button
  ):is(:hover, :active) {
  color: var(--cfs-cta-text) !important;
  -webkit-text-fill-color: var(--cfs-cta-text) !important;
  background-color: var(--cfs-cta-hover) !important;
  border-color: var(--cfs-cta-hover) !important;
}

:is(#cfs-approved-theme#cfs-approved-theme#cfs-approved-theme#cfs-approved-theme#cfs-approved-theme#cfs-approved-theme#cfs-approved-theme#cfs-approved-theme#cfs-approved-theme#cfs-approved-theme#cfs-approved-theme#cfs-approved-theme, html)
body.cfs2030-shell[data-cfs-theme="cfs-approved-green-cta"]
  :where(
    .cfs-home-hero-primary,
    .cfs-range-primary,
    .cfs-mini-cart-panel__checkout,
    .cfs-card-cta,
    .cfs-card-add-to-cart,
    .addToCartBtn,
    .cfs-pdp-add-btn,
    .add-to-cart,
    .addToCart,
    .add_to_cart,
    .cfs-add-to-cart,
    .configBtn,
    .bc-live-configure,
    [data-bundle-add],
    [data-sticky-basket],
    .checkOutBtn,
    .checkoutBtn,
    .cfs-checkout-button,
    .cfs-mobile-checkout > a,
    #paymentButtonsBlock > a[data-cfs-checkout-link],
    #proceedWithsecureCheckoutBtn,
    .retry-button,
    .pay-button,
    .mobile-payment-bar button
  ):focus-visible {
  outline: 3px solid var(--cfs-focus-ring) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 2px var(--cfs-surface) !important;
}

:is(#cfs-approved-theme#cfs-approved-theme#cfs-approved-theme#cfs-approved-theme#cfs-approved-theme#cfs-approved-theme#cfs-approved-theme#cfs-approved-theme#cfs-approved-theme#cfs-approved-theme#cfs-approved-theme#cfs-approved-theme, html)
body.cfs2030-shell[data-cfs-theme="cfs-approved-green-cta"]
  :where(
    .cfs-card-add-to-cart,
    .addToCartBtn,
    .cfs-pdp-add-btn,
    .add-to-cart,
    .addToCart,
    .add_to_cart,
    .cfs-add-to-cart,
    [data-bundle-add],
    [data-sticky-basket],
    .checkOutBtn,
    .checkoutBtn,
    .cfs-checkout-button,
    #proceedWithsecureCheckoutBtn,
    .retry-button,
    .pay-button,
    .mobile-payment-bar button
  ):disabled,
body.cfs2030-shell[data-cfs-theme="cfs-approved-green-cta"]
  :where(
    .cfs-card-cta,
    .cfs-card-add-to-cart,
    .addToCartBtn,
    .cfs-pdp-add-btn,
    .add-to-cart,
    .addToCart,
    .add_to_cart,
    .cfs-add-to-cart,
    .configBtn,
    .bc-live-configure,
    [data-bundle-add],
    [data-sticky-basket],
    .checkOutBtn,
    .checkoutBtn,
    .cfs-checkout-button,
    #proceedWithsecureCheckoutBtn,
    .pay-button,
    .mobile-payment-bar button
  ):is(.is-disabled, [aria-disabled="true"]) {
  color: var(--cfs-cta-disabled-text) !important;
  -webkit-text-fill-color: var(--cfs-cta-disabled-text) !important;
  background-color: var(--cfs-cta-disabled-bg) !important;
  border-color: var(--cfs-cta-disabled-bg) !important;
  opacity: 1 !important;
  cursor: not-allowed !important;
}

/* Non-purchase solid actions use the brand brown rather than the legacy
   slate. These remain visually subordinate to the green commerce path. */
:is(#cfs-approved-theme#cfs-approved-theme#cfs-approved-theme#cfs-approved-theme#cfs-approved-theme#cfs-approved-theme#cfs-approved-theme#cfs-approved-theme#cfs-approved-theme#cfs-approved-theme#cfs-approved-theme#cfs-approved-theme, html)
body.cfs2030-shell[data-cfs-theme="cfs-approved-green-cta"]
  :where(
    .cfs-auth-primary,
    .cfs-brand-page .brand-search button[type="submit"],
    .cfs-brand-page .directory-more,
    .cfs-brand-page .form-submit,
    .cfs-search-inline button[type="submit"],
    .p13-blog-search button[type="submit"],
    .cfs-newsletter button[type="submit"]
  ) {
  color: var(--cfs-cta-text) !important;
  -webkit-text-fill-color: var(--cfs-cta-text) !important;
  background-color: var(--cfs-brand) !important;
  border-color: var(--cfs-brand) !important;
}

:is(#cfs-approved-theme#cfs-approved-theme#cfs-approved-theme#cfs-approved-theme#cfs-approved-theme#cfs-approved-theme#cfs-approved-theme#cfs-approved-theme#cfs-approved-theme#cfs-approved-theme#cfs-approved-theme#cfs-approved-theme, html)
body.cfs2030-shell[data-cfs-theme="cfs-approved-green-cta"]
  :where(
    .cfs-auth-primary,
    .cfs-brand-page .brand-search button[type="submit"],
    .cfs-brand-page .directory-more,
    .cfs-brand-page .form-submit,
    .cfs-search-inline button[type="submit"],
    .p13-blog-search button[type="submit"],
    .cfs-newsletter button[type="submit"]
  ):is(:hover, :active) {
  color: var(--cfs-cta-text) !important;
  -webkit-text-fill-color: var(--cfs-cta-text) !important;
  background-color: var(--cfs-text-primary) !important;
  border-color: var(--cfs-text-primary) !important;
}

body.cfs2030-shell[data-cfs-theme="cfs-approved-green-cta"]
  :where(
    .cfs-auth-primary,
    .cfs-brand-page .brand-search button[type="submit"],
    .cfs-brand-page .directory-more,
    .cfs-brand-page .form-submit,
    .cfs-search-inline button[type="submit"],
    .p13-blog-search button[type="submit"],
    .cfs-newsletter button[type="submit"]
  ):focus-visible {
  outline: 3px solid var(--cfs-focus-ring) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 2px var(--cfs-surface) !important;
}

/* Out-of-stock cards are intentionally secondary. :has() is supported by
   current Chrome, Edge, Safari and Firefox; older browsers keep the existing
   safe brown treatment rather than receiving the purchase green. */
:is(#cfs-approved-theme#cfs-approved-theme#cfs-approved-theme#cfs-approved-theme#cfs-approved-theme#cfs-approved-theme#cfs-approved-theme#cfs-approved-theme#cfs-approved-theme#cfs-approved-theme#cfs-approved-theme#cfs-approved-theme, html)
body.cfs2030-shell[data-cfs-theme="cfs-approved-green-cta"]
  .cfs-product-card:has(.stockInfo.outOfStock) .cfs-card-cta {
  color: var(--cfs-action-secondary-text) !important;
  -webkit-text-fill-color: var(--cfs-action-secondary-text) !important;
  background-color: var(--cfs-action-secondary-bg) !important;
  border: 1px solid var(--cfs-action-secondary-border) !important;
  opacity: 1 !important;
}

:is(#cfs-approved-theme#cfs-approved-theme#cfs-approved-theme#cfs-approved-theme#cfs-approved-theme#cfs-approved-theme#cfs-approved-theme#cfs-approved-theme#cfs-approved-theme#cfs-approved-theme#cfs-approved-theme#cfs-approved-theme, html)
body.cfs2030-shell[data-cfs-theme="cfs-approved-green-cta"]
  .cfs-product-card:has(.stockInfo.outOfStock) .cfs-card-cta:is(:hover, :active) {
  color: var(--cfs-action-secondary-hover-text) !important;
  -webkit-text-fill-color: var(--cfs-action-secondary-hover-text) !important;
  background-color: var(--cfs-action-secondary-hover-bg) !important;
  border-color: var(--cfs-action-secondary-border) !important;
}

/* Sale/discount urgency only. Stock, validation, warning, success, WhatsApp
   and payment-provider colours remain owned by their existing components. */
:is(#cfs-approved-theme#cfs-approved-theme#cfs-approved-theme#cfs-approved-theme#cfs-approved-theme#cfs-approved-theme#cfs-approved-theme#cfs-approved-theme#cfs-approved-theme#cfs-approved-theme#cfs-approved-theme#cfs-approved-theme, html)
body.cfs2030-shell[data-cfs-theme="cfs-approved-green-cta"]
  :where(.cfs-price__current, .sale-price, .special-price, .cfs-price__sale, .price-sale, .ourPrice, .discount-message, .sale-message) {
  color: var(--cfs-sale-urgency) !important;
  -webkit-text-fill-color: var(--cfs-sale-urgency) !important;
  border-color: var(--cfs-sale-urgency) !important;
}

:is(#cfs-approved-theme#cfs-approved-theme#cfs-approved-theme#cfs-approved-theme#cfs-approved-theme#cfs-approved-theme#cfs-approved-theme#cfs-approved-theme#cfs-approved-theme#cfs-approved-theme#cfs-approved-theme#cfs-approved-theme, html)
body.cfs2030-shell[data-cfs-theme="cfs-approved-green-cta"]
  :where(.save-badge, .sale-badge, .badge-sale, .cfs-badge--sale, .discountTag, .saleTag, .cfs-price__absolute-saving, .promo-urgency) {
  color: var(--cfs-sale-badge-text) !important;
  -webkit-text-fill-color: var(--cfs-sale-badge-text) !important;
  background-color: var(--cfs-sale-urgency) !important;
  border-color: var(--cfs-sale-urgency) !important;
}

html body.cfs2030-shell[data-cfs-theme="cfs-approved-green-cta"]
  .cfs-price:not(:has(.cfs-price__was)):not(:has(s)):not(:has(del)) .cfs-price__current {
  color: var(--cfs-price-regular) !important;
  -webkit-text-fill-color: var(--cfs-price-regular) !important;
}

html body.cfs2030-shell[data-cfs-theme="cfs-approved-green-cta"]
  :where(.cfs-price__was, .price-was, .old-price, .pStroke, s, del) {
  color: var(--cfs-price-crossed) !important;
  -webkit-text-fill-color: var(--cfs-price-crossed) !important;
}

/* Small readability correction for long product names on mobile cards. */
@media (min-width: 768px) {
  :is(#cfs-approved-spacing#cfs-approved-spacing#cfs-approved-spacing#cfs-approved-spacing#cfs-approved-spacing#cfs-approved-spacing, html)
  body.cfs2030-shell[data-cfs-theme="cfs-approved-green-cta"]
    .cfs-product-card .product-copy {
    gap: 7px !important;
  }

  :is(#cfs-approved-spacing#cfs-approved-spacing#cfs-approved-spacing#cfs-approved-spacing#cfs-approved-spacing#cfs-approved-spacing, html)
  body.cfs2030-shell[data-cfs-theme="cfs-approved-green-cta"]
    .cfs-product-card .product-copy :where(.title, .title > a) {
    line-height: 24px !important;
  }
}

@media (max-width: 767px) {
  :is(#cfs-approved-spacing#cfs-approved-spacing#cfs-approved-spacing#cfs-approved-spacing#cfs-approved-spacing#cfs-approved-spacing, html)
  body.cfs2030-shell[data-cfs-theme="cfs-approved-green-cta"]
    .cfs-product-card .product-copy {
    gap: 7px !important;
  }

  :is(#cfs-approved-spacing#cfs-approved-spacing#cfs-approved-spacing#cfs-approved-spacing#cfs-approved-spacing#cfs-approved-spacing, html)
  body.cfs2030-shell[data-cfs-theme="cfs-approved-green-cta"]
    .cfs-product-card .product-copy :where(.title, .title > a) {
    line-height: 20px !important;
  }
}

/* The existing fixed section height is shorter than its four policy cards.
   Let content determine the height so the final border is never clipped. */
:is(#cfs-approved-policy#cfs-approved-policy#cfs-approved-policy#cfs-approved-policy#cfs-approved-policy#cfs-approved-policy, html)
body.cfs2030-shell[data-cfs-theme="cfs-approved-green-cta"]
  #pdp-main-content.pdp2030 #delivery.product-info-section.product-delivery {
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}

:is(#cfs-approved-policy#cfs-approved-policy#cfs-approved-policy#cfs-approved-policy#cfs-approved-policy#cfs-approved-policy, html)
body.cfs2030-shell[data-cfs-theme="cfs-approved-green-cta"]
  #pdp-main-content.pdp2030 #delivery.product-info-section.product-delivery .policy-grid {
  height: auto !important;
  min-height: 0 !important;
}

/* PDP revenue action override. This deliberately targets only the principal
   product-detail purchase/configuration controls. Listing-card, basket and
   checkout actions continue to use the general primary CTA tokens. */
:is(#cfs-pdp-action-theme#cfs-pdp-action-theme#cfs-pdp-action-theme#cfs-pdp-action-theme#cfs-pdp-action-theme#cfs-pdp-action-theme#cfs-pdp-action-theme#cfs-pdp-action-theme#cfs-pdp-action-theme#cfs-pdp-action-theme#cfs-pdp-action-theme#cfs-pdp-action-theme, html)
body.cfs2030-shell[data-cfs-theme="cfs-approved-green-cta"][data-cfs-page="c-productdetail"]
  #pdp-main-content.pdp2030 :where(
    .pdp-live-cart .addToCartBtn,
    .pdp-live-cart .cfs-pdp-add-btn,
    .pdp-live-cart .add-to-cart,
    .pdp-live-cart .addToCart,
    .pdp-live-cart .add_to_cart,
    .pdp-live-cart .cfs-add-to-cart,
    .pdp-live-options .configBtn,
    .pdp-live-options .bc-live-configure,
    .cfs-purchase-options-summary .configBtn,
    .cfs-purchase-options-summary .bc-live-configure,
    .blindsConfigSec .configBtn,
    .blindsConfigSec .bc-live-configure,
    .cfs-pdp-configure-btn,
    .configure-button,
    .clickToConfigure_animate
  ):not(:disabled):not(.disabled):not(.is-disabled):not([aria-disabled="true"]) {
  color: var(--cfs-pdp-cta-text) !important;
  -webkit-text-fill-color: var(--cfs-pdp-cta-text) !important;
  background-color: var(--cfs-pdp-cta-primary) !important;
  border-color: var(--cfs-pdp-cta-primary) !important;
}

:is(#cfs-pdp-action-theme#cfs-pdp-action-theme#cfs-pdp-action-theme#cfs-pdp-action-theme#cfs-pdp-action-theme#cfs-pdp-action-theme#cfs-pdp-action-theme#cfs-pdp-action-theme#cfs-pdp-action-theme#cfs-pdp-action-theme#cfs-pdp-action-theme#cfs-pdp-action-theme, html)
body.cfs2030-shell[data-cfs-theme="cfs-approved-green-cta"][data-cfs-page="c-productdetail"]
  #pdp-main-content.pdp2030 :where(
    .pdp-live-cart .addToCartBtn,
    .pdp-live-cart .cfs-pdp-add-btn,
    .pdp-live-cart .add-to-cart,
    .pdp-live-cart .addToCart,
    .pdp-live-cart .add_to_cart,
    .pdp-live-cart .cfs-add-to-cart,
    .pdp-live-options .configBtn,
    .pdp-live-options .bc-live-configure,
    .cfs-purchase-options-summary .configBtn,
    .cfs-purchase-options-summary .bc-live-configure,
    .blindsConfigSec .configBtn,
    .blindsConfigSec .bc-live-configure,
    .cfs-pdp-configure-btn,
    .configure-button,
    .clickToConfigure_animate
  ):not(:disabled):not(.disabled):not(.is-disabled):not([aria-disabled="true"]):is(:hover, :active) {
  color: var(--cfs-pdp-cta-text) !important;
  -webkit-text-fill-color: var(--cfs-pdp-cta-text) !important;
  background-color: var(--cfs-pdp-cta-hover) !important;
  border-color: var(--cfs-pdp-cta-hover) !important;
}