/* UIUX-007R2 — neutral-first modern commerce and intelligence.
 * This is the final customer presentation layer. It intentionally follows all
 * route-owned CSS while preserving the behavior contracts established by
 * UIUX-002 through UIUX-007R. */

body:not(.wp-admin) {
    background: var(--uiux7r2-canvas);
    color: var(--uiux7r2-ink);
    font-family: var(--uiux7r2-sans);
}

body:not(.wp-admin) :where(h1, h2, h3, h4, h5, h6) {
    color: var(--uiux7r2-ink);
    font-family: var(--uiux7r2-sans);
    font-weight: 720;
    letter-spacing: -.025em;
    text-wrap: balance;
}

body:not(.wp-admin) :where(p, li) {
    text-wrap: pretty;
}

body:not(.wp-admin) :where(a, button, input, select, textarea, summary):focus-visible {
    outline: 3px solid var(--uiux7r2-accent);
    outline-offset: 3px;
}

body:not(.wp-admin) .site-main,
body:not(.wp-admin) :where(.product-archive, .brand-archive, .entity-experience, .platform-explore),
.single-ao_product .site-main,
.compare-page,
.decision-tool,
.wishlist-page,
.provision-list-page,
.auth-page,
.connect-application-page {
    background: var(--uiux7r2-canvas) !important;
    color: var(--uiux7r2-ink);
}

body:not(.wp-admin) :where(.btn-primary, .btn-commerce, .product-view-btn) {
    border-color: var(--uiux7r2-ink) !important;
    border-radius: 7px !important;
    background: var(--uiux7r2-ink) !important;
    color: #fff !important;
    box-shadow: none !important;
}

body:not(.wp-admin) :where(.btn-primary, .btn-commerce, .product-view-btn):hover {
    border-color: var(--uiux7r2-ink) !important;
    background: var(--uiux7r2-ink) !important;
    transform: translateY(-1px);
}

body:not(.wp-admin) :where(.btn-secondary, .btn-outline) {
    border-color: var(--uiux7r2-rule-strong) !important;
    border-radius: 7px !important;
    background: var(--uiux7r2-surface) !important;
    color: var(--uiux7r2-ink) !important;
    box-shadow: none !important;
}

/* White-first global shell. */
body:not(.wp-admin) :where(.platform-information-bar, .info-bar, .site-utility-bar) {
    border-bottom: 1px solid var(--uiux7r2-rule);
    background: var(--uiux7r2-surface-muted) !important;
    color: var(--uiux7r2-muted) !important;
}

body:not(.wp-admin) .site-header,
body:not(.wp-admin) .header-main,
body:not(.wp-admin) .header-nav-row,
body:not(.wp-admin) .main-navigation,
body:not(.wp-admin) .site-navigation,
body:not(.wp-admin) .category-navigation {
    border-color: var(--uiux7r2-rule) !important;
    background: var(--uiux7r2-surface) !important;
    color: var(--uiux7r2-ink) !important;
    box-shadow: none !important;
}

body:not(.wp-admin) .header-nav-row {
    border-top: 1px solid var(--uiux7r2-rule) !important;
    border-bottom: 1px solid var(--uiux7r2-rule) !important;
}

body:not(.wp-admin) .header-nav-row .main-menu > li > a,
body:not(.wp-admin) .header-nav-row .main-menu > li > a > span,
body:not(.wp-admin) .header-nav-row .main-menu > :is(.current, .current-menu-item, .current-menu-ancestor, .current_page_item) > a,
body:not(.wp-admin) .header-nav-row .main-menu > li > a:is(:hover, :focus-visible) {
    color: var(--uiux7r2-ink) !important;
}

body:not(.wp-admin) .header-nav-row .main-menu > li > a::after {
    background: var(--uiux7r2-accent) !important;
}

body:not(.wp-admin) .site-header {
    border-bottom: 1px solid var(--uiux7r2-rule);
}

body:not(.wp-admin) .site-header :where(a, button, label, span) {
    color: inherit;
}

/* The round Compare and Account controls are governed by uiux-008r-convergence.css section 9. */
body:not(.wp-admin) .site-header :where(.header-utility-link:not([data-aanya-compare-link], .header-account-link), .header-auth-link, .mobile-menu-toggle, .header-auth-link--primary) {
    border-color: var(--uiux7r2-rule) !important;
    background: transparent !important;
    color: var(--uiux7r2-ink) !important;
}

body:not(.wp-admin) .site-header .header-auth-link--primary {
    border-color: var(--uiux7r2-ink) !important;
    background: var(--uiux7r2-ink) !important;
    color: #fff !important;
}

body:not(.wp-admin) .site-header :where(.header-search, .search-form, .universal-search, .header-search-form) {
    border-color: var(--uiux7r2-rule-strong) !important;
    border-radius: 7px !important;
    background: #fff !important;
    box-shadow: none !important;
}

body:not(.wp-admin) .site-header :where(input[type="search"], input[type="text"]) {
    background: transparent !important;
    color: var(--uiux7r2-ink) !important;
}

body:not(.wp-admin) :where(.mega-menu, .mega-menu-panel, .customer-shell__drawer, .mobile-menu-drawer, .search-overlay__panel) {
    border-color: var(--uiux7r2-rule) !important;
    background: var(--uiux7r2-surface) !important;
    color: var(--uiux7r2-ink) !important;
    box-shadow: var(--uiux7r2-shadow) !important;
}

body:not(.wp-admin) .category-rail {
    border-color: var(--uiux7r2-rule) !important;
    background: var(--uiux7r2-surface) !important;
    color: var(--uiux7r2-ink) !important;
}

body:not(.wp-admin) .category-rail__link {
    color: var(--uiux7r2-ink) !important;
}

body:not(.wp-admin) :where(.mega-menu, .mega-menu-panel, .customer-shell__drawer, .mobile-menu-drawer) :where(a, button, p, span, strong, small) {
    color: inherit !important;
}

/* UIUX-008R: the charcoal footer anchor was retired (owner footer redesign); see pages/uiux-008r-surfaces.css. */

/* Reusable neutral surfaces. */
body:not(.wp-admin) :where(
    .product-card,
    .brand-card,
    .editorial-card,
    .platform-module-card,
    .decision-tools-switcher,
    .compare-table,
    .connect-application-card
) {
    border-color: var(--uiux7r2-rule) !important;
    border-radius: 10px !important;
    background: var(--uiux7r2-surface) !important;
    box-shadow: none !important;
}

/* UIUX-009: inside My AANYA (body.aanya-app) the account empty states are
   governed by pages/my-aanya.css and my-aanya-sections.css without !important. */
body:not(.wp-admin):not(.aanya-app) :where(.account-empty-state, .decision-tool-empty) {
    border-color: var(--uiux7r2-rule) !important;
    border-radius: 10px !important;
    background: var(--uiux7r2-surface) !important;
    box-shadow: none !important;
}

body:not(.wp-admin) .site-footer-adjacent-discovery {
    border-color: var(--uiux7r2-rule) !important;
    background: var(--uiux7r2-surface-muted) !important;
}

/* Product discovery and canonical cards. */
.post-type-archive-ao_product .archive-header,
.tax-ao_product_category .archive-header,
.tax-ao_health_goal .archive-header,
.product-discovery-header,
.directory-page-header {
    background: transparent !important;
}

body:not(.wp-admin) .archive-filters__panel,
body:not(.wp-admin) .archive-filters__toolbar {
    border-color: var(--uiux7r2-rule) !important;
    background: var(--uiux7r2-surface) !important;
    box-shadow: none !important;
}

body:not(.wp-admin) .archive-filters__option:not(.archive-filters__option--unavailable):hover,
body:not(.wp-admin) .archive-filters__option:has(input:checked) {
    border-color: var(--uiux7r2-rule-strong) !important;
    background: var(--uiux7r2-surface-muted) !important;
    color: var(--uiux7r2-ink) !important;
}

body:not(.wp-admin) .product-card {
    overflow: hidden;
    transition: border-color 160ms ease, transform 160ms ease;
}

body:not(.wp-admin) .product-card:hover,
body:not(.wp-admin) .product-card:focus-within {
    border-color: var(--uiux7r2-rule-strong) !important;
    box-shadow: none !important;
    transform: translateY(-2px);
}

body:not(.wp-admin) .product-card :where(.product-card-media, .product-image) {
    background: var(--uiux7r2-surface-muted) !important;
}

body:not(.wp-admin) .product-card-media-actions {
    border-color: var(--uiux7r2-rule) !important;
    background: rgb(255 255 255 / 96%) !important;
    box-shadow: 0 6px 18px rgb(24 31 27 / 7%) !important;
}

body:not(.wp-admin) .product-card-media-actions .product-card-icon-btn {
    background: #fff !important;
    color: var(--uiux7r2-muted) !important;
}

body:not(.wp-admin) .product-card-media-actions .product-card-icon-btn[aria-pressed="true"],
body:not(.wp-admin) .product-card-media-actions .product-card-icon-btn[aria-expanded="true"] {
    background: var(--uiux7r2-accent-soft) !important;
    color: var(--uiux7r2-accent) !important;
}

body:not(.wp-admin) .product-card :where(.product-brand, .product-card-details summary) {
    color: var(--uiux7r2-muted) !important;
}

body:not(.wp-admin) .product-card .product-title {
    color: var(--uiux7r2-ink) !important;
    font-weight: 680;
}

body:not(.wp-admin) .product-card :where(.product-badge, .suitability-surface--card) {
    border-color: var(--uiux7r2-rule) !important;
    background: var(--uiux7r2-canvas) !important;
    color: var(--uiux7r2-muted) !important;
    box-shadow: none !important;
}

/* Product detail: chapter surfaces, borders and bands are owned by the PDP
   composition in pages/pdp-visual-authority.css (UIUX-008R PDP
   reconstruction removed the forced white record / !important rules here). */
.single-ao_product :where(
    .pdp-summary-card,
    .pdp-gallery,
    .pdp-exp,
    .pdp-offer-card,
    .pdp-fact-card,
    .pdp-story-card,
    details
) {
    border-color: var(--uiux7r2-rule) !important;
    background-color: var(--uiux7r2-surface) !important;
    box-shadow: none !important;
}

.single-ao_product :where(.pdp-kicker, .pdp-eyebrow, .pdp-section-kicker) {
    color: var(--uiux7r2-accent) !important;
}

.single-product-page.pdp-journey :where(
    .pdp-hero-offer__link,
    .pdp-product-context-bar__buy,
    .retailer-buy-link
) {
    border-color: var(--uiux7r2-ink) !important;
    border-radius: 7px !important;
    background: var(--uiux7r2-ink) !important;
    color: #fff !important;
}

.single-product-page.pdp-journey :where(
    .pdp-hero-offer__link,
    .pdp-product-context-bar__buy,
    .retailer-buy-link
):hover,
.single-product-page.pdp-journey :where(
    .pdp-hero-offer__link,
    .pdp-product-context-bar__buy,
    .retailer-buy-link
):focus-visible {
    border-color: var(--uiux7r2-ink) !important;
    background: var(--uiux7r2-ink) !important;
    color: #fff !important;
}

.single-product-page.pdp-journey .pdp-product-context-bar {
    border-color: var(--uiux7r2-ink) !important;
    background: var(--uiux7r2-ink) !important;
    color: #fff !important;
}

/* Compare, Wishlist and Provision keep their state authorities and lose color fields. */
.decision-tool {
    color: var(--uiux7r2-ink) !important;
}

/* UIUX-009: My AANYA (body.aanya-app) owns its canvas in pages/my-aanya.css. */
body:not(.aanya-app) .account-app,
body:not(.aanya-app) .account-app .account-main,
body:not(.aanya-app) .account-app .account-canvas {
    background: var(--uiux7r2-canvas) !important;
    color: var(--uiux7r2-ink) !important;
}

.decision-tools-switcher__link {
    border-color: transparent !important;
    background: transparent !important;
    color: var(--uiux7r2-muted) !important;
}

.decision-tools-switcher__link.is-current {
    border-color: var(--uiux7r2-rule) !important;
    background: var(--uiux7r2-surface-muted) !important;
    color: var(--uiux7r2-ink) !important;
    box-shadow: inset 3px 0 0 var(--uiux7r2-accent) !important;
}

.decision-tools-switcher__link.is-current strong {
    color: var(--uiux7r2-ink) !important;
}

.decision-tools-switcher__link.is-current span {
    color: var(--uiux7r2-muted) !important;
}

.decision-tool :where(.compare-table th, .compare-table td, .provision-list-item, .wishlist-decision-item) {
    border-color: var(--uiux7r2-rule) !important;
    background: var(--uiux7r2-surface) !important;
}

.decision-tool .compare-table thead th {
    background: var(--uiux7r2-surface-muted) !important;
}

body:not(.aanya-app) .account-app :where(.account-empty-state, .decision-tool-empty, .account-workspace-entry, .account-rail__identity) {
    border-color: var(--uiux7r2-rule) !important;
    background: var(--uiux7r2-surface) !important;
    box-shadow: none !important;
}

/* Authentication is a calm neutral split, not a decorative wellness panel. */
.auth-page {
    background: var(--uiux7r2-canvas) !important;
}

.auth-shell {
    border: 1px solid var(--uiux7r2-rule);
    border-radius: 12px !important;
    background: var(--uiux7r2-surface) !important;
    box-shadow: none !important;
    overflow: hidden;
}

.auth-intro {
    background: var(--uiux7r2-surface-muted) !important;
    color: var(--uiux7r2-ink) !important;
}

.auth-intro::before {
    width: 2.5rem !important;
    height: 3px !important;
    border-radius: 0 !important;
    background: var(--uiux7r2-accent) !important;
}

.auth-card {
    border: 0 !important;
    border-left: 1px solid var(--uiux7r2-rule) !important;
    border-radius: 0 !important;
    background: var(--uiux7r2-surface) !important;
    box-shadow: none !important;
}

.auth-intro :where(h1, p, strong, small) {
    color: inherit !important;
}

/* Brands, editorial and knowledge surfaces. */
.editorial-home,
.editorial-single {
    background: var(--uiux7r2-canvas) !important;
}

.editorial-hero {
    border: 1px solid var(--uiux7r2-rule) !important;
    border-radius: 12px !important;
    background: var(--uiux7r2-surface) !important;
    color: var(--uiux7r2-ink) !important;
}

.editorial-hero :where(h1, p, label) {
    color: inherit !important;
}

.editorial-card,
.brand-card {
    transition: border-color 160ms ease, transform 160ms ease;
}

.editorial-card:hover,
.brand-card:hover {
    border-color: var(--uiux7r2-rule-strong) !important;
    transform: translateY(-2px);
}

.editorial-newsletter,
.editorial-empty,
.editorial-callout,
.brand-card__media {
    border-color: var(--uiux7r2-rule) !important;
    background: var(--uiux7r2-surface-muted) !important;
    box-shadow: none !important;
}

.editorial-formats a,
.editorial-formats span,
.editorial-topics a {
    border-color: var(--uiux7r2-rule-strong) !important;
    border-radius: 7px !important;
    background: var(--uiux7r2-surface) !important;
    color: var(--uiux7r2-ink) !important;
}

/* Institutional, trust and contact pages follow the same neutral authority. */
.about-page,
.contact-page,
.trust-page {
    background: var(--uiux7r2-canvas) !important;
    color: var(--uiux7r2-ink) !important;
}

.about-hero,
.about-section--tint,
.about-closing {
    background: var(--uiux7r2-surface-muted) !important;
}

.about-hero__visual {
    border: 1px solid var(--uiux7r2-rule) !important;
    border-radius: 12px !important;
    background: var(--uiux7r2-surface-strong) !important;
}

.about-hero__visual svg {
    stroke: var(--uiux7r2-muted) !important;
}

.about-hero__visual circle {
    fill: var(--uiux7r2-accent) !important;
}

.about-process {
    border-radius: 12px !important;
    background: var(--uiux7r2-rule) !important;
}

.about-process li,
.about-orbit,
.about-nature article,
.about-standards article,
.contact-panel {
    border-color: var(--uiux7r2-rule) !important;
    background: var(--uiux7r2-surface) !important;
    color: var(--uiux7r2-ink) !important;
    box-shadow: none !important;
}

.about-nature article,
.contact-panel {
    border-radius: 12px !important;
}

.about-symbol,
.contact-note {
    background: var(--uiux7r2-accent-soft) !important;
    color: var(--uiux7r2-accent) !important;
}

.about-section--dark,
.trust-process {
    background: var(--uiux7r2-charcoal) !important;
    color: #fff !important;
}

.about-section--dark :where(h2, h3, p, li),
.trust-process :where(h2, h3, p, li, strong) {
    color: inherit !important;
}

.about-section--dark .about-eyebrow,
.trust-process li::before,
.trust-process span {
    color: #C7CDC8 !important;
}

.about-note {
    border-color: var(--uiux7r2-rule-strong) !important;
    background: rgb(255 255 255 / 7%) !important;
}

.about-standards article,
.contact-guidance {
    border: 1px solid var(--uiux7r2-rule) !important;
    border-radius: 12px !important;
    background: var(--uiux7r2-surface) !important;
    color: var(--uiux7r2-ink) !important;
}

.contact-guidance :where(h2, p, li, a),
.contact-guidance .trust-text-link {
    color: inherit !important;
}

.about-foundations,
.trust-related,
.trust-process li {
    border-color: var(--uiux7r2-rule) !important;
}

.about-foundations a,
.trust-related a {
    border-color: var(--uiux7r2-rule) !important;
    background: var(--uiux7r2-surface) !important;
    color: var(--uiux7r2-accent) !important;
}

/* Connect application and Explore surfaces stay active but visually quiet. */
.connect-application-shell {
    border: 1px solid var(--uiux7r2-rule) !important;
    border-radius: 12px !important;
    background: var(--uiux7r2-surface) !important;
    background-image: none !important;
    box-shadow: none !important;
}

.connect-application-shell > h1 {
    color: var(--uiux7r2-ink) !important;
    font-family: var(--uiux7r2-sans);
    letter-spacing: -.035em;
}

@media (max-width: 900px) {
    .auth-card {
        border-top: 1px solid var(--uiux7r2-rule) !important;
        border-left: 0 !important;
    }
}

@media (max-width: 767px) {
    body:not(.wp-admin) .site-header {
        background: #fff !important;
    }

    .auth-shell,
    .editorial-hero,
    .connect-application-shell {
        border-radius: 10px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body:not(.wp-admin) *,
    body:not(.wp-admin) *::before,
    body:not(.wp-admin) *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* UIUX-007R3 neutral consistency and browser-surface finish. */
body:not(.wp-admin) {
    background: var(--surface-canvas);
    accent-color: var(--action-link);
    caret-color: var(--action-link);
    scrollbar-color: var(--border-strong) var(--surface-canvas);
}

body:not(.wp-admin) ::selection {
    background: color-mix(in srgb, var(--action-link) 22%, var(--surface-primary));
    color: var(--text-primary);
}

body:not(.wp-admin) :where(p, li) {
    max-width: 75ch;
}

body:not(.wp-admin) :where(h1, h2, h3) {
    letter-spacing: max(-.04em, -.035em);
}

body:not(.wp-admin) :where(.container, .pdp-container, .product-archive__inner) {
    --r3-canonical-gutter: clamp(1rem, 3vw, 2rem);
}


body:not(.wp-admin) :where(.product-card, .entity-card, .brand-card) {
    border-radius: 14px !important;
}

body:not(.wp-admin) .decision-tools-switcher__link.is-current {
    border-color: var(--border-subtle) !important;
    background: var(--surface-section-alt) !important;
    color: var(--text-primary) !important;
    box-shadow: inset 3px 0 0 var(--action-link) !important;
}

body:not(.wp-admin) .decision-tools-switcher__link.is-current :where(strong, span) {
    color: var(--text-primary) !important;
}

body:not(.wp-admin) :where(.compare-empty-state, .compare-partial-state, .decision-tool-empty) {
    width: 100%;
    max-width: 52rem;
    min-height: 0;
    padding: clamp(1.5rem, 4vw, 3rem);
    border-radius: 14px !important;
}

body:not(.wp-admin) :where(.compare-empty-state, .compare-partial-state, .decision-tool-empty) :where(h1, h2) {
    max-width: 13ch;
    font-size: clamp(2.25rem, 4vw, 3.75rem);
}

/* UIUX-007R3.1 — restrained accent language across the customer journey. */
body:not(.wp-admin) {
    --r31-evergreen: #245b45;
    --r31-blue: #356c80;
    --r31-terracotta: #a7513e;
    --r31-violet: #70516d;
    --r31-ochre: #87631f;
    --r31-teal: #2f6f69;
    --discovery-green: #98d8a1;
    --discovery-cyan: #72d5ed;
    --discovery-coral: #ffa58d;
    --discovery-lilac: #c7b2ef;
    --discovery-yellow: #f4d45a;
    --discovery-aqua: #7ddace;
}

body:not(.wp-admin) .archive-filters__option:has(input:checked) {
    box-shadow: inset 3px 0 0 var(--r31-evergreen) !important;
}

body:not(.wp-admin) :where(.product-badge, .brand-certification, .pdp-preview-label) {
    display: inline-flex;
    gap: .4rem;
    align-items: center;
}

body:not(.wp-admin) :where(.product-badge, .brand-certification, .pdp-preview-label)::before {
    width: .42rem;
    height: .42rem;
    flex: 0 0 .42rem;
    border-radius: 50%;
    background: var(--r31-blue);
    content: "";
}

body:not(.wp-admin) :where(.brand-logo--fallback, .entity-card__placeholder) {
    border: 1px solid var(--border-subtle) !important;
    background: var(--surface-section-alt) !important;
    background-image: none !important;
    color: var(--r31-evergreen) !important;
}

body:not(.wp-admin) .about-symbol {
    border-radius: 50% !important;
}

body:not(.wp-admin) .editorial-card {
    border-top: 3px solid var(--r31-terracotta) !important;
}

body:not(.wp-admin) .editorial-card:nth-child(3n + 2) { border-top-color: var(--r31-blue) !important; }
body:not(.wp-admin) .editorial-card:nth-child(3n) { border-top-color: var(--r31-evergreen) !important; }

body:not(.wp-admin) .product-card-media-actions [data-aanya-tooltip] > .aanya-tooltip {
    top: auto;
    bottom: calc(100% + .45rem);
}

body:not(.wp-admin) .product-card-media-actions {
    overflow: visible;
}

body:not(.wp-admin) .product-card-media-actions > :first-child .product-card-icon-btn {
    border-radius: 999px 0 0 999px !important;
}

body:not(.wp-admin) .product-card-media-actions > :last-child .product-card-icon-btn {
    border-radius: 0 999px 999px 0 !important;
}

/* R3.2 editorial context is separate from factual catalog and evidence media. */
.editorial-context-image { margin: 0; border-radius: 16px; overflow: hidden; }
.editorial-context-image img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
/* Ingredients and Organic Farming Knowledge place this image inside the UIUX-008R
   directory editorial intro (components/directory-editorial-intro.css); the
   /organic-farming/ gateway composes it in pages/editorial-family.css. */
.platform-module-page__shell > .editorial-context-image { max-width: 42rem; margin: 1.5rem 0 2rem; }
.connect-status { display: inline-flex; align-items: center; gap: .4rem; color: #59615c; font-size: .75rem; line-height: 1.5; }
.connect-status::before { content: ""; width: .45rem; height: .45rem; flex: 0 0 .45rem; border-radius: 50%; background: #72d5ed; }
.connect-status--planned::before { background: #f4d45a; }
.connect-status--informational::before { background: #c7b2ef; }
body:not(.wp-admin) :is(.category-showcase,.category-rail) .category-illustration {
    color: #202321;
    --category-icon-accent: #202321;
    --category-icon-soft: rgb(32 35 33 / 12%);
}
body:not(.wp-admin) .customer-search-overlay__pathways a > span { background: var(--discovery-green); color: #202321; }
body:not(.wp-admin) .customer-search-overlay__pathways li:nth-child(3n + 2) a > span { background: var(--discovery-cyan); }
body:not(.wp-admin) .customer-search-overlay__pathways li:nth-child(3n + 3) a > span { background: var(--discovery-coral); }
body .certification-intelligence-directory__eyebrow { color: #181a19; }