/*
Theme Name: Motors Starter Child
Theme URI: https://stylemixthemes.com/
Description: Motors Starter Child Theme
Author: Stylemix Themes
Author URI: https://stylemixthemes.com/
Template: motors-starter-theme
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: motors-starter-child
*/

/*
 * My New Car SA — Homepage Custom Styles
 * ============================================================
 * INSTRUCTIONS: Copy the CONTENTS of this file and paste at
 * the END of your child theme's style.css, after all existing
 * rules, to avoid specificity conflicts.
 *
 * File: /wp-content/themes/YOUR-CHILD-THEME/style.css
 * ============================================================
 *
 * Design System:
 *   --mnc-orange       Brand orange (#f7941d)
 *   --mnc-dark         Section backgrounds (dark navy)
 *   --mnc-card-bg      Vehicle card background (white)
 *   Static content     Boxed with max-width container
 *   Dynamic content    Edge-to-edge (full viewport width)
 *
 * Breakpoints used:
 *   Mobile   < 480px
 *   Phablet  480px – 767px
 *   Tablet   768px – 1023px
 *   Desktop  ≥ 1024px
 *   Wide     ≥ 1280px
 */


/* ============================================================
   CSS CUSTOM PROPERTIES (Design Tokens)
   ============================================================ */
:root {
	--mnc-orange: #e67837;
	--mnc-orange-dark: #cc6625;
	--mnc-orange-light: #f09562;
	--mnc-dark: rgba(0, 0, 0, 0.9);
	/* filter box + logo sections  */
	--mnc-dark-alt: rgba(0, 0, 0, 0.9);
	/* vehicle carousel section     */
	--mnc-card-bg: #ffffff;
	--mnc-card-border: #e5e7eb;
	--mnc-card-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
	--mnc-card-shadow-hover: 0 6px 20px rgba(0, 0, 0, 0.18);
	--mnc-text-dark: #111827;
	--mnc-text-muted: #6b7280;
	--mnc-text-white: #ffffff;
	--mnc-text-white-soft: rgba(255, 255, 255, 0.80);
	--mnc-border-radius: 1rem;
	--mnc-transition: 0.2s ease;
	--mnc-max-width: 1200px;
	--mnc-gutter: 1.5rem;
}


/* ============================================================
   SHARED UTILITY: Section container (boxed)
   ============================================================ */
.mnc-container {
	max-width: var(--mnc-max-width);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--mnc-gutter);
	padding-right: var(--mnc-gutter);
}


/* ============================================================
   SECTION 1 — TOP INTRO
   Two-column: logo left (33%) | placeholder text right (67%)
   Static content → boxed layout
   ============================================================ */
.mnc-intro-section {
	align-items: center !important;
	padding-top: 2rem !important;
	padding-bottom: 2rem !important;
}

.mnc-intro-logo-col {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

.mnc-intro-logo-col .wp-block-image,
.mnc-intro-logo-col figure {
	margin: 0 !important;
}

.mnc-intro-logo-col img {
	max-width: 100%;
	height: auto;
	display: block;
}

.mnc-intro-text-col {
	display: flex !important;
	padding-left: 2rem;
	text-align: center;
	flex-direction: column;
	justify-content: center;
}

.mnc-intro-placeholder {
	font-size: 1rem;
	line-height: 1.8;
	color: var(--mnc-text-dark);
	margin: 0;
}

/* Stack columns on mobile */
@media (max-width: 767px) {
	.mnc-intro-section {
		flex-wrap: wrap !important;
	}

	.mnc-intro-logo-col,
	.mnc-intro-text-col {
		flex-basis: 100% !important;
		width: 100% !important;
	}

	.mnc-intro-text-col {
		padding-left: 0;
		padding-top: 1.5rem;
	}
}


/* ============================================================
   SECTION 2 — VEHICLE SEARCH / FILTER BOX
   Static content → boxed container with dark background
   ============================================================ */
.mnc-search-box {
	background-color: var(--mnc-dark);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--mnc-border-radius);
	padding: 2rem var(--mnc-gutter);
	margin-bottom: 0.25rem;
}

.mnc-search-inner {
	max-width: var(--mnc-max-width);
	margin: 0 auto;
	display: flex;
	align-items: flex-end;
	gap: 1rem;
	flex-wrap: wrap;
}

.mnc-search-fields,
.mnc-search-fields-inline {
	flex: 1;
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
	align-items: flex-end;
}


.mnc-search-field {
	flex: 1;
	min-width: 9rem;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.mnc-field-label {
	color: var(--mnc-text-white-soft);
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: 0;
	-webkit-user-select: none;
	user-select: none;
}

/* ---- Shared input / select base ---- */
.mnc-select,
.mnc-input {
	-webkit-appearance: none;
	appearance: none;
	background-color: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 0.625rem;
	color: var(--mnc-text-white);
	font-size: 0.9rem;
	padding: 0.625rem 0.85rem;
	width: 100%;
	transition: border-color var(--mnc-transition),
		background-color var(--mnc-transition);
}

.mnc-select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23ffffff' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.75rem center;
	padding-right: 2.25rem;
	cursor: pointer;
}

.mnc-select option {
	background-color: #1f2937;
	color: var(--mnc-text-white);
}

.mnc-select:focus,
.mnc-input:focus {
	outline: 2px solid var(--mnc-orange);
	outline-offset: 0;
	border-color: var(--mnc-orange);
	background-color: rgba(255, 255, 255, 0.12);
}

/* ---- Price range pair ---- */
.mnc-price-inputs {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.mnc-price-input-wrap {
	flex: 1;
	display: flex;
	align-items: center;
	background-color: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 0.625rem;
	overflow: hidden;
	transition: border-color var(--mnc-transition);
	min-width: 0;
}

.mnc-price-input-wrap:focus-within {
	border-color: var(--mnc-orange);
}

.mnc-currency-prefix {
	padding: 0 0.3rem 0 0.65rem;
	color: var(--mnc-orange);
	font-weight: 700;
	font-size: 0.9rem;
	flex-shrink: 0;
	-webkit-user-select: none;
	user-select: none;
	line-height: 1;
}

.mnc-price-input-wrap .mnc-input {
	background: transparent;
	border: none;
	outline: none;
	padding-left: 0;
	min-width: 0;
	width: 100%;
	color: var(--mnc-text-white);
}

.mnc-price-input-wrap .mnc-input:focus {
	outline: none;
	border: none;
}

/* Remove number spinner arrows */
.mnc-input[type="number"]::-webkit-inner-spin-button,
.mnc-input[type="number"]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.mnc-input[type="number"] {
	-moz-appearance: textfield;
	-webkit-appearance: none;
	appearance: none;
}

.mnc-price-separator {
	color: var(--mnc-text-white-soft);
	flex-shrink: 0;
	font-size: 1rem;
}

/* ---- Search button ---- */
.mnc-search-action {
	flex-shrink: 0;
}

.mnc-search-btn {
	background: linear-gradient(135deg, var(--mnc-orange-light), var(--mnc-orange));
	color: #111111;
	font-weight: 700;
	font-size: 0.9rem;
	padding: 0.7rem 1.75rem;
	border: none;
	border-radius: var(--mnc-border-radius);
	cursor: pointer;
	transition: filter var(--mnc-transition), transform var(--mnc-transition);
	white-space: nowrap;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	line-height: 1;
}

/* Big Hero CTA Buttons */
.mnc-hero-btn {
	display: inline-block;
	background: linear-gradient(135deg, var(--mnc-orange-light), var(--mnc-orange));
	color: #111111 !important;
	font-weight: 800;
	font-size: 1.1rem;
	padding: 1rem 2rem;
	border: none;
	border-radius: 0.75rem;
	cursor: pointer;
	transition: filter var(--mnc-transition), transform var(--mnc-transition), box-shadow var(--mnc-transition);
	white-space: nowrap;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	line-height: 1;
	text-decoration: none !important;
	margin-top: 1.5rem;
	box-shadow: 0 4px 15px rgba(230, 120, 55, 0.2);
}

.mnc-hero-btn:hover {
	filter: brightness(1.1);
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(230, 120, 55, 0.3);
}


.mnc-search-btn:hover:not(:disabled) {
	filter: brightness(1.08);
	transform: translateY(-1px);
}

.mnc-search-btn:active:not(:disabled) {
	transform: translateY(0);
}

.mnc-search-btn:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

/* Clear / secondary button */
.mnc-clear-btn {
	background: transparent;
	color: var(--mnc-text-white-soft);
	border: 1px solid rgba(255, 255, 255, 0.30);
	border-radius: var(--mnc-border-radius);
	padding: 0.65rem 1.1rem;
	font-size: 0.85rem;
	cursor: pointer;
	transition: color var(--mnc-transition), border-color var(--mnc-transition);
}

.mnc-clear-btn:hover {
	color: var(--mnc-orange);
	border-color: var(--mnc-orange);
}

/* Responsive — stack filter fields on mobile */
@media (max-width: 767px) {
	.mnc-search-inner {
		flex-direction: column;
		align-items: stretch;
	}

	.mnc-search-fields {
		flex-direction: column;
	}

	.mnc-search-field {
		min-width: 100%;
	}

	.mnc-search-action {
		width: 100%;
	}

	.mnc-search-btn {
		width: 100%;
		padding-top: 0.85rem;
		padding-bottom: 0.85rem;
	}
}

@media (max-width: 480px) {
	.mnc-price-inputs {
		flex-direction: column;
		gap: 0.5rem;
	}

	.mnc-price-separator {
		display: none;
	}

	.mnc-price-input-wrap {
		width: 100%;
	}
}


/* ============================================================
   SECTION 3 — SHARED LOGO STYLES
   Applies to all three logo layout options.
   ============================================================ */

/* Section wrapper: edge-to-edge dark band */
.mnc-logos-section {
	background-color: var(--mnc-dark);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--mnc-border-radius);
	padding: 1.5rem 0;
	width: 100%;
	margin-bottom: 0.25rem;
}

/* Individual logo anchor */
.mnc-logo-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	text-decoration: none;
	transition: transform var(--mnc-transition);
}

.mnc-logo-item:hover,
.mnc-logo-item:focus-visible {
	transform: translateY(-3px);
}

/* Logo image container (white pill) */
.mnc-logo-img-wrap {
	width: 5rem;
	height: 3.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgba(255, 255, 255, 0.92);
	border-radius: var(--mnc-border-radius);
	padding: 0.45rem;
	transition: background-color var(--mnc-transition),
		box-shadow var(--mnc-transition);
}

.mnc-logo-item:hover .mnc-logo-img-wrap,
.mnc-logo-item:focus-visible .mnc-logo-img-wrap {
	background-color: #ffffff;
	box-shadow: 0 0 0 2px var(--mnc-orange),
		0 4px 12px rgba(247, 148, 29, 0.25);
}

.mnc-logo-img-wrap img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	display: block;
}

/* Brand label beneath logo */
.mnc-logo-name {
	color: var(--mnc-text-white-soft);
	font-size: 0.68rem;
	text-align: center;
	font-weight: 500;
	letter-spacing: 0.03em;
	line-height: 1.2;
	transition: color var(--mnc-transition);
}

.mnc-logo-item:hover .mnc-logo-name {
	color: var(--mnc-orange);
}


/* ============================================================
   SECTION 3.1 — LOGO GRID (Option 1)
   Boxed grid, ~12 per row desktop / 3 mobile.
   ============================================================ */
.mnc-logos-grid-inner {
	max-width: var(--mnc-max-width);
	margin: 0 auto;
	padding-left: var(--mnc-gutter);
	padding-right: var(--mnc-gutter);
}

.mnc-logos-grid {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 1rem 0.15rem;
	justify-items: center;
}

/* Tablet */
@media (max-width: 1199px) {
	.mnc-logos-grid {
		grid-template-columns: repeat(9, 1fr);
	}
}

/* Large mobile / small tablet */
@media (max-width: 899px) {
	.mnc-logos-grid {
		grid-template-columns: repeat(6, 1fr);
	}
}

/* Mobile */
@media (max-width: 599px) {
	.mnc-logos-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 1rem 0.25rem;
	}
}

/* --- Native Gutenberg Logo Grid (Round 3) --- */
.mnc-native-logo-grid {
	background-color: var(--mnc-dark);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	padding: 2.25rem var(--mnc-gutter);
	gap: 0.5rem;
	width: 100%;
}

.mnc-native-logo-grid .wp-block-group {
	background-color: rgba(255, 255, 255, 0.92);
	border-radius: var(--mnc-border-radius);
	padding: 0.45rem;
	transition: background-color var(--mnc-transition), box-shadow var(--mnc-transition), transform var(--mnc-transition);
}

.mnc-native-logo-grid .wp-block-group:hover {
	background-color: #ffffff;
	box-shadow: 0 0 0 2px var(--mnc-orange), 0 4px 12px rgba(247, 148, 29, 0.25);
	transform: translateY(-3px);
}

.mnc-native-logo-grid img {
	max-height: 48px;
	width: auto;
	object-fit: contain;
}

.mnc-native-logo-grid p {
	color: #333 !important;
	margin-top: 0.25rem;
	font-weight: 600;
	letter-spacing: 0.03em;
}


/* ============================================================
   SECTION 3.2 — LOGO CAROUSEL (CSS ONLY - NO JS)
   ============================================================ */
.mnc-logos-carousel-section {
	width: 100%;
	background-color: var(--mnc-dark-alt);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	padding: 1rem 0;
}

.mnc-logos-scroll-wrap {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-ms-overflow-style: none;
	/* IE and Edge */
	scrollbar-width: none;
	/* Firefox */
	-webkit-overflow-scrolling: touch;
	padding: 0 var(--mnc-gutter);
	gap: 1.5rem;
}

.mnc-logos-scroll-wrap::-webkit-scrollbar {
	display: none;
}

.mnc-logos-scroll-wrap .mnc-logo-slide {
	scroll-snap-align: start;
	flex: 0 0 calc(100% / 11);
	/* Desktop default: ~11 visible */
	min-width: 90px;
}

@media (max-width: 1024px) {
	.mnc-logos-scroll-wrap .mnc-logo-slide {
		flex: 0 0 calc(100% / 7);
	}
}

@media (max-width: 768px) {
	.mnc-logos-scroll-wrap .mnc-logo-slide {
		flex: 0 0 calc(100% / 5);
	}
}

@media (max-width: 480px) {
	.mnc-logos-scroll-wrap .mnc-logo-slide {
		flex: 0 0 calc(100% / 3.5);
	}
}

/* ============================================================
   SECTION 3.3 — LOGO MULTI-SELECTOR (Option 3)
   Boxed selector grid with toggle / checkmark behaviour.
   ============================================================ */
.mnc-logos-selector-inner {
	max-width: var(--mnc-max-width);
	margin: 0 auto;
	padding-left: var(--mnc-gutter);
	padding-right: var(--mnc-gutter);
}

.mnc-selector-hint {
	color: var(--mnc-text-white-soft);
	font-size: 0.875rem;
	text-align: center;
	margin-bottom: 1.5rem;
}

.mnc-logos-selector-grid {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 1rem 0.15rem;
	justify-items: center;
	margin-bottom: 1.5rem;
}

@media (max-width: 1199px) {
	.mnc-logos-selector-grid {
		grid-template-columns: repeat(9, 1fr);
	}
}

@media (max-width: 899px) {
	.mnc-logos-selector-grid {
		grid-template-columns: repeat(6, 1fr);
	}
}

@media (max-width: 599px) {
	.mnc-logos-selector-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 1rem 0.25rem;
	}
}

/* Selector item (acts as a checkbox tile) */
.mnc-logo-selector-item {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	cursor: pointer;
	padding: 0.25rem;
	border-radius: var(--mnc-border-radius);
	border: 2px solid transparent;
	outline: none;
	transition: border-color var(--mnc-transition),
		transform var(--mnc-transition);
}

.mnc-logo-selector-item:hover {
	transform: translateY(-2px);
}

.mnc-logo-selector-item:focus-visible {
	border-color: rgba(247, 148, 29, 0.6);
}

.mnc-logo-selector-item.selected {
	border-color: var(--mnc-orange);
}

.mnc-logo-selector-item.selected .mnc-logo-img-wrap {
	background-color: #ffffff;
	box-shadow: 0 0 0 2px var(--mnc-orange);
}

/* Checkmark badge (top-right, appears on selection) */
.mnc-check-badge {
	position: absolute;
	top: 0.2rem;
	right: 0.2rem;
	width: 1.2rem;
	height: 1.2rem;
	background: var(--mnc-orange);
	border-radius: 50%;
	color: #111111;
	font-size: 0.65rem;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transform: scale(0);
	transition: opacity 0.18s ease, transform 0.18s ease;
}

.mnc-logo-selector-item.selected .mnc-check-badge {
	opacity: 1;
	transform: scale(1);
}

/* Action buttons row */
.mnc-selector-actions {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
	padding-top: 0.5rem;
}


/* ============================================================
   SECTION 4 — FEATURED/POPULAR VEHICLE CAROUSEL
   Edge-to-edge Swiper carousel with vehicle cards.
   ============================================================ */
.mnc-vehicle-carousel-section {
	background-color: var(--mnc-dark-alt);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	padding: 2.5rem 0 3rem;
	width: 100%;
}

.mnc-carousel-title {
	color: var(--mnc-text-white);
	font-size: 1.5rem;
	font-weight: 700;
	text-align: center;
	margin: 0 auto 1.75rem;
	padding-left: var(--mnc-gutter);
	padding-right: var(--mnc-gutter);
}

/* Swiper wrapper: full viewport width, overflow hidden */
.mnc-vehicle-swiper {
	width: 100%;
	overflow: hidden;
}

.mnc-vehicle-swiper .swiper-wrapper {
	align-items: stretch;
}

.mnc-vehicle-swiper .swiper-slide {
	height: auto;
}

/* ---- Vehicle Card ---- */
.mnc-vehicle-card {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	background-color: var(--mnc-card-bg);
	border-right: 1px solid var(--mnc-card-border);
	height: 100%;
	transition: box-shadow var(--mnc-transition);
}

.mnc-vehicle-card:hover {
	box-shadow: var(--mnc-card-shadow-hover);
	z-index: 1;
}

.mnc-vehicle-card-img {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: #f3f4f6;
}

.mnc-vehicle-card-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.35s ease;
}

.mnc-vehicle-card:hover .mnc-vehicle-card-img img {
	transform: scale(1.04);
}

.mnc-vehicle-card-no-img {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--mnc-text-muted);
	font-size: 0.8rem;
}

/* Make badge on image */
.mnc-vehicle-card-make {
	position: absolute;
	bottom: 0.5rem;
	left: 0.5rem;
	background: rgba(0, 0, 0, 0.65);
	color: #ffffff;
	font-size: 0.65rem;
	font-weight: 600;
	padding: 0.2rem 0.5rem;
	border-radius: 0.25rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.mnc-vehicle-card-body {
	padding: 0.875rem 1rem;
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

.mnc-vehicle-card-title {
	font-size: 0.92rem;
	font-weight: 600;
	color: var(--mnc-text-dark);
	margin: 0;
	line-height: 1.3;

	/* Clamp to 2 lines */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	line-clamp: 2;
	overflow: hidden;
}

.mnc-vehicle-card-meta {
	font-size: 0.75rem;
	color: var(--mnc-text-muted);
	margin: 0;
	line-height: 1.4;
}

.mnc-vehicle-card-price {
	font-size: 1rem;
	font-weight: 700;
	color: var(--mnc-orange);
	margin: 0.2rem 0 0;
}

/* Swiper navigation arrows for vehicle carousel */
.mnc-vehicle-carousel-section .swiper-button-prev,
.mnc-vehicle-carousel-section .swiper-button-next {
	color: var(--mnc-orange);
	background: rgba(0, 0, 0, 0.5);
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	top: 35%;
}

.mnc-vehicle-carousel-section .swiper-button-prev::after,
.mnc-vehicle-carousel-section .swiper-button-next::after {
	font-size: 1rem;
}

/* Swiper dot pagination */
.mnc-vehicle-carousel-section .swiper-pagination {
	margin-top: 1.25rem;
	position: relative;
	bottom: auto;
}

.mnc-vehicle-carousel-section .swiper-pagination-bullet {
	background: rgba(255, 255, 255, 0.4);
	opacity: 1;
}

.mnc-vehicle-carousel-section .swiper-pagination-bullet-active {
	background: var(--mnc-orange);
}


/* ============================================================
   SECTION 4 — MOTORS NATIVE TABS WRAPPER (Option A)
   Wrapper overrides for [motors_listings_tabs] shortcode
   output so it sits within the dark edge-to-edge band.
   ============================================================ */
.mnc-motors-tabs-section {
	background-color: transparent !important;
	border: 1.5px solid var(--mnc-orange) !important;
	border-radius: var(--mnc-border-radius);
	padding: 2.5rem 1.5rem 3rem;
	width: calc(100% - 3rem);
	margin: 0 auto;
}

.mnc-motors-tabs-section .mnc-section-title {
	color: var(--mnc-text-white);
	font-size: 1.5rem;
	font-weight: 700;
	text-align: center;
	margin: 0 auto 1.75rem;
	padding-left: var(--mnc-gutter);
	padding-right: var(--mnc-gutter);
}

/* Ensure listings grid is full width inside the band */
.mnc-motors-tabs-section .stm-listing-directory-list-wrap,
.mnc-motors-tabs-section .stm_listing_tabs_widget {
	max-width: none;
	padding: 0 var(--mnc-gutter);
}


/* ============================================================
   OPTION LABEL BADGES
   Visible on-page labels for the three logo layout options
   so you can compare them. DELETE with the option you don't want.
   ============================================================ */
.mnc-option-label {
	display: inline-flex;
	align-items: center;
	background: var(--mnc-orange);
	color: #111111;
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	padding: 0.3rem 0.75rem;
	border-radius: 0 0 0.5rem 0.5rem;
	margin-bottom: 0;
	margin-left: var(--mnc-gutter);
}

.mnc-option-label-wrap {
	background-color: var(--mnc-dark);
	padding-top: 0.5rem;
}


/* ============================================================
   UTILITY: Full-width block alignment helper
   Ensures alignfull group blocks break out of content width
   when the Motors Starter theme constrains content.
   ============================================================ */
.wp-block-group.alignfull.mnc-full-band {
	margin-left: calc(-50vw + 50%) !important;
	margin-right: calc(-50vw + 50%) !important;
	max-width: 100vw !important;
	width: 100vw !important;
}


/* ============================================================
   FIX: FORCED VISIBILITY FOR DISCOUNTED PRICES
   Ensures both Regular and Sale prices show on Homepage
   ============================================================ */
.price.discounted-price {
	display: flex !important;
	flex-direction: column !important;
	justify-content: center !important;
	height: auto !important;
	min-height: 44px !important;
	padding: 4px 10px !important;
	background-color: #e67837 !important;
	border-radius: 4px !important;
	line-height: 1.2 !important;
}

.price.discounted-price .regular-price {
	display: block !important;
	text-decoration: line-through !important;
	font-size: 11px !important;
	color: rgba(255, 255, 255, 0.85) !important;
	margin-bottom: 2px !important;
}

.price.discounted-price .sale-price {
	display: block !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	color: #ffffff !important;
}

/* ============================================================
   END OF HOMEPAGE CUSTOM STYLES
   ============================================================ */