/* ==========================================================================
   MARUTI — Product details (Elementor "Maruti product" widgets)
   Base look from the Product Details design. Every value here can be
   overridden per widget in Elementor → Style, which writes more specific CSS.
   Selectors start with .elementor so they win over Elementor's own resets.
   ========================================================================== */

.maruti-product-page { --pd-ink: #111111; --pd-body: #6b6e7c; --pd-line: #e4e5ec; --pd-chip: #f2f3f6; }

/* Sections that have no content for this product disappear with their heading. */
body:not(.maruti-has-features) .maruti-if-features,
body:not(.maruti-has-specs) .maruti-if-specs,
body:not(.maruti-has-applications) .maruti-if-applications,
body:not(.maruti-has-variants) .maruti-if-variants,
body:not(.maruti-has-related) .maruti-if-related { display: none !important; }
.elementor-editor-active .maruti-if-features,
.elementor-editor-active .maruti-if-specs,
.elementor-editor-active .maruti-if-applications,
.elementor-editor-active .maruti-if-variants,
.elementor-editor-active .maruti-if-related { display: flex !important; }

.elementor .pd-empty {
	margin: 0;
	padding: 12px 14px;
	font-size: 13px;
	color: #6b4a00;
	background: #fff8e6;
	border: 1px dashed #c58a00;
	border-radius: 6px;
}

.elementor :is(.pd-badges, .pd-features, .pd-chips, .pd-related__track, .pd-breadcrumb ol, .pd-gallery__thumbs) {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Breadcrumb */
.elementor .pd-breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 14px; line-height: 1.4; }
.elementor .pd-breadcrumb li { display: inline-flex; align-items: center; gap: 10px; color: var(--pd-body, #6b6e7c); }
.elementor .pd-breadcrumb li + li::before { content: "›"; color: var(--pd-body, #6b6e7c); font-size: 16px; }
.elementor .pd-breadcrumb a { color: var(--pd-body, #6b6e7c); text-decoration: none; }
.elementor .pd-breadcrumb a:hover { color: var(--blue, #040186); }
.elementor .pd-breadcrumb [aria-current] { color: var(--pd-ink, #111); font-weight: 500; }

/* Gallery */
.elementor .pd-gallery__main {
	display: grid;
	place-items: center;
	aspect-ratio: 1 / 1;
	padding: 32px;
	overflow: hidden;
	background: #fff;
	border: 1px solid #e8e8ee;
	border-radius: 8px;
	box-shadow: 0 1px 2px rgba(17, 17, 17, .04), 0 8px 24px -16px rgba(4, 1, 70, .18);
}
.elementor .pd-gallery__main img { width: 100%; height: 100%; object-fit: contain; }
.elementor .pd-gallery__thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }
.elementor .pd-gallery__thumbs .product-gallery__thumb {
	display: grid;
	place-items: center;
	width: 100%;
	aspect-ratio: 1 / 1;
	padding: 10px;
	background: #fff;
	border: 1px solid #e8e8ee;
	border-radius: 6px;
	cursor: pointer;
	opacity: 1;
	transition: border-color .2s;
}
.elementor .pd-gallery__thumbs .product-gallery__thumb.is-active { border: 2px solid var(--blue, #040186); }
.elementor .pd-gallery__thumbs .product-gallery__thumb:hover { border-color: var(--lilac, #bfc1ff); }
.elementor .pd-gallery__thumbs .product-gallery__thumb.is-active:hover { border-color: var(--blue, #040186); }
.elementor .pd-gallery__thumbs img { width: 100%; height: 100%; object-fit: contain; }

/* Badges */
.elementor .pd-badges { display: flex; flex-wrap: wrap; gap: 10px; }
.elementor .pd-badge {
	padding: 5px 10px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: #1d1e26;
	background: var(--pd-chip, #f2f3f6);
	border-radius: 4px;
}

/* Key features */
.elementor .pd-features { display: grid; gap: 14px; }
.elementor .pd-features li {
	position: relative;
	padding-left: 24px;
	font-size: 15.5px;
	line-height: 1.6;
	color: #4a4d5a;
}
.elementor .pd-features li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .62em;
	width: 7px;
	height: 7px;
	background: var(--blue, #040186);
}
.elementor .pd-features small { display: block; margin-top: 2px; font-size: 14px; color: var(--pd-body, #6b6e7c); }

/* Specifications */
.elementor .pd-specs { width: 100%; border-collapse: collapse; margin: 0; font-size: 16px; line-height: 1.45; }
.elementor .pd-specs tr { border-top: 1px solid var(--pd-line, #e4e5ec); }
.elementor .pd-specs tr:last-child { border-bottom: 1px solid var(--pd-line, #e4e5ec); }
.elementor .pd-specs th,
.elementor .pd-specs td { padding: 9px 0; vertical-align: top; background: none; border: 0; }
.elementor .pd-specs th { padding-right: 24px; text-align: left; font-weight: 400; color: var(--pd-body, #6b6e7c); }
.elementor .pd-specs td { text-align: right; font-weight: 500; color: var(--pd-ink, #111); }

/* Applications */
.elementor .pd-chips { display: flex; flex-wrap: wrap; gap: 12px; }
.elementor .pd-chip {
	padding: 5px 13px;
	font-size: 13.5px;
	line-height: 1.4;
	color: #33343c;
	background: var(--pd-chip, #f2f3f6);
	border: 1px solid #e5e7eb;
	border-radius: 999px;
}

/* Variants */
.elementor .pd-variants__title {
	margin: 0 0 20px;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--pd-ink, #111);
}
.elementor .pd-variants__title:not(:first-child) { margin-top: 48px; }
.elementor .pd-variants__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.elementor .pd-variants table { width: 100%; min-width: 760px; margin: 0; border-collapse: collapse; font-size: 15px; line-height: 1.45; }
.elementor .pd-variants tr { border-bottom: 1px solid var(--pd-line, #e4e5ec); }
.elementor .pd-variants th,
.elementor .pd-variants td { padding: 18px 16px; text-align: left; vertical-align: middle; background: none; border: 0; }
.elementor .pd-variants th {
	font-size: 13.5px;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #33343c;
	white-space: nowrap;
}
.elementor .pd-variants td { color: #22232b; white-space: nowrap; }
.elementor .pd-variants td.pd-variants__name { font-weight: 600; color: var(--pd-ink, #111); }
.elementor .pd-variants tbody tr { transition: background-color .2s; }
.elementor .pd-variants tbody tr:hover { background: #f8f9fc; }

/* Related products */
.elementor .pd-related__tabs { display: flex; gap: 8px; border-bottom: 1px solid var(--pd-line, #e4e5ec); margin-bottom: 32px; overflow-x: auto; }
.elementor .pd-related__tab {
	margin: 0 0 -1px;
	padding: 12px 18px;
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--pd-body, #6b6e7c);
	background: none;
	border: 0;
	border-bottom: 3px solid transparent;
	border-radius: 0;
	cursor: pointer;
	white-space: nowrap;
}
.elementor .pd-related__tab[aria-selected="true"] { color: var(--blue, #040186); border-bottom-color: var(--blue, #040186); }
.elementor .pd-related__tab:focus-visible { outline: 2px solid var(--blue, #040186); outline-offset: 2px; }
.elementor .pd-related__track {
	display: flex;
	gap: 24px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: 12px;
	scrollbar-width: thin;
}
.elementor .pd-related__card { flex: 0 0 290px; width: 290px; scroll-snap-align: start; }
.elementor .pd-related__card a { display: block; color: inherit; text-decoration: none; }
.elementor .pd-related__media {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 1 / 1;
	padding: 24px;
	overflow: hidden;
	background: #fff;
	border: 1px solid #e8e8ee;
	transition: border-color .2s, box-shadow .2s;
}
.elementor .pd-related__card a:hover .pd-related__media { border-color: var(--lilac, #bfc1ff); box-shadow: 0 10px 30px -18px rgba(4, 1, 70, .35); }
.elementor .pd-related__media img { width: 100%; height: 100%; object-fit: contain; }
.elementor .pd-related__doc { position: absolute; right: 14px; bottom: 14px; color: #8a8ea3; }
.elementor .pd-related__code { display: block; margin-top: 16px; font-size: 15px; color: var(--pd-body, #6b6e7c); }
.elementor .pd-related__name { display: block; margin-top: 6px; font-size: 18px; font-weight: 500; line-height: 1.35; color: #22232b; transition: color .2s; }
.elementor .pd-related__card a:hover .pd-related__name { color: var(--blue, #040186); }

/* Request a Quote button: keep the design's full width + arrow on the right. */
.elementor .maruti-quote-button .elementor-button { width: 100%; }

@media (max-width: 767px) {
	.elementor .pd-gallery__main { padding: 20px; }
	.elementor .pd-gallery__thumbs { gap: 8px; margin-top: 12px; }
	.elementor .pd-features li,
	.elementor .pd-specs { font-size: 15.5px; }
	.elementor .pd-specs td { text-align: left; }
	.elementor .pd-specs th,
	.elementor .pd-specs td { display: block; padding: 8px 0 0; }
	.elementor .pd-specs td { padding: 0 0 8px; }
	.elementor .pd-related__card { flex-basis: 70%; width: 70%; }
	.elementor .pd-related__name { font-size: 17px; }
}