/* Sampled from the user's SAVA'G reference screenshot, 2026-10-20.
   Ivory: regional RGB median. Mocha: representative glyph-core RGB median.
   JPEG compression and antialiasing introduce small pixel variations. */
@layer savag-colors {
    html:root,
    body:not(.wp-admin),
    body:not(.wp-admin) .savag-page {
        --savag-ivory: #f6f2ee !important;
        --savag-mocha: #73675e !important;
        --savag-reference-paper: #f6f2ee !important;
        --savag-reference-logo: #73675e !important;
        --sc-paper: #f6f2ee !important;
        --sc-warm: #f6f2ee !important;
    }

    /* Unified canvas, including the global header, forms and commerce surfaces.
       Interactive states, photographs, videos and dark action buttons retain contrast. */
    body:not(.wp-admin),
    body:not(.wp-admin) :where(
        .site-main, .savag-page, .elementor-location-header,
        .sh-header, .sh-mobile-menu .elementor-tab-content,
        .sh-newsletter, .savag-featured-pieces,
        .sp-editorial-copy, .sc-empty-bag, .sc-services,
        .e-cart-totals, .e-checkout__order_review, .e-checkout__order_review-2,
        .woocommerce-order-overview, .sll-filters,
        .sn-popup, .sn-content, .pum:has(.sn-popup) .pum-container,
        .pum:has(.sn-popup) .pum-close
    ) {
        background-color: #f6f2ee !important;
        background-image: none !important;
    }


}

/* Use the original transparent wordmark as an alpha mask, preserving its exact shape.
   The accessible image remains in the document; no raster is regenerated or distorted. */
@supports (mask-image: url("assets/savag-wordmark.png")) or (-webkit-mask-image: url("assets/savag-wordmark.png")) {
    body .elementor .savag-page .sh-brand:not(.sh-footer-brand) a {
        position: relative;
    }
    body .elementor .savag-page .sh-brand:not(.sh-footer-brand) img {
        opacity: 0 !important;
    }
    body .elementor .savag-page .sh-brand:not(.sh-footer-brand) a::before {
        content: "";
        display: block !important;
        position: absolute;
        inset: 0;
        background: #73675e !important;
        -webkit-mask: url("assets/savag-wordmark.png") center / cover no-repeat !important;
        mask: url("assets/savag-wordmark.png") center / cover no-repeat !important;
        pointer-events: none;
    }
    body .elementor .savag-page.sn-popup .sn-brand a::before {
        -webkit-mask-size: contain !important;
        mask-size: contain !important;
    }
}

/* A clearer navy for the reference philosophy and product copy. */
@layer savag-colors {
    body:not(.wp-admin) {
        --savag-copy-navy: #1c2e4a;
    }
    body:not(.wp-admin) :where(
        .sh-philosophy .elementor-heading-title,
        .sh-philosophy p,
        .savag-featured-pieces .sp-heading,
        .savag-featured-pieces .sp-intro,
        .savag-featured-pieces .sp-name,
        .savag-featured-pieces .sp-price,
        .savag-featured-pieces .sp-description,
        .sh-collections .sh-section-title,
        .sh-collections .sh-section-copy,
        .sh-collections .sh-collection-link,
        .sll-archive-title,
        .sll-product-title,
        .sll-subtitle,
        .sll-price,
        .sll-products .woocommerce-loop-product__title,
        .sll-products .price,
        .sll-products a.button,
        .sll-products .added_to_cart,
        .sll-cart .woocommerce-variation-price,
        .sll-cart .woocommerce-variation-description,
        .sll-cart .variations label,
        .sll-cart .sll-option-hint,
        .sll-cart .sll-choice,
        .sll-cart .sll-choice small
    ),
    body:not(.wp-admin) :where(
        .sh-philosophy .elementor-heading-title,
        .sh-philosophy p,
        .savag-featured-pieces .sp-heading,
        .savag-featured-pieces .sp-intro,
        .savag-featured-pieces .sp-name,
        .savag-featured-pieces .sp-price,
        .savag-featured-pieces .sp-description,
        .sh-collections .sh-section-title,
        .sh-collections .sh-section-copy,
        .sh-collections .sh-collection-link,
        .sll-archive-title,
        .sll-product-title,
        .sll-subtitle,
        .sll-price,
        .sll-products .woocommerce-loop-product__title,
        .sll-products .price,
        .sll-cart .woocommerce-variation-price,
        .sll-cart .woocommerce-variation-description,
        .sll-cart .sll-choice
    ) :where(h1, h2, h3, h4, p, a, span, bdi, ins, del, small) {
        color: var(--savag-copy-navy) !important;
    }
}