/**
 * Marketplace (CodeCanyon catalog) — TemplateMonster-style hub.
 *
 * Consumes the global --ht-* design tokens defined in
 * hostingtags_design_tokens() so the [data-theme="dark"] toggle in the
 * header AND the OS prefers-color-scheme media query both work without
 * duplicate rules.
 *
 * Loaded via wp_enqueue_style() on:
 *  - is_post_type_archive('cc_item')
 *  - is_singular('cc_item')
 *  - is_tax('cc_category')
 *  - is_page('marketplace') (and the virtual /marketplace/ hub)
 *  - any post containing the [cc_grid] shortcode (handled via inline style id)
 *
 * @package HostingTags
 * @since   5.8.0
 */

/* ── Local aliases (mapped to --ht-* tokens) ─────────────────────────── */
.cc-catalog,
.cc-grid,
.cc-card,
.cc-archive-header,
.cc-cat-side,
.cc-sortbar,
.cc-chips,
.cc-empty,
.cc-faq,
.cc-pagination,
.cc-single,
.cc-related {
	--cc-bg: var(--ht-surface, #fff);
	--cc-bg-soft: var(--ht-surface-muted, #f8fafc);
	--cc-bg-muted: var(--ht-surface-subtle, #f1f5f9);
	--cc-fg: var(--ht-text, #0f172a);
	--cc-fg-soft: var(--ht-text-muted, #475569);
	--cc-fg-muted: var(--ht-gray-400, #94a3b8);
	--cc-border: var(--ht-border, #e2e8f0);
	--cc-border-strong: var(--ht-gray-300, #cbd5e1);
	--cc-brand: var(--ht-primary, #054239);
	--cc-brand-2: var(--ht-primary-dark, #032820);
	--cc-brand-soft: rgba(var(--ht-primary-rgb, 5,66,57), .08);
	--cc-accent: var(--ht-success, #10b981);
	--cc-accent-2: var(--ht-success-dark, #059669);
	--cc-warn: var(--ht-warning, #f59e0b);
	--cc-danger: var(--ht-danger, #dc2626);
	--cc-radius: var(--ht-radius, 12px);
	--cc-radius-lg: var(--ht-radius-lg, 16px);
	--cc-radius-pill: var(--ht-radius-pill, 999px);
	--cc-shadow-sm: 0 1px 2px rgba(15,23,42,.04), 0 1px 1px rgba(15,23,42,.03);
	--cc-shadow: var(--ht-shadow-md, 0 4px 16px rgba(15,23,42,.06));
	--cc-shadow-lg: var(--ht-shadow-lg, 0 24px 48px rgba(15,23,42,.12));
}

/* ── Catalog layout (2-col: filters | results) ───────────────────────── */
.cc-catalog { max-width: 1200px; margin: 0 auto; }
.cc-cat-layout { display: grid; grid-template-columns: 1fr; gap: 28px; margin: 0 0 3em; }
@media (min-width: 960px) {
	.cc-cat-layout { grid-template-columns: 280px 1fr; gap: 32px; }
}

/* ── Mobile drawer toggle ────────────────────────────────────────────── */
.cc-filter-toggle {
	display: inline-flex; align-items: center; gap: 8px;
	margin: 0 0 14px;
	padding: 10px 16px;
	background: var(--cc-bg);
	border: 1px solid var(--cc-border);
	border-radius: var(--cc-radius);
	font: inherit; font-weight: 600; color: var(--cc-fg);
	cursor: pointer;
	transition: background var(--ht-duration-fast, 120ms);
}
.cc-filter-toggle:hover,
.cc-filter-toggle:focus-visible { background: var(--cc-bg-soft); }
.cc-filter-toggle[aria-expanded="true"] { background: var(--cc-brand-soft); color: var(--cc-brand); border-color: transparent; }
.cc-filter-toggle__count {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 20px; height: 20px;
	padding: 0 6px;
	background: var(--cc-brand); color: #fff;
	border-radius: var(--cc-radius-pill);
	font-size: .72em; font-weight: 700;
}
@media (min-width: 960px) { .cc-filter-toggle { display: none; } }

/* ── Sidebar ─────────────────────────────────────────────────────────── */
.cc-cat-side {
	background: var(--cc-bg);
	border: 1px solid var(--cc-border);
	border-radius: var(--cc-radius-lg);
	padding: 18px 18px 22px;
	align-self: start;
}
@media (max-width: 959px) {
	.cc-cat-side { display: none; }
	.cc-cat-side.is-open { display: block; }
}
@media (min-width: 960px) {
	.cc-cat-side {
		position: sticky;
		top: 24px;
		max-height: calc(100vh - 48px);
		display: flex; flex-direction: column;
	}
	.cc-cat-form { flex: 1; min-height: 0; display: flex; flex-direction: column; }
	.cc-facet-scroll { flex: 1; min-height: 0; overflow-y: auto; padding-inline-end: 4px; }
	.cc-cat-side::-webkit-scrollbar,
	.cc-facet-scroll::-webkit-scrollbar { width: 6px; }
	.cc-cat-side::-webkit-scrollbar-thumb,
	.cc-facet-scroll::-webkit-scrollbar-thumb { background: var(--cc-border-strong); border-radius: 3px; }
}
.cc-cat-form { display: flex; flex-direction: column; gap: 18px; }

.cc-facet { border-bottom: 1px solid var(--cc-border); padding-bottom: 18px; }
.cc-facet:last-child { border-bottom: 0; padding-bottom: 0; }
.cc-facet__label {
	display: block; margin: 0 0 10px;
	font-size: .78em; font-weight: 700;
	text-transform: uppercase; letter-spacing: .06em;
	color: var(--cc-fg-soft);
}
.cc-facet__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.cc-facet__list--scroll { max-height: 220px; overflow-y: auto; padding-inline-end: 4px; }

/* Pinned action bar inside sidebar (so submit button is always reachable). */
.cc-facet--actions {
	display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
	position: sticky; bottom: 0;
	margin: 0 -18px -22px;
	padding: 14px 18px 18px;
	background: linear-gradient(to top, var(--cc-bg) 70%, rgba(0,0,0,0));
	border-top: 1px solid var(--cc-border);
	z-index: 2;
}
.cc-facet__reset { font-size: .85em; color: var(--cc-fg-muted); text-decoration: underline; }
.cc-facet__reset:hover { color: var(--cc-danger); }

/* Search input */
.cc-search {
	position: relative; display: flex; align-items: center;
	background: var(--cc-bg-soft);
	border: 1px solid var(--cc-border);
	border-radius: 8px; padding: 0 10px;
	transition: border-color var(--ht-duration-fast, 120ms), box-shadow var(--ht-duration-fast, 120ms);
}
.cc-search:focus-within { border-color: var(--cc-brand); box-shadow: 0 0 0 3px var(--cc-brand-soft); }
.cc-search svg { color: var(--cc-fg-muted); flex-shrink: 0; }
.cc-search input {
	flex: 1; background: transparent; border: 0; outline: 0;
	padding: 10px 8px; font: inherit; color: var(--cc-fg); min-width: 0;
}

/* Checkboxes / radios as rows */
.cc-check, .cc-radio {
	display: flex; align-items: center; gap: 8px;
	padding: 7px 10px;
	border-radius: 6px; cursor: pointer;
	font-size: .92em; color: var(--cc-fg-soft);
	transition: background .12s, color .12s;
	line-height: 1.3;
}
.cc-check:hover, .cc-radio:hover { background: var(--cc-bg-soft); color: var(--cc-fg); }
.cc-check input, .cc-radio input { margin: 0; flex-shrink: 0; accent-color: var(--cc-brand); }
.cc-check__label, .cc-radio span { flex: 1; min-width: 0; }
.cc-check__count {
	font-size: .78em; color: var(--cc-fg-muted);
	background: var(--cc-bg-soft);
	padding: 2px 7px; border-radius: var(--cc-radius-pill);
	font-weight: 600; flex-shrink: 0;
}
.cc-check.is-on, .cc-radio.is-on { background: var(--cc-brand-soft); color: var(--cc-brand); font-weight: 600; }
.cc-check.is-on .cc-check__count { background: var(--cc-brand); color: #fff; }
.cc-rating-pill { color: var(--cc-warn); letter-spacing: 1px; }

/* ── Sortbar ─────────────────────────────────────────────────────────── */
.cc-sortbar {
	display: flex; align-items: center; justify-content: space-between;
	gap: 14px; flex-wrap: wrap;
	background: var(--cc-bg);
	border: 1px solid var(--cc-border);
	border-radius: var(--cc-radius);
	padding: 12px 18px;
	margin-bottom: 18px;
}
.cc-sortbar__count { font-size: .95em; color: var(--cc-fg-soft); }
.cc-sortbar__count strong { color: var(--cc-fg); font-weight: 700; }
.cc-sortbar__sort { display: flex; align-items: center; gap: 8px; }
.cc-sortbar__sort label { font-size: .85em; color: var(--cc-fg-muted); font-weight: 500; }
.cc-sortbar__sort select {
	padding: 8px 32px 8px 12px;
	border: 1px solid var(--cc-border); border-radius: 8px;
	background: var(--cc-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2394a3b8' d='M6 8L0 0h12z'/%3E%3C/svg%3E") no-repeat right 12px center;
	background-size: 10px;
	-webkit-appearance: none; -moz-appearance: none; appearance: none;
	font: inherit; font-size: .92em; font-weight: 500;
	color: var(--cc-fg); cursor: pointer; min-width: 180px;
}
.cc-sortbar__sort select:focus { outline: 0; border-color: var(--cc-brand); box-shadow: 0 0 0 3px var(--cc-brand-soft); }
[dir=rtl] .cc-sortbar__sort select { padding: 8px 12px 8px 32px; background-position: left 12px center; }

/* ── Active filter chips ─────────────────────────────────────────────── */
.cc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; }
.cc-chip {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 6px 12px;
	background: var(--cc-brand-soft);
	color: var(--cc-brand);
	border: 1px solid transparent;
	border-radius: var(--cc-radius-pill);
	font-size: .85em; font-weight: 500;
	text-decoration: none;
	transition: all var(--ht-duration-fast, 150ms);
}
.cc-chip:hover, .cc-chip:focus-visible { background: var(--cc-brand); color: #fff; text-decoration: none; }
.cc-chip__x { font-weight: 700; font-size: 1.1em; line-height: 1; }
.cc-chip--clear { background: transparent; color: var(--cc-fg-muted); border-color: var(--cc-border); }
.cc-chip--clear:hover { background: var(--cc-danger); color: #fff; border-color: var(--cc-danger); }

/* ── Grid ────────────────────────────────────────────────────────────── */
.cc-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 24px; margin: 0;
}
@media (max-width: 600px) {
	.cc-grid { grid-template-columns: 1fr; gap: 18px; }
}

/* ── Card ────────────────────────────────────────────────────────────── */
.cc-card {
	position: relative;
	background: var(--cc-bg);
	border: 1px solid var(--cc-border);
	border-radius: var(--cc-radius);
	overflow: hidden;
	display: flex; flex-direction: column;
	box-shadow: var(--cc-shadow-sm);
	transition: transform var(--ht-duration-base, 250ms) var(--ht-ease-out, cubic-bezier(.16,1,.3,1)),
	            box-shadow var(--ht-duration-base, 250ms),
	            border-color var(--ht-duration-base, 250ms);
}
.cc-card::before {
	content: ""; position: absolute; inset: 0; border-radius: inherit;
	padding: 1px;
	background: linear-gradient(135deg, var(--cc-brand), var(--cc-accent));
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor; mask-composite: exclude;
	opacity: 0;
	transition: opacity var(--ht-duration-base, 250ms);
	pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
	.cc-card:hover { transform: translateY(-4px); box-shadow: var(--cc-shadow-lg); border-color: transparent; }
	.cc-card:hover::before { opacity: 1; }
	.cc-card:hover .cc-card__media img { transform: scale(1.06); }
	.cc-card:hover .cc-card__media::after { opacity: 1; }
}
.cc-card:focus-within { outline: 2px solid var(--cc-brand); outline-offset: 2px; }

.cc-card__media {
	position: relative;
	aspect-ratio: 16/9;
	background: linear-gradient(135deg, var(--cc-bg-muted), var(--cc-bg-soft));
	overflow: hidden;
}
.cc-card__media img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	transition: transform .5s var(--ht-ease-out, cubic-bezier(.4,0,.2,1));
}
.cc-card__media::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,.35));
	opacity: 0; transition: opacity var(--ht-duration-base, 250ms);
}

/* Badges */
.cc-badge {
	position: absolute; top: 12px; inset-inline-end: 12px;
	background: var(--cc-danger); color: #fff;
	font-weight: 700; font-size: 11px;
	padding: 5px 10px; border-radius: var(--cc-radius-pill);
	letter-spacing: .04em; text-transform: uppercase;
	box-shadow: 0 2px 8px rgba(0,0,0,.15); z-index: 2;
}
.cc-badge--drop { background: linear-gradient(135deg, var(--cc-accent), var(--cc-accent-2)); }
.cc-badge--hot { background: linear-gradient(135deg, #f97316, var(--cc-danger)); inset-inline-end: auto; inset-inline-start: 12px; }

/* Card body */
.cc-card__body {
	padding: 18px;
	display: flex; flex-direction: column; gap: 10px;
	flex: 1; position: relative; z-index: 1;
	background: var(--cc-bg);
}
.cc-card__title { margin: 0; font-size: 1.05em; line-height: 1.4; font-weight: 700; letter-spacing: -.01em; }
.cc-card__title a {
	color: var(--cc-fg); text-decoration: none;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
	overflow: hidden;
}
.cc-card__title a:hover { color: var(--cc-brand); text-decoration: none; }
.cc-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }

/* Meta row */
.cc-card__meta { display: flex; align-items: center; gap: 10px; font-size: .85em; color: var(--cc-fg-muted); flex-wrap: wrap; }
.cc-card__sales { display: inline-flex; align-items: center; gap: 4px; color: var(--cc-fg-soft); font-weight: 500; }
.cc-card__sales::before { content: ""; display: inline-block; width: 5px; height: 5px; background: var(--cc-fg-muted); border-radius: 50%; }

/* Stars */
.cc-stars {
	position: relative; display: inline-block;
	font-family: Arial, sans-serif;
	color: var(--cc-border-strong);
	letter-spacing: 2px; font-size: 1em;
	line-height: 1;
}
.cc-stars__bg { color: var(--cc-border-strong); }
.cc-stars__fill { position: absolute; top: 0; inset-inline-start: 0; color: var(--cc-warn); overflow: hidden; white-space: nowrap; }
.cc-stars__count { font-size: .82em; color: var(--cc-fg-muted); margin-inline-start: 4px; }

/* Compat / updated info */
.cc-card__compat,
.cc-card__updated {
	margin: 0; font-size: .82em; color: var(--cc-fg-soft);
	line-height: 1.5;
	display: flex; gap: 6px; align-items: flex-start; flex-wrap: wrap;
}
.cc-card__compat strong,
.cc-card__updated strong { color: var(--cc-fg); font-weight: 600; flex-shrink: 0; }
.cc-card__compat-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.cc-chip-mini {
	display: inline-block;
	padding: 2px 8px;
	border: 1px solid var(--cc-border);
	background: var(--cc-bg);
	color: var(--cc-fg-soft);
	border-radius: 999px;
	font-size: .78em; line-height: 1.5; white-space: nowrap;
}
.cc-chip-mini--more { background: var(--cc-brand); color: #fff; border-color: var(--cc-brand); font-weight: 600; }

/* Price */
.cc-card__price {
	margin-top: auto;
	display: flex; align-items: baseline; gap: 10px;
	padding-top: 8px; border-top: 1px dashed var(--cc-border);
}
.cc-card__price del { color: var(--cc-fg-muted); font-size: .88em; font-weight: 500; }
.cc-card__price-now {
	font-size: 1.4em; font-weight: 800;
	color: var(--cc-brand); /* solid fallback */
	letter-spacing: -.02em;
	background: linear-gradient(135deg, var(--cc-brand), var(--cc-accent-2));
	-webkit-background-clip: text; background-clip: text;
	-webkit-text-fill-color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
	.cc-card__price-now { color: var(--cc-brand); -webkit-text-fill-color: currentColor; }
}

/* Buttons */
.cc-card__cta { display: flex; gap: 8px; margin-top: 4px; position: relative; z-index: 2; }
.cc-btn {
	flex: 1;
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 11px 16px; border-radius: 8px;
	font-weight: 600; font-size: .92em;
	text-decoration: none;
	transition: transform var(--ht-duration-fast, 150ms),
	            box-shadow var(--ht-duration-base, 200ms),
	            background var(--ht-duration-base, 200ms);
	border: 0; cursor: pointer; line-height: 1;
}
.cc-btn:hover { text-decoration: none; transform: translateY(-1px); }
.cc-btn--buy { background: linear-gradient(135deg, var(--cc-accent), var(--cc-accent-2)); color: #fff; box-shadow: 0 4px 14px rgba(var(--ht-success-rgb, 22,163,74), .3); }
.cc-btn--buy:hover { box-shadow: 0 6px 20px rgba(var(--ht-success-rgb, 22,163,74), .45); color: #fff; }
.cc-btn--ghost { background: var(--cc-bg-soft); color: var(--cc-fg); border: 1px solid var(--cc-border); }
.cc-btn--ghost:hover { background: var(--cc-bg-muted); color: var(--cc-fg); }
.cc-btn--lg { padding: 14px 24px; font-size: 1.02em; font-weight: 700; border-radius: 10px; }
.cc-btn__arrow { transition: transform var(--ht-duration-base, 200ms); }
.cc-btn:hover .cc-btn__arrow { transform: translateX(3px); }
[dir=rtl] .cc-btn__arrow { transform: scaleX(-1); }
[dir=rtl] .cc-btn:hover .cc-btn__arrow { transform: translateX(-3px) scaleX(-1); }

/* ── Archive header (hero) ───────────────────────────────────────────── */
.cc-archive-header {
	margin: 0 0 2em; padding: 2.5em 2em;
	background: linear-gradient(135deg, var(--cc-brand) 0%, var(--cc-brand-2) 60%, var(--ht-primary-dark, #032820) 100%);
	color: #fff;
	border-radius: var(--cc-radius-lg);
	text-align: center;
	position: relative; overflow: hidden;
}
.cc-archive-header::before {
	content: ""; position: absolute; inset: 0;
	background: radial-gradient(circle at 20% 0%, rgba(255,255,255,.15), transparent 50%),
	            radial-gradient(circle at 80% 100%, rgba(var(--ht-success-rgb, 16,185,129), .2), transparent 50%);
	pointer-events: none;
}
.cc-archive-header::after {
	content: ""; position: absolute; inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
	opacity: .5; pointer-events: none;
}
.cc-archive-header__title,
.cc-archive-header__desc,
.cc-archive-stats { position: relative; z-index: 1; }
.cc-archive-header__title {
	margin: 0 0 .35em;
	font-size: clamp(1.8em, 4vw, 2.6em);
	font-weight: 800; letter-spacing: -.02em; line-height: 1.15;
	color: #fff;
}
.cc-archive-header__desc {
	margin: 0 auto; max-width: 680px;
	color: rgba(255,255,255,.92);
	font-size: 1.05em; line-height: 1.7;
}
.cc-archive-header__desc a { color: #fff; text-decoration: underline; }

/* Stats strip under header */
.cc-archive-stats {
	display: flex; flex-wrap: wrap; gap: 16px;
	justify-content: center; margin-top: 1.5em;
}
.cc-archive-stats__item {
	display: inline-flex; align-items: center; gap: 8px;
	background: rgba(255,255,255,.12);
	padding: 8px 16px;
	border-radius: var(--cc-radius-pill);
	font-size: .9em; color: #fff;
	border: 1px solid rgba(255,255,255,.18);
}
@supports (backdrop-filter: blur(8px)) {
	.cc-archive-stats__item { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
}
.cc-archive-stats__item strong { font-weight: 700; }

@media (max-width: 600px) {
	.cc-archive-header { padding: 2em 1.25em; border-radius: var(--cc-radius); }
}

/* ── Empty state ─────────────────────────────────────────────────────── */
.cc-empty {
	text-align: center; padding: 4em 2em;
	background: var(--cc-bg-soft);
	border: 1px dashed var(--cc-border);
	border-radius: var(--cc-radius);
	color: var(--cc-fg-soft);
	display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.cc-empty svg { color: var(--cc-fg-muted); }
.cc-empty h3 { margin: 0; color: var(--cc-fg); font-size: 1.2em; }
.cc-empty p { margin: 0; }
.cc-empty .cc-btn { flex: 0; display: inline-flex; width: auto; margin-top: 4px; }

/* ── FAQ ─────────────────────────────────────────────────────────────── */
.cc-faq { max-width: 880px; margin: 3em auto; padding: 0 .5em; }
.cc-faq__title {
	text-align: center;
	font-size: clamp(1.4em, 2.5vw, 1.8em);
	font-weight: 800; letter-spacing: -.02em;
	margin: 0 0 1.2em; color: var(--cc-fg);
}
.cc-faq__list { display: flex; flex-direction: column; gap: 10px; }
.cc-faq__item {
	background: var(--cc-bg);
	border: 1px solid var(--cc-border);
	border-radius: var(--cc-radius);
	transition: border-color var(--ht-duration-base, 200ms),
	            box-shadow var(--ht-duration-base, 200ms);
}
.cc-faq__item[open] { border-color: var(--cc-brand); box-shadow: var(--cc-shadow-sm); }
.cc-faq__q {
	padding: 16px 20px; cursor: pointer; font-weight: 600;
	color: var(--cc-fg); list-style: none; position: relative;
	padding-inline-end: 48px;
}
.cc-faq__q::-webkit-details-marker { display: none; }
.cc-faq__q::after {
	content: "+"; position: absolute; top: 50%; inset-inline-end: 18px;
	transform: translateY(-50%);
	font-size: 1.4em; color: var(--cc-brand);
	font-weight: 300; line-height: 1;
	transition: transform var(--ht-duration-base, 200ms);
}
.cc-faq__item[open] .cc-faq__q::after { content: "−"; }
.cc-faq__a { padding: 0 20px 18px; color: var(--cc-fg-soft); line-height: 1.7; }

/* ── Pagination ──────────────────────────────────────────────────────── */
.cc-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 2em 0; }
.cc-pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 40px; height: 40px; padding: 0 12px;
	border: 1px solid var(--cc-border);
	border-radius: 8px;
	background: var(--cc-bg);
	color: var(--cc-fg-soft);
	text-decoration: none; font-weight: 600;
	transition: all var(--ht-duration-fast, 150ms);
}
.cc-pagination .page-numbers:hover,
.cc-pagination .page-numbers:focus-visible,
.cc-pagination .page-numbers.current { background: var(--cc-brand); color: #fff; border-color: var(--cc-brand); }
.cc-pagination .page-numbers.current { cursor: default; }

/* ── Skip link (a11y) ────────────────────────────────────────────────── */
.cc-skip-to-results {
	position: absolute; left: -9999px; top: auto;
	width: 1px; height: 1px; overflow: hidden;
}
.cc-skip-to-results:focus {
	position: static; width: auto; height: auto;
	display: inline-block;
	padding: 8px 14px;
	background: var(--cc-brand); color: #fff;
	border-radius: var(--cc-radius);
	margin: 8px 0;
}

/* Aria-live count region (visually unchanged but announced). */
.cc-sortbar__count[aria-live] { contain: layout style; }

/* ── Single item page ────────────────────────────────────────────────── */
.cc-single { max-width: 1200px; margin: 0 auto; }
.cc-single__article { background: transparent; }
.cc-single__hero {
	display: grid; grid-template-columns: 1fr; gap: 32px;
	margin: 1em 0 2.5em; padding: 0;
}
@media (min-width: 860px) {
	.cc-single__hero { grid-template-columns: 1.35fr 1fr; gap: 40px; align-items: start; }
}
.cc-single__media {
	position: relative;
	border-radius: var(--cc-radius-lg);
	overflow: hidden;
	box-shadow: var(--cc-shadow);
	background: var(--cc-bg-muted);
}
.cc-single__media img { width: 100%; height: auto; display: block; }
.cc-single__intro { display: flex; flex-direction: column; gap: 14px; }
@media (min-width: 860px) { .cc-single__intro { position: sticky; top: 24px; } }
.cc-single__title {
	font-size: clamp(1.6em, 3vw, 2.2em);
	line-height: 1.2; margin: 0;
	font-weight: 800; letter-spacing: -.02em;
	color: var(--cc-fg);
}
.cc-single__rating { display: flex; align-items: center; gap: 12px; font-size: .95em; color: var(--cc-fg-soft); flex-wrap: wrap; }
.cc-single__price {
	font-size: 2em; font-weight: 800; margin: .2em 0;
	letter-spacing: -.02em;
	display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
	color: var(--cc-brand); /* solid fallback */
	background: linear-gradient(135deg, var(--cc-brand), var(--cc-accent-2));
	-webkit-background-clip: text; background-clip: text;
	-webkit-text-fill-color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
	.cc-single__price { color: var(--cc-brand); -webkit-text-fill-color: currentColor; }
}
.cc-single__price del { color: var(--cc-fg-muted); font-size: .55em; font-weight: 500; -webkit-text-fill-color: var(--cc-fg-muted); }
.cc-single__price .cc-badge { position: static; font-size: .45em; -webkit-text-fill-color: #fff; }
.cc-single__cta { display: flex; flex-direction: column; gap: 10px; margin: .5em 0; }
.cc-single__cta-row { display: flex; gap: 10px; flex-wrap: wrap; }
.cc-single__cta-row .cc-btn { flex: 1 1 180px; }
.cc-single__cta-note {
	margin: 0; font-size: .85em; color: var(--cc-fg-soft);
	display: inline-flex; align-items: center; gap: 6px; justify-content: center;
}
.cc-single__cta-note svg { color: var(--cc-accent); flex-shrink: 0; }
.cc-single__facts {
	margin: 1em 0 0;
	padding: 1.25em 1.5em;
	background: var(--cc-bg-soft);
	border: 1px solid var(--cc-border);
	border-radius: var(--cc-radius);
	font-size: .95em;
	display: grid; grid-template-columns: max-content 1fr;
	gap: 10px 16px; line-height: 1.5;
}
.cc-single__facts dt { font-weight: 600; color: var(--cc-fg-soft); display: block; margin: 0; min-width: 0; }
.cc-single__facts dd { margin: 0; color: var(--cc-fg); font-weight: 500; display: block; }
.cc-single__facts dd a { color: var(--cc-brand); text-decoration: none; }
.cc-single__facts dd a:hover { text-decoration: underline; }
@media (max-width: 600px) {
	.cc-single__facts { grid-template-columns: 1fr; gap: 4px 0; }
	.cc-single__facts dt { margin-top: 8px; }
	.cc-single__facts dt:first-child { margin-top: 0; }
}

.cc-single__body { margin: 2.5em 0; }
/* Body inherits theme entry-content typography.
   Hide stray Envato-injected media but keep the description readable. */
.cc-single__body img,
.cc-single__body video,
.cc-single__body iframe,
.cc-single__body figure:not(.cc-single__quote) { display: none !important; }
.cc-single__body > *:first-child { margin-top: 0; }
.cc-single__body > *:last-child { margin-bottom: 0; }
.cc-single__body p:empty { display: none; }

/* Unique synthesized intro paragraph (not from Envato) */
.cc-single__synth {
	margin: 0 0 1.5em;
	padding: 1em 1.25em;
	background: var(--cc-bg-soft);
	border-inline-start: 3px solid var(--cc-accent);
	border-radius: var(--cc-radius);
	font-size: 1.02em;
	line-height: 1.7;
	color: var(--cc-text);
}

/* Attributed Envato excerpt — visually marked as a quote so search
   engines + readers know it's a short citation, not original content. */
.cc-single__quote {
	margin: 0 0 1.5em;
	padding: 1.25em 1.5em;
	background: var(--cc-bg);
	border: 1px solid var(--cc-border);
	border-radius: var(--cc-radius);
}
.cc-single__quote blockquote {
	margin: 0;
	padding: 0;
	font-style: italic;
	color: var(--cc-text-soft);
	border: none;
	background: transparent;
}
.cc-single__quote blockquote p { margin: 0; }
.cc-single__quote figcaption {
	margin-top: .75em;
	font-size: .85em;
	color: var(--cc-text-soft);
	font-style: normal;
}
.cc-single__quote figcaption a { color: var(--cc-accent); text-decoration: underline; }

.cc-single__terms {
	margin: 2em 0; padding: 1em 1.25em;
	background: var(--cc-bg-soft);
	border-radius: var(--cc-radius);
	font-size: .92em;
}
.cc-single__terms strong { color: var(--cc-fg); margin-inline-end: 8px; }
.cc-single__terms a {
	display: inline-block; padding: 4px 12px; margin: 2px 4px 2px 0;
	background: var(--cc-bg);
	border: 1px solid var(--cc-border);
	border-radius: var(--cc-radius-pill);
	color: var(--cc-fg-soft);
	text-decoration: none; font-size: .9em;
	transition: all var(--ht-duration-fast, 150ms);
}
.cc-single__terms a:hover { background: var(--cc-brand); color: #fff; border-color: var(--cc-brand); text-decoration: none; }

/* ── Related items strip ─────────────────────────────────────────────── */
.cc-related { margin: 3em 0 2em; }
.cc-related__head {
	display: flex; align-items: baseline; justify-content: space-between;
	gap: 16px; margin: 0 0 1em;
	padding-bottom: .5em; border-bottom: 2px solid var(--cc-border);
}
.cc-related__head h2 {
	margin: 0; font-size: 1.4em; font-weight: 800;
	letter-spacing: -.01em; color: var(--cc-fg);
}
.cc-related__more {
	color: var(--cc-brand); text-decoration: none; font-weight: 600;
	font-size: .9em;
}
.cc-related__more:hover { text-decoration: underline; }
.cc-related .cc-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }

/* ── Category filter pills (legacy widget area) ──────────────────────── */
.cc-cat-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 2em; padding: 0; list-style: none; justify-content: center; }
.cc-cat-filter li { margin: 0; }
.cc-cat-filter a {
	display: inline-block; padding: 8px 18px;
	background: var(--cc-bg-soft);
	border: 1px solid var(--cc-border);
	border-radius: var(--cc-radius-pill);
	font-size: .9em; font-weight: 500; color: var(--cc-fg-soft);
	text-decoration: none; transition: all var(--ht-duration-base, 200ms);
}
.cc-cat-filter a:hover { background: var(--cc-brand-soft); color: var(--cc-brand); border-color: var(--cc-brand); text-decoration: none; }
.cc-cat-filter a.is-active { background: linear-gradient(135deg, var(--cc-brand), var(--cc-brand-2)); color: #fff; border-color: transparent; box-shadow: 0 4px 12px rgba(var(--ht-primary-rgb, 5,66,57), .3); }

/* ── Landing page sections (legacy [cc_grid] shortcode) ──────────────── */
.cc-landing__intro { max-width: 760px; margin: 0 auto 2em; text-align: center; color: var(--cc-fg-soft); font-size: 1.05em; line-height: 1.7; }
.cc-landing__section { margin: 3em 0; }
.cc-landing__sec-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 1em; padding-bottom: .75em; border-bottom: 2px solid var(--cc-border); }
.cc-landing__sec-head h2 {
	margin: 0; font-size: 1.5em; font-weight: 800;
	letter-spacing: -.01em; color: var(--cc-fg);
	position: relative; padding-inline-start: 14px;
}
.cc-landing__sec-head h2::before {
	content: ""; position: absolute; inset-inline-start: 0; top: 50%;
	transform: translateY(-50%); width: 4px; height: 24px;
	background: linear-gradient(180deg, var(--cc-brand), var(--cc-accent));
	border-radius: 2px;
}
.cc-landing__more {
	display: inline-flex; align-items: center; gap: 6px;
	color: var(--cc-brand); font-weight: 600; font-size: .92em;
	text-decoration: none; padding: 6px 14px; border-radius: var(--cc-radius-pill);
	background: var(--cc-brand-soft);
	transition: all var(--ht-duration-fast, 150ms);
}
.cc-landing__more:hover { background: var(--cc-brand); color: #fff; text-decoration: none; }

/* RTL adjustments */
[dir=rtl] .cc-card__title,
[dir=rtl] .cc-archive-header__title,
[dir=rtl] .cc-single__title { letter-spacing: 0; }

/* ════════════════════════════════════════════════════════════════════════
   SINGLE-PRODUCT CONTENT CARDS  (mirrors hosting-review section design)
   Each block of the AI-rewritten description renders as its own card so
   the page mimics the polished structure of single hosting reviews.
   ════════════════════════════════════════════════════════════════════════ */

.cc-single__body {
display: flex; flex-direction: column; gap: 18px;
margin-block-start: 24px;
}

.cc-card-section {
background: var(--cc-bg-card, var(--ht-color-surface, #fff));
border: 1px solid var(--cc-border, var(--ht-color-border, #e6e8ec));
border-radius: var(--cc-radius-lg, 14px);
box-shadow: var(--cc-shadow-sm, 0 1px 2px rgba(15,23,42,.04));
overflow: hidden;
transition: box-shadow .2s ease, transform .2s ease;
}
.cc-card-section:hover {
box-shadow: var(--cc-shadow-md, 0 4px 12px rgba(15,23,42,.08));
}

.cc-card-section__head {
display: flex; align-items: center; justify-content: space-between;
gap: 12px;
padding: 14px 20px;
background: linear-gradient(180deg, var(--cc-brand-soft, rgba(99,102,241,.06)) 0%, transparent 100%);
border-block-end: 1px solid var(--cc-border, #e6e8ec);
}
.cc-card-section__title {
display: inline-flex; align-items: center; gap: 10px;
margin: 0;
font-size: 1.05em; font-weight: 700; line-height: 1.3;
letter-spacing: -.01em;
color: var(--cc-fg, inherit);
}
.cc-card-section__title svg {
flex: 0 0 auto;
color: var(--cc-brand, currentColor);
}
.cc-card-section__body { padding: 18px 20px; line-height: 1.7; }
.cc-card-section__body > :first-child { margin-block-start: 0; }
.cc-card-section__body > :last-child  { margin-block-end: 0; }
.cc-card-section__body p { margin: 0 0 12px; }
.cc-card-section__body p:last-child { margin-bottom: 0; }

/* Variant accent stripes */
.cc-card-section--about    { border-inline-start: 3px solid var(--cc-brand, #6366f1); }
.cc-card-section--features { border-inline-start: 3px solid var(--cc-success, #10b981); }
.cc-card-section--specs    { border-inline-start: 3px solid var(--cc-accent, #f59e0b); }
.cc-card-section--usecase  { border-inline-start: 3px solid var(--cc-info, #0ea5e9); }
.cc-card-section--tags     { border-inline-start: 3px solid var(--cc-fg-muted, #94a3b8); }
.cc-card-section--source   { border-inline-start: 3px solid var(--cc-fg-soft, #cbd5e1); }
.cc-card-section--editor   { border-inline-start: 3px solid var(--cc-brand, #6366f1); }

/* ── Features list ───────────────────────────────────────────────── */
.cc-features {
list-style: none; margin: 0; padding: 18px 20px;
display: grid; gap: 10px;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.cc-features__item {
display: flex; align-items: flex-start; gap: 10px;
padding: 12px 14px;
background: var(--cc-bg-soft, rgba(99,102,241,.04));
border-radius: var(--cc-radius-md, 10px);
font-size: .95em; line-height: 1.5;
transition: background .15s ease;
}
.cc-features__item:hover { background: var(--cc-brand-soft, rgba(99,102,241,.1)); }
.cc-features__icon {
flex: 0 0 auto; margin-block-start: 2px;
color: var(--cc-success, #10b981);
}

/* ── Specifications table ────────────────────────────────────────── */
.cc-specs { margin: 0; padding: 6px 0; }
.cc-specs__row {
display: grid;
grid-template-columns: minmax(140px, 30%) 1fr;
gap: 16px;
padding: 12px 20px;
border-block-end: 1px solid var(--cc-border-soft, rgba(99,102,241,.08));
}
.cc-specs__row:last-child { border-block-end: 0; }
.cc-specs__row:nth-child(odd) { background: var(--cc-bg-soft, rgba(15,23,42,.02)); }
.cc-specs__key {
margin: 0; font-weight: 600;
color: var(--cc-fg-muted, #64748b);
font-size: .9em; text-transform: uppercase;
letter-spacing: .03em;
}
.cc-specs__val { margin: 0; color: var(--cc-fg, inherit); font-weight: 500; }
.cc-specs__val a { color: var(--cc-brand, currentColor); text-decoration: none; }
.cc-specs__val a:hover { text-decoration: underline; }

/* ── Tags / chips ────────────────────────────────────────────────── */
.cc-tags {
list-style: none; margin: 0; padding: 18px 20px;
display: flex; flex-wrap: wrap; gap: 8px;
}
.cc-tags__item {
display: inline-flex; align-items: center;
padding: 6px 12px;
background: var(--cc-bg-soft, rgba(99,102,241,.06));
border: 1px solid var(--cc-border, #e6e8ec);
border-radius: var(--cc-radius-pill, 999px);
font-size: .85em; font-weight: 500;
color: var(--cc-fg-muted, #475569);
transition: all .15s ease;
}
.cc-tags__item:hover {
background: var(--cc-brand-soft, rgba(99,102,241,.12));
border-color: var(--cc-brand, #6366f1);
color: var(--cc-brand, #4f46e5);
}

/* ── Source quote (Envato attribution) ───────────────────────────── */
.cc-card-section--source .cc-single__quote { margin: 0; padding: 18px 20px; }
.cc-card-section--source blockquote {
margin: 0 0 10px; padding: 14px 18px;
background: var(--cc-bg-soft, rgba(15,23,42,.03));
border-inline-start: 4px solid var(--cc-fg-soft, #cbd5e1);
border-radius: var(--cc-radius-sm, 6px);
font-style: italic; color: var(--cc-fg-muted, #475569);
}
.cc-card-section--source figcaption {
font-size: .85em; color: var(--cc-fg-muted, #64748b);
}
.cc-card-section--source figcaption a { color: var(--cc-brand, currentColor); }

/* ── Mobile ──────────────────────────────────────────────────────── */
@media (max-width: 640px) {
.cc-card-section__head { padding: 12px 14px; }
.cc-card-section__body, .cc-features, .cc-tags { padding: 14px; }
.cc-features { grid-template-columns: 1fr; }
.cc-specs__row { grid-template-columns: 1fr; gap: 4px; padding: 12px 14px; }
.cc-specs__key { font-size: .8em; }
}

/* ── Dark-mode tuning ────────────────────────────────────────────── */
[data-theme="dark"] .cc-card-section {
background: var(--ht-color-surface, #1a1d29);
border-color: rgba(255,255,255,.08);
}
[data-theme="dark"] .cc-features__item,
[data-theme="dark"] .cc-tags__item,
[data-theme="dark"] .cc-card-section--source blockquote {
background: rgba(255,255,255,.04);
border-color: rgba(255,255,255,.08);
}
[data-theme="dark"] .cc-specs__row:nth-child(odd) { background: rgba(255,255,255,.02); }