:root {
    --color-brand: #50a000;
    --primary-color: #50a000;
    --color-brand-rgb: 80, 160, 0;
    --color-brand-dark: #408000;
    --color-brand-2: #502010;

    --color-primary: #50a000;
    --color-secondary: #502010;
    --color-success: #50a000;
}

:root,
[data-bs-theme='light'] {
    --bs-primary: #50a000;
    --bs-primary-rgb: 80, 160, 0;
    --bs-link-color: #408000;
    --bs-link-color-rgb: 64, 128, 0;
    --bs-link-hover-color: #70b000;
    --bs-link-hover-color-rgb: 112, 176, 0;
    --bs-focus-ring-color: rgba(80, 160, 0, 0.25);
}

/* Mayoriel brand treatment for the primary purchase action. */
.has-buy-now-button .button.button-buy-now,
.product-extra-link2 .button.button-buy-now {
    background-color: #50a000 !important;
    border-color: #50a000 !important;
    color: #ffffff !important;
}

.has-buy-now-button .button.button-buy-now:hover,
.has-buy-now-button .button.button-buy-now:focus,
.product-extra-link2 .button.button-buy-now:hover,
.product-extra-link2 .button.button-buy-now:focus {
    background-color: #408000 !important;
    border-color: #408000 !important;
    color: #ffffff !important;
}

/* Keep secondary action hovers within the Mayoriel green palette. */
.empty-state .btn.btn-sm:hover,
.empty-state .btn.btn-sm:focus {
    background-color: #408000 !important;
    border-color: #408000 !important;
    color: #ffffff !important;
}

/* Checkout actions and selected controls use the Mayoriel green palette. */
.payment-checkout-btn,
.payment-checkout-btn-step,
.checkout-btn-responsive {
    background-color: #50a000 !important;
    border-color: #50a000 !important;
    color: #ffffff !important;
}

.payment-checkout-btn:hover,
.payment-checkout-btn:focus,
.payment-checkout-btn-step:hover,
.payment-checkout-btn-step:focus,
.checkout-btn-responsive:hover,
.checkout-btn-responsive:focus {
    background-color: #408000 !important;
    border-color: #408000 !important;
    color: #ffffff !important;
}

.payment-checkout-form input[type='radio']:checked,
.payment_option input[type='radio']:checked {
    accent-color: #50a000;
}

/* All checkout actions, including coupon and shipping controls. */
#checkout-form .btn,
#checkout-form button[data-bb-toggle='apply-coupon-code'],
.checkout-form .btn {
    background-color: #50a000 !important;
    border-color: #50a000 !important;
    color: #ffffff !important;
}

#checkout-form .btn:hover,
#checkout-form .btn:focus,
#checkout-form button[data-bb-toggle='apply-coupon-code']:hover,
#checkout-form button[data-bb-toggle='apply-coupon-code']:focus,
.checkout-form .btn:hover,
.checkout-form .btn:focus {
    background-color: #408000 !important;
    border-color: #408000 !important;
    color: #ffffff !important;
}

.checkout__coupon-item button,
.checkout__coupon-section button,
.checkout__coupon-item .btn,
.checkout__coupon-section .btn {
    background-color: #50a000 !important;
    border-color: #50a000 !important;
    color: #ffffff !important;
}

.checkout__coupon-item button:hover,
.checkout__coupon-item button:focus,
.checkout__coupon-section button:hover,
.checkout__coupon-section button:focus {
    background-color: #408000 !important;
    border-color: #408000 !important;
    color: #ffffff !important;
}

.checkout-form .custome-radio input[type='radio']:checked + .form-check-label::after,
.payment_option .custome-radio input[type='radio']:checked + .form-check-label::after {
    background-color: #50a000 !important;
}

/* Bootstrap's primary blue is replaced by the Mayoriel green globally. */
.btn-primary,
button.btn-primary,
a.btn-primary,
.btn.btn-primary {
    background-color: #50a000 !important;
    border-color: #50a000 !important;
    color: #ffffff !important;
}

.btn-primary:hover,
.btn-primary:focus,
button.btn-primary:hover,
button.btn-primary:focus,
a.btn-primary:hover,
a.btn-primary:focus {
    background-color: #408000 !important;
    border-color: #408000 !important;
    color: #ffffff !important;
}

/* Checkout-specific buttons (the theme does not use .btn-primary here). */
.payment-checkout-btn,
.payment-checkout-btn-step {
    background-color: #50a000 !important;
    border-color: #50a000 !important;
    color: #ffffff !important;
}

.payment-checkout-btn:hover,
.payment-checkout-btn:focus,
.payment-checkout-btn-step:hover,
.payment-checkout-btn-step:focus {
    background-color: #408000 !important;
    border-color: #408000 !important;
    color: #ffffff !important;
}

/* Checkout radio buttons and checkboxes use the Mayoriel green accent. */
#checkout-form input[type='radio'],
#checkout-form input[type='checkbox'],
.checkout-form input[type='radio'],
.checkout-form input[type='checkbox'],
.payment_option input[type='radio'],
.payment_option input[type='checkbox'] {
    accent-color: #50a000 !important;
}

#checkout-form .form-check-input:checked,
.checkout-form .form-check-input:checked,
#checkout-form input[type='radio']:checked,
#checkout-form input[type='checkbox']:checked {
    background-color: #50a000 !important;
    border-color: #50a000 !important;
}

#checkout-form .custome-radio input[type='radio']:checked + .form-check-label::before,
.checkout-form .custome-radio input[type='radio']:checked + .form-check-label::before,
#checkout-form .custome-checkbox input[type='checkbox']:checked + .form-check-label::before,
.checkout-form .custome-checkbox input[type='checkbox']:checked + .form-check-label::before {
    background-color: #50a000 !important;
    border-color: #50a000 !important;
}

.mayoriel-whatsapp-float { position: fixed; right: 24px; bottom: 24px; z-index: 1040; width: 58px; height: 58px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: #25d366 !important; color: #ffffff !important; box-shadow: 0 4px 14px rgba(0,0,0,.22); transition: transform .2s ease, box-shadow .2s ease; }
.mayoriel-whatsapp-float svg { width: 31px; height: 31px; fill: currentColor; }
.mayoriel-whatsapp-float:hover { color: #ffffff !important; transform: translateY(-3px) scale(1.04); box-shadow: 0 7px 18px rgba(0,0,0,.28); }
@media (max-width: 576px) { .mayoriel-whatsapp-float { right: 16px; bottom: 16px; width: 52px; height: 52px; } .mayoriel-whatsapp-float svg { width: 28px; height: 28px; } }

/* Place the floating WhatsApp contact on the left side. */
.mayoriel-whatsapp-float { left: 24px !important; right: auto !important; }
@media (max-width: 576px) { .mayoriel-whatsapp-float { left: 16px !important; right: auto !important; } }

/* Keep the mobile newsletter compact by hiding its decorative image. */
@media (max-width: 767px) {
    .newsletter-inner > img,
    .newsletter-content + img {
        display: none !important;
    }
}

/* Keep the square Mayoriel logo proportional in the mobile menu. */
.mobile-header-wrapper-style .mobile-header-logo a img {
    width: 72px !important;
    height: 72px !important;
    max-width: 72px !important;
    max-height: 72px !important;
    object-fit: contain !important;
    aspect-ratio: 1 / 1;
}

#mobile-logo a img {
    width: 55px !important;
    height: 55px !important;
    max-width: 55px !important;
    max-height: 55px !important;
    object-fit: contain !important;
    aspect-ratio: 1 / 1;
}