/* ── Category Collections (homepage) ─────────────────────────── */
.ac-cc { background: var(--ac-cream); max-width: 100%; overflow: hidden; }

.ac-cc-intro {
	display        : flex;
	flex-direction : column;
	/* gap: 18px; */
	padding        : 37px clamp(20px, 8vw, 160px) 32px;
	text-align     : center;
	align-items    : center;
}

.ac-cc-title {
	font-family : var(--ac-font-h);
	font-weight : 700;
	font-size   : var(--ac-h2-size);
	line-height : var(--ac-h2-lh);
	color       : var(--ac-dark);
	margin      : 0;
}

.ac-cc-tabs {
	display         : flex;
	flex-wrap       : wrap;
	gap             : 8px;
	justify-content : center;
}

.ac-cc-tab {
	font-family     : var(--ac-font-b);
	font-weight     : 700;
	font-size       : 12px;
	line-height     : 14px;
	text-transform  : uppercase;
	color           : var(--ac-dark);
	background      : var(--ac-cream);
	border          : 1px solid var(--ac-dark);
	border-radius   : 0;
	padding         : 11px 16px;
	cursor          : pointer;
	transition      : background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.ac-cc-tab.is-active,
.ac-cc-tab:hover,
.ac-cc-tab:focus { background: rgb(227, 232, 214); color: var(--ac-dark); outline: none; border-color: var(--ac-dark); }

.ac-cc-panel { display: none; }
.ac-cc-panel.is-active { display: block; }

.ac-cc-track-wrap { position: relative; width: 100%; max-width: 100%; padding: 0; }

.ac-cc-track {
	display         : flex;
	gap             : 1px;
	overflow-x      : auto;
	scroll-behavior : smooth;
	padding-bottom  : 0;
	scrollbar-width : thin;
	scrollbar-color : var(--ac-dark) var(--ac-sand);
}

.ac-cc-track::-webkit-scrollbar        { height: 3px; }
.ac-cc-track::-webkit-scrollbar-track  { background: var(--ac-sand); border-radius: 2px; }
.ac-cc-track::-webkit-scrollbar-thumb  { background: var(--ac-dark); border-radius: 2px; }

/* Category card: image background, gradient, title + "Shop now" — same visual
   language as .ac-home-category-card (the Rugs/Inlay/Teak signpost row).
   The image lives in its own layer (.ac-cc-card-bg) so it can zoom slightly
   on hover without scaling the text/button sitting above it. */
.ac-cc-card {
	position           : relative;
	overflow           : hidden;
	flex               : 0 0 300px;
	min-width          : 0;
	min-height         : 350px;
	display            : flex;
	flex-direction     : column;
	justify-content    : flex-end;
	align-items        : flex-start;
	gap                : 24px;
	padding            : 24px;
	background-color   : var(--ac-sand);
	text-decoration    : none;
}

.ac-cc-card-bg {
	position           : absolute;
	inset              : 0;
	background-size    : cover;
	background-position: center;
	transition         : transform 0.4s ease;
}

.ac-cc-card:hover .ac-cc-card-bg,
.ac-cc-card:focus .ac-cc-card-bg { transform: scale(1.06); }

/* Same two-layer darkening as the Mah Jong page's .ac-signpost-overlay: a
   base gradient always visible, plus a second gradient that fades in on
   hover and reaches further up the card (74.09% vs 89.57%). */
.ac-cc-card-overlay {
	position   : absolute;
	inset      : 0;
	background : linear-gradient(180deg, rgba(43,42,41,0) 50.09%, rgba(43,42,41,0.8) 89.57%);
}

.ac-cc-card-overlay::after {
	content    : '';
	position   : absolute;
	inset      : 0;
	background : linear-gradient(180deg, rgba(43,42,41,0) 50.09%, rgba(43,42,41,0.4) 74.09%);
	opacity    : 0;
	transition : opacity 0.4s ease;
}

.ac-cc-card:hover .ac-cc-card-overlay::after,
.ac-cc-card:focus .ac-cc-card-overlay::after { opacity: 1; }

.ac-cc-card-text { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 4px; }

.ac-cc-card > .ac-btn { position: relative; z-index: 1; }

.ac-cc-card-title {
	font-family : var(--ac-font-h);
	font-weight : 600;
	font-size   : 24px;
	line-height : 29px;
	color       : var(--ac-cream);
	margin      : 0;
}

/* Subheading: hidden by default (Property 1=Default), revealed on hover
   (Property 1=Click) per the Figma states — same gap: 12px used both ways. */
.ac-cc-card-subheading {
	font-family : var(--ac-font-b);
	font-weight : 400;
	font-size   : 14px;
	line-height : 19px;
	color       : var(--ac-cream);
	margin      : 0;
	max-height  : 0;
	opacity     : 0;
	overflow    : hidden;
	transition  : max-height 0.25s ease, opacity 0.2s ease;
}

.ac-cc-card:hover .ac-cc-card-subheading,
.ac-cc-card:focus .ac-cc-card-subheading {
	max-height : 40px;
	opacity    : 1;
}

@media (max-width: 900px) {
	.ac-cc-intro { padding: 60px 16px 24px; }
	.ac-cc-title { font-size: 24px; line-height: 32px; }
	.ac-cc-card  { flex: 0 0 250px; min-height: 300px; }
	.ac-cc-card-title { font-size: 20px; line-height: 30px; }
}