:root {
	--bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	--bs-body-font-weight: 300;
	--mp-font-xs: .875rem;
	--mp-font-sm: 1rem;
	--mp-font-md: 1.125rem;
	--mp-font-lg: 1.5rem;
	--mp-font-xl: 1.75rem;
	--mp-primary: #f5b31e;
	--mp-bg-dark: #383e4c;
	--mp-surface: #ffffff;
	--mp-surface-muted: #e6e8eb;
	--mp-neutral: #b3b3b3;
	--mp-text: #383e4c;
	--mp-text-inverse: #ffffff;
	--mp-border: #e6e8eb;
	--mp-field-disabled-bg: #e6e8eb;
	--mp-primary-hover: color-mix(in srgb, var(--mp-bg-dark) 86%, rgb(0 0 0));
	--mp-warning-hover: color-mix(in srgb, var(--mp-primary) 86%, rgb(0 0 0));
	--mp-warning-active: color-mix(in srgb, var(--mp-primary) 78%, rgb(0 0 0));
	--mp-price-positive: #198754;
}

body {
	background-color: var(--mp-surface-muted);
	color: var(--mp-text);
	font-weight: 300;
}

h1, .h1 { font-size: var(--mp-font-lg); font-weight: 400; }
h2, .h2 { font-size: var(--mp-font-md); font-weight: 400; }
h3, .h3 { font-size: var(--mp-font-sm); font-weight: 400; }
h4, .h4 { font-size: var(--mp-font-sm); font-weight: 400; }
h5, .h5 { font-size: var(--mp-font-sm); font-weight: 400; }
h6, .h6 { font-size: var(--mp-font-xs); font-weight: 400; }

body,
.form-control,
.form-select {
	font-size: var(--mp-font-sm);
}

small,
.small {
	font-size: var(--mp-font-xs);
}

.btn {
	font-weight: 400;
	font-size: var(--mp-font-sm);
}

:where(.entry-content, .page-content, article.card.card-body) a:not(.btn) {
	color: var(--mp-text);
	text-decoration: none;
	background-image: linear-gradient(var(--mp-primary), var(--mp-primary));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0 .1rem;
	transition: background-size .2s ease;
}

:where(.entry-content, .page-content, article.card.card-body) a:not(.btn):hover,
:where(.entry-content, .page-content, article.card.card-body) a:not(.btn):focus-visible {
	color: var(--mp-text);
	background-size: 100% .1rem;
}

.breadcrumb .breadcrumb-item {
	color: color-mix(in srgb, var(--mp-text) 68%, var(--mp-surface));
	font-weight: 300;
}

.breadcrumb .breadcrumb-item a {
	position: relative;
	color: var(--mp-text);
	font-weight: 300;
	text-decoration: none;
}

.breadcrumb .breadcrumb-item a::after {
	position: absolute;
	left: 0;
	bottom: -.15em;
	width: 100%;
	height: .1em;
	background-color: var(--mp-primary);
	content: "";
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .18s ease;
}

.breadcrumb .breadcrumb-item a:hover::after,
.breadcrumb .breadcrumb-item a:focus-visible::after {
	transform: scaleX(1);
}

.breadcrumb .breadcrumb-item.active {
	color: var(--mp-text);
	font-weight: 400;
}

.breadcrumb-item + .breadcrumb-item::before {
	color: color-mix(in srgb, var(--mp-text) 45%, var(--mp-surface));
}

.navbar .nav-link {
	font-weight: 400;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus-visible,
.navbar .nav-link.active,
.navbar .nav-link[aria-current="page"] {
	color: var(--mp-primary);
}

.dropdown-item {
	color: var(--mp-text);
	font-weight: 400;
}

.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item.active,
.dropdown-item[aria-current="page"] {
	background-color: color-mix(in srgb, var(--mp-primary) 14%, var(--mp-surface));
	color: var(--mp-text);
}

.offcanvas .list-group-item {
	font-weight: 400;
}

.fw-bold,
.fw-semibold,
.fw-medium {
	font-weight: 400;
}

header .navbar-dark,
footer.bg-dark,
.offcanvas.bg-dark {
	background-color: var(--mp-bg-dark);
}

header .bg-body-secondary {
	background-color: var(--mp-surface-muted);
	border-color: var(--mp-border);
}

header a,
footer a {
	text-decoration-thickness: .08em;
	text-underline-offset: .15em;
}

header a:focus-visible,
footer a:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: .2rem solid var(--mp-primary);
	outline-offset: .15rem;
}

.footer-brand-logo {
	display: block;
	height: 50px;
	width: auto;
	filter: brightness(0) invert(1);
}

.btn-primary {
	font-weight: 400;
	--bs-btn-bg: var(--mp-bg-dark);
	--bs-btn-border-color: var(--mp-bg-dark);
	--bs-btn-color: var(--mp-text-inverse);
	--bs-btn-hover-bg: var(--mp-primary-hover);
	--bs-btn-hover-border-color: var(--mp-primary-hover);
	--bs-btn-hover-color: var(--mp-text-inverse);
	--bs-btn-active-bg: var(--mp-primary-hover);
	--bs-btn-active-border-color: var(--mp-primary-hover);
	--bs-btn-active-color: var(--mp-text-inverse);
}

.btn-outline-primary {
	font-weight: 400;
	--bs-btn-color: var(--mp-bg-dark);
	--bs-btn-border-color: var(--mp-bg-dark);
	--bs-btn-hover-bg: var(--mp-bg-dark);
	--bs-btn-hover-border-color: var(--mp-bg-dark);
	--bs-btn-hover-color: var(--mp-text-inverse);
	--bs-btn-active-bg: var(--mp-bg-dark);
	--bs-btn-active-border-color: var(--mp-bg-dark);
	--bs-btn-active-color: var(--mp-text-inverse);
}

.btn-warning {
	font-weight: 400;
	--bs-btn-bg: var(--mp-primary);
	--bs-btn-border-color: var(--mp-primary);
	--bs-btn-color: var(--mp-text);
	--bs-btn-hover-bg: var(--mp-warning-hover);
	--bs-btn-hover-border-color: var(--mp-warning-hover);
	--bs-btn-hover-color: var(--mp-text);
	--bs-btn-active-bg: var(--mp-warning-active);
	--bs-btn-active-border-color: var(--mp-warning-active);
	--bs-btn-active-color: var(--mp-text);
	--bs-btn-disabled-bg: color-mix(in srgb, var(--mp-primary) 45%, var(--mp-surface));
	--bs-btn-disabled-border-color: color-mix(in srgb, var(--mp-primary) 45%, var(--mp-surface));
	--bs-btn-disabled-color: color-mix(in srgb, var(--mp-text) 65%, var(--mp-surface));
}

.btn-warning:focus-visible {
	outline-color: var(--mp-bg-dark);
	box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--mp-bg-dark) 55%, transparent);
}

.form-control,
.form-select {
	background-color: var(--mp-surface);
	border-color: var(--mp-border);
	color: var(--mp-text);
}

.form-control::placeholder {
	color: color-mix(in srgb, var(--mp-text) 62%, var(--mp-surface));
}

.form-control:hover,
.form-select:hover {
	border-color: var(--mp-neutral);
}

.form-control:not(:placeholder-shown),
.form-select:valid {
	background-color: var(--mp-surface);
}

.form-control:focus,
.form-select:focus {
	border-color: var(--mp-primary);
	box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--mp-primary) 35%, transparent);
}

.form-control:disabled,
.form-control[readonly],
.form-select:disabled {
	background-color: var(--mp-field-disabled-bg);
	color: var(--mp-text);
}

.form-check-input {
	border-color: var(--mp-border);
}

.form-check-input:checked {
	background-color: var(--mp-primary);
	border-color: var(--mp-primary);
}

.form-check-input:focus {
	border-color: var(--mp-primary);
	box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--mp-primary) 35%, transparent);
}

.list-group-item {
	background-color: var(--mp-surface);
	border-color: var(--mp-border);
	color: var(--mp-text);
}

.list-group.bg-transparent .list-group-item {
	background-color: transparent;
	color: inherit;
}

.list-group-item-action:hover,
.list-group-item-action:focus {
	background-color: color-mix(in srgb, var(--mp-primary) 12%, var(--mp-surface));
	color: var(--mp-text);
}

.list-group-item-action:active,
.list-group-item.active {
	background-color: var(--mp-bg-dark);
	border-color: var(--mp-bg-dark);
	color: var(--mp-text-inverse);
}

.list-group-item.disabled,
.list-group-item:disabled {
	background-color: var(--mp-field-disabled-bg);
	color: color-mix(in srgb, var(--mp-text) 62%, var(--mp-surface));
}

.card:not(.bg-dark):not(.bg-body-tertiary) {
	background-color: var(--mp-surface);
	border-color: var(--mp-border);
	color: var(--mp-text);
}

.card:not(.bg-dark):not(.bg-body-tertiary) .card-header,
.card:not(.bg-dark):not(.bg-body-tertiary) .card-footer {
	background-color: var(--mp-surface-muted);
	border-color: var(--mp-border);
}

.card:not(.bg-dark):not(.bg-body-tertiary) .card-title {
	color: var(--mp-text);
}

.card:not(.bg-dark):not(.bg-body-tertiary) .card-subtitle,
.card:not(.bg-dark):not(.bg-body-tertiary) .card-text {
	color: color-mix(in srgb, var(--mp-text) 78%, var(--mp-surface));
}

.card-body {
	line-height: 1.45;
}

.card-body > * {
	margin-top: 0;
	margin-bottom: .75rem;
}

.card-body > :last-child {
	margin-bottom: 0;
}

.table {
	--bs-table-bg: var(--mp-surface);
	--bs-table-color: var(--mp-text);
	--bs-table-border-color: var(--mp-border);
	vertical-align: middle;
}

.table thead th {
	background-color: var(--mp-surface-muted);
	color: var(--mp-text);
	font-weight: 700;
}

.table tfoot th,
.table tfoot td {
	border-top-color: var(--mp-border);
	font-weight: 700;
}

.card-title { font-size: var(--mp-font-sm); font-weight: 400; }
.card-text { font-size: var(--mp-font-sm); font-weight: 300; }
.card .price { font-size: var(--mp-font-md); font-weight: 400; }
.card .small,
.card .text-muted { font-size: var(--mp-font-xs); font-weight: 300; }

.single-product h1 { font-size: var(--mp-font-lg); font-weight: 400; }
.single-product .text-success { font-size: var(--mp-font-xl); font-weight: 400; }
.single-product .stock,
.single-product .badge { font-size: var(--mp-font-sm); font-weight: 400; }
.single-product .text-secondary { font-size: var(--mp-font-sm); font-weight: 300; }

.woocommerce-product-gallery,
.woocommerce-product-gallery__wrapper {
	max-width: 100%;
}

.woocommerce-product-gallery__image img {
	max-width: 100%;
	height: auto;
}

.price,
.woocommerce-Price-amount {
	color: var(--mp-text);
	font-weight: 400;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

del .woocommerce-Price-amount,
del {
	color: color-mix(in srgb, var(--mp-text) 62%, var(--mp-surface));
	font-weight: 400;
}

ins,
ins .woocommerce-Price-amount {
	color: var(--mp-text);
	text-decoration: none;
}

.price del::before {
	content: "De: ";
}

.price ins::before {
	content: "Por: ";
}

.card .price,
.card .price ins,
.card .price ins .woocommerce-Price-amount {
	color: var(--mp-price-positive);
	font-weight: 400;
}

.card .price del,
.card .price del .woocommerce-Price-amount {
	color: color-mix(in srgb, var(--mp-text) 62%, var(--mp-surface));
	font-weight: 300;
}

.card .mp-card-price,
.card .mp-card-price .woocommerce-Price-amount,
.card .mp-card-price .woocommerce-Price-currencySymbol {
	color: var(--mp-price-positive);
	font-weight: 400;
}

.card .mp-card-price ins {
	font-weight: 400;
}

.card .mp-card-price del,
.card .mp-card-price del .woocommerce-Price-amount,
.card .mp-card-price del .woocommerce-Price-currencySymbol {
	color: color-mix(in srgb, var(--mp-text) 62%, var(--mp-surface));
	font-weight: 300;
}

.woocommerce-Price-currencySymbol {
	font-size: .8em;
}

.stock {
	font-weight: 600;
}

.product_meta {
	color: color-mix(in srgb, var(--mp-text) 70%, var(--mp-surface));
}

.variations {
	border-color: var(--mp-border);
}

/* MP Engenharia visual layer: Catalog ordering toolbar refinement */
.woocommerce-result-count {
	margin-bottom: 0;
	color: color-mix(in srgb, var(--mp-text) 75%, var(--mp-surface));
	font-size: var(--mp-font-xs);
	font-weight: 300;
	white-space: nowrap;
}

.woocommerce-ordering {
	margin-bottom: 0;
}

.woocommerce-ordering .orderby {
	width: auto;
	min-width: 180px;
	max-width: 100%;
}

.woocommerce-ordering .btn {
	white-space: nowrap;
	flex-shrink: 0;
}

@media (max-width: 575.98px) {
	.woocommerce-ordering {
		width: 100%;
	}
	.woocommerce-ordering .orderby {
		flex: 1 1 0;
		min-width: 140px;
	}
}

/* MP Engenharia visual layer: responsive logo refinement. */
@media (max-width: 575.98px) {
	.navbar-brand img {
		max-height: 64px;
		width: auto;
	}
}

@media (min-width: 576px) and (max-width: 991.98px) {
	.navbar-brand img {
		max-height: 56px;
		width: auto;
	}
}

@media (min-width: 992px) {
	.navbar-brand img {
		max-height: 72px;
		width: auto;
	}
}