/*
 * Component dùng lại: nút, thẻ sản phẩm, badge, form, carousel.
 * Phụ thuộc: tokens.css, base.css.
 */

/* ---------------------------------------------------------------
 * NÚT
 * --------------------------------------------------------------- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
	min-height: 48px; /* Vùng chạm tối thiểu trên di động. */
	padding: var(--sp-3) var(--sp-6);
	border: 1px solid transparent;
	border-radius: var(--r-none);
	font-family: var(--f-ui);
	font-size: var(--fs-xs);
	line-height: var(--lh-12);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-wider);
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
	cursor: pointer;
	transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
		border-color var(--dur) var(--ease);
}

.btn--primary {
	background: var(--c-navy);
	border-color: var(--c-navy);
	color: var(--c-white);
}

.btn--primary:hover {
	background: var(--c-navy-700);
	border-color: var(--c-navy-700);
}

.btn--gold {
	background: var(--c-gold);
	border-color: var(--c-gold);
	color: var(--c-navy);
}

.btn--gold:hover {
	background: var(--c-gold-bright);
	border-color: var(--c-gold-bright);
}

.btn--outline {
	background: transparent;
	border-color: currentColor;
	color: var(--c-text);
}

.btn--outline:hover {
	background: var(--c-text);
	color: var(--c-bg);
}

.btn--ghost {
	background: transparent;
	padding-inline: 0;
	min-height: auto;
	color: var(--c-accent-text);
	border-bottom: 1px solid var(--c-gold);
	padding-bottom: var(--sp-1);
}

.btn--ghost:hover {
	color: var(--c-text);
	border-bottom-color: currentColor;
}

.btn--block {
	width: 100%;
}

.btn[disabled],
.btn[aria-disabled='true'] {
	opacity: 0.5;
	cursor: not-allowed;
}

/* ---------------------------------------------------------------
 * BADGE
 * --------------------------------------------------------------- */

.badge {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-1);
	padding: 3px var(--sp-2);
	background: var(--c-gold-soft);
	color: var(--c-gold-ink);
	font-size: var(--fs-2xs);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	white-space: nowrap;
}

.badge--dark {
	background: var(--c-navy);
	color: var(--c-gold-bright);
}

.badge--sold {
	background: var(--c-mist);
	color: var(--c-muted);
}

/* ---------------------------------------------------------------
 * THẺ SẢN PHẨM
 * --------------------------------------------------------------- */

.product-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
	background: var(--c-white);
}

.product-card__media {
	position: relative;
	display: block;
}

.product-card__img {
	transition: transform var(--dur-slow) var(--ease);
}

.product-card:hover .product-card__img {
	transform: scale(1.04);
}

/* Badge nổi trên góc ảnh. */
.product-card__flags {
	position: absolute;
	top: var(--sp-3);
	left: var(--sp-3);
	z-index: var(--z-base);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--sp-1);
}

.product-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	text-align: center;
}

.product-card__brand {
	font-size: var(--fs-2xs);
	font-weight: var(--fw-medium);
	letter-spacing: var(--ls-widest);
	text-transform: uppercase;
	color: var(--c-text-muted);
}

.product-card__title {
	font-family: var(--f-head);
	font-size: var(--fs-md);
	font-weight: var(--fw-medium);
	line-height: var(--lh-snug);
	letter-spacing: 0;
	margin: 0;
}

.product-card__title a {
	text-decoration: none;
}

/*
 * Tên đồng hồ trong dữ liệu nguồn có thể rất dài — ví dụ
 * "TRIBUTE TO GREAT CIVILISATIONS - ATHÉNA DE VELLETRI".
 * Giới hạn 2 dòng để lưới không vỡ.
 */
.product-card__title a {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.product-card__ref {
	font-size: var(--fs-xs);
	color: var(--c-text-muted);
	font-variant-numeric: tabular-nums;
}

.product-card__price {
	font-size: var(--fs-base);
	font-weight: var(--fw-semibold);
	font-variant-numeric: tabular-nums;
	color: var(--c-text);
}

/* Đồng hồ chưa có giá — xem docs/PLAN.md §7. */
.product-card__price--ask {
	font-weight: var(--fw-medium);
	font-size: var(--fs-sm);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	color: var(--c-accent-text);
}

/* Cả thẻ là vùng bấm, nhưng chỉ tiêu đề mới là link thật cho trình đọc. */
.product-card__link::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: var(--z-base);
}

/* ---------------------------------------------------------------
 * LƯỚI SẢN PHẨM
 * --------------------------------------------------------------- */

.product-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: var(--sp-6) var(--sp-5);
}

@media (max-width: 480px) {
	.product-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--sp-5) var(--sp-3);
	}
}

/* ---------------------------------------------------------------
 * CAROUSEL
 *
 * Vanilla, không jQuery và không thư viện. Cuộn ngang bằng scroll-snap
 * của trình duyệt; JS chỉ lo nút prev/next và trạng thái disabled.
 * Không có JS thì vẫn vuốt được — đây là điểm hơn hẳn slick.
 * --------------------------------------------------------------- */

.carousel {
	position: relative;
}

.carousel__viewport {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(230px, 1fr);
	gap: var(--sp-5);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--gutter);
	scrollbar-width: none;
	padding-bottom: var(--sp-2);
}

.carousel__viewport::-webkit-scrollbar {
	display: none;
}

.carousel__item {
	scroll-snap-align: start;
}

@media (min-width: 961px) {
	.carousel__viewport {
		grid-auto-columns: calc((100% - var(--sp-5) * 3) / 4);
	}
}

@media (max-width: 960px) {
	.carousel__viewport {
		grid-auto-columns: calc((100% - var(--sp-5)) / 2);
	}
}

@media (max-width: 480px) {
	.carousel__viewport {
		grid-auto-columns: 74%;
	}
}

.carousel__nav {
	display: flex;
	justify-content: center;
	gap: var(--sp-3);
	margin-top: var(--sp-6);
}

.carousel__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--c-border);
	color: var(--c-text);
	transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.carousel__btn:hover:not([disabled]) {
	background: var(--c-navy);
	border-color: var(--c-navy);
	color: var(--c-white);
}

.carousel__btn[disabled] {
	opacity: 0.3;
	cursor: not-allowed;
}

/* ---------------------------------------------------------------
 * FORM
 * --------------------------------------------------------------- */

.field {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
}

.field__label {
	font-size: var(--fs-xs);
	font-weight: var(--fw-medium);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	color: var(--c-text-muted);
}

.field__input,
.field__select,
.field__textarea {
	width: 100%;
	min-height: 48px;
	padding: var(--sp-3) var(--sp-4);
	background: var(--c-bg);
	border: 1px solid var(--c-field-border);
	border-radius: var(--r-field);
	font-size: var(--fs-base);
	transition:
		border-color var(--dur) var(--ease),
		box-shadow var(--dur) var(--ease);
}

.field__textarea {
	min-height: 140px;
	resize: vertical;
}

/*
 * Tiêu điểm đổi màu viền VÀ dày thêm bằng box-shadow.
 *
 * Chỉ đổi màu là không đủ: vàng và xám-lam có độ sáng gần nhau, người khó
 * phân biệt màu nhìn hai trạng thái gần như giống hệt. Thêm một vòng 2px
 * thì sự thay đổi nhận ra được bằng hình dạng, không chỉ bằng màu.
 */
.field__input:focus,
.field__select:focus,
.field__textarea:focus {
	border-color: var(--c-gold-ink);
	box-shadow: 0 0 0 2px var(--c-gold-ring);
	outline: none;
}

.field__error {
	font-size: var(--fs-sm);
	color: var(--c-danger);
}

/* Ô nhập + nút dính liền nhau — dùng cho form đăng ký nhận tin. */
.input-group {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
}

.input-group .field__input {
	flex: 1 1 240px;
	border-right: 0;
}

.input-group .btn {
	flex: 0 0 auto;
}

@media (max-width: 480px) {
	.input-group .field__input {
		border-right: 1px solid var(--c-border);
	}

	.input-group .btn {
		width: 100%;
		margin-top: var(--sp-3);
	}
}

/* ---------------------------------------------------------------
 * BREADCRUMB & PHÂN TRANG
 * --------------------------------------------------------------- */

.breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-2);
	font-size: var(--fs-xs);
	color: var(--c-text-muted);
	padding-block: var(--sp-4);
}

.breadcrumb a {
	text-decoration: none;
}

.breadcrumb a:hover {
	color: var(--c-accent-text);
}

.breadcrumb__sep {
	opacity: 0.5;
}

.pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sp-2);
	margin-top: var(--sp-9);
}

.pagination__item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding-inline: var(--sp-3);
	border: 1px solid var(--c-border);
	font-size: var(--fs-sm);
	font-variant-numeric: tabular-nums;
	text-decoration: none;
}

.pagination__item:hover,
.pagination__item[aria-current='page'] {
	background: var(--c-navy);
	border-color: var(--c-navy);
	color: var(--c-white);
}

/*
 * Tên sản phẩm trên thẻ: line-height nguyên px.
 *
 * Nó là h3 nên thừa hưởng tỉ lệ 1,32 của tiêu đề — 18px × 1,32 = 23,76px.
 * Hai vấn đề từ một con số:
 *
 * 1. Lệch chuẩn pixel của dự án. Tỉ lệ không đơn vị đúng cho tiêu đề dùng
 *    `clamp()`, nhưng tên sản phẩm có cỡ chữ cố định — không có lý do gì để
 *    nó rơi vào 23,76.
 * 2. Cả liên kết cao 23,76px, thiếu 0,24px so với ngưỡng 24×24 của WCAG
 *    2.5.8. Vừa đúng cái loại lỗi mà mắt thường không thấy nhưng công cụ
 *    kiểm thì thấy — và người dùng bấm hụt thì cảm nhận được.
 */
.product-card__title {
	line-height: var(--lh-18);
}