/* Machomard theme: loaded after the legacy styles to preserve component contracts. */
:root {
  --color-primary: #1f1f1f;
  --color-primary-hover: #333333;
  --color-primary-active: #444444;
  --color-background: #ffffff;
  --color-surface: #f3f3f3;
  --color-surface-alt: #eeeeee;
  --color-surface-dark: #222222;
  --color-text-primary: #222222;
  --color-text-secondary: #6b6b6b;
  --color-text-muted: #777777;
  --color-text-inverse: #ffffff;
  --color-border: #d6d6d6;
  --color-border-strong: #444444;
  --color-focus-ring: rgba(31, 31, 31, 0.22);
  --color-shadow: rgba(0, 0, 0, 0.12);
}

html,
body {
  background: var(--color-background);
  color: var(--color-text-primary);
}

body {
  accent-color: var(--color-primary);
}

::selection {
  color: var(--color-text-inverse);
  background: var(--color-primary);
}

a {
  color: var(--color-text-primary);
}

a:hover {
  color: var(--color-text-secondary);
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.text-primary,
.pink,
.light-green,
.size-chart,
.category-check,
.pdp-offers-price,
.pdp-offers-boldText {
  color: var(--color-primary) !important;
}

.bg-pink,
.bg-light-pink,
.bg-light-green {
  background: var(--color-primary) !important;
}

.bg-black,
.bg-dark {
  background-color: var(--color-primary) !important;
}

.text-black,
.text-dark {
  color: var(--color-text-primary) !important;
}

.bg-light,
.bg-light-col {
  background-color: var(--color-surface) !important;
}

/* Buttons */
.btn-pink,
.btn-yellow,
.btn-orange,
.btn-light-green,
.FreeShippingBanner-signup .FreeShippingBanner-button,
#sizechart.size-chart-drawer .size-chart-action-primary,
.upload-section {
  color: var(--color-text-inverse) !important;
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}

.btn-pink:hover,
.btn-yellow:hover,
.btn-orange:hover,
.btn-light-green:hover,
.FreeShippingBanner-signup .FreeShippingBanner-button:hover,
#sizechart.size-chart-drawer .size-chart-action-primary:hover,
.upload-section:hover {
  color: var(--color-text-inverse) !important;
  background: var(--color-primary-hover) !important;
  border-color: var(--color-primary-hover) !important;
}

.btn-pink:active,
.btn-pink:focus,
.btn-yellow:active,
.btn-yellow:focus,
.btn-orange:active,
.btn-orange:focus,
.btn-light-green:active,
.btn-light-green:focus {
  color: var(--color-text-inverse) !important;
  background: var(--color-primary-active) !important;
  border-color: var(--color-primary-active) !important;
  box-shadow: 0 0 0 0.25rem var(--color-focus-ring) !important;
}

.btn-light-pink,
.btn-outline,
.btn-outline-primary,
.btn-social,
#sizechart.size-chart-drawer .size-chart-action-secondary {
  color: var(--color-text-primary) !important;
  background: var(--color-background) !important;
  border: 1px solid var(--color-border-strong) !important;
}

.btn-light-pink:hover,
.btn-outline:hover,
.btn-outline-primary:hover,
.btn-social:hover,
#sizechart.size-chart-drawer .size-chart-action-secondary:hover {
  color: var(--color-text-inverse) !important;
  background: var(--color-primary-hover) !important;
  border-color: var(--color-primary-hover) !important;
}

.btn:disabled,
.btn.disabled,
button:disabled {
  cursor: not-allowed !important;
  opacity: 0.48 !important;
}

.btn-quantity {
  color: var(--color-text-primary);
  border-color: var(--color-border);
}

.btn-quantity:hover {
  color: var(--color-text-inverse);
  background: var(--color-primary);
  border-color: var(--color-primary);
}

/* Forms and controls */
.form-control,
.form-select,
textarea,
.input-group-text {
  color: var(--color-text-primary);
  background-color: var(--color-background);
  border-color: var(--color-border) !important;
}

.form-control:focus,
.form-control:active,
.form-select:focus,
textarea:focus {
  border-color: var(--color-border-strong) !important;
  box-shadow: 0 0 0 0.2rem var(--color-focus-ring) !important;
}

.form-check-input:checked,
.radio-group input:checked + .checkmark {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 0.2rem var(--color-focus-ring);
}

.form-check-input:focus,
.range-slider__thumb:focus {
  border-color: var(--color-border-strong);
  box-shadow: 0 0 0 0.2rem var(--color-focus-ring);
}

/* Header, navigation and search */
.navbar.bg-white,
.navbar-light.bg-white {
  background: var(--color-background) !important;
}

.navbar-brand,
.navbar-light .navbar-brand,
.navbar-light .navbar-nav .nav-link,
.mega-menu-item .mega-root-link {
  color: var(--color-text-primary) !important;
}

.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus,
.mega-menu-item .mega-root-link:hover,
.mega-menu-item .mega-root-link:focus {
  color: var(--color-text-secondary) !important;
}

.navbar .navbar-toolbar > a.user,
.navbar .navbar-toolbar > a.cart,
.navbar-light .navbar-toggler,
.navbar-light .navbar-toggler:focus,
.wishlist-icon {
  color: var(--color-primary) !important;
}

.navbar .navbar-toolbar > a.cart .cart-number {
  color: var(--color-text-inverse);
  background: var(--color-primary);
}

.language-selector {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  color: var(--color-text-primary);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: 4px;
  box-shadow: none;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.language-selector:hover {
  color: var(--color-text-inverse);
  background: var(--color-primary-hover);
}

.navbar .search-results {
  color: var(--color-text-primary);
  background: var(--color-background);
  border: 1px solid var(--color-border);
  box-shadow: 0 8px 20px var(--color-shadow);
}

.navbar .search-results li:hover,
.navbar .search-results li.selected,
.navbar .search-results li.background,
.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item:active {
  color: var(--color-text-primary);
  background: var(--color-surface-alt);
}

.mega-menu-item .mega-root-link:after {
  background: var(--color-primary);
}

.mega-menu-badge,
.mega-menu-section .dropdown-title-text,
.dropdown-title-text {
  color: var(--color-text-primary);
}

.dropdown-div,
.dropdown-div.mega-dropdown,
.dropdown-menu {
  color: var(--color-text-primary);
  background: var(--color-background);
  border-color: var(--color-border);
  box-shadow: 0 8px 18px var(--color-shadow);
}

.mega-menu-section .dropdown-item-content,
.dropdown-item-content {
  color: var(--color-text-secondary);
}

.mega-menu-section .dropdown-item-content:hover,
.mega-menu-section .dropdown-item-content:focus,
.dropdown-item-content:hover,
.dropdown-item-content:focus {
  color: var(--color-text-primary);
}

/* Product cards and listing controls */
.product-card,
.wishlist-card,
.card,
.modal-content,
.accordion-item {
  border-color: var(--color-border);
}

img[src="/img/categories/view-all.png"] {
  filter: grayscale(1) contrast(100) !important;
  opacity: 0.88;
}

.product-card .card-footer {
  color: var(--color-text-primary);
  background: var(--color-background);
}

.product-card .wishlist.active,
.product-card .price .discounted,
.product-detail .product-price .discounted,
.product-detail .wishlist.active,
.wishlist a {
  color: var(--color-primary) !important;
}

.product-card .price .actual,
.product-detail .product-price .actual {
  color: var(--color-text-muted);
}

.product-card .price .percentage,
.product-detail .product-price .percentage {
  color: var(--color-text-secondary);
}

.product-order .product-price,
.categories .filter-option h5,
.categories .filter-option .h5,
.rating i.bi-star-fill,
.wishlist .wishlist-card .actual {
  color: var(--color-primary) !important;
}

.sponsored,
.similar-slider .slick-prev,
.similar-slider .slick-next {
  color: var(--color-text-inverse);
  background: var(--color-surface-dark);
}

.categories .filter-option.active,
.categories .sub-categories .active,
.categories .mobile-filter,
.range-slider__thumb,
.css-15k6cs5,
.css-24k5cs3 {
  color: var(--color-text-primary) !important;
  border-color: var(--color-primary) !important;
}

.categories .filter-outer,
.offcanvas-collapse,
.accordion-button,
.product-detail .product-information .accordion-item h3 button,
.product-detail .product-information .accordion-item .h3 button {
  color: var(--color-text-primary) !important;
  background: var(--color-surface) !important;
}

.pagination a,
.pagination .page-link {
  color: var(--color-text-primary) !important;
  background: var(--color-background);
  border-color: var(--color-border);
}

.pagination a:hover,
.pagination .page-link:hover {
  color: var(--color-text-inverse) !important;
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

.pagination li.active a,
.pagination .page-item.active .page-link {
  color: var(--color-text-inverse) !important;
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}

/* Product detail, cart and checkout */
.product-detail .coupon-card,
.coupon-card {
  color: var(--color-text-inverse);
  background: var(--color-surface-dark) !important;
}

.product-detail .coupon-card h3,
.product-detail .coupon-card p,
.product-detail .coupon-card #cpnCode {
  color: var(--color-text-inverse) !important;
}

.product-detail .color-border button:focus,
.product-detail .color-border button[aria-pressed="true"],
.selected-variant {
  border-color: var(--color-primary) !important;
}

.product-detail .carousel-thumb .border:hover,
.product-detail .carousel-thumb .border.active,
.product-image-viewer-thumb.active,
.product-image-viewer-thumb:hover {
  border-color: var(--color-primary) !important;
}

.product-order,
.order-details,
.delivery-information,
.apply-Joolcoin,
.apply-coupon {
  border-color: var(--color-border) !important;
}

.product-order .bi,
.order-info .nav-link,
.order-info .specification span.main {
  color: var(--color-text-primary);
}

.profile-sidebar .nav-pills .nav-link.active,
.profile-sidebar .nav-pills .show > .nav-link,
.order-info .nav-pills .nav-link.active,
.order-info .nav-pills .show > .nav-link {
  color: var(--color-text-inverse) !important;
  background: var(--color-primary) !important;
}

.profile-sidebar i,
.order-button-info,
.rating-review i.bi-star-fill {
  color: var(--color-primary) !important;
}

.navbar-stepper .MuiStepIcon-root.Mui-active,
.navbar-stepper .MuiStepIcon-root.Mui-completed {
  color: var(--color-primary) !important;
}

#sizechart.size-chart-drawer .react-tabs__tab--selected {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

.FreeShippingBanner-banner-expanded {
  color: var(--color-text-primary);
  background: var(--color-surface-alt) !important;
}

.FreeShippingBanner-sidebar {
  background: var(--color-surface-dark) !important;
}

.bottomfeatures svg,
.bottomfeatures svg g {
  color: var(--color-primary) !important;
  fill: var(--color-primary) !important;
}

.whatsapp-Faq-Question,
.whatsapp-div,
.Discountpopup {
  border-color: var(--color-primary) !important;
}

.whatsapp-Faq-Question-active,
.Discountpopup {
  background-color: var(--color-primary) !important;
}

.whatsapp-div::after {
  border-color: transparent var(--color-primary) transparent transparent !important;
}

.whatsapp-div::before {
  border-color: transparent transparent transparent var(--color-primary) !important;
}

/* Footer */
.footer {
  color: var(--color-text-inverse);
  background: var(--color-surface-dark);
  border-top: 1px solid var(--color-primary-active);
}

.footer h5,
.footer p {
  color: var(--color-text-inverse);
}

.footer .text-muted,
.footer .nav-link {
  color: #bdbdbd !important;
}

.footer .nav-link:hover,
.footer .nav-link:focus {
  color: var(--color-text-inverse) !important;
}

/* Loading indicators */
.spinner-border {
  color: var(--color-primary);
}

.loading {
  background: rgba(31, 31, 31, 0.48);
}

@media (max-width: 991.98px) {
  .offcanvas-collapse {
    background: var(--color-background);
  }

  .navbar .nav-link {
    border-bottom-color: var(--color-border);
  }
}

@media (max-width: 767.98px) {
  .product-detail .add-to-button {
    background: var(--color-background);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 -4px 12px var(--color-shadow);
  }
}