/* ==========================================================================
   HAM Shop — category browser
   --------------------------------------------------------------------------
   A drill-down over the design tree: the same thumbnail tile at every level of
   categories, product cards at the leaves. Everything paints from the plugin's
   own custom properties, with fallbacks so the sheet still works if it ever
   loads before ham-shop.css.
   ========================================================================== */

/**
 * Every control in here carries a display of its own, which would otherwise
 * beat the [hidden] attribute the script toggles. Stated once, at the top.
 */
.hamcb [hidden] {
	display: none !important;
}

.hamcb {
	--hamcb-accent: var(--ham-accent, #a62658);
	--hamcb-ink: var(--ham-ink, #241b2e);
	--hamcb-ink-soft: var(--ham-ink-soft, #6d6579);
	--hamcb-line: var(--ham-line, #e9e5ee);
	--hamcb-tint: var(--ham-accent-soft, rgba(166, 38, 88, .08));
	--hamcb-radius: var(--ham-radius, 16px);
	--hamcb-ease: var(--ham-ease, cubic-bezier(.2, .7, .3, 1));

	position: relative;
	container-type: inline-size;
}

/* Matches the spacing the home page's other sections sit on. */
.hamcb:not(.hamcb--archive) {
	margin-bottom: 52px;
}

/* --------------------------------------------------------------------------
   Head, trail
   -------------------------------------------------------------------------- */

.hamcb-head {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin-bottom: 6px;
	scroll-margin-top: 90px;
}

.hamcb-headings {
	min-width: 0;
}

/* Matches the home page's own .ham-sec-title so sections line up. */
.hamcb-title {
	margin: 0;
	font-size: clamp(20px, 2.4vw, 28px);
	line-height: 1.2;
	color: var(--hamcb-ink);
	letter-spacing: .01em;
}

/**
 * At the root the browser is just another section heading, so it sits centred
 * like its neighbours. One level in it gains a back button and becomes a
 * navigation bar, which only reads correctly ranged left.
 */
.hamcb[data-hamcb-current="0"] .hamcb-head {
	justify-content: center;
	text-align: center;
}

.hamcb-sub {
	margin: 4px 0 0;
	font-size: 14px;
	color: var(--hamcb-ink-soft);
}

.hamcb-back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
	margin-top: 2px;
	padding: 8px 14px 8px 10px;
	border: 1px solid var(--hamcb-line);
	border-radius: 999px;
	background: #fff;
	color: var(--hamcb-ink);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: border-color .18s var(--hamcb-ease), color .18s var(--hamcb-ease);
}

.hamcb-back:hover {
	border-color: var(--hamcb-accent);
	color: var(--hamcb-accent);
}

/* The shared arrow icon points right; here it is a back control. */
.hamcb-back .ham-i {
	transform: rotate(180deg);
}

.hamcb-trail {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 14px 0 18px;
	font-size: 13px;
	color: var(--hamcb-ink-soft);
}

.hamcb-crumb {
	color: var(--hamcb-ink-soft);
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: .02em;
}

a.hamcb-crumb:hover {
	color: var(--hamcb-accent);
	text-decoration: underline;
}

.hamcb-crumb--now {
	color: var(--hamcb-ink);
	font-weight: 700;
}

.hamcb-crumb__sep {
	opacity: .45;
}

/* --------------------------------------------------------------------------
   Category tiles — every level
   -------------------------------------------------------------------------- */

/**
 * Two across on a phone — one tile per row wastes half the screen on a
 * catalogue people scroll through in bulk. Above that, auto-fit with a capped
 * track rather than 1fr: there are only a handful of categories at any level,
 * and stretching five tiles across a 1500px page turns them into billboards.
 * Centred, so a short row still sits under its heading.
 */
.hamcb-tiles {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	margin-top: 20px;
}

@container (min-width: 520px) {
	.hamcb-tiles {
		grid-template-columns: repeat(auto-fit, minmax(140px, 200px));
		justify-content: center;
		gap: 22px;
	}
}

.hamcb-tile {
	display: flex;
	flex-direction: column;
	gap: 10px;
	text-align: center;
	text-decoration: none;
	color: inherit;
}

.hamcb-tile__thumb {
	display: block;
	overflow: hidden;
	aspect-ratio: 1;
	border: 1px solid var(--hamcb-line);
	border-radius: var(--hamcb-radius);
	background: #fff;
	transition: border-color .2s var(--hamcb-ease), transform .2s var(--hamcb-ease), box-shadow .2s var(--hamcb-ease);
}

.hamcb-tile:hover .hamcb-tile__thumb {
	border-color: var(--hamcb-accent);
	transform: translateY(-3px);
	box-shadow: 0 18px 34px -26px rgba(36, 27, 46, .6);
}

.hamcb-tile__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.hamcb-tile__name {
	display: block;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.25;
	text-transform: uppercase;
	color: var(--hamcb-ink);
}

.hamcb-tile__meta {
	display: block;
	margin-top: 3px;
	font-size: 12px;
	font-weight: 500;
	color: var(--hamcb-ink-soft);
	text-transform: none;
}

.hamcb-thumb__blank {
	display: block;
	width: 100%;
	height: 100%;
	background:
		linear-gradient(135deg, transparent 47%, var(--hamcb-line) 47%, var(--hamcb-line) 53%, transparent 53%),
		var(--hamcb-tint);
}

/* --------------------------------------------------------------------------
   Products, dividers, states
   -------------------------------------------------------------------------- */

.hamcb-products {
	margin-top: 20px;
}

/**
 * Woo's own card template arrives with the archive's column classes. Inside
 * the browser the container is narrower than the archive, so the grid is
 * redeclared here rather than left to the theme's column count.
 */
.hamcb-products ul.products,
.hamcb-products .products {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 22px;
	margin: 0;
	padding: 0;
	list-style: none;
	float: none;
}

.hamcb-products ul.products::before,
.hamcb-products ul.products::after {
	content: none;
}

.hamcb-products ul.products > li,
.hamcb-products .products > li {
	width: 100% !important;
	margin: 0 !important;
	float: none !important;
	clear: none !important;
}

.hamcb-divider {
	margin: 30px 0 0;
	padding-top: 20px;
	border-top: 1px solid var(--hamcb-line);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--hamcb-ink-soft);
}

.hamcb-divider--first {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.hamcb-empty,
.hamcb-error {
	margin: 24px 0;
	padding: 26px;
	border: 1px dashed var(--hamcb-line);
	border-radius: var(--hamcb-radius);
	text-align: center;
	color: var(--hamcb-ink-soft);
}

.hamcb-retry {
	margin-left: 8px;
	border: 0;
	background: none;
	color: var(--hamcb-accent);
	font: inherit;
	font-weight: 700;
	text-decoration: underline;
	cursor: pointer;
}

/* --------------------------------------------------------------------------
   Loading
   -------------------------------------------------------------------------- */

.hamcb-tile--ghost {
	pointer-events: none;
}

.hamcb-tile--ghost .hamcb-tile__thumb {
	background: var(--hamcb-tint);
}

.hamcb-tile--ghost .hamcb-tile__name,
.hamcb-tile--ghost .hamcb-tile__meta {
	margin-inline: auto;
	border-radius: 4px;
	background: var(--hamcb-line);
}

.hamcb-tile--ghost .hamcb-tile__name {
	width: 70%;
	height: 13px;
}

.hamcb-tile--ghost .hamcb-tile__meta {
	width: 45%;
	height: 10px;
}

.hamcb-tiles--loading {
	animation: hamcb-pulse 1.4s ease-in-out infinite;
}

@keyframes hamcb-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: .55; }
}

@media (prefers-reduced-motion: reduce) {
	.hamcb-tiles--loading,
	.hamcb-tile,
	.hamcb-tile__thumb {
		animation: none;
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   Archive variant — the same tiles above the loop, no head of its own
   -------------------------------------------------------------------------- */

.hamcb--archive {
	width: 100%;
	margin-bottom: 34px;
	padding-bottom: 30px;
	border-bottom: 1px solid var(--hamcb-line);
}

.hamcb--archive .hamcb-tiles {
	margin-top: 14px;
}