/*
 * Crista Tigma v5 — shop + category archive layout (round 3).
 * Loads on top of pdp.css (shared tokens, blurred grassland background, nav,
 * footer, glass treatment). Styles: unified shop-head board + image-led 70/30
 * category cards, borderless iOS-glass "Xem danh mục" pill, immersive image-led
 * category banners, and the image-first liquid-glass product cards.
 */

/* Archive reuses the PDP body chrome but has no sticky purchase bar, so drop the
   PDP-only mobile bottom padding (both classes → specificity beats the PDP rule). */
body.ct-v5-product-page.ct-v5-archive {
	padding-bottom: 0;
}

.ct-arc-shell {
	width: 100%;
	min-height: 100vh;
	padding: 96px 0 clamp(48px, 8vw, 92px);
	overflow-x: clip;
	color: var(--ct-ink);
}

/* ---- Shop head: ONE glass board holding the head text + the category cards -- */

.ct-arc-head {
	padding: clamp(14px, 3vw, 30px) 0 clamp(8px, 1.6vw, 16px);
}

.ct-arc-board {
	padding: clamp(20px, 3vw, 36px);
	border: 1px solid rgba(255, 255, 255, 0.5);
	border-radius: 30px;
	background: rgba(248, 255, 253, 0.42);
	box-shadow: var(--ct-shadow);
	backdrop-filter: blur(22px) saturate(1.3);
	-webkit-backdrop-filter: blur(22px) saturate(1.3);
}

.ct-arc-head-inner {
	margin-bottom: clamp(14px, 1.8vw, 20px);
}

.ct-arc-crumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 14px;
	color: var(--ct-muted);
	font-size: 12px;
	font-weight: 500;
}

.ct-arc-crumb a {
	color: var(--ct-teal-deep);
}

.ct-arc-crumb a:hover {
	text-decoration: underline;
}

.ct-arc-crumb-here {
	color: var(--ct-ink);
}

.ct-arc-title {
	margin: 0;
	color: var(--ct-ink);
	font-size: clamp(32px, 5vw, 54px);
	font-weight: 500;
	line-height: 1.05;
	letter-spacing: 0;
}

.ct-arc-intro {
	max-width: 680px;
	margin: 12px 0 0;
	color: var(--ct-muted);
	font-size: 15px;
	line-height: 1.7;
}

/* ---- Category cards: image-led, asymmetric 70/30 (pair) or even (>2) ------- */

.ct-cat-cards {
	display: grid;
	gap: clamp(12px, 1.6vw, 18px);
}

.ct-cat-cards--pair {
	grid-template-columns: 7fr 3fr;
}

.ct-cat-cards--even {
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.ct-cat-card {
	position: relative;
	display: block;
	min-height: 300px;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.5);
	border-radius: 24px;
	box-shadow: 0 30px 78px -50px rgba(20, 58, 64, 0.78);
	color: var(--ct-ink);
	transition: transform 0.32s ease, box-shadow 0.32s ease;
}

.ct-cat-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 42px 92px -46px rgba(20, 58, 64, 0.82);
}

.ct-cat-card-img {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 72% 42%;
	transition: transform 0.6s ease;
}

.ct-cat-card:hover .ct-cat-card-img {
	transform: scale(1.04);
}

.ct-cat-card-text {
	position: absolute;
	z-index: 2;
	left: 14px;
	right: 14px;
	bottom: 14px;
	display: flex;
	flex-direction: column;
	gap: 5px;
	max-width: min(320px, calc(100% - 28px));
	padding: 14px 16px;
	border-radius: 18px;
	background: rgba(248, 255, 253, 0.62);
	box-shadow: 0 18px 40px -22px rgba(12, 43, 51, 0.6);
	backdrop-filter: blur(16px) saturate(1.3);
	-webkit-backdrop-filter: blur(16px) saturate(1.3);
	color: var(--ct-ink);
}

.ct-cat-card-text .ct-section-kicker {
	margin: 0;
}

.ct-cat-card-name {
	color: var(--ct-ink);
	font-size: clamp(21px, 2.3vw, 30px);
	font-weight: 500;
	line-height: 1.08;
}

.ct-cat-card-line {
	color: var(--ct-muted);
	font-size: 12.5px;
	line-height: 1.55;
}

.ct-cat-card-cta {
	margin-top: 4px;
	color: var(--ct-teal-deep);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.ct-cat-card-cta span {
	display: inline-block;
	transition: transform 0.2s ease;
}

.ct-cat-card:hover .ct-cat-card-cta span {
	transform: translateX(4px);
}

/* The narrow (30%) card gets a tighter, more portrait crop favouring the figure. */
.ct-cat-cards--pair .ct-cat-card:nth-child(2) .ct-cat-card-img {
	object-position: 62% 30%;
}

/* ---- Category sections (grouped shop + section banners) ------------------- */

.ct-arc-section {
	padding: clamp(26px, 4vw, 44px) 0 0;
	scroll-margin-top: 104px;
}

.ct-arc-banner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 16px clamp(18px, 2.4vw, 26px);
	border: 1px solid rgba(255, 255, 255, 0.5);
	border-radius: 22px;
	background: linear-gradient(120deg, rgba(189, 241, 255, 0.34), rgba(246, 255, 253, 0.24) 52%, rgba(176, 226, 137, 0.3));
	box-shadow: var(--ct-shadow);
	backdrop-filter: blur(20px) saturate(1.32);
	-webkit-backdrop-filter: blur(20px) saturate(1.32);
}

.ct-arc-banner-label {
	min-width: 0;
}

.ct-arc-banner-label .ct-section-kicker {
	margin-bottom: 6px;
}

.ct-arc-banner h2 {
	margin: 0;
	color: var(--ct-ink);
	font-size: clamp(24px, 3.4vw, 40px);
	font-weight: 500;
	line-height: 1.06;
}

/* "Xem danh mục" pill — pure iOS-26 LIQUID GLASS: NO border, NO gradient tint,
   just a translucent white fill + heavy blur, a barely-there inner top shine via
   inset box-shadow, and a soft drop shadow. Scoped a.<class> to beat reset.css `a`. */
a.ct-arc-banner-link {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 42px;
	padding: 0 18px;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.2);
	color: var(--ct-teal-deep);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.02em;
	white-space: nowrap;
	box-shadow: 0 12px 28px -14px rgba(20, 58, 64, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.62);
	backdrop-filter: blur(22px) saturate(1.4);
	-webkit-backdrop-filter: blur(22px) saturate(1.4);
	transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

a.ct-arc-banner-link:hover {
	transform: translateY(-2px);
	background: rgba(255, 255, 255, 0.3);
	box-shadow: 0 18px 36px -14px rgba(20, 58, 64, 0.58), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.ct-arc-section-intro {
	max-width: 720px;
	margin: 16px 0 4px;
	color: var(--ct-muted);
	font-size: 14px;
	line-height: 1.7;
}

/* ---- Category page IMMERSIVE banner (image-led) --------------------------- */

.ct-arc-cat-hero {
	padding: clamp(14px, 3vw, 26px) 0 0;
}

.ct-arc-crumb--onbanner {
	margin-bottom: 14px;
	text-shadow: 0 1px 2px rgba(255, 255, 255, 0.55);
}

.ct-cat-hero-frame {
	position: relative;
	overflow: hidden;
	min-height: clamp(360px, 40vw, 500px);
	border: 1px solid rgba(255, 255, 255, 0.5);
	border-radius: 30px;
	box-shadow: var(--ct-shadow);
}

.ct-cat-hero-img {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.ct-cat-hero-panel {
	position: absolute;
	z-index: 2;
	top: 50%;
	left: clamp(16px, 3vw, 40px);
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	gap: 9px;
	width: min(420px, 56%);
	padding: clamp(20px, 2.4vw, 30px);
	border: 1px solid rgba(255, 255, 255, 0.55);
	border-radius: 24px;
	background: rgba(248, 255, 253, 0.55);
	box-shadow: 0 24px 60px -30px rgba(12, 43, 51, 0.6);
	backdrop-filter: blur(20px) saturate(1.3);
	-webkit-backdrop-filter: blur(20px) saturate(1.3);
	color: var(--ct-ink);
}

.ct-cat-hero-panel .ct-section-kicker {
	margin: 0;
}

.ct-cat-hero-h1 {
	margin: 0;
	font-size: clamp(30px, 4vw, 46px);
}

.ct-cat-hero-line {
	max-width: 380px;
	margin: 0;
	color: var(--ct-muted);
	font-size: 13.5px;
	line-height: 1.6;
}

.ct-cat-hero-price {
	margin: 0;
	color: var(--ct-ink);
	font-size: 13.5px;
}

.ct-cat-hero-price strong {
	color: var(--ct-teal-deep);
	font-weight: 700;
}

.ct-cat-hero-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin-top: 2px;
}

.ct-cat-hero-chips span {
	display: inline-flex;
	align-items: center;
	min-height: 30px;
	padding: 0 12px;
	border: 1px solid rgba(47, 147, 168, 0.22);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.5);
	color: var(--ct-teal-deep);
	font-size: 11px;
	font-weight: 600;
}

/* No-image fallback: the panel just becomes a normal glass block. */
.ct-cat-hero-frame--noimg {
	min-height: 0;
	border: 0;
	box-shadow: none;
}

.ct-cat-hero-frame--noimg .ct-cat-hero-panel {
	position: static;
	transform: none;
	width: auto;
}

/* ---- Product card grid ----------------------------------------------------- */

.ct-arc-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(12px, 2vw, 22px);
	margin-top: 22px;
}

.ct-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.5);
	border-radius: 22px;
	background: rgba(248, 255, 253, 0.56);
	box-shadow: 0 28px 72px -50px rgba(20, 58, 64, 0.72);
	backdrop-filter: blur(18px) saturate(1.24);
	-webkit-backdrop-filter: blur(18px) saturate(1.24);
	color: var(--ct-ink);
	transition: transform 0.32s ease, box-shadow 0.32s ease;
}

.ct-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 40px 90px -46px rgba(20, 58, 64, 0.8);
}

.ct-card-media {
	position: relative;
	display: block;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.28);
}

.ct-card-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.55s ease;
}

.ct-card-img--placeholder {
	display: block;
	background: linear-gradient(135deg, rgba(189, 241, 255, 0.5), rgba(176, 226, 137, 0.42));
}

.ct-card:hover .ct-card-img {
	transform: scale(1.05);
}

.ct-card-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	padding: 6px 12px;
	border-radius: 999px;
	background: rgba(240, 253, 250, 0.86);
	color: var(--ct-teal-deep);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.03em;
	box-shadow: 0 10px 24px -14px rgba(20, 58, 64, 0.6);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

.ct-card-body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 16px clamp(14px, 1.6vw, 18px) 18px;
}

.ct-card-title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	color: var(--ct-ink);
	font-size: 14.5px;
	font-weight: 500;
	line-height: 1.38;
}

.ct-card-price {
	color: var(--ct-teal-deep);
	font-size: 15px;
	font-weight: 700;
}

/* ---- Pagination + states --------------------------------------------------- */

.ct-arc-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-top: 34px;
}

.ct-arc-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	min-height: 42px;
	padding: 0 12px;
	border: 1px solid rgba(47, 147, 168, 0.24);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.5);
	color: var(--ct-teal-deep);
	font-size: 13px;
	font-weight: 600;
}

.ct-arc-pagination .page-numbers.current {
	background: var(--ct-teal-deep);
	color: #fff;
	border-color: transparent;
}

.ct-arc-pagination a.page-numbers:hover {
	background: rgba(238, 252, 248, 0.92);
}

.ct-arc-empty {
	padding: 40px 0;
	color: var(--ct-muted);
	font-size: 15px;
	text-align: center;
}

/* ---- Motion (gentle, opacity/transform only, no layout shift) --------------- */

@media (prefers-reduced-motion: no-preference) {
	.ct-card,
	.ct-cat-card {
		animation: ct-arc-fade-up 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) both;
	}

	.ct-arc-grid .ct-card:nth-child(2) { animation-delay: 0.06s; }
	.ct-arc-grid .ct-card:nth-child(3) { animation-delay: 0.12s; }
	.ct-arc-grid .ct-card:nth-child(4) { animation-delay: 0.18s; }
	.ct-arc-grid .ct-card:nth-child(5) { animation-delay: 0.24s; }
	.ct-arc-grid .ct-card:nth-child(n + 6) { animation-delay: 0.3s; }
	.ct-cat-cards .ct-cat-card:nth-child(2) { animation-delay: 0.08s; }
}

@keyframes ct-arc-fade-up {
	from {
		opacity: 0;
		transform: translateY(18px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ---- Responsive ------------------------------------------------------------ */

@media (max-width: 900px) {
	.ct-arc-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Category cards stack 1-up on mobile (both the 70/30 pair and the even case). */
	.ct-cat-cards--pair,
	.ct-cat-cards--even {
		grid-template-columns: 1fr;
	}

	.ct-cat-card {
		min-height: 260px;
	}

	.ct-cat-cards--pair .ct-cat-card:nth-child(2) .ct-cat-card-img {
		object-position: 68% 34%;
	}

	/* Immersive banner: image on top (fixed height), glass text block below it —
	   never covering the character; keeps it legible + no overflow. */
	.ct-arc-banner {
		gap: 10px;
	}

	.ct-cat-hero-frame {
		min-height: 0;
	}

	.ct-cat-hero-img {
		position: relative;
		height: clamp(300px, 62vw, 360px);
		object-position: 72% center;
	}

	.ct-cat-hero-panel {
		position: static;
		transform: none;
		width: auto;
		border: 0;
		border-radius: 0;
		box-shadow: none;
	}
}

@media (max-width: 480px) {
	/* Shrink the pill slightly so label + button fit one row at 360–390 (no wrap). */
	a.ct-arc-banner-link {
		min-height: 38px;
		padding: 0 13px;
		font-size: 11px;
	}

	.ct-arc-banner {
		padding: 14px 16px;
	}
}

@media (max-width: 360px) {
	.ct-arc-grid {
		grid-template-columns: 1fr;
	}
}