/* ==========================================================================
   ESTILOS OFICIALES TIENDA MANTALONES (Basados en mantalones.es)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,600;0,700;1,400&family=Roboto:wght@300;400;500;700&display=swap');

:root {
	--ts-primary: #383838;
	--ts-secondary: #fc0;
	--ts-secondary-hover: #e6b800;
	--ts-dark: #1f1f1f;
	--ts-text: #333333;
	--ts-text-muted: #7a7c7b;
	--ts-bg: #f4f4f4;
	--ts-white: #ffffff;
	--ts-border: #e2e4e7;
}

body {
	background-color: var(--ts-bg) !important;
	color: var(--ts-text) !important;
	font-family: "Roboto", sans-serif !important;
	margin: 0;
	padding: 0;
}

/* Ocultar créditos de WordPress en cualquier tema */
footer .wp-block-paragraph,
.wp-block-template-part footer,
.site-info,
.powered-by,
footer a[href*="wordpress.org"],
p:has(a[href*="wordpress.org"]) {
	display: none !important;
	visibility: hidden !important;
	height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}

.ts-tienda-container {
	max-width: 1200px;
	margin: 30px auto 60px auto;
	padding: 0 20px;
	box-sizing: border-box;
}

/* Encabezado */
.ts-header-catalogo {
	text-align: center;
	margin-bottom: 40px;
	padding-bottom: 20px;
	border-bottom: 1px solid rgba(56, 56, 56, 0.1);
}

.ts-header-catalogo h2 {
	font-family: "Lora", serif !important;
	font-size: 34px !important;
	font-weight: 600 !important;
	color: var(--ts-primary) !important;
	margin: 0 0 10px 0 !important;
	letter-spacing: 0.5px;
}

.ts-header-catalogo p {
	font-family: "Roboto", sans-serif;
	font-size: 15px;
	color: var(--ts-text-muted);
	text-transform: uppercase;
	letter-spacing: 2px;
	margin: 0;
}

/* Categorías en el Catálogo */
.ts-categoria-bloque {
	margin-bottom: 50px;
}

.ts-categoria-titulo {
	font-family: "Lora", serif !important;
	font-size: 26px !important;
	font-weight: 600 !important;
	color: var(--ts-primary) !important;
	margin: 0 0 8px 0 !important;
	border-left: 4px solid var(--ts-secondary);
	padding-left: 14px;
}

.ts-categoria-desc {
	font-size: 14px;
	color: var(--ts-text-muted);
	margin: 0 0 25px 0;
	padding-left: 18px;
}

/* Barra de Filtros y Búsqueda */
.ts-barra-filtros {
	background: var(--ts-white);
	padding: 16px 20px;
	border: 1px solid var(--ts-border);
	margin-bottom: 35px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.ts-form-busqueda {
	display: flex;
	gap: 15px;
	align-items: center;
}

.ts-form-busqueda input[type="text"] {
	padding: 12px 16px;
	border: 1px solid var(--ts-border);
	font-family: "Roboto", sans-serif;
	font-size: 14px;
	flex: 1;
	outline: none;
}

.ts-form-busqueda input[type="text"]:focus {
	border-color: var(--ts-primary);
}

/* Grid de Artículos */
.ts-grid-articulos {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 30px;
}

.ts-card-articulo {
	background: var(--ts-white);
	border: 1px solid var(--ts-border);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: all 0.3s ease-in-out;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.ts-card-articulo:hover {
	transform: translateY(-5px);
	box-shadow: 0 12px 25px rgba(0, 0, 0, 0.1);
	border-color: var(--ts-primary);
}

.ts-card-imagen {
	position: relative;
	width: 100%;
	height: 320px;
	background: #ececec;
	overflow: hidden;
}

.ts-card-imagen img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.ts-card-articulo:hover .ts-card-imagen img {
	transform: scale(1.06);
}

.ts-badge {
	position: absolute;
	top: 15px;
	right: 15px;
	padding: 5px 12px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.ts-badge-stock { background: var(--ts-primary); color: #fff; }
.ts-badge-reserva { background: var(--ts-secondary); color: var(--ts-primary); }
.ts-badge-agotado { background: #d32f2f; color: #fff; }

.ts-card-cuerpo {
	padding: 22px 20px;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	text-align: center;
}

.ts-articulo-titulo {
	font-family: "Lora", serif !important;
	font-size: 20px !important;
	font-weight: 600 !important;
	color: var(--ts-primary) !important;
	margin: 0 0 12px 0 !important;
	line-height: 1.35;
	min-height: 52px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ts-articulo-precio {
	font-family: "Roboto", sans-serif;
	font-size: 22px;
	font-weight: 700;
	color: var(--ts-primary);
	margin-bottom: 15px;
}

/* ==========================================================================
   STEPPER DE CANTIDAD ELEGANTE Y UNIVERSAL (- / +)
   ========================================================================== */
.ts-stepper-wrapper {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 12px !important;
	margin-bottom: 14px !important;
}

.ts-stepper-label {
	font-family: "Roboto", sans-serif !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.5px !important;
	color: var(--ts-primary) !important;
}

.ts-stepper {
	display: inline-flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: center !important;
	border: 1px solid var(--ts-border) !important;
	background: #fff !important;
	overflow: hidden !important;
	width: 120px !important;
	min-width: 120px !important;
	max-width: 120px !important;
	height: 36px !important;
	box-sizing: border-box !important;
	padding: 0 !important;
	margin: 0 !important;
}

.ts-stepper-btn {
	flex: 0 0 36px !important;
	width: 36px !important;
	min-width: 36px !important;
	max-width: 36px !important;
	height: 36px !important;
	line-height: 36px !important;
	background: #f0f0f0 !important;
	border: none !important;
	border-radius: 0 !important;
	text-align: center !important;
	font-family: "Roboto", sans-serif !important;
	font-size: 20px !important;
	font-weight: 900 !important;
	color: var(--ts-primary) !important;
	cursor: pointer !important;
	transition: all 0.2s !important;
	user-select: none !important;
	padding: 0 !important;
	margin: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-shadow: none !important;
	outline: none !important;
}

.ts-stepper-btn:hover {
	background: var(--ts-secondary) !important;
	color: var(--ts-primary) !important;
}

.ts-stepper-btn:active {
	background: #e6b800 !important;
}

.ts-stepper-input {
	flex: 0 0 48px !important;
	width: 48px !important;
	min-width: 48px !important;
	max-width: 48px !important;
	height: 36px !important;
	line-height: 36px !important;
	border: none !important;
	border-left: 1px solid #e0e0e0 !important;
	border-right: 1px solid #e0e0e0 !important;
	border-radius: 0 !important;
	outline: none !important;
	text-align: center !important;
	font-family: "Roboto", sans-serif !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	color: var(--ts-primary) !important;
	padding: 0 !important;
	margin: 0 !important;
	background: #ffffff !important;
	pointer-events: none !important;
	box-shadow: none !important;
	box-sizing: border-box !important;
	-moz-appearance: textfield !important;
}

.ts-stepper-input::-webkit-outer-spin-button,
.ts-stepper-input::-webkit-inner-spin-button {
	-webkit-appearance: none !important;
	margin: 0 !important;
}

/* Botones */
.ts-btn {
	display: inline-block;
	text-align: center;
	padding: 12px 24px;
	font-family: "Roboto", sans-serif;
	font-size: 14px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	border-radius: 0px;
	text-decoration: none;
	cursor: pointer;
	border: 1px solid transparent;
	transition: all 0.3s ease-in-out;
}

.ts-btn-comprar {
	background: var(--ts-secondary);
	color: var(--ts-primary);
	border-color: var(--ts-secondary);
	width: 100%;
	box-sizing: border-box;
}

.ts-btn-comprar:hover {
	background: var(--ts-primary);
	color: #ffffff;
	border-color: var(--ts-primary);
}

.ts-btn-reservar {
	background: var(--ts-primary);
	color: #ffffff;
	border-color: var(--ts-primary);
	width: 100%;
	box-sizing: border-box;
}

.ts-btn-reservar:hover {
	background: var(--ts-secondary);
	color: var(--ts-primary);
	border-color: var(--ts-secondary);
}

.ts-btn-filtrar {
	background: var(--ts-primary);
	color: #ffffff;
	padding: 12px 20px;
}

.ts-btn-filtrar:hover {
	background: var(--ts-secondary);
	color: var(--ts-primary);
}

.ts-btn-limpiar {
	color: var(--ts-text-muted);
	font-size: 13px;
	text-decoration: underline;
}

.ts-btn-desactivado {
	background: #e0e0e0;
	color: #999;
	cursor: not-allowed;
	width: 100%;
}

.ts-sin-articulos {
	text-align: center;
	padding: 60px 20px;
	background: var(--ts-white);
	border: 1px solid var(--ts-border);
	color: var(--ts-text-muted);
	font-size: 17px;
	font-family: "Lora", serif;
}

/* Cesta y Checkout */
.ts-cesta-grid {
	display: grid;
	grid-template-columns: 1fr 420px;
	gap: 30px;
	align-items: start;
}

@media screen and (max-width: 900px) {
	.ts-cesta-grid {
		grid-template-columns: 1fr;
	}
}

.ts-cesta-articulos {
	background: var(--ts-white);
	border: 1px solid var(--ts-border);
	padding: 25px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}

.ts-tabla-cesta {
	width: 100%;
	border-collapse: collapse;
}

.ts-tabla-cesta th {
	text-align: left;
	padding-bottom: 15px;
	border-bottom: 2px solid var(--ts-primary);
	font-family: "Lora", serif;
	font-size: 16px;
	color: var(--ts-primary);
}

.ts-tabla-cesta td {
	padding: 18px 0;
	border-bottom: 1px solid #f0f0f0;
	vertical-align: middle;
}

.ts-item-info {
	display: flex;
	align-items: center;
	gap: 15px;
}

.ts-item-thumb {
	width: 65px;
	height: 65px;
	object-fit: cover;
	border: 1px solid var(--ts-border);
}

.ts-btn-remove {
	color: #d32f2f;
	font-size: 24px;
	text-decoration: none;
	font-weight: bold;
}

.ts-btn-remove:hover {
	color: #000;
}

.ts-btn-link {
	background: none;
	border: none;
	color: var(--ts-text-muted);
	text-decoration: underline;
	cursor: pointer;
	font-size: 13px;
	text-transform: uppercase;
}

.ts-caja-resumen {
	background: var(--ts-white);
	border: 1px solid var(--ts-border);
	padding: 25px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}

.ts-form-grupo {
	margin-bottom: 16px;
}

.ts-form-grupo label {
	display: block;
	font-size: 13px;
	font-weight: 500;
	margin-bottom: 6px;
	color: var(--ts-primary);
}

.ts-form-grupo input,
.ts-form-grupo textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--ts-border);
	font-family: "Roboto", sans-serif;
	font-size: 14px;
	box-sizing: border-box;
}

.ts-form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.ts-modalidades-pago {
	background: #fafafa;
	border: 1px solid var(--ts-border);
	padding: 15px;
	margin: 20px 0;
}

.ts-radio-pago {
	display: block;
	padding: 8px 0;
	cursor: pointer;
	font-size: 14px;
}

.ts-radio-pago input {
	margin-right: 8px;
}

.ts-totales-box {
	margin: 20px 0;
	border-top: 1px solid var(--ts-border);
	padding-top: 15px;
}

.ts-totales-linea {
	display: flex;
	justify-content: space-between;
	margin-bottom: 8px;
	font-size: 14px;
	color: #666;
}

.ts-total-destacado {
	font-size: 20px;
	font-weight: 700;
	color: var(--ts-primary);
	border-top: 2px solid var(--ts-primary);
	padding-top: 10px;
	margin-top: 10px;
}

.ts-caja-exito {
	background: var(--ts-white);
	border: 1px solid var(--ts-border);
	padding: 40px;
	text-align: center;
	max-width: 650px;
	margin: 40px auto;
	box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.ts-detalles-exito {
	background: #fafafa;
	border: 1px solid var(--ts-border);
	padding: 20px;
	text-align: left;
	margin: 25px 0;
	font-size: 15px;
	line-height: 1.8;
}

/* ==========================================================================
   SUPRESIÓN VISUAL DE CRÉDITOS Y LEYENDAS WORDPRESS
   ========================================================================== */
.site-info,
.site-footer a[href*="wordpress.org"],
footer a[href*="wordpress.org"],
p:has(a[href*="wordpress.org"]),
.wp-block-template-part:has(a[href*="wordpress.org"]) {
	display: none !important;
}