/**
 * Canonical accent treatment for the primary product purchase action and the
 * cart counter shown in the site header. This file is loaded after legacy
 * WooCommerce page styles, which still contain historical hard-coded colors.
 */

/* Canonical foreground contract: an accent-filled theme action always uses
 * white copy/icons, regardless of an older saved automatic contrast token. */
html body:not(.wp-admin):not(.rp-theme-color-system) {
    --rp-theme-general-on-accent: #ffffff !important;
    --rp-theme-header-on-accent: #ffffff !important;
    --rp-theme-footer-on-accent: #ffffff !important;
    --rp-theme-forms-button-text: #ffffff !important;
}

/* Late authority for primary actions that legacy page styles may recolor
 * directly instead of consuming the shared foreground tokens. */
html body:not(.wp-admin) :is(
    form.cart .single_add_to_cart_button:not(:disabled):not([disabled]),
    .rp-mobile-product-sticky-cart-btn:not(:disabled):not([disabled]),
    .wc-proceed-to-checkout .checkout-button:not(.disabled):not([aria-disabled="true"]),
    #payment #place_order:not(:disabled),
    .rp-checkout-coupon-controls button,
    .rp-shop-price-actions button,
    .rp-product-vote-submit:not(:disabled),
    .rp-comment-identity-modal__confirm,
    .woocommerce-MyAccount-content button[name="save_account_details"],
    .woocommerce-MyAccount-content button[name="save_account_password"],
    .woocommerce-MyAccount-content .rp-account-address-modal__submit,
    .woocommerce-MyAccount-content .woocommerce-button.pay,
    .woocommerce-MyAccount-content .button.pay
) {
    color: var(--rp-theme-general-on-accent, #ffffff) !important;
    -webkit-text-fill-color: var(--rp-theme-general-on-accent, #ffffff) !important;
}

html body.single-product form.cart .single_add_to_cart_button:not(:disabled):not([disabled]),
html body.single-product .rp-mobile-product-sticky-cart-btn:not(:disabled):not([disabled]) {
height: var(--rp-product-buy-action-height, 48px) !important;
min-height: var(--rp-product-buy-action-height, 48px) !important;
background: var(--rp-theme-general-accent, var(--rp-accent, #fd314a)) !important;
background-color: var(--rp-theme-general-accent, var(--rp-accent, #fd314a)) !important;
border-color: var(--rp-theme-general-accent, var(--rp-accent, #fd314a)) !important;
    color: var(--rp-theme-general-on-accent, #ffffff) !important;
    -webkit-text-fill-color: var(--rp-theme-general-on-accent, #ffffff) !important;
}

/* Buybox quantity and primary action share one height without changing the
 * compact quantity controls used in cart, checkout and mini-cart contexts. */
html body.single-product .rp-product-buybox form.cart {
    --rp-product-buy-action-height: 48px;
    --rp-qty-height: var(--rp-product-buy-action-height);
}

html body.single-product .rp-product-buybox form.cart .quantity:has(input.qty) {
    height: var(--rp-product-buy-action-height) !important;
    min-height: var(--rp-product-buy-action-height) !important;
}

html body.single-product form.cart .single_add_to_cart_button:not(:disabled):not([disabled]):is(:hover, :focus-visible),
html body.single-product .rp-mobile-product-sticky-cart-btn:not(:disabled):not([disabled]):is(:hover, :focus-visible) {
    background: var(--rp-theme-general-accent-hover, var(--rp-theme-general-accent, var(--rp-accent, #fd314a))) !important;
    background-color: var(--rp-theme-general-accent-hover, var(--rp-theme-general-accent, var(--rp-accent, #fd314a))) !important;
    border-color: var(--rp-theme-general-accent-hover, var(--rp-theme-general-accent, var(--rp-accent, #fd314a))) !important;
}

/*
 * Canonical single-product section navigation. Legacy responsive rules use
 * hard-coded orange, black and white values, so this late stylesheet owns all
 * interactive color states while preserving their existing layout.
 */
html body.single-product .rp-single-product-page .rp-product-tabs-nav {
    padding: 6px !important;
    gap: 8px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: color-mix(in srgb, var(--rp-theme-general-text, #343a40) 5%, var(--rp-theme-general-surface, #ffffff)) !important;
    box-shadow: none !important;
}

html body.single-product .rp-single-product-page .rp-product-tabs-nav a {
    border-color: transparent !important;
    background: transparent !important;
    background-color: transparent !important;
    color: color-mix(in srgb, var(--rp-theme-general-text, #343a40) 62%, var(--rp-theme-general-surface, #ffffff)) !important;
    -webkit-text-fill-color: color-mix(in srgb, var(--rp-theme-general-text, #343a40) 62%, var(--rp-theme-general-surface, #ffffff)) !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    transition: background-color 250ms cubic-bezier(.4, 0, .2, 1), color 250ms cubic-bezier(.4, 0, .2, 1), border-color 250ms cubic-bezier(.4, 0, .2, 1), box-shadow 250ms cubic-bezier(.4, 0, .2, 1), transform 250ms cubic-bezier(.4, 0, .2, 1) !important;
}

html body.single-product .rp-single-product-page .rp-product-tabs-nav a:not(.is-active):is(:hover, :focus-visible) {
    border-color: color-mix(in srgb, var(--rp-theme-general-accent, var(--rp-accent, #fd314a)) 42%, transparent) !important;
    background: color-mix(in srgb, var(--rp-theme-general-text, #343a40) 12%, var(--rp-theme-general-surface, #ffffff)) !important;
    background-color: color-mix(in srgb, var(--rp-theme-general-text, #343a40) 12%, var(--rp-theme-general-surface, #ffffff)) !important;
    color: var(--rp-theme-general-accent-hover, var(--rp-theme-general-accent, var(--rp-accent, #fd314a))) !important;
    -webkit-text-fill-color: var(--rp-theme-general-accent-hover, var(--rp-theme-general-accent, var(--rp-accent, #fd314a))) !important;
    outline: none !important;
    box-shadow: none !important;
}

html body.single-product .rp-single-product-page .rp-product-tabs-nav a.is-active,
html body.single-product .rp-single-product-page .rp-product-tabs-nav a.is-active:is(:hover, :focus-visible) {
    border-color: var(--rp-theme-general-accent, var(--rp-accent, #fd314a)) !important;
    background: var(--rp-theme-general-accent, var(--rp-accent, #fd314a)) !important;
    background-color: var(--rp-theme-general-accent, var(--rp-accent, #fd314a)) !important;
    color: var(--rp-theme-general-on-accent, #ffffff) !important;
    -webkit-text-fill-color: var(--rp-theme-general-on-accent, #ffffff) !important;
    font-weight: 600 !important;
    box-shadow: 0 5px 12px color-mix(in srgb, var(--rp-theme-general-accent, var(--rp-accent, #fd314a)) 20%, transparent) !important;
    transform: translateY(-1px) !important;
}

html body.single-product .rp-single-product-page :is(
    #rp-product-specs,
    #rp-product-description,
    #reviews,
    #rp-single-related-products
).is-rp-tab-entering {
    animation: rp-product-tab-enter 250ms cubic-bezier(.4, 0, .2, 1) both;
}

@keyframes rp-product-tab-enter {
    from { opacity: .35; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    html body.single-product .rp-single-product-page .rp-product-tabs-nav a {
        transition: none !important;
    }

    html body.single-product .rp-single-product-page .is-rp-tab-entering {
        animation: none !important;
    }
}

/* Keep inactive tabs visibly soft, but readable, on every supported dark-mode marker. */
:is(
    body.rp-theme-color-preset-dark,
    body.rp-theme-dark,
    body.is-dark,
    html[data-rp-user-theme="dark"] body,
    html[data-rp-theme-mode="dark"] body,
    html[data-theme="dark"] body
).single-product .rp-single-product-page .rp-product-tabs-nav a:not(.is-active):not(:hover):not(:focus-visible) {
    background: color-mix(in srgb, var(--rp-theme-general-text, #f3f4f6) 9%, var(--rp-theme-general-surface, #171b21)) !important;
    background-color: color-mix(in srgb, var(--rp-theme-general-text, #f3f4f6) 9%, var(--rp-theme-general-surface, #171b21)) !important;
    color: color-mix(in srgb, var(--rp-theme-general-text, #f3f4f6) 68%, var(--rp-theme-general-surface, #171b21)) !important;
    -webkit-text-fill-color: color-mix(in srgb, var(--rp-theme-general-text, #f3f4f6) 68%, var(--rp-theme-general-surface, #171b21)) !important;
}

/* AJAX temporarily disables the button; keep its active accent while loading. */
html body.single-product form.cart .single_add_to_cart_button:is(.is-loading, [aria-busy="true"]),
html body.single-product .rp-mobile-product-sticky-cart-btn:is(.is-loading, [aria-busy="true"]) {
background: var(--rp-theme-general-accent, var(--rp-accent, #fd314a)) !important;
background-color: var(--rp-theme-general-accent, var(--rp-accent, #fd314a)) !important;
border-color: var(--rp-theme-general-accent, var(--rp-accent, #fd314a)) !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
}

html body.single-product form.cart .single_add_to_cart_button:is(.is-loading, [aria-busy="true"]) > *,
html body.single-product .rp-mobile-product-sticky-cart-btn:is(.is-loading, [aria-busy="true"]) > * {
    visibility: hidden !important;
}

html body.single-product form.cart .single_add_to_cart_button:is(.is-loading, [aria-busy="true"])::after,
html body.single-product .rp-mobile-product-sticky-cart-btn:is(.is-loading, [aria-busy="true"])::after {
    border-color: rgba(255, 255, 255, 0.38) !important;
    border-top-color: #ffffff !important;
}

html body .rp-cart-dot,
html body :is(.rp-header-actions, .rp-header-sticky-cart) .rp-cart-dot {
background: var(--rp-theme-general-accent, var(--rp-accent, #fd314a)) !important;
background-color: var(--rp-theme-general-accent, var(--rp-accent, #fd314a)) !important;
border-color: var(--rp-theme-general-accent, var(--rp-accent, #fd314a)) !important;
    color: var(--rp-theme-general-on-accent, #ffffff) !important;
    -webkit-text-fill-color: var(--rp-theme-general-on-accent, #ffffff) !important;
}

/* Theme-mode feedback must share the same global accent on every template. */
html body .rp-theme-mode-transition__progress-bar {
    background: var(--rp-theme-general-accent, var(--rp-accent, #fd314a)) !important;
    background-color: var(--rp-theme-general-accent, var(--rp-accent, #fd314a)) !important;
    box-shadow: 0 0 18px color-mix(in srgb, var(--rp-theme-general-accent, var(--rp-accent, #fd314a)) 36%, transparent) !important;
}

html body .rp-theme-mode-transition__icon {
    color: var(--rp-theme-general-accent, var(--rp-accent, #fd314a)) !important;
    background: transparent !important;
}

html body .rp-theme-mode-confirm__actions [data-rp-theme-system-accept] {
    border-color: var(--rp-theme-general-accent, var(--rp-accent, #fd314a)) !important;
    background: var(--rp-theme-general-accent, var(--rp-accent, #fd314a)) !important;
    color: var(--rp-theme-general-on-accent, #ffffff) !important;
}

/* Cart drawer primary action: override legacy green/black button groups. */
html body:not(.wp-admin) :is(
    a.rp-cart-sidebar-checkout,
    .rp-mini-cart-checkout,
    .rp-cart-sidebar .woocommerce-mini-cart__buttons a.checkout
) {
    border-color: var(--rp-theme-general-accent, var(--rp-accent, #fd314a)) !important;
    background: var(--rp-theme-general-accent, var(--rp-accent, #fd314a)) !important;
    background-color: var(--rp-theme-general-accent, var(--rp-accent, #fd314a)) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* View-cart is the secondary action by purpose, but it still needs a clear
 * call-to-action treatment in both drawer and popover mini-cart modes. */
html body:not(.wp-admin) :is(
    a.rp-cart-sidebar-account,
    .rp-mini-cart-view-cart,
    .rp-cart-sidebar .woocommerce-mini-cart__buttons a:first-child:not(.checkout)
) {
    border-color: var(--rp-theme-general-accent, var(--rp-accent, #fd314a)) !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: var(--rp-theme-general-accent, var(--rp-accent, #fd314a)) !important;
    -webkit-text-fill-color: var(--rp-theme-general-accent, var(--rp-accent, #fd314a)) !important;
}

html body:not(.wp-admin) :is(
    a.rp-cart-sidebar-account,
    .rp-mini-cart-view-cart,
    .rp-cart-sidebar .woocommerce-mini-cart__buttons a:first-child:not(.checkout)
):is(:hover, :focus-visible, :active) {
    border-color: var(--rp-theme-general-accent, var(--rp-accent, #fd314a)) !important;
    background: var(--rp-theme-general-accent, var(--rp-accent, #fd314a)) !important;
    background-color: var(--rp-theme-general-accent, var(--rp-accent, #fd314a)) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

:is(
    body.rp-theme-color-preset-dark,
    body.rp-theme-dark,
    body.is-dark,
    html[data-rp-user-theme="dark"] body,
    html[data-rp-theme-mode="dark"] body,
    html[data-theme="dark"] body
):not(.wp-admin) :is(
    a.rp-cart-sidebar-account,
    .rp-mini-cart-view-cart,
    .rp-cart-sidebar .woocommerce-mini-cart__buttons a:first-child:not(.checkout)
) {
    border-color: var(--rp-theme-general-accent, var(--rp-accent, #fd314a)) !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: var(--rp-theme-general-accent, var(--rp-accent, #fd314a)) !important;
    -webkit-text-fill-color: var(--rp-theme-general-accent, var(--rp-accent, #fd314a)) !important;
}

/* Tint only the button surface; preserve text/icon colors and theme hover colors. */
body:not(.wp-admin) { --rp-button-hover-tint: rgb(0 0 0 / 5%); }
html[data-rp-user-theme=dark] body:not(.wp-admin),
html[data-rp-theme-mode=dark] body:not(.wp-admin),
body.rp-theme-color-preset-dark:not(.wp-admin) { --rp-button-hover-tint: rgb(255 255 255 / 5%); }
@media (hover: hover) and (pointer: fine) {
    body:not(.wp-admin) :where(button, input[type=button], input[type=submit], input[type=reset], a.button, a.wp-element-button, a.wp-block-button__link, a.elementor-button, a.rp-button, a.rp-btn, :not(a)[role=button]):not(.rp-widget-arrow):not(:disabled):not([aria-disabled=true]):not([aria-busy=true]):not(.loading):not(.is-loading) {
        transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
    }
    body:not(.wp-admin) :where(button, input[type=button], input[type=submit], input[type=reset], a.button, a.wp-element-button, a.wp-block-button__link, a.elementor-button, a.rp-button, a.rp-btn, :not(a)[role=button]):not(:disabled):not([aria-disabled=true]):not([aria-busy=true]):not(.loading):not(.is-loading)[data-rp-painted-button]:hover {
        box-shadow: inset 0 0 0 9999px var(--rp-button-hover-tint);
    }
}
@media (prefers-reduced-motion: reduce) {
    body:not(.wp-admin) :where(button, input[type=button], input[type=submit], input[type=reset], a.button, a.wp-element-button, a.wp-block-button__link, a.elementor-button, a.rp-button, a.rp-btn, :not(a)[role=button]) { transition-duration: 0ms !important; }
}

/* Frontend scrollbars follow the configured accent in both color modes.
 * Components that intentionally hide their scrollbar remain unaffected. */
/* Chromium's native scrollbar-color ignores scrollbar-button styling.
 * Use its pseudo elements so only the arrow buttons disappear. */
@supports selector(::-webkit-scrollbar) {
    html,
    html body:not(.wp-admin),
    html body:not(.wp-admin) * { scrollbar-color: auto !important; }
    ::-webkit-scrollbar { width: 8px; height: 8px; }
    ::-webkit-scrollbar-button,
    ::-webkit-scrollbar-button:single-button,
    ::-webkit-scrollbar-button:double-button {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        background: none !important;
        border: 0 !important;
    }
}
html,
html body:not(.wp-admin),
html body:not(.wp-admin) * {
    scrollbar-color: var(--rp-theme-scrollbar-accent, var(--rp-theme-general-accent, var(--rp-accent, #fd314a))) transparent;
}

html::-webkit-scrollbar-track,
html body:not(.wp-admin)::-webkit-scrollbar-track,
html body:not(.wp-admin) *::-webkit-scrollbar-track {
    background: transparent;
}

html::-webkit-scrollbar-thumb,
html body:not(.wp-admin)::-webkit-scrollbar-thumb,
html body:not(.wp-admin) *::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: var(--rp-theme-scrollbar-accent, var(--rp-theme-general-accent, var(--rp-accent, #fd314a)));
}

/* Keep the cart scrollbar in its own gutter on the text/action edge instead
 * of overlaying product thumbnails on the right side. The same authority is
 * shared by drawer and popover mini-cart modes. */
html body:not(.wp-admin) .rp-cart-sidebar .rp-cart-sidebar-items,
html body.rp-mini-cart-mode-popover:not(.wp-admin) .rp-cart-sidebar-items {
    direction: rtl !important;
    scrollbar-gutter: stable !important;
    scrollbar-color: var(--rp-theme-scrollbar-accent, var(--rp-theme-general-accent, var(--rp-accent, #fd314a))) transparent !important;
}

html body:not(.wp-admin) .rp-cart-sidebar .rp-cart-sidebar-items::-webkit-scrollbar-track,
html body.rp-mini-cart-mode-popover:not(.wp-admin) .rp-cart-sidebar-items::-webkit-scrollbar-track {
    background: transparent !important;
}

html body:not(.wp-admin) .rp-cart-sidebar .rp-cart-sidebar-items::-webkit-scrollbar-thumb,
html body.rp-mini-cart-mode-popover:not(.wp-admin) .rp-cart-sidebar-items::-webkit-scrollbar-thumb {
    border: 0 !important;
    border-radius: 999px !important;
    background: var(--rp-theme-scrollbar-accent, var(--rp-theme-general-accent, var(--rp-accent, #fd314a))) !important;
}

html body:not(.wp-admin) .rp-shop-archive .rp-shop-filter-sidebar {
    scrollbar-color: var(--rp-theme-scrollbar-accent, var(--rp-theme-general-accent, var(--rp-accent, #fd314a))) transparent !important;
}

html body:not(.wp-admin) .rp-shop-archive .rp-shop-filter-sidebar::-webkit-scrollbar-thumb {
    border-radius: 999px !important;
    background: var(--rp-theme-scrollbar-accent, var(--rp-theme-general-accent, var(--rp-accent, #fd314a))) !important;
}

:is(
    body.rp-theme-color-preset-dark,
    body.rp-theme-dark,
    body.is-dark,
    html[data-rp-user-theme="dark"] body,
    html[data-rp-theme-mode="dark"] body,
    html[data-theme="dark"] body
):not(.wp-admin) :is(
    a.rp-cart-sidebar-account,
    .rp-mini-cart-view-cart,
    .rp-cart-sidebar .woocommerce-mini-cart__buttons a:first-child:not(.checkout)
):is(:hover, :focus-visible, :active) {
    border-color: var(--rp-theme-general-accent, var(--rp-accent, #fd314a)) !important;
    background: var(--rp-theme-general-accent, var(--rp-accent, #fd314a)) !important;
    background-color: var(--rp-theme-general-accent, var(--rp-accent, #fd314a)) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

html body:not(.wp-admin) :is(
    a.rp-cart-sidebar-checkout,
    .rp-mini-cart-checkout,
    .rp-cart-sidebar .woocommerce-mini-cart__buttons a.checkout
):is(:hover, :focus-visible, :active) {
    border-color: var(--rp-theme-general-accent-hover, var(--rp-theme-general-accent, var(--rp-accent, #fd314a))) !important;
    background: var(--rp-theme-general-accent-hover, var(--rp-theme-general-accent, var(--rp-accent, #fd314a))) !important;
    background-color: var(--rp-theme-general-accent-hover, var(--rp-theme-general-accent, var(--rp-accent, #fd314a))) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Shared cart and checkout purchase-step links. */
html body :is(.rp-purchase-steps, .rp-cart-checkout-steps) .rp-checkout-step.is-active {
  color: var(--rp-theme-general-text, #172033) !important;
  -webkit-text-fill-color: var(--rp-theme-general-text, #172033) !important;
}
html body .rp-purchase-steps a.rp-checkout-step-arrow .rp-checkout-step-arrow-icon {
  filter: brightness(0) invert(1) !important;
  opacity: 1 !important;
}
html body .rp-purchase-steps a.rp-checkout-step:is(:hover, :focus-visible) {
  background: var(--rp-theme-general-accent, #ff3152) !important;
  border-color: var(--rp-theme-general-accent, #ff3152) !important;
  color: var(--rp-theme-general-on-accent, #fff) !important;
  -webkit-text-fill-color: var(--rp-theme-general-on-accent, #fff) !important;
}
html body :is(.rp-purchase-steps, .rp-cart-checkout-steps) a[href]:not(.rp-checkout-step-arrow) {
  display: inline-flex;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--rp-theme-general-border, #d8e0e8) 65%, transparent) !important;
  border-radius: 10px !important;
  padding: 5px 10px !important;
  background: transparent;
}
html body .rp-purchase-steps a.rp-checkout-step-arrow {
  padding: 0 !important;
  box-sizing: border-box !important;
  align-items: center !important;
  justify-content: center !important;
}
html body .rp-purchase-steps a.rp-checkout-step-arrow .rp-checkout-step-arrow-icon {
  flex: 0 0 15px !important;
  min-width: 15px !important;
  object-fit: contain;
}