/* 4N-XStore core — shared tokens, buttons, grid. Loaded with any 4N-XStore widget (≈2 KB). */
:root {
	--le-accent: #e94b35;
	--le-dark: #1b1d21;
	--le-text: #5b6068;
	--le-muted: #8a8f98;
	--le-line: #e7e8eb;
	--le-soft: #f5f6f8;
	--le-radius: 8px;
	--le-ease: cubic-bezier(.2, .7, .2, 1);
}

[class^="le-"], [class*=" le-"], [class^="le-"] *, [class*=" le-"] *, [class^="le-"] *::before, [class^="le-"] *::after, [class^="n4x-"], [class*=" n4x-"], [class^="n4x-"] *, [class*=" n4x-"] *, [class^="n4x-"] *::before, [class^="n4x-"] *::after { box-sizing: border-box; }

.le-empty { padding: 24px; border: 1px dashed var(--le-line); color: var(--le-muted); text-align: center; border-radius: var(--le-radius); }
.n4x-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Buttons */
.le-btn:not(.n4x-z):not(.n4x-z):not(div) {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 12px 26px; border: 1px solid var(--le-accent); border-radius: var(--le-radius);
	background: var(--le-accent); color: #fff; font-weight: 600; font-size: 15px; line-height: 1.2;
	text-decoration: none; cursor: pointer; transition: background-color .25s, color .25s, border-color .25s, transform .25s var(--le-ease);
}
.le-btn:hover:not(.n4x-z):not(div):not(div) { background: var(--le-dark); border-color: var(--le-dark); color: #fff; }
.le-btn:focus-visible:not(.n4x-z):not(div):not(div) { outline: 2px solid var(--le-accent); outline-offset: 3px; }
.le-btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.75); }
.le-btn--ghost:hover { background: #fff; color: var(--le-dark); border-color: #fff; }
.le-btn--outline { background: transparent; color: var(--le-dark); border-color: currentColor; }
.le-btn--outline:hover { background: var(--le-dark); border-color: var(--le-dark); color: #fff; }
.le-btn svg, .le-btn i { width: 1em; height: 1em; font-size: 1em; fill: currentColor; }

/* Grid */
.le-items, .n4x-items { --le-cols: 4; --le-gap: 24px; position: relative; }
.le-items.is-grid, .n4x-items.is-grid { display: grid; grid-template-columns: repeat(var(--le-cols), minmax(0, 1fr)); gap: var(--le-gap); }

/* Block header (title + link) */
.n4x-block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 24px; padding-bottom: 12px; border-bottom: 1px solid var(--le-line); }
.n4x-block-head__title { margin: 0; color: var(--le-dark); font-size: 22px; font-weight: 700; }
.n4x-block-head__link { display: inline-flex; align-items: center; gap: 4px; color: var(--le-dark); font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.n4x-block-head__link:hover { color: var(--le-accent); }

/* Pagination */
.n4x-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 32px; }
.n4x-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 10px; border: 1px solid var(--le-line); border-radius: var(--le-radius); color: var(--le-dark); text-decoration: none; font-weight: 600; }
.n4x-pagination .page-numbers.current, .n4x-pagination a.page-numbers:hover { background: var(--le-dark); border-color: var(--le-dark); color: #fff; }
.n4x-loadmore-wrap { margin-top: 32px; text-align: center; }
.n4x-loadmore.is-loading { opacity: .6; pointer-events: none; }
.n4x-loadmore[data-infinite] { visibility: hidden; }

/* Icons inside widgets */
.n4x-icon { display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.n4x-icon svg { width: 1em; height: 1em; fill: currentColor; }

@media (prefers-reduced-motion: reduce) {
	[class^="n4x-"], [class*=" n4x-"] { scroll-behavior: auto !important; }
}

/* Some themes add inline max-width to attachment images; full-bleed widget images must still fill their box. */
.n4x-ic img, .n4x-hs__img, .n4x-hero__img, .n4x-ss__img, .n4x-gal__item img, .n4x-hsc__img img, .n4x-mc__media img, .n4x-cc__img img, .n4x-ca__slide img, .n4x-vtl__img img, .n4x-ig__item img, .n4x-modal__body.is-image img, .n4x-map__ph { max-width: 100% !important; }