/*
 * Category tiles.
 *
 * Two defects, both visible on the "شکلات خانواده" tile:
 *
 * 1. The category has no thumbnail set in WooCommerce, so the theme falls back
 *    to woocommerce-placeholder.png. With `object-fit: fill` and a collapsed
 *    wrapper it renders as a 2x2px sliver under the tile — the stray artifact.
 *    The real fix is assigning category images in wp-admin; until then the
 *    placeholder is hidden rather than left to draw itself.
 *
 * 2. The title and count are dark navy (#003751 / #001430) sitting on dark
 *    product photography, which makes them close to invisible. They are set in
 *    the theme options, so they cannot be corrected by a deployable DB change.
 */

/* 1. Suppress the collapsed placeholder. */
.wd-cat img.woocommerce-placeholder,
.wd-cat .wd-cat-thumb:has(img.woocommerce-placeholder) {
	display: none !important;
}

/* Browsers without :has() still lose the sliver via the img rule above. */
.wd-cat .wd-cat-thumb {
	min-width: 0;
}

.wd-cat .wd-cat-image {
	width: auto;
}

/*
 * 2. Legible text over photography.
 *
 * A scrim behind the content rather than a heavier text-shadow: shadows alone
 * fail when the underlying image happens to be light, whereas a gradient
 * guarantees contrast whatever the photo does.
 */
.wd-cat .wd-cat-content {
	position: relative;
	z-index: 2;
	padding: 14px 16px;
}

.wd-cat .wd-cat-content::before {
	content: '';
	position: absolute;
	inset: -8px -8px -14px;
	z-index: -1;
	border-radius: 10px;
	background: linear-gradient(to top, rgba(14, 9, 5, 0.82) 0%, rgba(14, 9, 5, 0.55) 55%, rgba(14, 9, 5, 0) 100%);
	pointer-events: none;
}

.wd-cat .wd-entities-title,
.wd-cat .wd-entities-title a {
	color: #fff !important;
	font-weight: 700;
	text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55);
}

.wd-cat .wd-cat-count,
.wd-cat .wd-cat-count a {
	color: rgba(255, 255, 255, 0.82) !important;
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}

/* Softens the tile edge so it sits with the rest of the warm page. */
.wd-cat.categories-with-shadow {
	border-radius: 12px;
	overflow: hidden;
}

/*
 * 3. The tile is offset from the photo it sits on.
 *
 * The categories row is five Elementor columns, each carrying a product photo
 * as a *column background image*. Only the first holds a widget — the category
 * tile — and that widget is absolutely positioned (_position: absolute).
 *
 * Its offsets do not line up with the column: measured at 412px wide the widget
 * box starts at y=2428 while its column starts at y=2455. So the tile hangs 27px
 * above the photograph, leaving a bare strip of the page showing through at the
 * top and 27px of un-scrimmed photo exposed below it. That strip is the stray
 * artifact under the tile, and the misfit is why the image looks shifted up.
 *
 * Pinning the widget to its containing block makes the tile cover the photo
 * exactly, at any height, in either direction. The absolute positioning itself
 * is kept — overlaying the column background is the intended design.
 */
.elementor-element-cf18619.elementor-absolute {
	inset: 0 !important;
	width: auto !important;
	max-width: none !important;
}

/*
 * With the tile now filling the column, the content sits against the bottom
 * edge of the photo rather than floating mid-air.
 */
.elementor-element-cf18619 .wd-cat-inner {
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}