/**
* Rebs Curtis-Moss — WooCommerce / WordPress default colour overrides.
*
* Ticket: SCRUM-134 (continuación de SCRUM-132 my-account branding).
*
* Purpose
* -------
* Catch-all override layer that strips the violet / orange / default-blue
* colours that WooCommerce core and WordPress core leak into the rendered
* page — surfaces that the per-page rules in `rebs-site-styles.css` don't
* already cover. Repaints them with the Rebs brand palette so the entire
* site reads as one continuous teal/mint/lime experience.
*
* Hex values being neutralised
* ----------------------------
* - WC violet: #7f54b3 (.woocommerce-MyAccount-orders, default --wc primary),
* #a46497 (alt violet for tabs/badges)
* - WC orange/info: #fb8c00 (star ratings),
* #1e85be (.woocommerce-info top border + icon),
* #b81c23 (.woocommerce-error red — keep for errors but
* re-tone to a brand-friendly red)
* - WC green: #8fae1b (.woocommerce-message success — re-tone to mint/teal)
* - WP link blue: #0073aa, #2271b1 (default WP link colour leaking into
* breadcrumbs and bare `a` elements
* inside .woocommerce wrappers)
*
* Load order
* ----------
* Enqueued at `wp_enqueue_scripts` priority 101 (one tick AFTER the main
* `rebs-site-styles.css` handle at 100), so this file lands LAST in the
* cascade. The intent is explicit: this is the *defaults override* layer —
* if the per-page rules ever conflict with the broad neutralisation here,
* the per-page intent (more specific selectors) still wins via specificity.
*
* Specificity strategy — the Kubio gotcha
* ---------------------------------------
* Kubio Pro attaches its global style hook to the `` element. We have
* verified in DOM (per SCRUM-132 closure note) that:
*
* - `` ← Kubio's attribute lives HERE
* - ``
*
* `[data-kubio]` does NOT match anything in the rendered DOM and is dead
* code in the legacy `rebs-site-styles.css`. To outrank Kubio's inline rule
*
* #kubio a:not([class*="wp-block-button"]) { color: var(--kubio-color-…) } (1,2,1)
*
* we prefix our selectors with `#kubio` (ID selector on , specificity
* 1,0,0) so the chain naturally beats Kubio's own (1,2,1) once we add a
* couple of class/element terms.
*
* `!important` policy
* -------------------
* Avoided unless WC core or WC Blocks injects styles whose specificity
* cannot be beaten by selector chaining. Each `!important` below carries
* an inline justification.
*
* Out of scope
* ------------
* - Typography (handled by Consus theme + main stylesheet).
* - Quiosco grid / cart link / notices (handled by main stylesheet).
* - Form input geometry (handled by main stylesheet).
*
* Accessibility
* -------------
* All replacements respect the AA contrast envelope documented in the main
* stylesheet: `--rebs-teal-dark` (#006d82, 5.34:1 vs white) is preferred
* for body-text links; `--rebs-teal` (#0097b2, 3.06:1) is reserved for
* large/bold UI accents only.
*/
/* -------------------------------------------------------------------------
* 1. WC notices — info / message / error
*
* WC core ships these with hardcoded blue/green/red top borders + matching
* icon colour via `::before { color: … }`. The notice background is a tinted
* version of the same colour. We repaint:
* - info (.woocommerce-info) → mint-soft + teal accent
* - message (.woocommerce-message) → mint-soft + teal accent (success
* re-tones to brand, not WC green)
* - error (.woocommerce-error) → keep semantic red but re-tone to
* #b03a2e (already used elsewhere
* in the main stylesheet)
*
* Selectors target `.woocommerce` ancestor AND bare class to cover both
* classic templates (wrapped) and block templates (sometimes unwrapped).
*
* `!important` on `border-top-color` + `::before { color }` because WC
* core's `woocommerce.css` ships these as inline-equivalent specificity
* and we want a hard repaint with zero ambiguity across viewports.
* ------------------------------------------------------------------------- */
.woocommerce-info,
.woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-message,
.woocommerce-page .woocommerce-info,
.woocommerce-page .woocommerce-message {
background-color: var(--rebs-mint-soft);
border-top: 3px solid var(--rebs-teal) !important; /* WC ships #1e85be / #8fae1b inline */
color: var(--rebs-text);
}
.woocommerce-info::before,
.woocommerce-message::before,
.woocommerce .woocommerce-info::before,
.woocommerce .woocommerce-message::before,
.woocommerce-page .woocommerce-info::before,
.woocommerce-page .woocommerce-message::before {
color: var(--rebs-teal) !important; /* WC ships #1e85be / #8fae1b inline */
}
/* Error notices keep semantic red but in a brand-friendly tone consistent
with the warm red already used for out-of-stock messaging. */
.woocommerce-error,
.woocommerce .woocommerce-error,
.woocommerce-page .woocommerce-error {
background-color: #fdecea;
border-top: 3px solid #b03a2e !important; /* WC ships #b81c23 */
color: var(--rebs-text);
}
.woocommerce-error::before,
.woocommerce .woocommerce-error::before,
.woocommerce-page .woocommerce-error::before {
color: #b03a2e !important;
}
/* WC Blocks renders notices with different markup (e.g.
`.wc-block-components-notice-banner`). Cover the block variants too —
they default to the same blue / orange / red triad. */
.wc-block-components-notice-banner.is-info {
background-color: var(--rebs-mint-soft);
border-color: var(--rebs-teal) !important;
color: var(--rebs-text);
}
.wc-block-components-notice-banner.is-info svg,
.wc-block-components-notice-banner.is-info .wc-block-components-notice-banner__content {
color: var(--rebs-teal);
fill: var(--rebs-teal);
}
.wc-block-components-notice-banner.is-success {
background-color: var(--rebs-mint-soft);
border-color: var(--rebs-teal) !important;
color: var(--rebs-text);
}
.wc-block-components-notice-banner.is-success svg,
.wc-block-components-notice-banner.is-success .wc-block-components-notice-banner__content {
color: var(--rebs-teal);
fill: var(--rebs-teal);
}
.wc-block-components-notice-banner.is-error {
background-color: #fdecea;
border-color: #b03a2e !important;
color: var(--rebs-text);
}
.wc-block-components-notice-banner.is-error svg {
color: #b03a2e;
fill: #b03a2e;
}
/* -------------------------------------------------------------------------
* 2. WC breadcrumbs — strip default-blue link underline, paint teal-dark.
*
* `.woocommerce-breadcrumb` is what WC renders above shop / category /
* product pages. Its anchor children inherit the WP/Kubio link colour
* (blue or orange depending on which override fires first). We force
* teal-dark + remove the always-on underline (keep it as hover affordance).
*
* Prefixing with `#kubio` (ID on ) so we outrank Kubio's link rule
* `#kubio a:not([class*=wp-block-button]) { color: var(--kubio-color-N) }`
* which is (1,2,1). Our chain `#kubio .woocommerce-breadcrumb a` is
* (1,1,1) — equal-id but loses on classes. We bump with a doubled-class
* fallback below for the bare-class case (no `.woocommerce` wrapper).
* ------------------------------------------------------------------------- */
#kubio .woocommerce-breadcrumb,
.woocommerce .woocommerce-breadcrumb,
nav.woocommerce-breadcrumb {
color: var(--rebs-text-muted);
}
#kubio nav.woocommerce-breadcrumb a,
#kubio .woocommerce-breadcrumb a,
.woocommerce nav.woocommerce-breadcrumb a {
color: var(--rebs-teal-dark);
text-decoration: none;
transition: color var(--rebs-transition);
}
@media (hover: hover) {
#kubio nav.woocommerce-breadcrumb a:hover,
#kubio .woocommerce-breadcrumb a:hover,
.woocommerce nav.woocommerce-breadcrumb a:hover {
color: var(--rebs-teal-darker);
text-decoration: underline;
}
}
/* -------------------------------------------------------------------------
* 3. WC page-title underline / separator
*
* The violet bar under Shop
reported by Cani lives on one of
* three possible elements depending on theme + WC version:
* - `.woocommerce-products-header` (border-bottom)
* - `.woocommerce-products-header__title` (border-bottom)
* - `.page-title` inside .woocommerce wrapper (generic h1 from theme)
*
* We neutralise all three. If a separator is wanted at all, we replace it
* with a 1px teal-tinted hairline (rather than removing it outright) so
* the visual hierarchy survives without the violet jolt.
* ------------------------------------------------------------------------- */
.woocommerce-products-header {
border-bottom: 0;
}
.woocommerce-products-header__title,
.woocommerce-products-header .woocommerce-products-header__title,
.woocommerce .page-title,
.woocommerce-page .page-title {
border-bottom: 0;
color: var(--rebs-text);
}
/* If the theme renders a generic `
` or `.wp-block-separator` inside a
WC wrapper, tint it teal-soft instead of leaving WP/WC defaults. */
.woocommerce hr,
.woocommerce-page hr,
.woocommerce .wp-block-separator,
.woocommerce-page .wp-block-separator {
border-color: var(--rebs-border);
background-color: var(--rebs-border);
}
/* -------------------------------------------------------------------------
* 4. Star ratings — repaint default orange #fb8c00 to teal.
*
* `.star-rating::before` is the empty stars (light grey, OK to leave) and
* `.star-rating span::before` is the filled stars (orange by default).
* ------------------------------------------------------------------------- */
.woocommerce .star-rating span::before,
.woocommerce-page .star-rating span::before,
.star-rating span::before {
color: var(--rebs-teal);
}
.woocommerce p.stars a,
.woocommerce-page p.stars a {
color: var(--rebs-teal); /* hover/active star colour in the review form */
}
/* -------------------------------------------------------------------------
* 5. Onsale badge — default WC red/orange → brand teal pill.
*
* The badge ships absolute-positioned over the product image with WC's
* default `background-color: #77a464` (green) or theme-injected red/orange.
* Repaint to mint and reuse the same flat-zero radius as the rest of the
* site's pills.
* ------------------------------------------------------------------------- */
.woocommerce span.onsale,
.woocommerce-page span.onsale,
.woocommerce ul.products li.product .onsale,
.woocommerce-page ul.products li.product .onsale {
background-color: var(--rebs-mint);
color: var(--rebs-surface);
border-radius: 0;
padding: 6px 12px;
font-weight: 700;
min-height: auto;
line-height: 1.2;
}
/* -------------------------------------------------------------------------
* 6. Pagination — default underlined blue → teal-dark.
*
* Both classic WC pagination (`.woocommerce-pagination`) and block-based
* pagination (`.wc-block-pagination`) ship default-blue links. Kubio may
* also push orange link colour through. `#kubio` prefix wins against
* Kubio's link rule.
* ------------------------------------------------------------------------- */
#kubio .woocommerce-pagination a,
#kubio .woocommerce-pagination ul.page-numbers a,
#kubio nav.woocommerce-pagination a {
color: var(--rebs-teal-dark);
text-decoration: none;
border-color: var(--rebs-border);
}
#kubio .woocommerce-pagination ul.page-numbers li .current,
#kubio .woocommerce-pagination ul.page-numbers .current {
background-color: var(--rebs-teal);
color: var(--rebs-surface);
border-color: var(--rebs-teal);
}
@media (hover: hover) {
#kubio .woocommerce-pagination a:hover,
#kubio .woocommerce-pagination ul.page-numbers a:hover {
color: var(--rebs-teal-darker);
background-color: var(--rebs-mint-soft);
}
}
/* WC Blocks pagination (used by some block-based archives). */
.wc-block-pagination .wc-block-pagination-numbers a {
color: var(--rebs-teal-dark);
}
.wc-block-pagination .wc-block-pagination-numbers .wc-block-pagination-current {
color: var(--rebs-teal);
font-weight: 700;
}
/* -------------------------------------------------------------------------
* 7. WC tabs (single-product Description / Reviews / Additional info)
*
* Default WC injects a violet/grey underline on active tabs. Repaint with
* teal so the single-product surface stays on brand.
* ------------------------------------------------------------------------- */
.woocommerce div.product .woocommerce-tabs ul.tabs::before {
border-bottom-color: var(--rebs-border);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
background-color: var(--rebs-surface-alt);
border-color: var(--rebs-border);
border-radius: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
background-color: var(--rebs-surface);
border-bottom-color: var(--rebs-surface);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
color: var(--rebs-text-muted);
font-weight: 500;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
color: var(--rebs-teal-dark);
font-weight: 700;
}
/* -------------------------------------------------------------------------
* 8. WP / WC default link colour leakage inside .woocommerce wrappers
*
* Some surfaces (order-received summary table footers, terms-and-conditions
* box, wc shipping calculator) carry bare anchors that inherit the WP
* default link colour (#0073aa) when Kubio's rule doesn't apply (e.g. on
* elements with `[class*="wp-block-button"]` exclusion).
*
* `#kubio` prefix beats Kubio; `.woocommerce` chain beats unscoped defaults.
* ------------------------------------------------------------------------- */
#kubio .woocommerce .order-info a,
#kubio .woocommerce .woocommerce-customer-details a,
#kubio .woocommerce .wc-item-meta a,
#kubio .woocommerce .shipping-calculator-button,
#kubio .woocommerce-page .shipping-calculator-button,
#kubio .woocommerce-terms-and-conditions-wrapper a,
#kubio .wc-block-components-checkout-step a:not(.wc-block-components-button) {
color: var(--rebs-teal-dark);
text-decoration: underline;
}
@media (hover: hover) {
#kubio .woocommerce .order-info a:hover,
#kubio .woocommerce .woocommerce-customer-details a:hover,
#kubio .woocommerce .wc-item-meta a:hover,
#kubio .woocommerce .shipping-calculator-button:hover,
#kubio .woocommerce-page .shipping-calculator-button:hover,
#kubio .woocommerce-terms-and-conditions-wrapper a:hover,
#kubio .wc-block-components-checkout-step a:not(.wc-block-components-button):hover {
color: var(--rebs-teal-darker);
}
}
/* -------------------------------------------------------------------------
* 9. Quantity / mini-cart number inputs — neutralise default-blue focus.
*
* Some browsers + WC core paint the number-input spinner / focus state in
* the OS default blue. Override the focus ring to brand teal so it matches
* the rest of the form focus treatment (mirrors the rule in the main
* stylesheet for text/email/password inputs).
* ------------------------------------------------------------------------- */
#kubio .woocommerce input.qty:focus,
#kubio .woocommerce-page input.qty:focus,
#kubio input.qty:focus,
.wc-block-components-quantity-selector input:focus {
outline: none;
border-color: var(--rebs-teal);
box-shadow: 0 0 0 2px rgba(0, 151, 178, 0.2);
}
/* -------------------------------------------------------------------------
* 10. WP core button block default (purple)
*
* `.wp-block-button__link` ships with WP's `--wp--preset--color--vivid-purple`
* fallback (#9b51e0) when no preset class is applied — this leaks into pages
* where editors drop a bare Button block without picking a brand colour.
*
* Repaint to mint flat-zero to match every other CTA on the site. We scope
* this under `.woocommerce`, `.woocommerce-page`, AND bare so it covers
* any page (cart-empty cross-sells, checkout, order-received, plus general
* content pages where Rebs drops a CTA button).
*
* Excludes buttons that already carry an explicit brand class (matched by
* the main stylesheet's `[data-kubio] a.wp-block-button__link.add_to_cart_button`)
* via the `:not(.add_to_cart_button)` filter, so we don't double-paint.
* ------------------------------------------------------------------------- */
#kubio .wp-block-button__link:not(.add_to_cart_button):not(.has-background) {
background-color: var(--rebs-mint);
color: var(--rebs-surface);
border: 1px solid var(--rebs-mint);
border-radius: 0;
padding: 15px 23px;
font-weight: 500;
letter-spacing: 0.01em;
text-decoration: none;
transition:
background var(--rebs-transition),
border-color var(--rebs-transition);
}
@media (hover: hover) {
#kubio .wp-block-button__link:not(.add_to_cart_button):not(.has-background):hover {
background-color: var(--rebs-teal);
border-color: var(--rebs-teal);
color: var(--rebs-surface);
}
}
/* -------------------------------------------------------------------------
* Reduced-motion guard — match the same envelope used in the main stylesheet
* so users with `prefers-reduced-motion: reduce` get static states for the
* new transitions introduced above.
* ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
#kubio .woocommerce-breadcrumb a,
#kubio .woocommerce-pagination a,
#kubio .wp-block-button__link:not(.add_to_cart_button):not(.has-background) {
transition: none;
}
}