/* =========================================================
   One Meter Product Catalogue — frontend styling
   Every rule is scoped under .om-cat so it cannot leak into
   the Elementor Hero or any other section.
   ========================================================= */

.om-cat {
	--omcat-red: #FF0C2B;
	--omcat-red-dark: #DF0029;
	--omcat-ink: #202837;
	--omcat-surface: #FFFFFF;
	--omcat-neutral: #F7F7F5;
	--omcat-muted: rgba(32, 40, 55, 0.66);
	--omcat-on-red-muted: rgba(255, 255, 255, 0.82);

	box-sizing: border-box;
	position: relative;
	display: block;
	width: 100%;
	margin-top: 0;
	margin-bottom: 0;
	padding: clamp(38px, 4.4vw, 76px) clamp(16px, 3.4vw, 52px) clamp(44px, 5vw, 88px);
	overflow: hidden;
	/* Client revision (2026-09-29): the flat red is replaced by the supplied
	   concentric-arc PNG as the section background. One cover-sized copy,
	   anchored to the top, no tiling; the solid red stays underneath as the
	   fallback colour. */
	background-color: #FF0C2B;
	background-image: url("https://onemeterindonesia.com/wp-content/uploads/2026/09/ChatGPT-Image-Sep-29-2026-06_38_58-PM.png");
	background-position: center top;
	background-size: cover;
	background-repeat: no-repeat;
	border-radius: 0;
	font-family: 'Alibaba PuHuiTi 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
	color: #FFFFFF;
	-webkit-font-smoothing: antialiased;
}

/* Client history: the concentric stripe pattern that was first drawn with
   ::before/::after was removed on 2026-09-29 in favour of flat red, and is now
   provided again as the supplied PNG background-image on .om-cat itself.
   No ::before/::after layers are used any more. */

.om-cat > * {
	position: relative;
	z-index: 1;
}

.om-cat *,
.om-cat *::before,
.om-cat *::after {
	box-sizing: border-box;
}

/* Page 53's first Elementor container supplied the remaining 10px gap
   beneath the hero. Reset only these two section wrappers, never globally. */
body.page-id-53 .elementor-element-3ab6a33,
body.page-id-53 .elementor-element-00bf80b {
	margin-block: 0 !important;
	padding-block: 0 !important;
	gap: 0 !important;
}

body.page-id-53 .elementor-element-845b93a,
body.page-id-53 .elementor-element-845b93a .elementor-shortcode {
	margin-block: 0 !important;
	padding-block: 0 !important;
}

/* =========================================================
   FILTER BAR
   ========================================================= */
.om-cat__bar {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(12px, 1.4vw, 18px);
}

.om-cat__filters,
.om-cat__subfilters {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(8px, 0.9vw, 14px);
	width: 100%;
}

.om-cat__subfilters[hidden] {
	display: none;
}

.om-cat__subfilters {
	animation: omCatFadeIn 0.3s ease both;
}

.om-cat__pill,
.om-cat__subpill {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-family: inherit;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	border: 0;
	border-radius: 999px;
	transition: background-color 0.28s ease, color 0.28s ease, transform 0.28s ease, box-shadow 0.28s ease;
	-webkit-appearance: none;
	appearance: none;
}

.om-cat__pill {
	font-size: clamp(14px, 1.05vw, 16px);
	padding: clamp(13px, 1.2vw, 17px) clamp(20px, 2vw, 30px);
	background: rgba(255, 255, 255, .94);
	color: var(--omcat-ink);
	box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .36);
}

.om-cat__pill:hover {
	transform: translateY(-2px);
	background: #FFFFFF;
	box-shadow: 0 12px 24px rgba(223, 0, 41, 0.20);
}

.om-cat__pill.is-active {
	background: var(--omcat-red);
	color: #fff;
	box-shadow: 0 14px 28px rgba(223, 0, 41, 0.30);
}

.om-cat__pill-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.15em;
	height: 1.15em;
	flex: 0 0 auto;
	opacity: 0.9;
}

.om-cat__pill-icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

.om-cat__pill.is-active .om-cat__pill-icon {
	opacity: 1;
}

.om-cat__subpill {
	font-size: clamp(12.5px, 0.95vw, 14px);
	padding: 10px 20px;
	background: rgba(255, 255, 255, .14);
	color: #FFFFFF;
	box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .44);
}

.om-cat__subpill:hover {
	transform: translateY(-2px);
	background: rgba(255, 255, 255, .24);
}

.om-cat__subpill.is-active {
	background: #FFFFFF;
	color: var(--omcat-red);
	box-shadow: 0 10px 20px rgba(223, 0, 41, 0.24);
}

/* =========================================================
   SECTION HEADING
   ========================================================= */
.om-cat__heading {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	margin: clamp(26px, 3vw, 44px) 0 clamp(22px, 2.6vw, 40px);
	text-align: center;
}

.om-cat__heading-title {
	margin: 0;
	font-family: inherit;
	font-size: clamp(28px, 3.4vw, 46px);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: #FFFFFF;
}

.om-cat__heading-count {
	margin: 0;
	font-size: clamp(13px, 1.05vw, 15px);
	font-weight: 400;
	letter-spacing: 0.01em;
	color: var(--omcat-on-red-muted);
}

/* =========================================================
   GRID
   ========================================================= */
.om-cat__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(16px, 1.9vw, 30px);
}

/* =========================================================
   CARD
   ========================================================= */
.om-cat__card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--omcat-surface);
	border-radius: clamp(22px, 1.9vw, 28px);
	box-shadow: 0 10px 26px rgba(223, 0, 41, 0.16);
	animation: omCatCardIn 0.42s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.om-cat__card.is-hidden {
	display: none;
}

.om-cat__media {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	padding: clamp(20px, 2vw, 32px);
	background: var(--omcat-neutral);
}

.om-cat__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.om-cat__card:hover .om-cat__media img,
.om-cat__card:focus-visible .om-cat__media img {
	transform: scale(1.05);
}

/* Luck Milk is a tall, uncropped PNG. Blocksy's global responsive image rule
   otherwise wins the height cascade and clips its bottle in this square stage.
   Keep this exception local to product ID 97 and retain its native proportion. */
.om-cat__card--product-97 .om-cat__media img {
	width: auto !important;
	height: 100% !important;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	object-position: center;
}

.om-cat__card--product-97:hover .om-cat__media img,
.om-cat__card--product-97:focus-visible .om-cat__media img {
	transform: none;
}

/* =========================================================
   GELATO-ONLY IMAGE NORMALISATION
   =========================================================
   The catalogue frame deliberately uses `contain` so the source images are
   never cropped. Caramel Cookies is the only Gelato artwork whose landscape
   canvas makes its product materially smaller than the other flavours. The
   card-local scale trims only the PNG's empty outer margin while preserving
   the full cone and the separate cookie garnish. No other filter receives
   this class or rule. */
.om-cat__card--gelato-product-64 .om-cat__media img {
	transform: scale(1.5);
}

.om-cat__card--gelato-product-64:hover .om-cat__media img,
.om-cat__card--gelato-product-64:focus-visible .om-cat__media img {
	transform: scale(1.575);
}

/* Keep every other Gelato flavour inside the same safe visual range as the
   Caramel Cookies reference. This remains limited to the 11 Gelato product
   identifiers; no card in another filter can match this selector. */
.om-cat__card:is(
	.om-cat__card--gelato-product-63,
	.om-cat__card--gelato-product-65,
	.om-cat__card--gelato-product-66,
	.om-cat__card--gelato-product-67,
	.om-cat__card--gelato-product-68,
	.om-cat__card--gelato-product-69,
	.om-cat__card--gelato-product-70,
	.om-cat__card--gelato-product-71,
	.om-cat__card--gelato-product-72,
	.om-cat__card--gelato-product-73,
	.om-cat__card--gelato-product-74
) .om-cat__media img,
.om-cat__card:is(
	.om-cat__card--gelato-product-63,
	.om-cat__card--gelato-product-65,
	.om-cat__card--gelato-product-66,
	.om-cat__card--gelato-product-67,
	.om-cat__card--gelato-product-68,
	.om-cat__card--gelato-product-69,
	.om-cat__card--gelato-product-70,
	.om-cat__card--gelato-product-71,
	.om-cat__card--gelato-product-72,
	.om-cat__card--gelato-product-73,
	.om-cat__card--gelato-product-74
):hover .om-cat__media img,
.om-cat__card:is(
	.om-cat__card--gelato-product-63,
	.om-cat__card--gelato-product-65,
	.om-cat__card--gelato-product-66,
	.om-cat__card--gelato-product-67,
	.om-cat__card--gelato-product-68,
	.om-cat__card--gelato-product-69,
	.om-cat__card--gelato-product-70,
	.om-cat__card--gelato-product-71,
	.om-cat__card--gelato-product-72,
	.om-cat__card--gelato-product-73,
	.om-cat__card--gelato-product-74
):focus-visible .om-cat__media img {
	transform: scale(0.8);
}

/* Restore the catalogue's original 5% hover lift, relative to each Gelato
   image's safe resting scale. */
.om-cat__card:is(
	.om-cat__card--gelato-product-63,
	.om-cat__card--gelato-product-65,
	.om-cat__card--gelato-product-66,
	.om-cat__card--gelato-product-67,
	.om-cat__card--gelato-product-68,
	.om-cat__card--gelato-product-69,
	.om-cat__card--gelato-product-70,
	.om-cat__card--gelato-product-71,
	.om-cat__card--gelato-product-72,
	.om-cat__card--gelato-product-73,
	.om-cat__card--gelato-product-74
):hover .om-cat__media img,
.om-cat__card:is(
	.om-cat__card--gelato-product-63,
	.om-cat__card--gelato-product-65,
	.om-cat__card--gelato-product-66,
	.om-cat__card--gelato-product-67,
	.om-cat__card--gelato-product-68,
	.om-cat__card--gelato-product-69,
	.om-cat__card--gelato-product-70,
	.om-cat__card--gelato-product-71,
	.om-cat__card--gelato-product-72,
	.om-cat__card--gelato-product-73,
	.om-cat__card--gelato-product-74
):focus-visible .om-cat__media img {
	transform: scale(0.84);
}

/* Coffee's tall artwork reads slightly larger than the nearby Avocado Pandan
   and Durian images at the shared Gelato scale. Reduce this card alone while
   retaining the centred, contained source image. */
.om-cat__card.om-cat__card--gelato-product-73 .om-cat__media img {
	transform: scale(0.65);
}

.om-cat__card.om-cat__card--gelato-product-73:hover .om-cat__media img,
.om-cat__card.om-cat__card--gelato-product-73:focus-visible .om-cat__media img {
	transform: scale(0.6825);
}

/* Avocado Pandan's landscape source needs a modest card-local increase to
   align visually with the portrait Matcha and Durian artwork. */
.om-cat__card.om-cat__card--gelato-product-72 .om-cat__media img {
	transform: scale(1);
}

.om-cat__card.om-cat__card--gelato-product-72:hover .om-cat__media img,
.om-cat__card.om-cat__card--gelato-product-72:focus-visible .om-cat__media img {
	transform: scale(1.05);
}

.om-cat__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 8px;
	padding: clamp(16px, 1.5vw, 24px);
}

.om-cat__title {
	margin: 0;
	font-family: inherit;
	font-size: clamp(15.5px, 1.15vw, 18.5px);
	font-weight: 700;
	line-height: 1.25;
	color: var(--omcat-ink);
}

.om-cat__desc {
	margin: 0;
	font-size: clamp(12.5px, 0.95vw, 14px);
	font-weight: 400;
	line-height: 1.55;
	color: var(--omcat-muted);
}

/* =========================================================
   EMPTY STATE + ANIMATIONS
   ========================================================= */
.om-cat--empty {
	text-align: center;
}

.om-cat__empty {
	margin: 0;
	font-size: 15px;
	color: var(--omcat-muted);
}

@keyframes omCatCardIn {
	from {
		opacity: 0;
		transform: translateY(14px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes omCatFadeIn {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.om-cat__card,
	.om-cat__subfilters {
		animation: none;
	}
	.om-cat__card,
	.om-cat__media img,
	.om-cat__pill,
	.om-cat__subpill {
		transition: none;
	}
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1199px) {
	.om-cat__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 899px) {
	.om-cat__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* filter bar becomes horizontally scrollable on small screens */
@media (max-width: 699px) {
	.om-cat__filters {
		justify-content: flex-start;
		flex-wrap: nowrap;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding: 4px 2px 8px;
	}
	.om-cat__filters::-webkit-scrollbar {
		display: none;
	}
	.om-cat__filters::after {
		content: '';
		flex: 0 0 2px;
	}
}

@media (max-width: 599px) {
	.om-cat {
		padding: 30px 14px 44px;
		margin-top: 0;
		border-radius: 0;
		/* Same image, same cover sizing; the tall single-column section is
		   anchored to the tighter part of the arcs so the pattern stays
		   readable instead of showing one oversized blob. */
		background-position: 28% top;
	}
	.om-cat__grid {
		gap: 12px;
	}
	.om-cat__media {
		padding: 12px;
	}
	.om-cat__body {
		gap: 5px;
		padding: 13px;
	}
	.om-cat__title {
		font-size: 14.5px;
	}
	.om-cat__desc {
		font-size: 12px;
		line-height: 1.45;
	}
	.om-cat__heading {
		margin: 20px 0 18px;
	}
}

@media (max-width: 359px) {
	.om-cat__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}