/* Product Categories — XStore look, no theme needed. */
.elementor-widget-n4x-categories .title { margin: 0 0 25px; color: #222; font-size: 22px; text-align: center; text-transform: uppercase; }
.categories-grid.row { --c-d: 3; display: flex; flex-wrap: wrap; margin-left: -15px; margin-right: -15px; }
.categories-grid.row > .category-grid { flex: 0 0 auto; width: calc(100% / var(--c-d)); padding-left: 15px; padding-right: 15px; margin-bottom: 30px; }
@media (max-width: 1024px) { .categories-grid.row > .category-grid { width: calc(100% / min(var(--c-d), 3)); } }
@media (max-width: 767px) { .categories-grid.row > .category-grid { width: calc(100% / min(var(--c-d), 2)); } }
.n4x-xs-cats .n4x-xs { --le-cols: var(--c-d); }
@media (max-width: 1024px) { .n4x-xs-cats .n4x-xs { --le-cols: var(--c-t); } }
@media (max-width: 767px) { .n4x-xs-cats .n4x-xs { --le-cols: var(--c-m); } }

.category-grid { position: relative; text-align: center; }
.category-grid > a { position: relative; display: block; overflow: hidden; color: inherit; text-decoration: none; }
.category-grid > a img { display: block; width: 100%; height: auto; max-width: 100% !important; transition: transform .3s ease, width .3s ease; transition-duration: .3s; }
.category-grid .category-bg { position: absolute; inset: 0; background-size: cover; background-position: 50% 50%; transition: transform .3s ease, width .3s ease; }
.category-grid.stretch-image > a { min-height: 150px; }
.category-grid.image-circle > a { border-radius: 50%; aspect-ratio: 1 / 1; }
.category-grid.image-circle > a img { height: 100%; object-fit: cover; }
.category-grid.image-circle.content-inside .categories-mask { background: none; }

/* Equal-size images: every image fills the same square box, cropped from the centre (like XStore / WooCommerce cropped thumbnails). */
.category-grid:not(.stretch-image) > a:has(img) { aspect-ratio: 1 / 1; }
.category-grid:not(.stretch-image) > a > img { position: absolute; inset: 0; height: 100% !important; object-fit: cover; object-position: center; }

/* Hover effects (values come from the Zoom Percent / Move Value controls) */
.category-grid[data-hover="zoom-in"]:hover img, .category-grid[data-hover="zoom-in"]:hover .category-bg { transform: scale(1.2); }
.category-grid[data-hover="zoom-out"] img, .category-grid[data-hover="zoom-out"] .category-bg { transform: scale(1.2); }
.category-grid[data-hover="zoom-out"]:hover img, .category-grid[data-hover="zoom-out"]:hover .category-bg { transform: none; }
.category-grid[data-hover="rtl"] img, .category-grid[data-hover="rtl"] .category-bg, .category-grid[data-hover="ltr"] img, .category-grid[data-hover="ltr"] .category-bg { max-width: none !important; width: calc(100% + 20px); }
.category-grid[data-hover="rtl"]:not(:hover) img, .category-grid[data-hover="rtl"]:not(:hover) .category-bg { transform: translateX(-20px); }
.category-grid[data-hover="ltr"]:hover img, .category-grid[data-hover="ltr"]:hover .category-bg { transform: translateX(-20px); }
.category-grid[data-hover="border-in"] img, .category-grid[data-hover="border-in"] .category-bg { transform: scale(1.2); }
.category-grid[data-hover="border-in"]:hover img, .category-grid[data-hover="border-in"]:hover .category-bg { transform: none; }
.category-grid[data-hover="border-in"] > a::after { content: ""; position: absolute; inset: 15px; z-index: 2; border: 1px solid #fff; opacity: 0; transform: scale(1.1); transition: opacity .3s, transform .3s; pointer-events: none; }
.category-grid[data-hover="border-in"]:hover > a::after { opacity: 1; transform: none; }

/* Overlay */
.category-grid[data-overlay] > a::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(0,0,0,.2); transition: background-color .3s; pointer-events: none; }
.category-grid[data-overlay]:hover > a::before { background: rgba(0,0,0,.35); }

/* Content mask */
.categories-mask { display: block; padding: 15px; color: #222; transition: all .3s ease; }
.categories-mask h4 { margin: 0; color: inherit; font-size: 16px; font-weight: 600; line-height: 1.3; text-transform: uppercase; letter-spacing: .02em; }
.categories-mask h4 sup { margin-left: 2px; color: #888; font-size: .65em; font-weight: 400; vertical-align: super; }
.categories-mask .count { display: block; color: #888; font-size: 14px; }
.categories-mask > *:not(:last-child) { margin-bottom: 3px; }
.categories-mask .read-more { display: inline-block; margin-top: 4px; padding-bottom: 1px; border-bottom: 1px solid currentColor; font-size: 13px; font-weight: 600; text-transform: uppercase; }
.category-grid.text-left .categories-mask { text-align: left; }
.category-grid.text-center .categories-mask { text-align: center; }
.category-grid.text-right .categories-mask { text-align: right; }

/* Content under the image */
.category-grid.content-under > .categories-mask { padding-left: 0; padding-right: 0; background: none; }
.category-grid.content-under > a img { margin-bottom: 0; }

/* Content inside the image */
.category-grid.content-inside .categories-mask { position: absolute; left: 10px; right: 10px; z-index: 3; background: rgba(255,255,255,.95); }
.category-grid.content-inside.valign-center .categories-mask { top: 50%; transform: translateY(-50%); }
.category-grid.content-inside.valign-top .categories-mask { top: 10px; }
.category-grid.content-inside.valign-bottom .categories-mask { bottom: 10px; }
.category-grid.stretch-image .categories-mask { left: 0 !important; right: 0 !important; bottom: 0; top: auto !important; transform: none !important; }
/* Reveal: extra lines appear on hover */
.category-grid[data-content-hover="reveal"] .categories-mask > :not(h4) { display: block; max-height: 0; overflow: hidden; margin: 0 !important; opacity: 0; transition: max-height .35s ease, opacity .35s ease, margin .35s ease; }
.category-grid[data-content-hover="reveal"]:hover .categories-mask > :not(h4), .category-grid[data-content-hover="reveal"]:focus-within .categories-mask > :not(h4) { max-height: 3em; opacity: 1; margin-top: 3px !important; }
.category-grid[data-content-hover="reveal"].type-style-3 .categories-mask > .count { order: -1; }
.elementor-editor-active .category-grid[data-content-hover="reveal"] .categories-mask > :not(h4) { max-height: 3em; opacity: 1; }

/* Menu display */
.categories-menu-element ul { margin: 0; padding: 0; list-style: none; }
.categories-menu-element li { padding: 6px 0; }
.categories-menu-element li a { color: #222; text-decoration: none; }
.categories-menu-element li a:hover, .categories-menu-element li.current-cat > a { color: var(--le-accent); }
.categories-menu-element .children { margin-top: 6px; padding-left: 15px; }