/* ===== Product Catalog ===== */
/* ============================================
   LOWKEYS CATALOG
   Product filters, cards, states, variant UI.
   ============================================ */
.filters {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	flex-wrap: wrap;
}

.filter-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 38px;
	padding: 9px 15px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
	background: #fff;
	color: var(--color-ink-soft);
	font-size: 0.88rem;
	font-weight: var(--font-weight-semibold);
	transition:
		background-color var(--duration-base) var(--ease-smooth),
		border-color var(--duration-base) var(--ease-smooth),
		color var(--duration-base) var(--ease-smooth);
}

.filter-btn:hover,
.filter-btn:focus-visible {
	border-color: #111;
	color: #111;
}

.filter-btn.active {
	background: #111;
	border-color: #111;
	color: #fff;
}

.product-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(16px, 2vw, 24px);
	align-items: stretch;
}

.product-card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	height: 100%;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	background: var(--color-card);
	overflow: hidden;
	box-shadow: 0 1px 0 rgba(17, 17, 17, 0.02);
	transition:
		box-shadow var(--duration-base) var(--ease-smooth),
		border-color var(--duration-base) var(--ease-smooth);
}

.product-card:hover,
.product-card:focus-within {
	border-color: rgba(17, 17, 17, 0.16);
	box-shadow: 0 1px 0 rgba(17, 17, 17, 0.02);
}

.product-image-container {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 1 / 1.05;
	padding: clamp(18px, 3vw, 28px);
	background:
		radial-gradient(circle at 50% 28%, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0) 38%),
		linear-gradient(145deg, #fafafa, #f1f1ef);
	overflow: hidden;
}

.product-image-container::before,
.product-image-container::after {
	content: "";
	position: absolute;
	pointer-events: none;
}

.product-image-container::before {
	inset: 14px;
	border: 1px solid rgba(17, 17, 17, 0.06);
	border-radius: calc(var(--radius-lg) - 8px);
}

.product-image-container::after {
	right: -18%;
	bottom: -24%;
	width: 58%;
	aspect-ratio: 1;
	border-radius: 999px;
	background: rgba(17, 17, 17, 0.045);
}

.product-placeholder {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	align-content: center;
	gap: 12px;
	width: min(72%, 250px);
	aspect-ratio: 0.78;
	border: 1px solid rgba(17, 17, 17, 0.12);
	border-radius: clamp(18px, 3vw, 34px);
	background:
		linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.54)),
		#f8f8f6;
	box-shadow: 0 22px 54px rgba(17, 17, 17, 0.08);
	transition:
		opacity var(--duration-base) var(--ease-smooth),
		border-color var(--duration-base) var(--ease-smooth);
}

.product-placeholder-logo {
	display: block;
	width: clamp(62px, 42%, 126px);
	height: auto;
	object-fit: contain;
	opacity: 0.94;
	filter: none;
	user-select: none;
	pointer-events: none;
}

.product-placeholder-line {
	display: block;
	width: min(68px, 36%);
	height: 2px;
	border-radius: var(--radius-pill);
	background: rgba(17, 17, 17, 0.2);
}

.product-placeholder-name {
	font-family: var(--font-ui);
	font-size: 0.72rem;
	font-weight: var(--font-weight-bold);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-muted);
}

.product-card:hover .product-placeholder,
.product-card:focus-within .product-placeholder {
	border-color: rgba(17, 17, 17, 0.16);
}

.product-placeholder.is-switching {
	opacity: 0.42;

}

.product-image-container[data-color="black"] .product-placeholder,
.product-image-container[data-color="charcoal"] .product-placeholder,
.product-image-container[data-color="standard"] .product-placeholder,
.product-image-container[data-color="navy"] .product-placeholder {
	background:
		linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04)),
		#171717;
	border-color: rgba(17, 17, 17, 0.18);
}

.product-image-container[data-color="black"] .product-placeholder-logo,
.product-image-container[data-color="charcoal"] .product-placeholder-logo,
.product-image-container[data-color="standard"] .product-placeholder-logo,
.product-image-container[data-color="navy"] .product-placeholder-logo {
	filter: invert(1) brightness(1.08);
	opacity: 0.96;
}

.product-image-container[data-color="black"] .product-placeholder-line,
.product-image-container[data-color="charcoal"] .product-placeholder-line,
.product-image-container[data-color="standard"] .product-placeholder-line,
.product-image-container[data-color="navy"] .product-placeholder-line {
	background: rgba(255, 255, 255, 0.36);
}

.product-image-container[data-color="black"] .product-placeholder-name,
.product-image-container[data-color="charcoal"] .product-placeholder-name,
.product-image-container[data-color="standard"] .product-placeholder-name,
.product-image-container[data-color="navy"] .product-placeholder-name {
	color: rgba(255, 255, 255, 0.68);
}

.product-status-chip {
	font-family: var(--font-ui);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	min-height: 20px;
	padding: 4px 8px;
	border: 1px solid transparent;
	border-radius: var(--radius-pill);
	font-size: 0.61rem;
	font-weight: var(--font-weight-bold);
	line-height: 1;
	letter-spacing: 0.055em;
	text-transform: uppercase;
	white-space: nowrap;
}

.product-status-chip--baru {
	border-color: #d7eafb;
	background: #edf7ff;
	color: #2d6684;
}

.product-status-chip--terlaris {
	border-color: #f3e2bd;
	background: #fff7e8;
	color: #8a6423;
}

.product-status-chip--unisex-fit {
	border-color: #d7eadc;
	background: #f0faf2;
	color: #386846;
}

.product-status-chip--unggulan {
	border-color: #e5dcf7;
	background: #f6f1ff;
	color: #65518c;
}

.product-status-chip--terbatas {
	border-color: #f3d7dc;
	background: #fff1f3;
	color: #8a4653;
}

.product-info {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 10px;
	padding: clamp(15px, 2vw, 20px);
	min-width: 0;
}

.product-category {
	font-family: var(--font-ui);
	color: var(--color-muted);
	font-size: 0.75rem;
	font-weight: var(--font-weight-bold);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.product-title {
	font-family: var(--font-display);
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 7px 8px;
	font-size: clamp(1rem, 1.8vw, 1.18rem);
	line-height: 1.15;
	font-weight: var(--font-weight-bold);
	letter-spacing: -0.025em;
	color: #111;
}

.product-title-text {
	min-width: 0;
}

.product-description {
	font-family: var(--font-body);
	font-weight: var(--font-weight-regular);
	color: var(--color-muted);
	font-size: 0.9rem;
	line-height: 1.48;
}

.product-rating {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.84rem;
	color: #111;
}

.stars {
	display: inline-flex;
	align-items: center;
	gap: 1px;
}

.review-count {
	color: var(--color-muted);
	font-weight: var(--font-weight-medium);
}

.product-stock {
	font-family: var(--font-ui);
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	min-height: 26px;
	padding: 5px 9px;
	border-radius: var(--radius-pill);
	font-size: 0.76rem;
	font-weight: var(--font-weight-semibold);
}

.stock-available {
	background: rgba(31, 143, 95, 0.1);
	color: var(--color-success);
}

.stock-low {
	background: rgba(169, 120, 24, 0.12);
	color: var(--color-warning);
}

.stock-out {
	background: rgba(214, 64, 69, 0.1);
	color: var(--color-danger);
}

.product-variants-ui {
	display: grid;
	gap: 8px;
	margin-top: 2px;
}

.variant-group {
	display: grid;
	gap: 5px;
}

.variant-group label {
	font-family: var(--font-ui);
	color: var(--color-muted);
	font-size: 0.76rem;
	font-weight: var(--font-weight-bold);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.size-options,
.color-options {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
}

.size-options {
	flex-wrap: nowrap;
}

.size-btn {
	font-family: var(--font-ui);
	display: inline-grid;
	place-items: center;
	min-width: 30px;
	height: 28px;
	padding-inline: 9px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
	background: #fff;
	color: #111;
	font-size: 0.74rem;
	font-weight: var(--font-weight-bold);
	line-height: 1;
	white-space: nowrap;
	transition:
		background-color var(--duration-base) var(--ease-smooth),
		border-color var(--duration-base) var(--ease-smooth),
		color var(--duration-base) var(--ease-smooth);
}

.size-btn:hover,
.size-btn:focus-visible,
.size-btn.active {
	background: #111;
	border-color: #111;
	color: #fff;
}

.color-swatch {
	position: relative;
	width: 28px;
	height: 18px;
	border: 1px solid rgba(17, 17, 17, 0.16);
	border-radius: var(--radius-pill);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.82);
	transition:
		transform var(--duration-base) var(--ease-smooth),
		box-shadow var(--duration-base) var(--ease-smooth),
		border-color var(--duration-base) var(--ease-smooth);
}

.color-swatch--white { background: #ffffff; }
.color-swatch--black { background: #2d3436; }
.color-swatch--grey { background: #b2bec3; }
.color-swatch--blue { background: #7da6c8; }
.color-swatch--cream { background: #efe7d8; }
.color-swatch--olive { background: #6f7b50; }
.color-swatch--navy { background: #23324a; }
.color-swatch--charcoal { background: #3c3f44; }
.color-swatch--abstract { background: #a79682; }
.color-swatch--standard { background: #111827; }

.color-swatch:hover,
.color-swatch:focus-visible {
	border-color: rgba(17, 17, 17, 0.28);
}

.color-swatch.active {
	border-color: #111;
	box-shadow:
		0 0 0 1px #111,
		inset 0 0 0 1px rgba(255, 255, 255, 0.82);
}

.product-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: auto;
	padding-top: 2px;
}

.product-price {
	font-family: var(--font-ui);
	font-size: clamp(1rem, 2vw, 1.15rem);
	font-weight: var(--font-weight-bold);
	letter-spacing: -0.015em;
	white-space: nowrap;
}

.add-to-cart-btn {
	font-family: var(--font-ui);
	font-weight: var(--font-weight-semibold);
	min-height: 38px;
	padding: 10px 14px;
	border-radius: var(--radius-pill);
	background: #111;
	color: #fff;
	font-size: 0.86rem;
	white-space: nowrap;
}

.add-to-cart-btn.added {
	background: var(--color-success);
}

.search-empty {
	grid-column: 1 / -1;
	min-height: 240px;
	display: grid;
	place-items: center;
	align-content: center;
	gap: 8px;
	padding: 36px 20px;
	border: 1px dashed var(--color-border-strong);
	border-radius: var(--radius-lg);
	background: var(--color-bg-soft);
	text-align: center;
}

.search-empty h3 {
	font-family: var(--font-display);
	font-size: 1.25rem;
	font-weight: var(--font-weight-bold);
	letter-spacing: -0.03em;
}

.search-empty p {
	max-width: 520px;
	color: var(--color-muted);
}