/**
 * Mob Ficha — hoja base de la ficha de producto.
 *
 * Reglas del diseño mob-ficha-producto_4.html, literales, con cada valor
 * sustituido por su custom property. Los tokens llevan prefijo --mobp- y los
 * emite includes/ficha/class-ficha-css.php acotados al wrapper, NUNCA en
 * :root (el archivo original declaraba --border, --white y --text-body en
 * :root, nombres tan genéricos que se filtrarían a todo el tema).
 *
 * ESTA HOJA NO CONTIENE NINGUNA MEDIA QUERY — es deliberado.
 * El diseño redeclara valores en (max-width:1024px) y (max-width:480px) con
 * el mismo selector, así que la especificidad empata y decide el ORDEN. El
 * generador emite bloque base y después las media queries, igual que ya hace
 * Mob_Feed_CSS con el feed. Un bloque plano al final ganaría también en móvil
 * y borraría la escala compacta.
 *
 * BLINDAJE (v1.3.1)
 * -----------------
 * Todas las declaraciones llevan !important, igual que el feed y el snippet
 * del botón. El motivo es concreto: la ficha vive dentro de una plantilla de
 * Elementor, sobre hello-elementor + WooCommerce, y ese entorno estila
 * `button`, `a` y `.button` con selectores de especificidad alta
 * (`.woocommerce a.button`, `.elementor-widget-container button`…). Con
 * selectores de una sola clase —que es lo que trae el diseño— perdíamos la
 * cascada: el botón «Añadir al Carrito» salía rojo, y en :hover/:active se
 * quedaba con el borde del tema.
 *
 * !important resuelve el caso normal (el tema no usa !important). Para el
 * caso en que sí lo use, los elementos interactivos van además prefijados con
 * .mob-page, que sube la especificidad a 0,2,0 y desempata a nuestro favor.
 *
 * Ningún valor cambia: los estados :hover/:focus/:active repiten exactamente
 * las declaraciones base porque el archivo de diseño NO define ningún estado
 * —no hay una sola regla :hover, :focus ni :active en él—, así que «no
 * cambiar nada al interactuar» ES el diseño. La única excepción es el
 * :hover del botón de compra, que ya existía en el plugin como ajuste
 * apagable (--mobp-blue-hover), y el anillo de foco de accesibilidad.
 *
 * Las custom properties NO llevan !important a propósito: las emite el
 * generador en bloque base y media queries, y marcarlas rompería el
 * desempate por orden del que depende la escala compacta de móvil.
 *
 * @package Mob_Feed
 */

/* ══ Contenedor de escala ══════════════════════════════════════════════════
   El diseño escalaba con una única fórmula sobre .mob-page porque era una
   sola pieza. Al partirlo en tres shortcodes independientes cada bloque
   necesita su propia escala, derivada del ancho de SU columna. Este wrapper
   es sólo el contenedor de consulta; el font-size lo pone el generador.     */
.mob-ficha-wrap {
	container-type: inline-size !important;
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
	clear: both !important;
}

/* El diseño usa *{box-sizing:border-box} global. Desde un plugin no podemos
   tocar el documento entero, así que va acotado al bloque. */
.mob-page,
.mob-page *,
.mob-page *::before,
.mob-page *::after {
	box-sizing: border-box !important;
}

/* Los <button> traen font-size propio (13.3px) y rompen la escala em. */
.mob-page button {
	font-family: inherit !important;
	font-size: 1em !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	box-shadow: none !important;
	text-shadow: none !important;
	transform: none !important;
	filter: none !important;
	min-height: 0 !important;
	min-width: 0 !important;
	max-width: none !important;
	line-height: normal !important;
}

/* Los enlaces del tema traen color, subrayado y a veces ::after. Dentro del
   bloque mandan las reglas de cada pieza, no las del tema. */
.mob-page a {
	text-decoration: none !important;
	box-shadow: none !important;
}

.mob-page a::after,
.mob-page a::before {
	content: none !important;
}

.mob-page img {
	max-width: 100% !important;
	box-shadow: none !important;
	border-radius: 0 !important;
}

.mob-page {
	max-width: 100% !important;
	margin: 0 auto !important;
	padding: var(--mobp-page-pad-y) var(--mobp-page-pad-x) !important;
	float: none !important;
}

/* Anchos por bloque. El font-size de cada uno lo emite el generador. */
.mob-page--galeria {
	width: var(--mobp-galeria-w) !important;
}

.mob-page--contenido {
	width: var(--mobp-contenido-w) !important;
}

.mob-page--detalles {
	width: var(--mobp-detalles-w) !important;
}

/* ══ GALERÍA ══════════════════════════════════════════════════════════════ */

.mob-galeria {
	width: var(--mobp-galeria-w) !important;
	max-width: 100% !important;
	flex-shrink: 0 !important;
}

.mob-img-principal {
	position: relative !important;
	width: var(--mobp-img-w) !important;
	height: var(--mobp-img-h) !important;
	aspect-ratio: var(--mobp-img-ratio) !important;
	background: var(--mobp-img-bg) !important;
	border: 0 !important;
	border-radius: var(--mobp-img-radius) !important;
	overflow: hidden !important;
}

.mob-img-principal img {
	position: absolute !important;
	left: var(--mobp-img-left) !important;
	top: var(--mobp-img-top) !important;
	width: var(--mobp-img-iw) !important;
	height: var(--mobp-img-ih) !important;
	object-fit: contain !important;
	border-radius: 0 !important;
}

.mob-thumbs {
	display: flex !important;
	gap: var(--mobp-thumbs-gap) !important;
	margin-top: var(--mobp-thumbs-mt) !important;
	padding: 0 !important;
	list-style: none !important;
}

.mob-page .mob-thumb,
.mob-page .mob-thumb:hover,
.mob-page .mob-thumb:focus,
.mob-page .mob-thumb:active {
	position: relative !important;
	width: var(--mobp-thumb-size) !important;
	height: var(--mobp-thumb-size) !important;
	background: var(--mobp-img-bg) !important;
	border-radius: var(--mobp-thumb-radius) !important;
	overflow: hidden !important;
	border: var(--mobp-thumb-border) solid transparent !important;
	padding: 0 !important;
	margin: 0 !important;
	cursor: pointer !important;
	box-shadow: none !important;
	flex-shrink: 0 !important;
}

/* El borde activo va después para ganarle al transparent de la regla de
   estados, que comparte especificidad con ésta. */
.mob-page .mob-thumb.is-active,
.mob-page .mob-thumb.is-active:hover {
	border-color: var(--mobp-thumb-active) !important;
}

.mob-thumb img {
	position: absolute !important;
	left: var(--mobp-thumb-img-left) !important;
	top: var(--mobp-thumb-img-top) !important;
	width: var(--mobp-thumb-img-w) !important;
	height: var(--mobp-thumb-img-h) !important;
	object-fit: contain !important;
	mix-blend-mode: multiply !important;
	border-radius: 0 !important;
}

/* ══ CONTENIDO ════════════════════════════════════════════════════════════ */

.mob-contenido {
	width: var(--mobp-contenido-w) !important;
	max-width: 100% !important;
	flex-shrink: 0 !important;
}

.mob-eyebrow {
	font-family: var(--mobp-font-head) !important;
	font-weight: var(--mobp-eyebrow-weight) !important;
	font-size: var(--mobp-eyebrow-fs) !important;
	line-height: var(--mobp-eyebrow-lh) !important;
	letter-spacing: var(--mobp-eyebrow-ls) !important;
	text-transform: uppercase !important;
	color: var(--mobp-curious-blue) !important;
	margin: 0 !important;
	padding: 0 !important;
}

.mob-titulo {
	font-family: var(--mobp-font-head) !important;
	font-weight: var(--mobp-titulo-weight) !important;
	font-size: var(--mobp-titulo-fs) !important;
	line-height: var(--mobp-titulo-lh) !important;
	letter-spacing: normal !important;
	text-transform: uppercase !important;
	color: var(--mobp-biscay) !important;
	margin: var(--mobp-titulo-mt) 0 0 !important;
	padding: 0 !important;
	white-space: var(--mobp-titulo-ws) !important;
}

.mob-desc {
	font-family: var(--mobp-font-body) !important;
	font-weight: var(--mobp-desc-weight) !important;
	font-size: var(--mobp-desc-fs) !important;
	line-height: var(--mobp-desc-lh) !important;
	color: var(--mobp-text-body) !important;
	margin: var(--mobp-desc-mt) 0 0 !important;
	padding: 0 !important;
}

/* La descripción corta es HTML de WooCommerce: puede traer varios <p>.
   El diseño tenía un único <p>, así que los internos van sin margen para
   que el bloque conserve exactamente su caja. */
.mob-desc > p {
	margin: 0 !important;
	font: inherit !important;
	color: inherit !important;
}

.mob-desc > p + p {
	margin-top: var(--mobp-desc-lh) !important;
}

.mob-label-color {
	font-family: var(--mobp-font-head) !important;
	font-weight: var(--mobp-label-weight) !important;
	font-size: var(--mobp-label-fs) !important;
	line-height: var(--mobp-label-lh) !important;
	letter-spacing: var(--mobp-label-ls) !important;
	text-transform: uppercase !important;
	color: var(--mobp-biscay) !important;
	margin: var(--mobp-label-mt) 0 0 !important;
	padding: 0 !important;
}

.mob-colores {
	display: flex !important;
	flex-wrap: var(--mobp-colores-wrap) !important;
	gap: var(--mobp-colores-gap) !important;
	align-items: center !important;
	height: var(--mobp-colores-h) !important;
	margin-top: var(--mobp-colores-mt) !important;
	padding: 0 !important;
}

.mob-page .mob-chip,
.mob-page .mob-chip:hover,
.mob-page .mob-chip:focus,
.mob-page .mob-chip:active {
	display: flex !important;
	align-items: center !important;
	gap: var(--mobp-chip-gap) !important;
	width: auto !important;
	height: var(--mobp-chip-h) !important;
	padding: var(--mobp-chip-pt) var(--mobp-chip-pr) var(--mobp-chip-pb) var(--mobp-chip-pl) !important;
	margin: 0 !important;
	border: var(--mobp-chip-border) solid var(--mobp-border) !important;
	border-radius: var(--mobp-chip-radius) !important;
	background: transparent !important;
	cursor: pointer !important;
	font: inherit !important;
	box-shadow: none !important;
	flex-shrink: 0 !important;
}

/* Estado activo y esquina del último chip: después de la regla de estados,
   con la que empatan en especificidad. */
.mob-page .mob-chip:last-child {
	border-radius: var(--mobp-chip-radius-last) !important;
}

.mob-page .mob-chip.is-active,
.mob-page .mob-chip.is-active:hover {
	background: var(--mobp-img-bg) !important;
	border-color: var(--mobp-curious-blue) !important;
}

.mob-chip-dot {
	width: var(--mobp-dot-size) !important;
	height: var(--mobp-dot-size) !important;
	border-radius: var(--mobp-dot-radius) !important;
	flex-shrink: 0 !important;
	display: block !important;
}

.mob-chip-dot.negro {
	background: var(--mobp-dot-negro) !important;
}

.mob-chip-dot.gris {
	background: var(--mobp-dot-gris) !important;
}

.mob-chip-dot.blanco {
	background: var(--mobp-dot-blanco) !important;
	border: var(--mobp-dot-border) solid var(--mobp-border) !important;
}

.mob-chip-label {
	font-family: var(--mobp-font-body) !important;
	font-weight: var(--mobp-chip-label-weight) !important;
	font-size: var(--mobp-chip-label-fs) !important;
	line-height: var(--mobp-chip-label-lh) !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	color: var(--mobp-text-body) !important;
	white-space: nowrap !important;
}

.mob-specs {
	width: var(--mobp-specs-w) !important;
	max-width: 100% !important;
	height: var(--mobp-specs-h) !important;
	margin-top: var(--mobp-specs-mt) !important;
	background: var(--mobp-white) !important;
	border: var(--mobp-specs-border) solid var(--mobp-border) !important;
	border-radius: var(--mobp-specs-radius) !important;
	overflow: hidden !important;
	padding: 0 !important;
}

.mob-spec-row {
	height: var(--mobp-row-h) !important;
	min-height: var(--mobp-row-min-h) !important;
	display: flex !important;
	flex-direction: var(--mobp-row-dir) !important;
	align-items: var(--mobp-row-align) !important;
	justify-content: space-between !important;
	gap: var(--mobp-row-gap) !important;
	padding: var(--mobp-row-py) var(--mobp-row-px) !important;
	margin: 0 !important;
	background: var(--mobp-white) !important;
	border: 0 !important;
}

.mob-spec-row:nth-child(odd) {
	background: var(--mobp-row-alt) !important;
}

.mob-spec-key {
	font-family: var(--mobp-font-body) !important;
	font-weight: var(--mobp-spec-key-weight) !important;
	font-size: var(--mobp-spec-fs) !important;
	color: var(--mobp-text-body) !important;
	white-space: var(--mobp-spec-ws) !important;
	letter-spacing: normal !important;
	text-transform: none !important;
}

.mob-spec-val {
	font-family: var(--mobp-font-body) !important;
	font-weight: var(--mobp-spec-val-weight) !important;
	font-size: var(--mobp-spec-fs) !important;
	color: var(--mobp-biscay) !important;
	text-align: var(--mobp-spec-align) !important;
	white-space: var(--mobp-spec-ws) !important;
	letter-spacing: normal !important;
	text-transform: none !important;
}

.mob-precio {
	font-family: var(--mobp-font-head) !important;
	font-weight: var(--mobp-precio-weight) !important;
	font-size: var(--mobp-precio-fs) !important;
	line-height: var(--mobp-precio-lh) !important;
	color: var(--mobp-biscay) !important;
	margin: var(--mobp-precio-mt) 0 0 !important;
	padding: 0 !important;
	white-space: var(--mobp-precio-ws) !important;
}

.mob-precio .iva {
	font-size: var(--mobp-iva-fs) !important;
	color: var(--mobp-text-soft) !important;
	font-weight: inherit !important;
}

.mob-acciones {
	display: flex !important;
	flex-direction: var(--mobp-acciones-dir) !important;
	align-items: var(--mobp-acciones-align) !important;
	gap: var(--mobp-acciones-gap) !important;
	margin-top: var(--mobp-acciones-mt) !important;
	padding: 0 !important;
}

.mob-stepper {
	width: var(--mobp-stepper-w) !important;
	height: var(--mobp-stepper-h) !important;
	background: var(--mobp-row-alt) !important;
	border: 0 !important;
	border-radius: var(--mobp-stepper-radius) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	padding: var(--mobp-stepper-pad) !important;
	margin: 0 !important;
	flex-shrink: 0 !important;
}

.mob-page .mob-stepper button,
.mob-page .mob-stepper button:hover,
.mob-page .mob-stepper button:focus,
.mob-page .mob-stepper button:active {
	width: var(--mobp-step-btn) !important;
	height: var(--mobp-step-btn) !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	cursor: pointer !important;
	flex-shrink: 0 !important;
	display: block !important;
	box-shadow: none !important;
}

.mob-page .mob-stepper button[disabled] {
	opacity: 0.45 !important;
	cursor: default !important;
}

.mob-stepper button svg {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
}

.mob-qty {
	font-family: var(--mobp-font-body) !important;
	font-weight: var(--mobp-qty-weight) !important;
	font-size: var(--mobp-qty-fs) !important;
	line-height: var(--mobp-qty-lh) !important;
	color: var(--mobp-text-body) !important;
	white-space: nowrap !important;
	letter-spacing: normal !important;
}

/* El botón de compra es el que peor lo pasaba: `button` y `a.button` los
   estilan el tema y WooCommerce con especificidad alta, y en :hover el tema
   lo dejaba transparente con borde. Todos los estados repiten la caja del
   diseño; lo único que cambia entre ellos es el fondo del :hover, que ya
   era un ajuste del panel. */
.mob-page .mob-comprar,
.mob-page .mob-comprar:hover,
.mob-page .mob-comprar:focus,
.mob-page .mob-comprar:active,
.mob-page .mob-comprar:visited,
.mob-page .mob-comprar[disabled] {
	width: var(--mobp-comprar-w) !important;
	max-width: 100% !important;
	height: var(--mobp-comprar-h) !important;
	min-height: 0 !important;
	background: var(--mobp-curious-blue) !important;
	background-image: none !important;
	border: 0 !important;
	border-radius: var(--mobp-comprar-radius) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: var(--mobp-comprar-gap) !important;
	padding: var(--mobp-comprar-pad) !important;
	margin: 0 !important;
	cursor: pointer !important;
	text-decoration: none !important;
	box-shadow: none !important;
	text-shadow: none !important;
	transform: none !important;
	filter: none !important;
	float: none !important;
	line-height: normal !important;
	transition: background-color 0.2s ease !important;
}

/* Después de la regla de estados: empata en especificidad y gana por orden. */
.mob-page .mob-comprar:hover {
	background: var(--mobp-blue-hover) !important;
}

.mob-page .mob-comprar[disabled] {
	opacity: 0.45 !important;
	cursor: default !important;
}

.mob-comprar span {
	font-family: var(--mobp-font-head) !important;
	font-weight: var(--mobp-comprar-weight) !important;
	font-size: var(--mobp-comprar-fs) !important;
	color: var(--mobp-white) !important;
	white-space: nowrap !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	line-height: normal !important;
}

.mob-comprar svg {
	width: var(--mobp-comprar-icon) !important;
	height: var(--mobp-comprar-icon) !important;
	flex-shrink: 0 !important;
	display: block !important;
}

/* Spinner: sustituye al icono con la MISMA caja, así el botón no cambia de
   medidas mientras se procesa el add-to-cart. Mismo criterio que el feed. */
.mob-comprar.is-loading svg {
	display: none !important;
}

.mob-page .mob-comprar.is-loading {
	pointer-events: none !important;
}

.mob-comprar.is-loading::after {
	content: "" !important;
	width: var(--mobp-comprar-icon) !important;
	height: var(--mobp-comprar-icon) !important;
	flex-shrink: 0 !important;
	box-sizing: border-box !important;
	border: 0.125em solid var(--mobp-white) !important;
	border-top-color: transparent !important;
	border-radius: 50% !important;
	animation: mob-ficha-spin 0.7s linear infinite !important;
}

@keyframes mob-ficha-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.mob-comprar.is-loading::after {
		animation-duration: 2.4s !important;
	}
}

.mob-nota {
	font-family: var(--mobp-font-body) !important;
	font-weight: var(--mobp-nota-weight) !important;
	font-size: var(--mobp-nota-fs) !important;
	line-height: var(--mobp-nota-lh) !important;
	color: var(--mobp-text-soft) !important;
	margin: var(--mobp-nota-mt) 0 0 !important;
	padding: 0 !important;
}

.mob-badges {
	width: var(--mobp-badges-w) !important;
	max-width: 100% !important;
	height: var(--mobp-badges-h) !important;
	display: flex !important;
	flex-direction: var(--mobp-badges-dir) !important;
	align-items: var(--mobp-badges-align) !important;
	justify-content: space-between !important;
	gap: var(--mobp-badges-gap) !important;
	margin-top: var(--mobp-badges-mt) !important;
	padding: 0 !important;
}

.mob-badge {
	display: flex !important;
	align-items: center !important;
	gap: var(--mobp-badge-gap) !important;
	height: var(--mobp-badge-h) !important;
	margin: 0 !important;
	padding: 0 !important;
}

.mob-badge svg {
	width: var(--mobp-badge-icon) !important;
	height: var(--mobp-badge-icon) !important;
	flex-shrink: 0 !important;
	display: block !important;
}

.mob-badge span {
	font-family: var(--mobp-font-head) !important;
	font-weight: var(--mobp-badge-weight) !important;
	font-size: var(--mobp-badge-fs) !important;
	color: var(--mobp-biscay) !important;
	white-space: nowrap !important;
	letter-spacing: normal !important;
	text-transform: none !important;
}

/* ══ DETALLES ═════════════════════════════════════════════════════════════ */

.mob-detalles {
	width: var(--mobp-detalles-w) !important;
	max-width: 100% !important;
	margin-top: var(--mobp-detalles-mt) !important;
	background: var(--mobp-white) !important;
	border: var(--mobp-detalles-border) solid var(--mobp-border) !important;
	border-radius: var(--mobp-detalles-radius) !important;
	overflow: hidden !important;
	padding: 0 !important;
}

.mob-tabs {
	display: flex !important;
	flex-wrap: var(--mobp-tabs-wrap) !important;
	gap: var(--mobp-tabs-gap) !important;
	padding: var(--mobp-tabs-pt) var(--mobp-tabs-pr) 0 var(--mobp-tabs-pl) !important;
	margin: 0 !important;
	list-style: none !important;
	border: 0 !important;
}

.mob-page .mob-tab,
.mob-page .mob-tab:hover,
.mob-page .mob-tab:focus,
.mob-page .mob-tab:active {
	font-family: var(--mobp-font-head) !important;
	font-weight: var(--mobp-tab-weight) !important;
	font-size: var(--mobp-tab-fs) !important;
	line-height: var(--mobp-tab-lh) !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	width: var(--mobp-tab-w) !important;
	height: auto !important;
	min-height: 0 !important;
	padding: var(--mobp-tab-py) var(--mobp-tab-px) !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: var(--mobp-tab-radius) !important;
	cursor: pointer !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: var(--mobp-row-alt) !important;
	background-image: none !important;
	color: var(--mobp-biscay) !important;
	white-space: nowrap !important;
	box-shadow: none !important;
	text-shadow: none !important;
	transform: none !important;
	text-decoration: none !important;
}

/* Después de la regla de estados, con la que empata en especificidad. */
.mob-page .mob-tab.is-active,
.mob-page .mob-tab.is-active:hover,
.mob-page .mob-tab.is-active:focus {
	background: var(--mobp-biscay) !important;
	color: var(--mobp-white) !important;
}

.mob-detalles-hr {
	height: var(--mobp-hr-h) !important;
	background: var(--mobp-border) !important;
	margin-top: var(--mobp-hr-mt) !important;
	border: 0 !important;
}

.mob-detalles-body {
	padding: var(--mobp-body-pt) var(--mobp-body-pr) var(--mobp-body-pb) var(--mobp-body-pl) !important;
	margin: 0 !important;
}

.mob-detalles-body[hidden] {
	display: none !important;
}

.mob-detalles-body p,
.mob-detalles-body li {
	font-family: var(--mobp-font-body) !important;
	font-weight: var(--mobp-body-weight) !important;
	font-size: var(--mobp-body-fs) !important;
	line-height: var(--mobp-body-lh) !important;
	letter-spacing: var(--mobp-body-ls) !important;
	color: var(--mobp-text-body) !important;
	margin: 0 0 var(--mobp-body-mb) !important;
	text-transform: none !important;
}

.mob-detalles-body p:last-child,
.mob-detalles-body li:last-child {
	margin-bottom: 0 !important;
}

.mob-detalles-body strong {
	font-weight: var(--mobp-body-strong) !important;
}

/* La tabla de «Información adicional» se pinta con nuestro propio marcado:
   wc_display_product_attributes() inyecta .shop_attributes, que el tema
   estila y se saldría del diseño. Reutiliza las filas de specs. */
.mob-detalles-tabla {
	width: 100% !important;
	border: var(--mobp-specs-border) solid var(--mobp-border) !important;
	border-radius: var(--mobp-specs-radius) !important;
	overflow: hidden !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* ══ Accesibilidad ════════════════════════════════════════════════════════ */

/* Va al final para que gane al `outline` que puedan traer las reglas de
   estado de arriba. Sólo con teclado: el :focus de ratón no pinta anillo. */
.mob-page :focus-visible {
	outline: 2px solid var(--mobp-curious-blue) !important;
	outline-offset: 2px !important;
}

.mob-page :focus:not(:focus-visible) {
	outline: 0 !important;
}

.mob-ficha__sr {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	clip: rect(1px, 1px, 1px, 1px) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
}