/* ==========================================================================
   01 · BASE — MotoPartes Chile
   Variables (colores, fuentes, medidas) + elementos compartidos por todas las
   secciones: tipografía, botones, formularios, avisos, chips, insignias.
   Cambia un color aquí y cambia en toda la tienda.
   ========================================================================== */

html:root {
	/* Marca */
	--mp-verde: #0bdb2d;          /* verde "PARTES" del logo */
	--mp-verde-hover: #3cf058;
	--mp-verde-osc: #079a1f;
	--mp-verde-suave: rgba(11, 219, 45, .12);
	--mp-negro: #0a0a0a;          /* fondo general */
	--mp-superficie: #141414;     /* tarjetas, cajas */
	--mp-superficie-2: #1c1c1c;   /* inputs, hover */
	--mp-borde: #2a2a2a;
	--mp-borde-fuerte: #3a3a3a;
	--mp-blanco: #ffffff;
	--mp-texto: #d6d6d6;
	--mp-texto-suave: #9b9b9b;
	--mp-rojo: #ff4545;

	/* Tipografía */
	--mp-f-titulo: 'Saira Stencil One', 'Arial Black', sans-serif;
	--mp-f-ui: 'Barlow Condensed', 'Arial Narrow', sans-serif;
	--mp-f-texto: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;

	/* Medidas */
	--mp-ancho: 1240px;
	--mp-radio: 4px;
	--mp-corte: 10px;             /* esquina cortada estilo stencil */
	--mp-sombra: 0 10px 30px rgba(0, 0, 0, .45);
	--mp-trans: .2s ease;

	/* Paleta global de Astra -> se alinea con la marca */
	--ast-global-color-0: var(--mp-verde);
	--ast-global-color-1: var(--mp-verde-hover);
	--ast-global-color-2: var(--mp-blanco);
	--ast-global-color-3: var(--mp-texto);
	--ast-global-color-4: var(--mp-negro);
	--ast-global-color-5: var(--mp-superficie);
	--ast-global-color-6: var(--mp-borde);
	--ast-global-color-7: var(--mp-superficie-2);
	--ast-global-color-8: var(--mp-texto-suave);

	color-scheme: dark;
}

/* --------------------------------------------------------------------------
   Fondo y texto
   -------------------------------------------------------------------------- */
body.mp-tema,
.mp-tema .site-content,
.mp-tema.ast-separate-container,
.mp-tema.ast-plain-container,
.mp-tema.ast-page-builder-template {
	background-color: var(--mp-negro);
	color: var(--mp-texto);
	font-family: var(--mp-f-texto);
	-webkit-font-smoothing: antialiased;
}

.mp-tema.ast-separate-container .ast-article-single,
.mp-tema.ast-separate-container .ast-article-post,
.mp-tema.ast-separate-container .ast-woocommerce-container,
.mp-tema.ast-separate-container .comments-area,
.mp-tema.ast-separate-container .ast-archive-description,
.mp-tema.ast-separate-container #secondary .widget {
	background-color: var(--mp-superficie);
	border: 1px solid var(--mp-borde);
	border-radius: var(--mp-radio);
}

.mp-tema ::selection {
	background: var(--mp-verde);
	color: var(--mp-negro);
}

/* --------------------------------------------------------------------------
   Tipografía
   -------------------------------------------------------------------------- */
.mp-tema h1, .mp-tema h2, .mp-tema h3,
.mp-tema .entry-title,
.mp-tema .page-title,
.mp-tema .woocommerce-products-header__title,
.mp-tema .product_title {
	font-family: var(--mp-f-titulo);
	font-weight: 400;
	color: var(--mp-blanco);
	letter-spacing: .01em;
	line-height: 1.1;
	text-transform: uppercase;
}

.mp-tema h4, .mp-tema h5, .mp-tema h6,
.mp-tema .widget-title {
	font-family: var(--mp-f-ui);
	font-weight: 700;
	color: var(--mp-blanco);
	text-transform: uppercase;
	letter-spacing: .04em;
}

.mp-tema a {
	color: var(--mp-verde);
	transition: color var(--mp-trans);
}
.mp-tema a:hover,
.mp-tema a:focus-visible {
	color: var(--mp-verde-hover);
}

.mp-tema :focus-visible {
	outline: 2px solid var(--mp-verde);
	outline-offset: 2px;
}

/* Textos reutilizables */
.mp-eyebrow {
	margin: 0 0 .5em;
	font-family: var(--mp-f-ui);
	font-size: .85rem;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--mp-verde);
}
.mp-eyebrow::before {
	content: "";
	display: inline-block;
	width: 22px;
	height: 3px;
	margin-right: 10px;
	vertical-align: middle;
	background: var(--mp-verde);
	transform: skewX(-30deg);
}

.mp-titulo {
	margin: 0;
	font-family: var(--mp-f-titulo);
	font-size: clamp(1.7rem, 3.4vw, 2.6rem);
	color: var(--mp-blanco);
	text-transform: uppercase;
	line-height: 1.05;
}

.mp-contenedor {
	width: 100%;
	max-width: var(--mp-ancho);
	margin-inline: auto;
	padding-inline: 20px;
}

/* --------------------------------------------------------------------------
   Botones — mismo estilo en toda la tienda
   -------------------------------------------------------------------------- */
.mp-tema .button,
.mp-tema button.button,
.mp-tema input[type="submit"],
.mp-tema .ast-button,
.mp-tema .wp-element-button,
.mp-tema .wp-block-button__link,
.mp-tema.woocommerce a.button,
.mp-tema .woocommerce a.button,
.mp-tema .woocommerce button.button,
.mp-tema .woocommerce button.button.alt,
.mp-tema .woocommerce a.button.alt,
.mp-tema .woocommerce input.button,
.mp-tema .woocommerce #respond input#submit,
.mp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5em;
	min-height: 46px;
	padding: .7em 1.4em;
	border: 0;
	border-radius: 0;
	background: var(--mp-verde);
	color: var(--mp-negro);
	font-family: var(--mp-f-ui);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: .08em;
	line-height: 1.1;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	clip-path: polygon(0 0, calc(100% - var(--mp-corte)) 0, 100% var(--mp-corte), 100% 100%, var(--mp-corte) 100%, 0 calc(100% - var(--mp-corte)));
	transition: background-color var(--mp-trans), color var(--mp-trans), transform var(--mp-trans);
}
.mp-tema .button:hover,
.mp-tema button.button:hover,
.mp-tema input[type="submit"]:hover,
.mp-tema .ast-button:hover,
.mp-tema .wp-element-button:hover,
.mp-tema .woocommerce a.button:hover,
.mp-tema .woocommerce button.button:hover,
.mp-tema .woocommerce button.button.alt:hover,
.mp-tema .woocommerce a.button.alt:hover,
.mp-btn:hover {
	background: var(--mp-verde-hover);
	color: var(--mp-negro);
	transform: translateY(-1px);
}
.mp-tema .button:focus-visible,
.mp-btn:focus-visible {
	outline: none;
	box-shadow: inset 0 0 0 3px var(--mp-blanco);
}

.mp-tema .button:disabled,
.mp-tema .button.disabled,
.mp-tema .woocommerce button.button:disabled[disabled] {
	background: var(--mp-borde-fuerte);
	color: var(--mp-texto-suave);
	opacity: 1;
	cursor: not-allowed;
}

.mp-btn svg,
.mp-tema .button svg {
	width: 1.15em;
	height: 1.15em;
	flex: none;
}

/* Variante contorno */
.mp-tema .mp-btn--borde,
.mp-tema a.button.mp-btn--borde {
	background: transparent;
	color: var(--mp-blanco);
	box-shadow: inset 0 0 0 2px var(--mp-borde-fuerte);
	clip-path: none;
	border-radius: 0;
}
.mp-tema .mp-btn--borde:hover,
.mp-tema a.button.mp-btn--borde:hover {
	background: transparent;
	color: var(--mp-verde);
	box-shadow: inset 0 0 0 2px var(--mp-verde);
}

/* Variante WhatsApp: verde de marca sobre negro, con borde */
.mp-tema .mp-btn--wa,
.mp-tema a.button.mp-btn--wa {
	background: var(--mp-negro);
	color: var(--mp-verde);
	box-shadow: inset 0 0 0 2px var(--mp-verde);
	clip-path: none;
}
.mp-tema .mp-btn--wa:hover,
.mp-tema a.button.mp-btn--wa:hover {
	background: var(--mp-verde);
	color: var(--mp-negro);
}

/* Link con flecha */
.mp-link-flecha {
	display: inline-flex;
	align-items: center;
	gap: .4em;
	font-family: var(--mp-f-ui);
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-decoration: none;
}
.mp-link-flecha svg { width: 1.1em; height: 1.1em; transition: transform var(--mp-trans); }
.mp-link-flecha:hover svg { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   Formularios
   -------------------------------------------------------------------------- */
.mp-tema input[type="text"],
.mp-tema input[type="email"],
.mp-tema input[type="tel"],
.mp-tema input[type="number"],
.mp-tema input[type="password"],
.mp-tema input[type="search"],
.mp-tema input[type="url"],
.mp-tema textarea,
.mp-tema select,
.mp-tema .woocommerce form .form-row .input-text,
.mp-tema .woocommerce form .form-row select,
.mp-tema .select2-container--default .select2-selection--single {
	min-height: 46px;
	padding: .6em .9em;
	border: 1px solid var(--mp-borde-fuerte);
	border-radius: var(--mp-radio);
	background-color: var(--mp-superficie-2);
	color: var(--mp-blanco);
	font-family: var(--mp-f-texto);
	font-size: 1rem;
	box-shadow: none;
	transition: border-color var(--mp-trans), box-shadow var(--mp-trans);
}
.mp-tema input:focus,
.mp-tema textarea:focus,
.mp-tema select:focus,
.mp-tema .select2-container--focus .select2-selection--single,
.mp-tema .select2-container--open .select2-selection--single {
	border-color: var(--mp-verde);
	box-shadow: 0 0 0 3px var(--mp-verde-suave);
	outline: none;
}
.mp-tema ::placeholder { color: #6f6f6f; opacity: 1; }

.mp-tema label,
.mp-tema .woocommerce form .form-row label {
	font-family: var(--mp-f-ui);
	font-weight: 600;
	font-size: .95rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--mp-texto);
}
.mp-tema .woocommerce form .form-row .required { color: var(--mp-verde); }

.mp-tema .woocommerce form .form-row.woocommerce-invalid .input-text,
.mp-tema .woocommerce form .form-row.woocommerce-invalid select { border-color: var(--mp-rojo); }
.mp-tema .woocommerce form .form-row.woocommerce-validated .input-text { border-color: var(--mp-verde-osc); }

.mp-tema input[type="checkbox"],
.mp-tema input[type="radio"] { accent-color: var(--mp-verde); }

/* Select2 (selector de región / país) */
.mp-tema .select2-container--default .select2-selection--single .select2-selection__rendered {
	color: var(--mp-blanco);
	line-height: 30px;
	padding-left: 0;
}
.mp-tema .select2-container--default .select2-selection--single .select2-selection__arrow { height: 44px; }
.select2-dropdown {
	background: var(--mp-superficie-2) !important;
	border-color: var(--mp-borde-fuerte) !important;
	color: var(--mp-blanco);
}
.select2-search--dropdown .select2-search__field {
	background: var(--mp-negro) !important;
	color: var(--mp-blanco) !important;
	border-color: var(--mp-borde-fuerte) !important;
}
.select2-results__option--highlighted[aria-selected],
.select2-results__option--highlighted[data-selected],
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
	background: var(--mp-verde) !important;
	color: var(--mp-negro) !important;
}
.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option--selected {
	background: var(--mp-borde) !important;
	color: var(--mp-blanco);
}

/* Cantidad */
.mp-tema .quantity .qty {
	width: 4.2em;
	text-align: center;
	font-family: var(--mp-f-ui);
	font-weight: 700;
	font-size: 1.1rem;
}
.mp-tema .quantity .minus,
.mp-tema .quantity .plus {
	background: var(--mp-superficie-2);
	border-color: var(--mp-borde-fuerte);
	color: var(--mp-blanco);
}
.mp-tema .quantity .minus:hover,
.mp-tema .quantity .plus:hover { background: var(--mp-verde); color: var(--mp-negro); }

/* --------------------------------------------------------------------------
   Avisos de WooCommerce
   -------------------------------------------------------------------------- */
.mp-tema .woocommerce-message,
.mp-tema .woocommerce-info,
.mp-tema .woocommerce-error,
.mp-tema .woocommerce-notices-wrapper > * {
	background: var(--mp-superficie);
	color: var(--mp-texto);
	border: 1px solid var(--mp-borde);
	border-left: 4px solid var(--mp-verde);
	border-radius: var(--mp-radio);
}
.mp-tema .woocommerce-error { border-left-color: var(--mp-rojo); }
.mp-tema .woocommerce-message::before,
.mp-tema .woocommerce-info::before { color: var(--mp-verde); }
.mp-tema .woocommerce-error::before { color: var(--mp-rojo); }
.mp-tema .woocommerce-message .button,
.mp-tema .woocommerce-info .button { min-height: 38px; padding: .5em 1em; font-size: .9rem; }

/* --------------------------------------------------------------------------
   Tablas
   -------------------------------------------------------------------------- */
.mp-tema table,
.mp-tema .woocommerce table.shop_table {
	border-color: var(--mp-borde);
	border-collapse: collapse;
	background: transparent;
	color: var(--mp-texto);
}
.mp-tema table th,
.mp-tema table td,
.mp-tema .woocommerce table.shop_table th,
.mp-tema .woocommerce table.shop_table td {
	border-color: var(--mp-borde);
}
.mp-tema table th,
.mp-tema .woocommerce table.shop_table th {
	font-family: var(--mp-f-ui);
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--mp-blanco);
}

/* --------------------------------------------------------------------------
   Precios y valoraciones
   -------------------------------------------------------------------------- */
.mp-tema .price,
.mp-tema .woocommerce-Price-amount {
	font-family: var(--mp-f-ui);
	font-weight: 700;
	color: var(--mp-blanco);
}
.mp-tema .price del,
.mp-tema .price del .woocommerce-Price-amount {
	color: var(--mp-texto-suave);
	font-weight: 500;
	opacity: 1;
}
.mp-tema .price ins { text-decoration: none; }
.mp-tema .price ins .woocommerce-Price-amount { color: var(--mp-verde); }
.mp-tema .star-rating,
.mp-tema .star-rating::before,
.mp-tema p.stars a { color: var(--mp-verde); }

/* --------------------------------------------------------------------------
   Chips de categorías (tienda, carrito vacío)
   -------------------------------------------------------------------------- */
.mp-chips {
	display: flex;
	gap: 8px;
	margin: 0 0 1.25rem;
	padding-bottom: 4px;
	overflow-x: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--mp-borde-fuerte) transparent;
}
.mp-chips--centro { justify-content: center; flex-wrap: wrap; margin-top: 1.5rem; }
.mp-chips--sub { margin-top: -.5rem; }

.mp-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex: none;
	padding: .55em 1em;
	border: 1px solid var(--mp-borde-fuerte);
	border-radius: 999px;
	background: var(--mp-superficie);
	color: var(--mp-texto) !important;
	font-family: var(--mp-f-ui);
	font-size: .95rem;
	font-weight: 600;
	letter-spacing: .03em;
	text-decoration: none;
	white-space: nowrap;
	transition: border-color var(--mp-trans), background var(--mp-trans), color var(--mp-trans);
}
.mp-chip:hover { border-color: var(--mp-verde); color: var(--mp-blanco) !important; }
.mp-chip.is-activo {
	background: var(--mp-verde);
	border-color: var(--mp-verde);
	color: var(--mp-negro) !important;
}
.mp-chip__icono { width: 20px; height: 20px; stroke-width: 4; }
.mp-chip--sub { font-size: .85rem; padding: .4em .85em; background: transparent; }

/* --------------------------------------------------------------------------
   Insignias (oferta / agotado)
   -------------------------------------------------------------------------- */
.mp-tema span.onsale,
.mp-tema .woocommerce span.onsale,
.mp-insignia {
	position: absolute;
	top: 12px;
	left: 12px;
	right: auto;
	z-index: 3;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: .3em .7em;
	border-radius: 0;
	background: var(--mp-verde);
	color: var(--mp-negro);
	font-family: var(--mp-f-ui);
	font-size: .9rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .06em;
	text-transform: uppercase;
	clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
	padding-right: 1.1em;
}
.mp-insignia--agotado {
	top: auto;
	bottom: 12px;
	background: var(--mp-negro);
	color: var(--mp-blanco);
	box-shadow: inset 0 0 0 1px var(--mp-borde-fuerte);
}

/* --------------------------------------------------------------------------
   Beneficios (portada, producto)
   -------------------------------------------------------------------------- */
.mp-beneficios {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1px;
	margin: 0;
	padding: 0;
	list-style: none;
	background: var(--mp-borde);
	border: 1px solid var(--mp-borde);
}
.mp-beneficios__item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px 20px;
	background: var(--mp-superficie);
}
.mp-beneficios__icono {
	display: grid;
	place-items: center;
	flex: none;
	width: 44px;
	height: 44px;
	background: var(--mp-verde-suave);
	color: var(--mp-verde);
}
.mp-beneficios__icono svg { width: 22px; height: 22px; }
.mp-beneficios__item strong {
	display: block;
	font-family: var(--mp-f-ui);
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--mp-blanco);
}
.mp-beneficios__item small { display: block; color: var(--mp-texto-suave); font-size: .9rem; line-height: 1.35; }

.mp-beneficios--compacto { grid-template-columns: 1fr 1fr; margin-top: 1.25rem; }
.mp-beneficios--compacto .mp-beneficios__item { padding: 12px 14px; gap: 10px; }
.mp-beneficios--compacto .mp-beneficios__icono { width: 34px; height: 34px; }
.mp-beneficios--compacto .mp-beneficios__icono svg { width: 18px; height: 18px; }
.mp-beneficios--compacto strong { font-size: .92rem; }
.mp-beneficios--compacto small { font-size: .8rem; }

@media (max-width: 921px) {
	.mp-beneficios { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 544px) {
	.mp-beneficios:not(.mp-beneficios--compacto) { grid-template-columns: 1fr; }
	.mp-beneficios--compacto { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Migas de pan y paginación
   -------------------------------------------------------------------------- */
.mp-tema .woocommerce-breadcrumb,
.mp-tema .ast-breadcrumbs,
.mp-tema .ast-breadcrumbs-wrapper {
	font-family: var(--mp-f-ui);
	font-size: .9rem;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--mp-texto-suave);
}
.mp-tema .woocommerce-breadcrumb a,
.mp-tema .ast-breadcrumbs a { color: var(--mp-texto); text-decoration: none; }
.mp-tema .woocommerce-breadcrumb a:hover,
.mp-tema .ast-breadcrumbs a:hover { color: var(--mp-verde); }

.mp-tema .woocommerce nav.woocommerce-pagination ul,
.mp-tema .woocommerce nav.woocommerce-pagination ul li { border: 0; }
.mp-tema .woocommerce nav.woocommerce-pagination ul { display: flex; gap: 6px; justify-content: center; }
.mp-tema .woocommerce nav.woocommerce-pagination ul li a,
.mp-tema .woocommerce nav.woocommerce-pagination ul li span {
	display: grid;
	place-items: center;
	min-width: 42px;
	height: 42px;
	padding: 0 .6em;
	border: 1px solid var(--mp-borde-fuerte);
	background: var(--mp-superficie);
	color: var(--mp-texto);
	font-family: var(--mp-f-ui);
	font-weight: 700;
}
.mp-tema .woocommerce nav.woocommerce-pagination ul li a:hover,
.mp-tema .woocommerce nav.woocommerce-pagination ul li span.current {
	background: var(--mp-verde);
	border-color: var(--mp-verde);
	color: var(--mp-negro);
}

/* --------------------------------------------------------------------------
   Barra de envío gratis (carrito y mini-carrito del header)
   -------------------------------------------------------------------------- */
.mp-envio {
	margin: 0 0 1.25rem;
	padding: 14px 16px;
	border: 1px solid var(--mp-borde);
	background: var(--mp-superficie);
}
.mp-envio p {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 10px;
	font-size: .95rem;
	color: var(--mp-texto);
}
.mp-envio p strong { color: var(--mp-blanco); }
.mp-envio svg { width: 20px; height: 20px; color: var(--mp-verde); flex: none; }
.mp-envio__barra {
	height: 8px;
	background: var(--mp-borde);
	overflow: hidden;
}
.mp-envio__barra span {
	display: block;
	height: 100%;
	background: repeating-linear-gradient(135deg, var(--mp-verde) 0 10px, var(--mp-verde-hover) 10px 20px);
	transition: width .4s ease;
}
.mp-envio.is-listo { border-color: var(--mp-verde); }

/* Sin subrayado en componentes de navegación */
.mp-tema .main-header-menu a,
.mp-tema ul.products li.product a,
.mp-tema .mp-marcas a,
.mp-tema .mp-chip,
.mp-tema .mp-btn,
.mp-tema .button,
.mp-tema .mp-categoria,
.mp-tema .mp-banner,
.mp-tema .mp-footer a,
.mp-tema .mp-topbar a,
.mp-tema .mp-wa-flotante { text-decoration: none; }

/* Texto solo para lectores de pantalla (respaldo si el tema no lo define) */
.mp-tema .screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Movimiento reducido */
@media (prefers-reduced-motion: reduce) {
	.mp-tema *, .mp-tema *::before, .mp-tema *::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
	}
}