/*
 * OMC Category Showcase -- frontend styles for all 4 layouts.
 * Everything is scoped under .omccs-showcase / .omccs-layout-* so nothing
 * here leaks into the rest of the theme. Where a rule needs to override a
 * Flatsome/WooCommerce default on the reused .product card markup (width,
 * float, margin), !important is used deliberately and only on those
 * specific properties.
 */

.omccs-admin-notice {
	border: 1px dashed #d63638;
	padding: 8px 12px;
	color: #d63638;
	font-size: 0.9em;
}

.omccs-showcase a {
	text-decoration: none;
}

/* ---------- Container / page-margin matching ---------- */

/*
 * Each shortcode's markup gets wrapped (in class-omccs-shortcode.php) in a
 * .omccs-showcase-wrap that also carries Flatsome's own .container class --
 * same max-width, centering, and side padding as the rest of a normal page,
 * using the theme's real class instead of a hardcoded copy of its values, so
 * it stays correct even through theme updates. Without this, a shortcode
 * dropped into a full-width row or a full-width page template renders
 * edge-to-edge instead of matching the site's normal page margins.
 *
 * Flatsome itself never nests .container inside .container -- each row/page
 * only ever gets one -- so if a shortcode ends up placed inside a row that's
 * ALREADY boxed, this flattens the inner one back out to plain width: 100%
 * rather than doubling the side padding.
 */
.container .omccs-showcase-wrap.container {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
	margin-left: 0;
	margin-right: 0;
}

/* ---------- Even Grid ---------- */

ul.omccs-layout-grid.products {
	display: grid !important;
	grid-template-columns: repeat(var(--omccs-cols, 3), 1fr);
	gap: 24px;
	list-style: none;
	margin: 24px 0 !important;
	padding: 0 !important;
}

ul.omccs-layout-grid.products .product {
	width: auto !important;
	float: none !important;
	margin: 0 !important;
}

.omccs-grid-cols-3 {
	--omccs-cols: 3;
}

.omccs-grid-cols-4 {
	--omccs-cols: 4;
}

.omccs-grid-cols-5 {
	--omccs-cols: 5;
}

@media (max-width: 900px) {
	ul.omccs-layout-grid.products {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 560px) {
	ul.omccs-layout-grid.products {
		grid-template-columns: 1fr;
	}
}

/* ---------- Carousel / Slider ---------- */

.omccs-layout-carousel {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 24px 0;
}

ul.omccs-carousel-track.products {
	display: flex !important;
	gap: 20px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding: 4px 2px 16px;
	margin: 0 !important;
	flex: 1 1 auto;
	list-style: none;
	-webkit-overflow-scrolling: touch;
}

ul.omccs-carousel-track.products .product {
	scroll-snap-align: start;
	flex: 0 0 auto !important;
	width: 220px !important;
	float: none !important;
	margin: 0 !important;
}

.omccs-carousel-arrow {
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	line-height: 34px;
	text-align: center;
	font-size: 20px;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 50%;
	cursor: pointer;
	padding: 0;
}

.omccs-carousel-arrow:hover {
	background: #f5f5f5;
}

/* ---------- Mosaic ---------- */

.omccs-layout-mosaic {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: 160px;
	grid-auto-flow: dense;
	gap: 10px;
	margin: 24px 0;
}

.omccs-mosaic-tile {
	position: relative;
	display: block;
	overflow: hidden;
	background: #eee;
}

.omccs-mosaic-tile-large {
	grid-column: span 2;
	grid-row: span 2;
}

.omccs-mosaic-tile-small {
	grid-column: span 2;
	grid-row: span 1;
}

.omccs-mosaic-image {
	position: absolute;
	inset: 0;
}

.omccs-mosaic-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.3s ease;
}

.omccs-mosaic-tile:hover .omccs-mosaic-image img {
	transform: scale(1.05);
}

.omccs-mosaic-caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 12px 14px;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0));
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.omccs-mosaic-title {
	color: #fff;
	font-weight: 600;
	font-size: 1em;
}

.omccs-mosaic-price {
	color: #f2f2f2;
	font-size: 0.9em;
}

@media (max-width: 700px) {
	.omccs-layout-mosaic {
		grid-template-columns: 1fr;
		grid-auto-rows: 200px;
	}

	.omccs-mosaic-tile-large,
	.omccs-mosaic-tile-small {
		grid-column: span 1;
		grid-row: span 1;
	}

	.omccs-mosaic-tile-large {
		grid-row: span 2;
	}
}

/* ---------- Featured + List ---------- */

.omccs-layout-featured-list {
	display: flex;
	gap: 32px;
	align-items: flex-start;
	margin: 24px 0;
}

.omccs-featured-main {
	flex: 1 1 55%;
	display: flex;
	gap: 20px;
}

.omccs-featured-image {
	flex: 0 0 45%;
}

.omccs-featured-image img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 4px;
}

.omccs-featured-info {
	display: flex;
	flex-direction: column;
	gap: 10px;
	justify-content: center;
}

.omccs-featured-title {
	font-size: 1.25em;
	font-weight: 600;
	color: inherit;
}

.omccs-featured-price {
	font-size: 1.1em;
}

.omccs-featured-sidelist {
	flex: 1 1 45%;
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.omccs-featured-sidelist-item {
	display: flex;
	gap: 12px;
	align-items: center;
}

.omccs-featured-sidelist-image {
	flex: 0 0 auto;
}

.omccs-featured-sidelist-image img {
	width: 64px;
	height: 64px;
	object-fit: cover;
	display: block;
	border-radius: 4px;
}

.omccs-featured-sidelist-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.omccs-featured-sidelist-title {
	font-weight: 500;
	color: inherit;
}

.omccs-featured-sidelist-price {
	font-size: 0.9em;
	color: #666;
}

@media (max-width: 700px) {
	.omccs-layout-featured-list {
		flex-direction: column;
	}

	.omccs-featured-main {
		flex-direction: column;
	}

	.omccs-featured-image {
		flex: 0 0 auto;
	}
}