/*
Theme Name: Stok&Parts Child
Description: Tema filho do Hello Elementor com componentes e regras do site Stok&Parts.
Author: Stok&Parts
Template: hello-elementor
Version: 1.0.2
Text Domain: stok-parts-child
Requires at least: 6.7
Requires PHP: 8.1
*/

/*
 * O Kit e os controles dos widgets são a fonte principal de cores, tipografia
 * e geometria. Este arquivo mantém apenas apresentação compartilhada e
 * exceções de integração documentadas.
 */

:root {
	--sp-ink: var(--e-global-color-071a2b1, #071a2b);
	--sp-navy: var(--e-global-color-primary, #0b2d4f);
	--sp-blue: var(--e-global-color-0e65a81, #0e65a8);
	--sp-cyan: var(--e-global-color-secondary, #22b8c7);
	--sp-cyan-soft: var(--e-global-color-ddf7f81, #ddf7f8);
	--sp-canvas: var(--e-global-color-f4f7f91, #f4f7f9);
	--sp-surface: var(--e-global-color-ffffff1, #fff);
	--sp-text: var(--e-global-color-text, #13202b);
	--sp-muted: var(--e-global-color-5f6b761, #5f6b76);
	--sp-border: var(--e-global-color-d9e3e81, #d9e3e8);
	--sp-display: "Arial Narrow", "Roboto Condensed", Arial, sans-serif;
	--sp-body: "Roboto", Arial, sans-serif;
}

.sp-header-nav a,
.sp-header-account a,
.sp-footer-account a {
	text-decoration: none !important;
	text-decoration-line: none !important;
}

.elementor-button:focus-visible {
	outline: 3px solid var(--sp-cyan);
	outline-offset: 3px;
}

/* O widget controla as cores; o tema fornece apenas o movimento compartilhado. */
.elementor-button {
	transition:
		transform 0.2s ease,
		background-color 0.2s ease,
		border-color 0.2s ease,
		color 0.2s ease;
}

.elementor-button:hover {
	transform: translateY(-2px);
}

.elementor-button:active {
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.elementor-button {
		transition: none;
	}

	.elementor-button:hover,
	.elementor-button:active {
		transform: none;
	}
}

/*
 * Shell global. Textos, links, logo e menu continuam editáveis no Elementor;
 * as classes abaixo preservam somente o layout aprovado.
 */

.sp-header-logo {
	overflow: visible !important;
}

.sp-header-logo a {
	display: block;
	line-height: 0;
	overflow: visible;
}

.sp-header-logo img {
	display: block;
	overflow: visible;
}

.sp-site-footer {
	color: #c8d6e0;
	font-family: var(--sp-body);
}

/* Native icon-box controls were trialled for this group. Elementor 4.2 changes
 * its text wrapping at the project breakpoints despite equivalent settings.
 * Keep this narrow layout owner until the render difference is resolved. */
.sp-trust-card .elementor-icon-box-wrapper {
	display: grid;
	grid-template-columns: 58px minmax(0, 1fr);
	gap: 20px;
	align-items: start;
	text-align: left;
}

.sp-trust-card .elementor-icon-box-icon {
	width: 58px;
	height: 58px;
	display: grid;
	place-items: center;
	margin: 0 !important;
	background: var(--sp-cyan-soft);
	border-radius: 16px;
}

.sp-trust-card .elementor-icon {
	display: grid;
	place-items: center;
}

.sp-trust-card .elementor-icon-box-title {
	margin: 3px 0 10px !important;
	font-family: var(--sp-body) !important;
	font-size: 19px !important;
	font-weight: 700 !important;
	line-height: 1.15 !important;
}

.sp-trust-card .elementor-icon-box-description {
	margin: 0;
	font-size: 16px !important;
}

.sp-footer-logo img {
	display: block;
}

/* Exceção: a largura final do grupo de CTAs depende do container interno. */

.home .sp-final-cta > .e-con-inner > .e-con:last-child,
.page-id-49 .sp-final-cta > .e-con-inner > .e-con:last-child {
	width: 238.5px !important;
	flex: 0 0 238.5px !important;
}

/* Sistema compartilhado das páginas internas. */
.sp-page-hero {
	position: relative;
	color: var(--sp-surface);
}

.sp-page-hero::after {
	content: "";
	position: absolute;
	top: -240px;
	right: -80px;
	width: 420px;
	height: 420px;
	pointer-events: none;
	border: 76px solid rgba(34, 184, 199, .1);
	border-radius: 50%;
}

.sp-page-hero > .e-con-inner {
	position: relative;
	z-index: 1;
}

/* Elementor 4 grid containers default to align-content:start. Internal heroes
 * need their complete title block centered inside the fixed navy surface. */
.sp-page-hero > .e-con-inner {
	align-content: normal !important;
}

.sp-page-hero__badge {
	height: 160px !important;
	display: grid;
	place-items: center;
	font-family: var(--sp-display);
	font-size: clamp(24px, 2.2vw, 32px);
	font-weight: 900;
	line-height: 1;
	text-align: center;
	text-transform: uppercase;
	transform: rotate(2deg);
}

.sp-page-hero__badge > .e-con-inner {
	width: 100%;
	height: 100%;
	display: grid !important;
	place-items: center;
	align-content: center;
}

.sp-page-hero__badge .elementor-widget,
.sp-page-hero__badge strong {
	width: 100%;
	margin: 0;
	line-height: 1;
	text-align: center;
}

.sp-page-hero__badge strong {
	display: block;
	font-size: inherit;
}

.sp-eyebrow {
	margin: 0 0 18px !important;
	color: var(--sp-blue);
	font-size: 12px;
	font-weight: 900;
	letter-spacing: .16em;
	line-height: 1.55;
	text-transform: uppercase;
}

.sp-page-hero .sp-eyebrow {
	color: var(--sp-cyan);
}

.sp-eyebrow span::before {
	content: "";
	display: inline-block;
	width: 28px;
	height: 3px;
	margin: 0 10px 3px 0;
	background: currentColor;
}

.sp-section-heading {
	max-width: 760px;
	margin-bottom: 36px;
}

.sp-catalog-intro h2 {
	max-width: 620px;
	margin: 0;
	font-size: clamp(24px, 2.2vw, 32px);
	letter-spacing: -.03em;
	line-height: 1.08;
}

.sp-category-heading > .e-con-inner {
	margin-bottom: 44px;
}

.sp-category-heading h2 {
	text-wrap: balance;
}

.sp-unit-card__content .elementor-widget-text-editor p:first-child {
	margin-top: 0 !important;
}

.sp-unit-card__content .elementor-widget-text-editor p:last-child {
	margin-bottom: 0 !important;
}

.sp-category-card {
	transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.sp-category-card:hover {
	transform: translateY(-4px);
	border-color: var(--sp-cyan);
	box-shadow: 0 18px 40px rgba(7, 26, 43, .08);
}

.sp-category-photo {
	width: 100% !important;
	margin-bottom: 20px !important;
}

.sp-category-photo img {
	box-sizing: border-box !important;
	display: block !important;
}

.sp-unit-number {
	width: 52px !important;
	height: 52px;
	display: grid;
	flex: 0 0 52px;
	place-items: center;
	color: var(--sp-ink);
	background: var(--sp-cyan);
	border-radius: 50%;
	font-weight: 900;
}

.sp-unit-actions > .e-con-inner {
	display: flex !important;
}

.sp-state-actions > .e-con-inner {
	display: flex !important;
}

.sp-unit-actions {
	margin-top: 16px;
}

.sp-unit-actions .elementor-widget-button {
	font-size: 0;
	line-height: 0;
}

.sp-contact-section .sp-contact-intro {
	position: static !important;
	height: auto !important;
	align-self: start !important;
}

.sp-legal-summary {
	position: sticky;
	top: 24px;
	height: auto !important;
	align-self: start !important;
}

.sp-legal-summary > .e-con-inner {
	height: auto !important;
}

.sp-state-section > .e-con-inner {
	display: grid;
	place-items: center;
}

.sp-state-card {
	width: min(820px, 100%);
	text-align: center;
}

.sp-state-actions {
	margin-top: 30px;
}

/* Fechamento amarelo da Home, alinhado ao componente global das internas. */
.sp-final-cta > .e-con-inner > .e-con:last-child {
	width: max-content !important;
	max-width: 100%;
	display: grid !important;
	grid-template-columns: minmax(0, 1fr);
}

.stok-parts-catalog-mode.woocommerce .site-main,
.stok-parts-catalog-mode.woocommerce-page .site-main {
	width: calc(100% - 48px);
	max-width: 1240px;
	margin: 0 auto;
	padding: 40px 0 88px;
}

.stok-parts-catalog-mode {
	font-family: var(--sp-body);
}

.stok-parts-catalog-mode .woocommerce-products-header {
	color: var(--sp-text);
}

.stok-parts-catalog-mode .woocommerce-products-header__title {
	margin: 0 0 14px;
	color: var(--sp-ink);
	font-family: var(--sp-display);
	font-size: clamp(36px, 4vw, 44px);
	font-weight: 900;
	letter-spacing: -.04em;
	line-height: 1;
	text-transform: uppercase;
}

.stok-parts-catalog-mode .term-description {
	max-width: 720px;
	margin-bottom: 36px;
	color: var(--sp-muted);
}

.stok-parts-catalog-mode.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
	margin: 38px 0 0;
}

.stok-parts-catalog-mode.woocommerce ul.products::before,
.stok-parts-catalog-mode.woocommerce ul.products::after {
	display: none;
}

.stok-parts-catalog-mode.woocommerce ul.products li.product {
	display: flex;
	flex-direction: column;
	float: none;
	width: auto;
	margin: 0;
	padding: 20px;
	background: var(--sp-surface);
	border: 1px solid var(--sp-border);
	border-radius: 18px;
	box-shadow: none;
}

.stok-parts-catalog-mode.woocommerce ul.products li.product a {
	text-decoration: none;
}

.stok-parts-catalog-mode.woocommerce ul.products li.product img {
	aspect-ratio: 4 / 3;
	margin: 0 0 20px;
	object-fit: contain;
	background: transparent;
	border-radius: 0;
}

.stok-parts-catalog-mode.woocommerce ul.products li.product .woocommerce-loop-product__title {
	min-height: 0;
	margin-bottom: 10px;
	padding: 0;
	color: var(--sp-ink);
	font-family: var(--sp-body);
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.4;
}

.stok-parts-catalog-mode .sp-product-excerpt {
	margin: 0;
	color: var(--sp-muted);
	font-family: var(--sp-body);
	font-size: .875rem;
	line-height: 1.65;
}

.sp-catalog-actions {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 8px;
	margin-top: auto;
	padding-top: 18px;
}

.sp-catalog-button {
	display: inline-flex;
	flex: 1 1 0;
	min-width: 0;
	min-height: 44px;
	align-items: center;
	justify-content: center;
	gap: 5px;
	padding: 10px 8px;
	border: 1px solid var(--sp-navy);
	border-radius: 10px;
	font-family: var(--sp-body);
	font-size: .6875rem;
	font-weight: 800;
	line-height: 1.2;
	text-align: center;
	text-decoration: none !important;
	text-transform: uppercase;
	white-space: nowrap;
}

.sp-catalog-button--contact svg {
	width: 14px;
	height: 14px;
	fill: currentColor;
	flex: none;
}

.sp-catalog-button--quote {
	flex-grow: 1.2;
	color: #fff !important;
	background: var(--sp-navy);
	border-color: var(--sp-navy);
}

.sp-catalog-button:hover {
	filter: none;
	transform: translateY(-2px);
}

.sp-catalog-button--quote:hover {
	color: #fff !important;
	background: var(--sp-ink);
	border-color: var(--sp-navy);
}

.sp-catalog-button:focus-visible {
	filter: none;
}

.sp-product-preview {
	display: block;
	color: inherit;
	cursor: default;
}

@media (max-width: 1024px) {
	.stok-parts-catalog-mode.woocommerce ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

}

@media (max-width: 820px) {

	.sp-category-heading > .e-con-inner {
		margin-bottom: 36px;
	}

	.sp-legal-summary {
		position: static;
	}

	.sp-final-cta > .e-con-inner > .e-con:last-child {
		width: 100% !important;
		max-width: 580px;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.home .sp-final-cta > .e-con-inner > .e-con:last-child {
		width: 100% !important;
		flex: 0 0 auto !important;
	}

	.sp-page-hero__badge {
		height: 130px !important;
	}

}

@media (max-width: 520px) {

	.sp-page-hero__badge {
		display: none !important;
	}

	.sp-final-cta > .e-con-inner > .e-con:last-child {
		max-width: none;
		grid-template-columns: minmax(0, 1fr);
	}

	.sp-unit-actions > .e-con-inner,
	.sp-state-actions > .e-con-inner {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr);
	}

	.sp-unit-actions .elementor-button,
	.sp-state-actions .elementor-button {
		width: 100%;
	}

	.stok-parts-catalog-mode.woocommerce .site-main,
	.stok-parts-catalog-mode.woocommerce-page .site-main {
		width: calc(100% - 28px);
		padding: 48px 0 64px;
	}

	.stok-parts-catalog-mode.woocommerce ul.products {
		grid-template-columns: minmax(0, 1fr);
	}
}


/* Mantém o menu em uma linha imediatamente antes do breakpoint. */
@media (min-width: 1010px) and (max-width: 1180px) {

	.sp-header-nav {
		position: static !important;
		flex: 1 1 auto;
	}

	.sp-header-nav .current-menu-item > a {
		padding-inline: 1px !important;
		white-space: nowrap;
	}
}

.sp-footer-account .elementor-button {
	white-space: nowrap;
}

.sp-unit-card {
	font-size: 1rem;
	line-height: 1.6;
}

.sp-content-photo img {
	display: block;
}

.sp-photo-section .elementor-widget-image {
	width: 100%;
	max-width: 100%;
}

img[alt="Logo MOLAS TIGRE"] {
	filter: drop-shadow(0 0 .7px #071a2b);
}

.sp-contact-intro .sp-content-photo {
	margin-top: 26px;
}

.sp-state-card h2 {
	font-family: var(--sp-display);
	font-size: clamp(30px, 2.8vw, 40px);
	font-weight: 900;
	letter-spacing: -.035em;
	line-height: 1;
	text-transform: uppercase;
}

.sp-state-card p {
	color: var(--sp-muted);
}

@media (min-width: 1025px) and (max-width: 1100px) {
	.stok-parts-catalog-mode.woocommerce ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.stok-parts-catalog-mode.woocommerce .site-main {
		width: calc(100% - 32px);
		padding-top: 28px;
	}

	.stok-parts-catalog-mode.woocommerce ul.products {
		gap: 16px;
	}

	.stok-parts-catalog-mode.woocommerce ul.products li.product {
		padding: 16px;
	}

	.sp-home-supplier-grid:not(.sp-home-supplier-carousel) > .e-con-inner > .sp-home-supplier-card:last-child {
		grid-column: 1 / -1 !important;
		width: calc((100% - 16px) / 2) !important;
		max-width: none !important;
		justify-self: center !important;
	}
}

/* Home suppliers retain their Elementor card styles while the container provides carousel behavior. */
.sp-home-supplier-carousel {
	position: relative;
}

.sp-home-supplier-carousel > .e-con-inner {
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: 20px !important;
	overflow-x: auto;
	overscroll-behavior-inline: contain;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.sp-home-supplier-carousel > .e-con-inner::-webkit-scrollbar {
	display: none;
}

.sp-home-supplier-carousel > .e-con-inner > .sp-home-supplier-card {
	flex: 0 0 calc((100% - 80px) / 5) !important;
	width: calc((100% - 80px) / 5) !important;
	scroll-snap-align: start;
}

.sp-supplier-carousel-controls {
	display: flex;
	position: absolute;
	inset: auto 8px;
	top: 50%;
	align-items: center;
	justify-content: space-between;
	height: 48px;
	margin: 0;
	transform: translateY(-50%);
	pointer-events: none;
	z-index: 2;
}

button.sp-supplier-carousel-button {
	display: inline-grid;
	width: 36px !important;
	height: 48px !important;
	padding: 0 !important;
	place-items: center;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	color: var(--sp-navy) !important;
	font-size: 32px !important;
	line-height: 1;
	cursor: pointer;
	pointer-events: auto;
}

button.sp-supplier-carousel-button:hover,
button.sp-supplier-carousel-button:focus-visible {
	background: transparent !important;
	color: var(--sp-cyan) !important;
}

@media (max-width: 1024px) {
	.sp-home-supplier-carousel > .e-con-inner > .sp-home-supplier-card {
		flex-basis: calc((100% - 40px) / 3) !important;
		width: calc((100% - 40px) / 3) !important;
	}
}

@media (max-width: 767px) {
	.sp-home-supplier-carousel > .e-con-inner {
		gap: 16px !important;
	}

	.sp-home-supplier-carousel > .e-con-inner > .sp-home-supplier-card {
		flex-basis: calc((100% - 16px) / 2) !important;
		width: calc((100% - 16px) / 2) !important;
	}

	.sp-supplier-carousel-controls {
		inset-inline: 0;
	}

	button.sp-supplier-carousel-button {
		width: 30px !important;
		font-size: 28px !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sp-home-supplier-carousel > .e-con-inner {
		scroll-behavior: auto;
	}
}

/* Elementor Form has no native controls for this exact shared field geometry. */
:is(.elementor-52, .elementor-320, .elementor-322, .elementor-324, .elementor-326) .elementor-widget-form :is(#form-fale-conosco, #form-quero-ser-cliente, #form-seja-representante, #form-trabalhe-conosco, #form-orcamento) .elementor-field-textual:not(textarea) {
	min-height: 50px;
}

:is(.elementor-52, .elementor-322, .elementor-324, .elementor-326) .elementor-widget-form :is(#form-fale-conosco, #form-seja-representante, #form-trabalhe-conosco, #form-orcamento) textarea.elementor-field-textual {
	height: 130px;
}

.elementor-320 .elementor-widget-form #form-quero-ser-cliente textarea.elementor-field-textual {
	height: 104px;
}

:is(.elementor-52, .elementor-320, .elementor-322, .elementor-324, .elementor-326) .elementor-widget-form :is(#form-fale-conosco, #form-quero-ser-cliente, #form-seja-representante, #form-trabalhe-conosco, #form-orcamento) .elementor-field-textual {
	padding: 11px 13px;
}

:is(.elementor-52, .elementor-320, .elementor-322, .elementor-324, .elementor-326) .elementor-widget-form :is(#form-fale-conosco, #form-quero-ser-cliente, #form-seja-representante, #form-trabalhe-conosco, #form-orcamento) .elementor-field-type-acceptance label {
	font-size: 16px;
	line-height: 23.2px;
}

:is(.elementor-52, .elementor-320, .elementor-322, .elementor-324, .elementor-326) .elementor-widget-form :is(#form-fale-conosco, #form-quero-ser-cliente, #form-seja-representante, #form-trabalhe-conosco, #form-orcamento) .elementor-field-group.elementor-field-type-acceptance {
	margin-bottom: 21px;
}

:is(.elementor-52, .elementor-320, .elementor-322, .elementor-324, .elementor-326) .elementor-widget-form :is(#form-fale-conosco, #form-quero-ser-cliente, #form-seja-representante, #form-trabalhe-conosco, #form-orcamento) .elementor-field-type-acceptance .elementor-field-option,
#elementor-popup-modal-479 .elementor-widget-form #form-orcamento .elementor-field-type-acceptance .elementor-field-option {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

:is(.elementor-52, .elementor-320, .elementor-322, .elementor-324, .elementor-326) .elementor-widget-form :is(#form-fale-conosco, #form-quero-ser-cliente, #form-seja-representante, #form-trabalhe-conosco, #form-orcamento) .elementor-field-type-acceptance .elementor-field-option label,
#elementor-popup-modal-479 .elementor-widget-form #form-orcamento .elementor-field-type-acceptance .elementor-field-option label {
	margin: 0;
}

:is(.elementor-52, .elementor-320, .elementor-322, .elementor-324, .elementor-326) .elementor-widget-form :is(#form-fale-conosco, #form-quero-ser-cliente, #form-seja-representante, #form-trabalhe-conosco, #form-orcamento) .elementor-acceptance-field,
#elementor-popup-modal-479 .elementor-widget-form #form-orcamento .elementor-acceptance-field {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	margin: 0;
}

:is(.elementor-52, .elementor-320, .elementor-322, .elementor-324, .elementor-326) .elementor-widget-form :is(#form-fale-conosco, #form-quero-ser-cliente, #form-seja-representante, #form-trabalhe-conosco, #form-orcamento) .elementor-field-type-acceptance label a {
	text-decoration: underline;
}

#elementor-popup-modal-479 .elementor-widget-form #form-orcamento .elementor-field-textual:not(textarea) {
	min-height: 42px;
}

#elementor-popup-modal-479 .elementor-widget-form #form-orcamento textarea.elementor-field-textual {
	height: 130px;
}

#elementor-popup-modal-479 .elementor-widget-form #form-orcamento .elementor-field-textual {
	padding: 9px 15px;
}

#elementor-popup-modal-479 .elementor-widget-form #form-orcamento .elementor-field-type-acceptance label {
	font-size: 16px;
}

.elementor-field-option.elementor-error {
  flex-wrap: wrap;
}

.elementor-field-option.elementor-error > .elementor-message {
  display: block;
  flex-basis: 100%;
  width: 100%;
  margin-top: 5px;
}