/*
 * Collector's Cache - storefront components.
 *
 * Builds on the primitives and tokens in frontend.css. No colour, size, radius
 * or font is hard-coded here: every value reads a --cc-* token so the Website
 * Customizer stays in control and a theme swap changes nothing.
 *
 * Mobile first. Each component states its own small-screen layout and only
 * then widens.
 */

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */
.cc-section {
	margin-block: var(--cc-space-6);
}

.cc-section-header {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--cc-space-2);
	margin-bottom: var(--cc-space-3);
}

.cc-section-header__title {
	margin: 0;
	font-family: var(--cc-font-heading);
	font-size: var(--cc-font-size-h2);
	line-height: 1.2;
	color: var(--cc-color-text);
}

.cc-section-header__subtitle {
	margin: 6px 0 0;
	color: var(--cc-color-text-muted);
}

.cc-section-header__link {
	color: var(--cc-color-accent-text);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.cc-section-header__link:hover,
.cc-section-header__link:focus-visible {
	text-decoration: underline;
}

.cc-empty {
	padding: var(--cc-space-4);
	border: 1px dashed var(--cc-color-border);
	border-radius: var(--cc-radius);
	color: var(--cc-color-text-muted);
	text-align: center;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.cc-hero {
	display: grid;
	gap: var(--cc-space-4);
	align-items: center;
	padding-block: var(--cc-space-6);
}

.cc-hero__title {
	margin: 0 0 var(--cc-space-2);
	font-family: var(--cc-font-heading);
	font-size: var(--cc-font-size-h1);
	line-height: 1.15;
	color: var(--cc-color-text);
}

.cc-hero__text {
	margin: 0;
	max-width: 60ch;
	color: var(--cc-color-text-muted);
	font-size: 1.05rem;
}

.cc-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cc-space-2);
	margin-top: var(--cc-space-3);
}

.cc-hero__image {
	width: 100%;
	height: auto;
	border-radius: var(--cc-radius);
}

@media (min-width: 900px) {
	.cc-hero--with-image {
		grid-template-columns: 1fr 1fr;
		gap: var(--cc-space-6);
	}
}

/* --------------------------------------------------------------------------
   Product card
   -------------------------------------------------------------------------- */
.cc-product-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	transition: border-color var(--cc-transition);
}

.cc-product-card:hover {
	border-color: var(--cc-color-text-muted);
}

.cc-product-card__media {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--cc-color-surface-elevated);
}

.cc-product-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cc-product-card__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background: var(--cc-color-surface-elevated);
}

.cc-product-card__flag {
	position: absolute;
	top: var(--cc-space);
	left: var(--cc-space);
	padding: 4px 10px;
	border-radius: var(--cc-radius-sm);
	background: var(--cc-color-danger);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.cc-product-card.is-sold-out .cc-product-card__image {
	opacity: 0.55;
}

.cc-product-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--cc-space);
	padding: var(--cc-space-2);
}

.cc-product-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.cc-product-card__title {
	margin: 0;
	font-family: var(--cc-font-heading);
	font-size: 1.0625rem;
	line-height: 1.3;
}

.cc-product-card__title a {
	color: var(--cc-color-text);
	text-decoration: none;
}

.cc-product-card__title a:hover,
.cc-product-card__title a:focus-visible {
	color: var(--cc-color-accent-text);
}

.cc-product-card__meta {
	margin: 0;
	color: var(--cc-color-text-muted);
	font-size: 0.875rem;
}

.cc-product-card__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--cc-space);
	margin-top: auto;
	padding-top: var(--cc-space);
}

.cc-product-card__price {
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--cc-color-text);
}

.cc-product-card__price del {
	color: var(--cc-color-text-muted);
	font-weight: 400;
}

.cc-product-card__action {
	width: 100%;
}

/* --------------------------------------------------------------------------
   Collection card
   -------------------------------------------------------------------------- */
.cc-grid--collections {
	grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 600px) {
	.cc-grid--collections {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 960px) {
	.cc-grid--collections {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.cc-collection-card {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.cc-collection-card__media {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--cc-color-surface-elevated);
}

.cc-collection-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cc-collection-card__placeholder {
	display: block;
	width: 100%;
	height: 100%;
}

.cc-collection-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 6px;
	padding: var(--cc-space-2);
}

.cc-collection-card__title {
	margin: 0;
	font-family: var(--cc-font-heading);
	font-size: 1.125rem;
}

.cc-collection-card__title a {
	color: var(--cc-color-text);
	text-decoration: none;
}

.cc-collection-card__title a:hover,
.cc-collection-card__title a:focus-visible {
	color: var(--cc-color-accent-text);
}

.cc-collection-card__year {
	margin: 0;
	color: var(--cc-color-text-muted);
	font-size: 0.875rem;
	font-variant-numeric: tabular-nums;
}

.cc-collection-card__description {
	margin: 0;
	color: var(--cc-color-text-muted);
	font-size: 0.9375rem;
}

.cc-collection-card__count {
	margin: auto 0 0;
	padding-top: var(--cc-space);
	color: var(--cc-color-text-muted);
	font-size: 0.875rem;
}

/* --------------------------------------------------------------------------
   Filters
   -------------------------------------------------------------------------- */
.cc-filters {
	display: flex;
	flex-direction: column;
	gap: var(--cc-space-2);
	margin-bottom: var(--cc-space-4);
	padding: var(--cc-space-2);
	background: var(--cc-color-surface);
	border: 1px solid var(--cc-color-border);
	border-radius: var(--cc-radius);
}

.cc-filters__search {
	display: flex;
	gap: var(--cc-space);
}

.cc-filters__search input[type="search"] {
	flex: 1;
	min-height: 44px;
	padding: 8px 12px;
	background: var(--cc-color-bg);
	border: 1px solid var(--cc-color-border);
	border-radius: var(--cc-radius-sm);
	color: var(--cc-color-text);
	font: inherit;
}

.cc-filters__controls {
	display: grid;
	gap: var(--cc-space-2);
	grid-template-columns: repeat(1, minmax(0, 1fr));
}

.cc-filters__field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
}

.cc-filters__label {
	color: var(--cc-color-text-muted);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.cc-filters select {
	min-height: 44px;
	padding: 8px 10px;
	background: var(--cc-color-bg);
	border: 1px solid var(--cc-color-border);
	border-radius: var(--cc-radius-sm);
	color: var(--cc-color-text);
	font: inherit;
}

.cc-filters__actions {
	display: flex;
	align-items: center;
	gap: var(--cc-space-2);
	margin: 0;
}

.cc-filters__reset {
	color: var(--cc-color-text-muted);
	font-size: 0.875rem;
}

/* The Apply button is only needed when scripting is unavailable. */
.cc-js .cc-filters__actions button[type="submit"] {
	display: none;
}

@media (min-width: 700px) {
	.cc-filters__controls {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		align-items: end;
	}
}

@media (min-width: 1000px) {
	.cc-filters__controls {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

/* --------------------------------------------------------------------------
   Product page
   -------------------------------------------------------------------------- */
.cc-product__meta {
	display: flex;
	flex-direction: column;
	gap: var(--cc-space);
	margin-bottom: var(--cc-space-2);
}

.cc-product__lineage {
	margin: 0;
	color: var(--cc-color-text-muted);
}

.cc-product__lineage a {
	color: var(--cc-color-text-muted);
	text-decoration: none;
}

.cc-product__lineage a:hover,
.cc-product__lineage a:focus-visible {
	color: var(--cc-color-accent-text);
	text-decoration: underline;
}

.cc-product__sep {
	padding: 0 6px;
	opacity: 0.6;
}

.cc-product__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.cc-product__availability {
	margin: var(--cc-space) 0 var(--cc-space-2);
}

/* In-game screenshots */
.cc-ingame__title,
.cc-collection-info__title,
.cc-share__title {
	margin: 0 0 var(--cc-space-2);
	font-family: var(--cc-font-heading);
	font-size: var(--cc-font-size-h3);
	color: var(--cc-color-text);
}

.cc-ingame__grid {
	display: grid;
	gap: var(--cc-space-2);
	grid-template-columns: repeat(1, minmax(0, 1fr));
}

.cc-ingame__item {
	margin: 0;
}

.cc-ingame__image {
	width: 100%;
	height: auto;
	border: 1px solid var(--cc-color-border);
	border-radius: var(--cc-radius);
}

@media (min-width: 600px) {
	.cc-ingame__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1000px) {
	.cc-ingame__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Collection information */
.cc-collection-info__summary {
	display: grid;
	gap: var(--cc-space-2);
	padding: var(--cc-space-2);
	margin-bottom: var(--cc-space-3);
}

.cc-collection-info__image {
	width: 100%;
	height: auto;
	border-radius: var(--cc-radius-sm);
}

.cc-collection-info__body {
	display: flex;
	flex-direction: column;
	gap: var(--cc-space);
	align-items: flex-start;
}

.cc-collection-info__name {
	margin: 0;
	font-family: var(--cc-font-heading);
	font-size: 1.125rem;
}

.cc-collection-info__name a {
	color: var(--cc-color-text);
	text-decoration: none;
}

.cc-collection-info__year,
.cc-collection-info__description {
	margin: 0;
	color: var(--cc-color-text-muted);
}

@media (min-width: 700px) {
	.cc-collection-info__summary {
		grid-template-columns: 220px 1fr;
		align-items: center;
	}
}

/* --------------------------------------------------------------------------
   Share
   -------------------------------------------------------------------------- */
.cc-share {
	margin-block: var(--cc-space-4);
}

.cc-share__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cc-space);
	margin: 0;
	padding: 0;
	list-style: none;
}

.cc-share__link {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 6px 14px;
	border: 1px solid var(--cc-color-border);
	border-radius: var(--cc-radius-sm);
	color: var(--cc-color-text);
	text-decoration: none;
	transition: border-color var(--cc-transition), color var(--cc-transition);
}

.cc-share__link:hover,
.cc-share__link:focus-visible {
	border-color: var(--cc-color-accent);
	color: var(--cc-color-accent-text);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.cc-footer {
	margin-top: var(--cc-space-8);
	padding-block: var(--cc-space-6) var(--cc-space-4);
	background: var(--cc-color-surface);
	border-top: 1px solid var(--cc-color-border);
	color: var(--cc-color-text-muted);
}

.cc-footer__inner {
	display: grid;
	gap: var(--cc-space-4);
	grid-template-columns: repeat(1, minmax(0, 1fr));
}

.cc-footer__name {
	margin: 0 0 var(--cc-space);
	color: var(--cc-color-text);
	font-family: var(--cc-font-heading);
	font-size: 1.125rem;
	font-weight: 700;
}

.cc-footer__text,
.cc-footer__email {
	margin: 0 0 var(--cc-space);
	max-width: 40ch;
}

.cc-footer__heading {
	margin: 0 0 var(--cc-space);
	color: var(--cc-color-text);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.cc-footer__links {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cc-footer a {
	color: var(--cc-color-text-muted);
	text-decoration: none;
}

.cc-footer a:hover,
.cc-footer a:focus-visible {
	color: var(--cc-color-accent-text);
	text-decoration: underline;
}

.cc-footer__base {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: var(--cc-space-4);
	padding-top: var(--cc-space-2);
	border-top: 1px solid var(--cc-color-border);
	font-size: 0.8125rem;
}

.cc-footer__copyright,
.cc-footer__legal {
	margin: 0;
}

@media (min-width: 700px) {
	.cc-footer__inner {
		grid-template-columns: 2fr 1fr 1fr 1fr;
	}
}

/* --------------------------------------------------------------------------
   WooCommerce surfaces that need to follow the tokens
   -------------------------------------------------------------------------- */
.woocommerce ul.products {
	display: grid;
	gap: var(--cc-space-3);
	grid-template-columns: repeat(1, minmax(0, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

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

.woocommerce ul.products li.product {
	width: 100%;
	margin: 0;
	float: none;
	clear: none;
}

@media (min-width: 480px) {
	.woocommerce ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 768px) {
	.woocommerce ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.woocommerce ul.products {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (prefers-reduced-motion: reduce) {
	.cc-product-card,
	.cc-share__link {
		transition: none !important;
	}

}

/* --------------------------------------------------------------------------
   Steam account
   -------------------------------------------------------------------------- */
.cc-notice {
	padding: var(--cc-space-2);
	margin-bottom: var(--cc-space-3);
	border: 1px solid var(--cc-color-border);
	border-left-width: 3px;
	border-radius: var(--cc-radius-sm);
	background: var(--cc-color-surface);
}

.cc-notice--success {
	border-left-color: var(--cc-color-success);
}

.cc-notice--error {
	border-left-color: var(--cc-color-danger);
}

.cc-notice--warning {
	border-left-color: var(--cc-color-warning);
}

.cc-steam-profile {
	display: flex;
	flex-direction: column;
	gap: var(--cc-space-2);
	padding: var(--cc-space-2);
	margin-bottom: var(--cc-space-3);
}

.cc-steam-profile__avatar {
	width: 72px;
	height: 72px;
	border-radius: var(--cc-radius-sm);
	object-fit: cover;
}

.cc-steam-profile__name {
	margin: 0 0 var(--cc-space);
	font-family: var(--cc-font-heading);
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--cc-color-text);
}

.cc-steam-profile__facts {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 4px var(--cc-space-2);
	margin: 0;
}

.cc-steam-profile__facts dt {
	color: var(--cc-color-text-muted);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.cc-steam-profile__facts dd {
	margin: 0;
	overflow-wrap: anywhere;
}

.cc-steam-profile__unverified {
	margin: var(--cc-space) 0 0;
	color: var(--cc-color-warning);
	font-size: 0.9375rem;
}

.cc-steam-field__help {
	display: block;
	margin-top: 6px;
	color: var(--cc-color-text-muted);
	font-size: 0.875rem;
}

.cc-steam-help {
	margin-bottom: var(--cc-space-3);
	padding: var(--cc-space);
	border: 1px solid var(--cc-color-border);
	border-radius: var(--cc-radius-sm);
	background: var(--cc-color-surface);
}

.cc-steam-help summary {
	cursor: pointer;
	font-weight: 600;
	color: var(--cc-color-text);
}

.cc-steam-help__steps {
	margin: var(--cc-space) 0 0 var(--cc-space-2);
	padding-left: var(--cc-space-2);
	color: var(--cc-color-text-muted);
}

.cc-steam-help__steps li + li {
	margin-top: 4px;
}

.cc-steam-help__note {
	margin: var(--cc-space) 0 0;
	color: var(--cc-color-text-muted);
	font-size: 0.875rem;
}

@media (min-width: 600px) {
	.cc-steam-profile {
		flex-direction: row;
		align-items: flex-start;
	}

	.cc-steam-profile__body {
		flex: 1;
	}
}

/* --------------------------------------------------------------------------
   Payments and checkout
   -------------------------------------------------------------------------- */
.cc-price-table {
	margin-block: var(--cc-space-3);
	padding: var(--cc-space-2);
	border: 1px solid var(--cc-color-border);
	border-radius: var(--cc-radius);
	background: var(--cc-color-surface);
}

.cc-price-table__title {
	margin: 0 0 var(--cc-space);
	font-family: var(--cc-font-heading);
	font-size: 1rem;
	color: var(--cc-color-text);
}

.cc-price-table__table {
	width: 100%;
	border-collapse: collapse;
}

.cc-price-table__table th,
.cc-price-table__table td {
	padding: 8px 0;
	text-align: left;
	border-bottom: 1px solid var(--cc-color-border);
	font-weight: 400;
}

.cc-price-table__table thead th {
	color: var(--cc-color-text-muted);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.cc-price-table__table tbody tr:last-child th,
.cc-price-table__table tbody tr:last-child td {
	border-bottom: 0;
}

.cc-price-table__adjustment {
	margin-left: 6px;
	color: var(--cc-color-text-muted);
	font-size: 0.8125rem;
}

.cc-price-table__price {
	text-align: right;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--cc-color-text);
}

.cc-price-table__note {
	margin: var(--cc-space) 0 0;
	color: var(--cc-color-text-muted);
	font-size: 0.8125rem;
}

.cc-checkout-section {
	margin-bottom: var(--cc-space-3);
	padding: var(--cc-space-2);
	border: 1px solid var(--cc-color-border);
	border-radius: var(--cc-radius);
	background: var(--cc-color-surface);
}

.cc-checkout-steam__name,
.cc-checkout-steam__id,
.cc-checkout-steam__change {
	margin: 0 0 4px;
}

.cc-gift-toggle__label {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
}

.cc-gift-fields {
	margin-top: var(--cc-space-2);
	padding-top: var(--cc-space-2);
	border-top: 1px solid var(--cc-color-border);
}





/* --------------------------------------------------------------------------
   Reviews, testimonials and wishlist
   -------------------------------------------------------------------------- */
.cc-verified {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 2px 8px;
	border: 1px solid var(--cc-color-success);
	border-radius: 999px;
	color: var(--cc-color-success);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.cc-verified__mark {
	font-weight: 700;
}

.cc-grid--testimonials {
	grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 700px) {
	.cc-grid--testimonials {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1000px) {
	.cc-grid--testimonials {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.cc-testimonial {
	display: flex;
	flex-direction: column;
	gap: var(--cc-space);
	margin: 0;
	padding: var(--cc-space-2);
}

.cc-testimonial__quote {
	margin: 0;
	color: var(--cc-color-text);
}

.cc-testimonial__quote p:last-child {
	margin-bottom: 0;
}

.cc-testimonial__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cc-space);
	align-items: baseline;
	margin-top: auto;
	padding-top: var(--cc-space);
	border-top: 1px solid var(--cc-color-border);
	color: var(--cc-color-text-muted);
	font-size: 0.875rem;
}

.cc-testimonial__author {
	font-weight: 700;
	color: var(--cc-color-text);
}

.cc-wishlist-button {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	margin-top: var(--cc-space);
	padding: 8px 16px;
	border: 1px solid var(--cc-color-border);
	border-radius: var(--cc-radius-sm);
	background: transparent;
	color: var(--cc-color-text);
	font: inherit;
	cursor: pointer;
	transition: border-color var(--cc-transition), color var(--cc-transition);
}

.cc-wishlist-button:hover,
.cc-wishlist-button:focus-visible {
	border-color: var(--cc-color-accent);
	color: var(--cc-color-accent-text);
}

.cc-wishlist-button.is-active {
	border-color: var(--cc-color-accent);
	color: var(--cc-color-accent-text);
}

.cc-wishlist-button[disabled] {
	opacity: 0.6;
	cursor: wait;
}

@media (prefers-reduced-motion: reduce) {
	.cc-wishlist-button {
		transition: none !important;
	}
}

/* --------------------------------------------------------------------------
   Header actions

   Appended to the theme's primary menu as list items, so they inherit the
   theme's own header layout and responsive behaviour. Styled as buttons here
   rather than as menu links.
   -------------------------------------------------------------------------- */
.cc-header-action {
	display: flex;
	align-items: center;
}

.cc-header-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--cc-space);
}

.cc-header-button {
	min-height: 40px;
	padding: 6px 14px;
	font-size: 0.9375rem;
	white-space: nowrap;
}

/* Menus often set their own link colour and underline; these are buttons. */
.cc-header-action .cc-header-button,
.cc-header-action .cc-header-button:hover,
.cc-header-action .cc-header-button:focus-visible {
	text-decoration: none;
}

.cc-header-cart {
	gap: 8px;
}

.cc-header-cart__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--cc-color-surface-elevated);
	color: var(--cc-color-text-muted);
	font-size: 0.75rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

.cc-header-cart__count.is-filled {
	background: var(--cc-color-accent);
	color: var(--cc-color-accent-contrast);
}

.cc-header-action .cc-theme-toggle {
	min-height: 40px;
}

@media (max-width: 782px) {
	/* In a stacked mobile menu the buttons should fill the row rather than
	   sit in a cramped line. */
	.cc-header-action {
		width: 100%;
	}

	.cc-header-action .cc-header-button,
	.cc-header-action .cc-theme-toggle {
		width: 100%;
		justify-content: center;
	}
}

/* --------------------------------------------------------------------------
   Shop layout: filters beside the grid.

   Single column on small screens, where a sidebar would push the products
   below the fold. The filter panel comes first in the source either way, so
   keyboard and screen-reader order match the visual order on desktop.
   -------------------------------------------------------------------------- */
.cc-shop {
	display: grid;
	gap: var(--cc-space-4);
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
}

.cc-shop__main {
	min-width: 0;
}

.cc-shop--filters-side .cc-shop__sidebar .cc-filters {
	margin-bottom: 0;
}

/* In a sidebar the controls stack, whatever the viewport is doing. */
.cc-shop__sidebar .cc-filters__controls {
	grid-template-columns: minmax(0, 1fr);
}

.cc-shop__sidebar .cc-filters__search {
	flex-wrap: wrap;
}

.cc-shop__sidebar .cc-filters__search input[type="search"] {
	min-width: 0;
}

@media (min-width: 900px) {
	.cc-shop--filters-side {
		grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
	}

	/* The sidebar follows the customer down a long catalogue. */
	.cc-shop--filters-side .cc-shop__sidebar {
		position: sticky;
		top: var(--cc-space-3);
	}
}

/* With filters above the grid, the panel spans the full width as before. */
.cc-shop--filters-top .cc-filters__controls {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 1000px) {
	.cc-shop--filters-top .cc-filters__controls {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

/* The grid now lives in a narrower column, so it steps down one breakpoint. */
@media (min-width: 900px) {
	.cc-shop--filters-side .woocommerce ul.products,
	.woocommerce .cc-shop--filters-side ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1200px) {
	.cc-shop--filters-side .woocommerce ul.products,
	.woocommerce .cc-shop--filters-side ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* --------------------------------------------------------------------------
   Dark-mode logo

   When a separate dark logo is set, both are in the markup and the theme mode
   decides which one shows - so switching modes never waits on a request.
   -------------------------------------------------------------------------- */
.cc-logo-dark {
	display: none !important;
}

:root[data-theme="dark"] .cc-logo-dark {
	display: inline-block !important;
}

:root[data-theme="dark"] .site-logo-container:has(.cc-logo-dark) img:not(.cc-logo-dark),
:root[data-theme="dark"] .custom-logo-link:has(.cc-logo-dark) img:not(.cc-logo-dark) {
	display: none !important;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme]) .cc-logo-dark {
		display: inline-block !important;
	}

	:root:not([data-theme]) .site-logo-container:has(.cc-logo-dark) img:not(.cc-logo-dark),
	:root:not([data-theme]) .custom-logo-link:has(.cc-logo-dark) img:not(.cc-logo-dark) {
		display: none !important;
	}
}

/* --------------------------------------------------------------------------
   Drop-down options

   Blocksy resets option text to `color: initial`, which in dark mode is white,
   and leaves the option background to the browser. Windows draws that list
   on white, so every sort and filter choice was white on white. The options
   carry the palette themselves now, in both modes.
   -------------------------------------------------------------------------- */
html select option,
html select optgroup {
	background-color: var(--cc-color-surface);
	color: var(--cc-color-text);
}

.cc-checkout-buyer[hidden] {
	display: none !important;
}

/* ==========================================================================
   Header refinements
   ========================================================================== */

/* Actions are separated from the navigation, and from each other. */
.cc-header-action + .cc-header-action {
	margin-left: 10px;
}

.cc-header-action:first-of-type {
	margin-left: var(--cc-space-3);
	padding-left: var(--cc-space-2);
	border-left: 1px solid var(--cc-color-border);
}

.cc-header-actions {
	gap: 10px;
}

.cc-header-button {
	gap: 8px;
	padding: 8px 14px;
}

.cc-icon {
	flex: none;
	display: block;
}

/* Cart shows an icon and a count; the word is left to assistive tech. */
.cc-header-cart {
	padding-inline: 12px;
}

/* Circular icon toggle, sized to sit among the other header buttons. */
.cc-theme-toggle {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	min-height: 0;
	padding: 0;
	gap: 0;
	border-radius: 50%;
}

/* Show the icon for the mode the button switches to. */
:root[data-theme="dark"] .cc-theme-toggle .cc-icon--sun {
	display: block;
}

:root[data-theme="dark"] .cc-theme-toggle .cc-icon--moon {
	display: none;
}

:root[data-theme="light"] .cc-theme-toggle .cc-icon--sun,
:root:not([data-theme]) .cc-theme-toggle .cc-icon--sun {
	display: none;
}

:root[data-theme="light"] .cc-theme-toggle .cc-icon--moon,
:root:not([data-theme]) .cc-theme-toggle .cc-icon--moon {
	display: block;
}

@media (max-width: 782px) {
	.cc-header-action:first-of-type {
		margin-left: 0;
		padding-left: 0;
		border-left: 0;
	}

	.cc-header-action .cc-theme-toggle {
		width: 100%;
		border-radius: var(--cc-radius-sm);
	}
}

/* ==========================================================================
   Search as an icon, with the space given back to the field
   ========================================================================== */
.cc-search-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--cc-color-border);
	border-radius: var(--cc-radius-sm);
	background: var(--cc-color-surface-elevated);
	color: var(--cc-color-text);
	cursor: pointer;
	transition: border-color var(--cc-transition), color var(--cc-transition);
}

.cc-search-button:hover,
.cc-search-button:focus-visible {
	border-color: var(--cc-color-accent);
	color: var(--cc-color-accent-text);
}

/* ==========================================================================
   Price range slider
   ========================================================================== */
.cc-price-filter {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.cc-price-filter__readout {
	color: var(--cc-color-text);
	font-size: 0.9375rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.cc-price-filter__track {
	position: relative;
	display: block;
	height: 34px;
}

/*
 * The two inputs are stacked; only their thumbs take pointer events, so each
 * handle stays independently grabbable while the tracks overlap.
 */
.cc-price-filter input[type="range"] {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 34px;
	margin: 0;
	background: none;
	pointer-events: none;
	appearance: none;
	-webkit-appearance: none;
}

.cc-price-filter input[type="range"]::-webkit-slider-runnable-track {
	height: 4px;
	margin-top: 15px;
	border-radius: 2px;
	background: var(--cc-color-border);
}

.cc-price-filter input[type="range"]::-moz-range-track {
	height: 4px;
	border-radius: 2px;
	background: var(--cc-color-border);
}

.cc-price-filter input[type="range"]::-webkit-slider-thumb {
	pointer-events: auto;
	appearance: none;
	-webkit-appearance: none;
	box-sizing: border-box;
	width: 18px;
	height: 18px;
	margin-top: -7px;
	border: 2px solid var(--cc-color-bg);
	border-radius: 50%;
	background: var(--cc-color-accent);
	cursor: grab;
}

.cc-price-filter input[type="range"]::-moz-range-thumb {
	pointer-events: auto;
	box-sizing: border-box;
	width: 18px;
	height: 18px;
	border: 2px solid var(--cc-color-bg);
	border-radius: 50%;
	background: var(--cc-color-accent);
	cursor: grab;
}

.cc-price-filter input[type="range"]:focus-visible::-webkit-slider-thumb {
	outline: 2px solid var(--cc-color-accent-text);
	outline-offset: 2px;
}

/* The selected span, drawn between the handles. */
.cc-price-filter__track::after {
	content: "";
	position: absolute;
	top: 15px;
	left: var(--cc-price-from, 0%);
	right: calc(100% - var(--cc-price-to, 100%));
	height: 4px;
	border-radius: 2px;
	background: var(--cc-color-accent);
	pointer-events: none;
}

/* ==========================================================================
   Product page: keep every section inside its column
   ========================================================================== */

/*
 * These sections render after the summary, where neither WooCommerce nor the
 * theme supplies a container - so they sat flush against the viewport edge.
 */
.cc-collection-info,
.cc-share,
.cc-ingame,
.cc-price-table {
	box-sizing: border-box;
	max-width: 100%;
}

.woocommerce div.product .cc-collection-info,
.woocommerce div.product .cc-share,
.woocommerce div.product .cc-ingame {
	clear: both;
	width: 100%;
	padding-inline: 0;
}

.cc-collection-info__summary {
	box-sizing: border-box;
	max-width: 100%;
}

.cc-collection-info__media img,
.cc-collection-info__image {
	max-width: 100%;
	height: auto;
}

.cc-share__list {
	padding-left: 0;
}

/* The product image scales with its column instead of overflowing it. */
.woocommerce div.product div.images,
.woocommerce div.product div.images img,
.woocommerce div.product div.images .woocommerce-product-gallery__image img {
	box-sizing: border-box;
	max-width: 100%;
	height: auto;
}

.woocommerce div.product div.images .woocommerce-product-gallery__wrapper {
	max-width: 100%;
}

/* ==========================================================================
   Tables: room around values so text never touches the rules
   ========================================================================== */
.cc-price-table__table {
	width: 100%;
	border-collapse: collapse;
	table-layout: auto;
}

.cc-price-table__table th,
.cc-price-table__table td {
	padding: 10px 14px;
	border-bottom: 1px solid var(--cc-color-border);
	text-align: left;
	vertical-align: middle;
}

.cc-price-table__table thead th {
	color: var(--cc-color-text-muted);
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.cc-price-table__table tbody tr:last-child th,
.cc-price-table__table tbody tr:last-child td {
	border-bottom: 0;
}

.cc-price-table__price {
	text-align: right;
	font-weight: 700;
	white-space: nowrap;
}

.cc-price-table__adjustment {
	margin-left: 6px;
	color: var(--cc-color-text-muted);
	font-size: 0.8125rem;
	font-weight: 400;
}





/* ==========================================================================
   Order received: the confirmation was unreadable on a dark ground
   ========================================================================== */
/*
 * Scoped to the message itself, not to a .woocommerce-order ancestor: the
 * thank-you page wraps it in a plain .woocommerce div, so that ancestor never
 * matched and the confirmation kept WooCommerce's own padding - including the
 * 46px reserved for the icon this stylesheet removes.
 */
body p.woocommerce-notice--success,
body .woocommerce-thankyou-order-received {
	border-left-color: var(--cc-color-success);
	font-size: 1.0625rem;
	font-weight: 600;
}

.woocommerce-order .woocommerce-order-overview,
.woocommerce-order .woocommerce-table,
.woocommerce-order table {
	color: var(--cc-color-text);
}

.woocommerce-order .woocommerce-table th,
.woocommerce-order .woocommerce-table td,
.woocommerce-order .woocommerce-order-overview li {
	padding: 10px 14px;
}

.woocommerce-order .woocommerce-order-overview {
	border: 1px solid var(--cc-color-border);
	border-radius: var(--cc-radius);
	background: var(--cc-color-surface);
}

/* ==========================================================================
   Support
   ========================================================================== */
.cc-support-fab {
	position: fixed;
	bottom: var(--cc-space-3);
	z-index: 90;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 18px;
	border-radius: 999px;
	background: var(--cc-color-accent);
	color: var(--cc-color-accent-contrast);
	font-weight: 600;
	text-decoration: none;
	box-shadow: 0 6px 20px rgb(0 0 0 / 28%);
	transition: background-color var(--cc-transition);
}

.cc-support-fab--right {
	right: var(--cc-space-3);
}

.cc-support-fab--left {
	left: var(--cc-space-3);
}

.cc-support-fab:hover,
.cc-support-fab:focus-visible {
	background: var(--cc-color-accent-hover);
	color: var(--cc-color-accent-contrast);
}

@media (max-width: 600px) {
	.cc-support-fab__label {
		position: absolute !important;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
	}

	.cc-support-fab {
		padding: 14px;
	}
}

.cc-support__heading {
	margin: var(--cc-space-4) 0 var(--cc-space-2);
	font-family: var(--cc-font-heading);
	font-size: var(--cc-font-size-h3);
}

.cc-support-list {
	margin: 0;
	padding: 0;
	overflow: hidden;
	list-style: none;
	border: 1px solid var(--cc-color-border);
	border-radius: var(--cc-radius);
}

.cc-support-list__item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--cc-space);
	padding: var(--cc-space-2);
	background: var(--cc-color-surface);
}

.cc-support-list__item + .cc-support-list__item {
	border-top: 1px solid var(--cc-color-border);
}

.cc-support-list__link {
	display: flex;
	flex-direction: column;
	gap: 2px;
	color: var(--cc-color-text);
	text-decoration: none;
}

.cc-support-list__subject {
	font-weight: 600;
}

.cc-support-list__meta {
	color: var(--cc-color-text-muted);
	font-size: 0.875rem;
}

.cc-ticket-status {
	display: inline-block;
	padding: 3px 10px;
	border: 1px solid currentColor;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.cc-ticket-status--open {
	color: var(--cc-color-warning);
}

.cc-ticket-status--answered {
	color: var(--cc-color-success);
}

.cc-ticket-status--closed {
	color: var(--cc-color-text-muted);
}

.cc-support-thread {
	display: flex;
	flex-direction: column;
	gap: var(--cc-space-2);
	margin-bottom: var(--cc-space-3);
}

.cc-support-thread__header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--cc-space);
}

.cc-support-thread__subject {
	margin: 0;
	font-family: var(--cc-font-heading);
}

.cc-support-message {
	padding: var(--cc-space-2);
	border: 1px solid var(--cc-color-border);
	border-radius: var(--cc-radius);
	background: var(--cc-color-surface);
}

.cc-support-message--seller {
	border-left: 3px solid var(--cc-color-accent);
	background: var(--cc-color-surface-elevated);
}

.cc-support-message__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cc-space);
	margin: 0 0 6px;
	color: var(--cc-color-text-muted);
	font-size: 0.875rem;
}

.cc-support-message__body p:last-child {
	margin-bottom: 0;
}

.cc-support-form textarea,
.cc-support-form input[type="text"],
.cc-support-form select {
	width: 100%;
	padding: 10px 12px;
	background-color: var(--cc-color-bg);
	border: 1px solid var(--cc-color-border);
	border-radius: var(--cc-radius-sm);
	color: var(--cc-color-text);
	font: inherit;
}

/*
 * The theme gives form controls a fixed 40px height. With 10px of padding top
 * and bottom that leaves an 18px content box, and `font: inherit` brought a
 * 26.4px line height with it - so the chosen order was drawn half outside its
 * own box and clipped through the middle. Height follows content instead, with
 * 40px as a floor so it still lines up with the text inputs beside it.
 */
.cc-support-form select {
	height: auto;
	min-height: 40px;
	line-height: 1.25;
	/*
	 * `appearance: none` removes the native arrow, and nothing was drawing one
	 * in its place, so the control read as a text field. The chevron is a
	 * neutral grey rather than currentColor because a data URI cannot see it;
	 * this one holds up on both the light and the dark ground.
	 */
	padding-right: 34px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238a8f98' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 12px 8px;
}

.cc-support-other__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cc-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ==========================================================================
   Footer: About us, quick links, legal
   ========================================================================== */
.cc-footer__column--about {
	max-width: 42ch;
}

.cc-footer__contact {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: var(--cc-space) 0 0;
	padding: 0;
	list-style: none;
}

.cc-footer__contact-label {
	display: block;
	color: var(--cc-color-text-muted);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.cc-footer__base {
	margin-top: var(--cc-space-4);
	padding-top: var(--cc-space-2);
	border-top: 1px solid var(--cc-color-border);
}

.cc-footer__base .cc-container {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.cc-footer__legal {
	max-width: 90ch;
	color: var(--cc-color-text-muted);
	font-size: 0.8125rem;
	line-height: 1.6;
}

@media (min-width: 700px) {
	.cc-footer__inner {
		grid-template-columns: 1.6fr 1fr 1fr 1fr;
	}
}

/* ==========================================================================
   Corrections round 2
   ========================================================================== */

/*
 * Product page sections sit in a full-bleed .product wrapper, so without a
 * container of their own they ran to the viewport edge.
 */
.woocommerce div.product .cc-collection-info,
.woocommerce div.product .cc-share,
.woocommerce div.product .cc-ingame {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--cc-container);
	margin-inline: auto;
	padding-inline: var(--cc-gutter);
}

/* With no treasure image the two-column summary collapses; keep one column. */
.cc-collection-info__summary {
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 700px) {
	.cc-collection-info__summary:has(.cc-collection-info__media) {
		grid-template-columns: 220px minmax(0, 1fr);
	}
}

.cc-collection-info__body .cc-button {
	white-space: normal;
	text-align: center;
}

/* The sibling grid inside the section follows the section, not the viewport. */
.cc-collection-info .cc-grid--products {
	grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 600px) {
	.cc-collection-info .cc-grid--products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1000px) {
	.cc-collection-info .cc-grid--products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* ==========================================================================
   Price slider alignment
   ========================================================================== */
.cc-price-filter__track {
	position: relative;
	display: block;
	height: 28px;
	margin-top: 4px;
	/* Room for the thumb at both ends so it is never clipped. */
	padding-inline: 9px;
}

.cc-price-filter input[type="range"] {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 28px;
	margin: 0;
	padding: 0;
	background: none;
	pointer-events: none;
	appearance: none;
	-webkit-appearance: none;
}

/*
 * No margin-top on this track. Chrome centres the track inside the input by
 * itself, so a 12px margin on top of that put it 6px below the rail drawn by
 * the track's ::before and the handles hung under the line. Left centred it
 * sits at 12px - 4px tall in a 28px input - exactly on the rail.
 */
.cc-price-filter input[type="range"]::-webkit-slider-runnable-track {
	height: 4px;
	margin-top: 0;
	border-radius: 2px;
	background: transparent;
}

.cc-price-filter input[type="range"]::-moz-range-track {
	height: 4px;
	border-radius: 2px;
	background: transparent;
}

/* One rail behind both inputs, so they cannot disagree about where it is. */
.cc-price-filter__track::before {
	content: "";
	position: absolute;
	top: 12px;
	left: 0;
	right: 0;
	height: 4px;
	border-radius: 2px;
	background: var(--cc-color-border);
	pointer-events: none;
}

.cc-price-filter__track::after {
	content: "";
	position: absolute;
	top: 12px;
	left: var(--cc-price-from, 0%);
	right: calc(100% - var(--cc-price-to, 100%));
	height: 4px;
	border-radius: 2px;
	background: var(--cc-color-accent);
	pointer-events: none;
}

/*
 * box-sizing is load-bearing here. A `* { box-sizing: border-box }` reset does
 * not match pseudo-elements, so the thumb stayed content-box: 18px plus a 2px
 * border on each side rendered as 22px, and the extra height hung below the
 * rail. Both handles sat about 2px low. The margin below centres an 18px thumb
 * on a 4px track - (4 - 18) / 2 - which only holds if the thumb really is 18px.
 */
.cc-price-filter input[type="range"]::-webkit-slider-thumb {
	pointer-events: auto;
	appearance: none;
	-webkit-appearance: none;
	box-sizing: border-box;
	width: 18px;
	height: 18px;
	margin-top: -7px;
	border: 2px solid var(--cc-color-bg);
	border-radius: 50%;
	background: var(--cc-color-accent);
	cursor: pointer;
}

.cc-price-filter input[type="range"]::-moz-range-thumb {
	pointer-events: auto;
	box-sizing: border-box;
	width: 18px;
	height: 18px;
	border: 2px solid var(--cc-color-bg);
	border-radius: 50%;
	background: var(--cc-color-accent);
	cursor: pointer;
}

/* ==========================================================================
   Header: nav left of centre, actions hard right
   ========================================================================== */
.cc-header-action:first-of-type {
	margin-left: auto;
	padding-left: var(--cc-space-2);
	border-left: 1px solid var(--cc-color-border);
}

/*
 * Sticky header (Settings -> Header -> Sticky header, which puts
 * cc-header-sticky on the body). The theme's rows already carry a frosted,
 * translucent background, so the page reads through as it scrolls under.
 * Below the WordPress toolbar when it is showing; on small phones the
 * toolbar scrolls away, so there the header sits at the very top.
 */
.cc-header-sticky #header {
	position: sticky;
	top: 0;
	z-index: 90;
}

@media (min-width: 601px) {
	.cc-header-sticky.admin-bar #header {
		top: var(--wp-admin--admin-bar--height, 32px);
	}
}

/*
 * Once the page has scrolled (cc-scrolled, set by storefront.js) the desktop
 * header tightens from the theme's 120px row, so it does not hold an eighth
 * of the screen while reading. Phones already use a 70px row.
 */
.cc-header-sticky #header [data-row*="middle"] > .ct-container {
	transition: min-height var(--cc-transition), height var(--cc-transition);
}

@media (min-width: 1000px) {
	.cc-header-sticky.cc-scrolled #header [data-row*="middle"] {
		--height: 76px;
	}

	/*
	 * What the row gives up comes back as a margin, on the same curve, so
	 * the header's footprint is constant and the page never moves under it
	 * (storefront.js measures --cc-header-give; see the note there).
	 */
	.cc-header-sticky #header {
		transition: margin-bottom var(--cc-transition);
	}

	.cc-header-sticky.cc-scrolled #header {
		margin-bottom: var(--cc-header-give, 0px);
	}
}

.cc-header-sticky.cc-scrolled #header [data-row] {
	box-shadow: 0 6px 20px -12px rgba(0, 0, 0, 0.35);
}

/*
 * The shop's filter sidebar (with the search field at its top) is sticky too;
 * it has to stop below the header rather than slide under it. 76px is the
 * header once scrolled, which is the only time the sidebar is stuck.
 */
@media (min-width: 900px) {
	.cc-header-sticky .cc-shop--filters-side .cc-shop__sidebar {
		top: calc(76px + var(--cc-space-3));
	}

	.cc-header-sticky.admin-bar .cc-shop--filters-side .cc-shop__sidebar {
		top: calc(76px + var(--cc-space-3) + var(--wp-admin--admin-bar--height, 32px));
	}
}

/*
 * The header's search button jumps to the shop's search field (#cc-search).
 * Without a margin the jump parked the field under the sticky header.
 */
.cc-header-sticky #cc-search,
.cc-header-sticky :target {
	scroll-margin-top: 116px;
}

@media (max-width: 999px) {
	.cc-header-sticky #cc-search,
	.cc-header-sticky :target {
		scroll-margin-top: 90px;
	}
}

/* The menu has to be able to grow for margin-left:auto to push anything. */
#header .menu,
.ct-header .menu {
	flex: 1;
}

@media (max-width: 782px) {
	.cc-header-action:first-of-type {
		margin-left: 0;
		padding-left: 0;
		border-left: 0;
	}
}

/* ==========================================================================
   The support button must not sit on top of page content
   ========================================================================== */
body.cc-has-support-button .cc-footer__base {
	padding-bottom: 72px;
}

/* The order-received page ends in a short block that the button covered. */
body.cc-has-support-button.woocommerce-order-received .cc-footer,
body.cc-has-support-button .woocommerce-order {
	scroll-margin-bottom: 96px;
}

@media (max-width: 600px) {
	body.cc-has-support-button .cc-footer__base {
		padding-bottom: 84px;
	}
}

/* ==========================================================================
   Reviews: the sign-in prompt is a link
   ========================================================================== */
.cc-review-login {
	color: var(--cc-color-accent-text);
	font-weight: 600;
}

/* ==========================================================================
   Redesign layer
   --------------------------------------------------------------------------
   A single visual system, expressed only in tokens. Nothing below invents a
   colour, a size or a spacing value: everything reads a --cc-* custom
   property, so the Website Customizer stays the one place the design lives.

   The rules of the system:

     Rhythm     one vertical step between sections (--cc-section), one
                horizontal gutter, one container width. Nothing else.
     Type       one typeface, four heading steps, two body sizes, three
                weights. Headings are tightened; body text is not.
     Surfaces   three levels - page, surface, elevated - separated by colour
                and a hairline border rather than by shadow.
     Depth      two shadows, both restrained. Shadow signals interaction, not
                decoration.
     Motion     one duration, one easing, and only on colour, border and
                small transforms.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Base typography
   -------------------------------------------------------------------------- */
body {
	font-family: var(--cc-font-body);
	font-size: var(--cc-font-size);
	line-height: var(--cc-line-height);
	font-weight: var(--cc-weight-body, 400);
	color: var(--cc-color-text);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.cc-hero__title,
.cc-section-header__title {
	font-family: var(--cc-font-heading);
	font-weight: var(--cc-weight-heading, 650);
	letter-spacing: var(--cc-tracking-heading, -0.021em);
	line-height: var(--cc-leading-tight, 1.12);
	color: var(--cc-color-text);
	text-wrap: balance;
}

h1 { font-size: var(--cc-font-size-h1); }
h2 { font-size: var(--cc-font-size-h2); }
h3 { font-size: var(--cc-font-size-h3); line-height: var(--cc-leading-snug, 1.3); }

/* Long-form text stops growing where it stops being readable. */
p,
.cc-measure {
	max-width: var(--cc-measure, 68ch);
}

/* An eyebrow labels a section without competing with its heading. */
.cc-eyebrow {
	display: inline-block;
	margin-bottom: var(--cc-space);
	color: var(--cc-color-accent-text);
	font-size: var(--cc-font-size-eyebrow, 13px);
	font-weight: var(--cc-weight-strong, 600);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Rhythm
   -------------------------------------------------------------------------- */
.cc-section {
	margin-block: var(--cc-section);
	padding-block: 0;
}

/*
 * WordPress's block layout sets `margin-block: 0` on every direct child of
 * `.is-layout-constrained`, which ties with a bare `.cc-section` on
 * specificity and wins on order. Naming the parent takes the tie.
 */
.entry-content > .cc-section,
.cc-shop > .cc-section {
	margin-block: var(--cc-section);
}

/*
 * Deliberately not `.cc-section:first-child`: a shortcode can land in a
 * wrapper of its own, which made every section a first child and removed the
 * space above all of them. Only a section that really is the first thing in
 * the content loses its top margin.
 */
.entry-content > .cc-section:first-child {
	margin-top: 0;
}

.cc-section-header {
	align-items: end;
	margin-bottom: var(--cc-space-4);
}

.cc-section-header__title {
	margin: 0;
}

.cc-section-header__subtitle {
	margin: 10px 0 0;
	max-width: 56ch;
	color: var(--cc-color-text-muted);
	font-size: 1.0625rem;
}

.cc-section-header__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.9375rem;
	font-weight: var(--cc-weight-strong, 600);
}

/* A quiet arrow that nudges on hover: the one piece of motion in a heading. */
.cc-section-header__link::after {
	content: "→";
	transition: transform var(--cc-transition);
}

.cc-section-header__link:hover::after,
.cc-section-header__link:focus-visible::after {
	transform: translateX(3px);
}

/* --------------------------------------------------------------------------
   Buttons

   Two levels only. The primary is solid and used once per view; the secondary
   is a hairline that reads as an alternative rather than a competitor.
   -------------------------------------------------------------------------- */
.cc-button {
	min-height: 46px;
	padding: 12px 22px;
	border-radius: var(--cc-radius-sm);
	font-size: 0.9375rem;
	font-weight: var(--cc-weight-strong, 600);
	letter-spacing: -0.005em;
	box-shadow: none;
	transition:
		background-color var(--cc-transition),
		border-color var(--cc-transition),
		color var(--cc-transition),
		transform var(--cc-transition);
}

.cc-button:hover {
	transform: translateY(-1px);
}

.cc-button:active {
	transform: translateY(0);
}

.cc-button--secondary {
	background: transparent;
	border-color: var(--cc-button-outline, var(--cc-color-border));
	color: var(--cc-color-text);
}

.cc-button--secondary:hover,
.cc-button--secondary:focus-visible {
	border-color: var(--cc-color-text-muted);
	background: var(--cc-color-surface-elevated);
}

/*
 * On a light page the hairline border is too faint to read as a button, so
 * an outline button draws its edge from the text colour instead. Dark mode
 * keeps the hairline, which already stands out against the dark page.
 */
:root,
:root[data-theme="light"] {
	--cc-button-outline: color-mix(in srgb, var(--cc-color-text) 38%, var(--cc-color-border));
}

:root[data-theme="dark"] {
	--cc-button-outline: color-mix(in srgb, var(--cc-color-text) 14%, var(--cc-color-border));
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--cc-button-outline: color-mix(in srgb, var(--cc-color-text) 14%, var(--cc-color-border));
	}
}

/* A third, quietest level: a link that behaves like a button. */
.cc-button--ghost {
	background: transparent;
	border-color: transparent;
	color: var(--cc-color-accent-text);
	padding-inline: 4px;
}

.cc-button--ghost:hover,
.cc-button--ghost:focus-visible {
	background: transparent;
	color: var(--cc-color-accent-text);
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* --------------------------------------------------------------------------
   Surfaces
   -------------------------------------------------------------------------- */
.cc-card {
	border-radius: var(--cc-radius);
	box-shadow: var(--cc-shadow);
	transition:
		border-color var(--cc-transition),
		box-shadow var(--cc-transition),
		transform var(--cc-transition);
}

/* --------------------------------------------------------------------------
   Hero

   The one section allowed to be large. The copy sits in a box; two columns
   on desktop with the copy given the wider share, a single column, still
   left-aligned, below that. With artwork switched on, the artwork fills a
   frame around the box, blurred so it sets a mood without competing with
   the words.
   -------------------------------------------------------------------------- */
.cc-hero {
	position: relative;
	display: block;
	margin-top: clamp(1rem, 0.5rem + 1.5vw, 2rem);
	padding: 0;
	border-radius: calc(var(--cc-radius) * 2);
	isolation: isolate;
}

.cc-hero--backdrop {
	padding: clamp(14px, 1rem + 2.5vw, 56px);
}

.cc-hero__backdrop {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	border-radius: inherit;
	background: var(--cc-color-surface-elevated);
}

/* Oversized, so the blur has no soft, see-through edge. */
.cc-hero__backdrop::before {
	content: "";
	position: absolute;
	inset: -40px;
	background: var(--cc-hero-backdrop) center / cover no-repeat;
	filter: blur(7px) saturate(1.15);
}

/* A wash in the page colour keeps the frame quiet in both modes. */
.cc-hero__backdrop::after {
	content: "";
	position: absolute;
	inset: 0;
	background: color-mix(in srgb, var(--cc-color-bg) 22%, transparent);
}

.cc-hero__box {
	display: grid;
	gap: var(--cc-space-6);
	align-items: center;
	padding: clamp(1.5rem, 0.75rem + 3vw, 3.5rem);
	border: 1px solid var(--cc-color-border);
	border-radius: calc(var(--cc-radius) * 1.5);
	background: var(--cc-color-surface);
}

.cc-hero--backdrop .cc-hero__box {
	border-color: color-mix(in srgb, var(--cc-color-border) 60%, transparent);
	background: color-mix(in srgb, var(--cc-color-surface) 92%, transparent);
	box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.55);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.cc-hero__title {
	margin: 0 0 var(--cc-space-2);
	max-width: 18ch;
}

.cc-hero__text {
	max-width: 52ch;
	color: var(--cc-color-text-muted);
	font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
	line-height: 1.6;
}

.cc-hero__actions {
	gap: 12px;
	margin-top: var(--cc-space-4);
}

.cc-hero__media {
	position: relative;
}

.cc-hero__image {
	border-radius: var(--cc-radius);
	box-shadow: var(--cc-shadow-raised);
}

/* Supporting facts under the hero copy: trust signals, not decoration. */
.cc-hero__points {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cc-space-2) var(--cc-space-4);
	margin: var(--cc-space-4) 0 0;
	padding: 0;
	list-style: none;
}

.cc-hero__point {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--cc-color-text-muted);
	font-size: 0.9375rem;
}

.cc-hero__point::before {
	content: "";
	flex: none;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--cc-color-accent);
}

@media (min-width: 900px) {
	.cc-hero--with-image {
		grid-template-columns: none;
	}

	.cc-hero--with-picture .cc-hero__box {
		grid-template-columns: 1.05fr 0.95fr;
	}

	/* The Steam card keeps its own width; the copy takes the rest. */
	.cc-hero--with-steam .cc-hero__box {
		grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
	}
}

.cc-hero__media--steam .cc-seller-card {
	width: 100%;
	max-width: 420px;
	margin-inline: auto;
}

/*
 * Phones and tablets: the theme's 50px top spacing on the content area
 * opened a band of empty page between the header and the hero. The hero's
 * own frame is edge enough.
 */
@media (max-width: 999px) {
	body:has(.cc-hero) .ct-container-full {
		padding-top: 14px;
	}
}

/* Phones: a thinner frame and box edge leave the words and the card room. */
@media (max-width: 599px) {
	.cc-hero--backdrop {
		padding: 10px;
	}

	.cc-hero__box {
		padding: 22px 18px;
	}

	.cc-hero__media--steam .cc-seller-card__stat dt {
		letter-spacing: 0.02em;
		overflow-wrap: normal;
		word-break: normal;
		hyphens: auto;
	}
}

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

   Flat at rest, lifted on hover. The image is the only strong element; the
   rest is a quiet type hierarchy.
   -------------------------------------------------------------------------- */
.cc-product-card:hover {
	border-color: var(--cc-color-border);
	box-shadow: var(--cc-shadow-raised);
	transform: translateY(-2px);
}

.cc-product-card__media {
	aspect-ratio: 4 / 3;
	border-bottom: 1px solid var(--cc-color-border);
}

.cc-product-card__body {
	gap: 10px;
	padding: var(--cc-space-2) var(--cc-space-2) var(--cc-space-3);
}

.cc-product-card__title {
	font-size: 1.0625rem;
	font-weight: var(--cc-weight-strong, 600);
	letter-spacing: -0.01em;
	line-height: 1.35;
}

.cc-product-card__meta {
	font-size: 0.875rem;
	color: var(--cc-color-text-muted);
}

.cc-product-card__footer {
	padding-top: var(--cc-space-2);
	border-top: 1px solid var(--cc-color-border);
}

.cc-product-card__price {
	font-size: 1.1875rem;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.cc-product-card__flag {
	top: 10px;
	left: 10px;
	border-radius: 999px;
	font-size: 0.6875rem;
	letter-spacing: 0.06em;
	box-shadow: var(--cc-shadow);
}

/* --------------------------------------------------------------------------
   Tags
   -------------------------------------------------------------------------- */
.cc-tag {
	padding: 3px 10px;
	font-size: 0.6875rem;
	letter-spacing: 0.06em;
}

/* --------------------------------------------------------------------------
   Collection card
   -------------------------------------------------------------------------- */
.cc-collection-card:hover {
	box-shadow: var(--cc-shadow-raised);
	transform: translateY(-2px);
}

.cc-collection-card__media {
	border-bottom: 1px solid var(--cc-color-border);
}

.cc-collection-card__body {
	gap: 8px;
	padding: var(--cc-space-2) var(--cc-space-2) var(--cc-space-3);
}

.cc-collection-card__title {
	font-size: 1.0625rem;
	letter-spacing: -0.01em;
}

.cc-collection-card__year {
	align-self: flex-start;
	display: inline-block;
	padding: 2px 8px;
	border: 1px solid var(--cc-color-border);
	border-radius: 999px;
	font-size: 0.75rem;
}

/* --------------------------------------------------------------------------
   Filters panel
   -------------------------------------------------------------------------- */
.cc-filters {
	padding: var(--cc-space-3) var(--cc-space-2);
	border-radius: var(--cc-radius);
	box-shadow: var(--cc-shadow);
}

.cc-filters__label {
	font-size: 0.75rem;
	letter-spacing: 0.06em;
}

.cc-filters select,
.cc-filters input[type="search"] {
	border-radius: var(--cc-radius-sm);
	transition: border-color var(--cc-transition);
}

.cc-filters select:focus,
.cc-filters input[type="search"]:focus {
	border-color: var(--cc-color-accent);
	outline: none;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.cc-footer {
	margin-top: var(--cc-section);
	padding-block: var(--cc-section) var(--cc-space-3);
	background: var(--cc-color-surface);
}

.cc-footer__heading {
	margin-bottom: var(--cc-space-2);
	font-size: 0.75rem;
	letter-spacing: 0.09em;
}

.cc-footer__name {
	font-size: 1.125rem;
	letter-spacing: -0.015em;
}

.cc-footer__links {
	gap: 10px;
}

.cc-footer__links a,
.cc-footer__contact a {
	transition: color var(--cc-transition);
}

/*
 * The copyright rule belongs to the footer, so it sits a normal block apart
 * from the columns above it. Using the page's section rhythm here opened a
 * gap the size of a gap between two sections, which read as a mistake.
 */
.cc-footer__base {
	margin-top: var(--cc-space-4);
	padding-top: var(--cc-space-3);
}

/* --------------------------------------------------------------------------
   Product page
   -------------------------------------------------------------------------- */
.cc-product__lineage {
	font-size: 0.9375rem;
}

.cc-price-table {
	margin-block: var(--cc-space-3);
	padding: var(--cc-space-2);
	border: 1px solid var(--cc-color-border);
	border-radius: var(--cc-radius);
	background: var(--cc-color-surface);
}

.cc-price-table__title {
	margin-bottom: var(--cc-space);
	font-size: 0.75rem;
	font-weight: var(--cc-weight-strong, 600);
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--cc-color-text-muted);
}

.cc-price-table__note {
	margin-top: var(--cc-space);
	font-size: 0.8125rem;
	color: var(--cc-color-text-muted);
}

.cc-ingame__title,
.cc-collection-info__title,
.cc-share__title {
	margin-bottom: var(--cc-space-3);
}

.cc-ingame__image {
	border-radius: var(--cc-radius);
	transition: transform var(--cc-transition), box-shadow var(--cc-transition);
}

.cc-ingame__item:hover .cc-ingame__image {
	box-shadow: var(--cc-shadow-raised);
	transform: translateY(-2px);
}

.cc-share__link {
	border-radius: var(--cc-radius-sm);
	font-size: 0.9375rem;
	font-weight: var(--cc-weight-medium, 500);
}

/* --------------------------------------------------------------------------
   Motion is opt-out
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.cc-button:hover,
	.cc-product-card:hover,
	.cc-collection-card:hover,
	.cc-ingame__item:hover .cc-ingame__image {
		transform: none;
	}

	.cc-section-header__link:hover::after {
		transform: none;
	}
}

/* --------------------------------------------------------------------------
   WooCommerce's own notices.

   These were never styled, so they kept WooCommerce's stock light-grey panel
   while the text colour came from our tokens. In dark mode that produced
   #f4f5f7 text on an #f0f1f3 background - a contrast ratio of 1.03:1, which is
   invisible rather than merely low. Styling them from the tokens fixes both
   themes at once, because both themes define the same token names.

   Colour is never the only signal: each variant keeps its own wording and a
   left border, so the meaning survives greyscale and colour-blindness.
   -------------------------------------------------------------------------- */
/*
 * The `body` prefix is load-bearing. Blocksy styles these with
 * :is(.woocommerce-info, ...), whose specificity is (0,1,0) - identical to a
 * bare class - and its stylesheet is enqueued after this one, so every tie
 * went to the theme. One element selector is enough to settle it without
 * reaching for !important.
 */
body .woocommerce-info,
body .woocommerce-message,
body .woocommerce-error,
body .woocommerce-noreviews,
body .woocommerce-notice,
body .woocommerce-thankyou-order-received,
body .wc-block-components-notice-banner {
	display: flex;
	align-items: center;
	gap: var(--cc-space-2);
	box-sizing: border-box;
	width: 100%;
	min-height: 0;
	margin: 0 0 var(--cc-space-3);
	padding: var(--cc-space-2) var(--cc-space-3);
	border: 1px solid var(--cc-color-border);
	border-left: 3px solid var(--cc-color-text-muted);
	border-radius: var(--cc-radius-sm);
	background: var(--cc-color-surface);
	color: var(--cc-color-text);
	font-size: 0.9375rem;
	line-height: var(--cc-line-height);
	list-style: none;
}

/*
 * The theme draws a glyph from its own "woo" icon font here and reserves 46px
 * of inline padding for it. A plugin should not depend on a font the theme
 * happens to ship, so the glyph goes and the space comes back to the text.
 *
 * .woocommerce-notice and .woocommerce-thankyou-order-received are named
 * explicitly: the theme lists them in the same :is() group as the notices, so
 * leaving them out left the bell drawn on top of "Thank you. Your order has
 * been received." The ::after in that group is reset for the same reason.
 */
body .woocommerce-info::before,
body .woocommerce-message::before,
body .woocommerce-error::before,
body .woocommerce-noreviews::before,
body .woocommerce-notice::before,
body .woocommerce-thankyou-order-received::before,
body .woocommerce-info::after,
body .woocommerce-message::after,
body .woocommerce-error::after,
body .woocommerce-notice::after,
body .woocommerce-thankyou-order-received::after {
	content: none;
	padding: 0;
}

body .woocommerce-message {
	border-left-color: var(--cc-color-success);
}

body .woocommerce-error {
	border-left-color: var(--cc-color-danger);
	flex-direction: column;
	align-items: flex-start;
}

body .woocommerce-info {
	border-left-color: var(--cc-color-accent-text);
}

/* The action inside a notice ("Return to shop", "Login") is the point of it,
   so it reads as a button rather than as more sentence. */
body .woocommerce-info .button,
body .woocommerce-message .button,
body .woocommerce-error .button,
body .woocommerce-info a.button,
body .woocommerce-message a.button {
	margin-left: auto;
	flex: 0 0 auto;
}

/* An empty cart is a dead end unless it points somewhere. */
.cart-empty {
	font-size: 1.0625rem;
}

.woocommerce .return-to-shop {
	margin-block: var(--cc-space-3);
}

/* --------------------------------------------------------------------------
   Confirmation dialog (cancelling an order).

   Cancelling is irreversible and the control sits in a row of otherwise safe
   actions, so it asks first. <dialog> is used for the modality, focus trap and
   Escape handling the platform already implements correctly.
   -------------------------------------------------------------------------- */
.cc-confirm {
	max-width: 30rem;
	padding: var(--cc-space-4);
	border: 1px solid var(--cc-color-border);
	border-radius: var(--cc-radius);
	background: var(--cc-color-surface-elevated);
	color: var(--cc-color-text);
}

.cc-confirm::backdrop {
	background: rgb(0 0 0 / 55%);
}

.cc-confirm__title {
	margin: 0 0 var(--cc-space);
	font-size: var(--cc-h3-size, 1.25rem);
	font-weight: var(--cc-weight-strong, 600);
}

.cc-confirm__text {
	margin: 0 0 var(--cc-space-3);
	color: var(--cc-color-text-muted);
}

.cc-confirm__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: var(--cc-space-2);
}

/* The destructive choice is never the quiet one. */
.cc-confirm__confirm {
	background: var(--cc-color-danger);
	border-color: var(--cc-color-danger);
	color: #fff;
}

.cc-confirm__confirm:hover,
.cc-confirm__confirm:focus-visible {
	background: var(--cc-color-danger);
	border-color: var(--cc-color-danger);
	color: #fff;
	filter: brightness(1.1);
}

/* --------------------------------------------------------------------------
   Share row, in the summary column.

   It used to render as a full-width band below the summary, so earlier rules
   gave it a container and a section heading. In the summary it is a row of
   icon buttons sitting beside the wishlist button, and those rules have to be
   undone at matching specificity.
   -------------------------------------------------------------------------- */
.woocommerce div.product .summary .cc-share,
.summary .cc-share {
	display: inline-flex;
	align-items: center;
	gap: var(--cc-space);
	width: auto;
	max-width: none;
	margin: 0 0 0 var(--cc-space-2);
	padding-inline: 0;
	vertical-align: middle;
}

/* Both controls become inline so they share a line without a wrapper. */
.summary .cc-wishlist-button {
	display: inline-flex;
	vertical-align: middle;
}

/*
 * The heading still names the group for screen readers; at this size the
 * icons carry the meaning, so it is not shown.
 */
.summary .cc-share__title {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.summary .cc-share__list {
	display: flex;
	align-items: center;
	gap: var(--cc-space);
	margin: 0;
	padding-left: 0;
	list-style: none;
}

.summary .cc-share__item {
	margin: 0;
	list-style: none;
}

/* 44px matches the wishlist button beside it, and is the minimum comfortable
   touch target. */
.summary .cc-share__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--cc-color-border);
	border-radius: var(--cc-radius-sm);
	background: transparent;
	color: var(--cc-color-text-muted);
	text-decoration: none;
	transition: color var(--cc-transition), border-color var(--cc-transition), background-color var(--cc-transition);
}

.summary .cc-share__link:hover,
.summary .cc-share__link:focus-visible {
	border-color: var(--cc-color-accent-text);
	background: var(--cc-color-surface-elevated);
	color: var(--cc-color-text);
}

/* A network with no glyph keeps its words instead of an empty square. */
.summary .cc-share__link:has(.cc-share__label) {
	width: auto;
	padding-inline: var(--cc-space-2);
}

/* --------------------------------------------------------------------------
   Community links in the footer.

   Buttons rather than a list of words: they are the one place in the footer
   where the visitor is being invited to go somewhere, and a row of marks reads
   faster than a stack of link text.
   -------------------------------------------------------------------------- */
.cc-social {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cc-space);
	margin: 0;
	padding: 0;
	list-style: none;
}

.cc-social__item {
	margin: 0;
	list-style: none;
}

.cc-social__link {
	display: inline-flex;
	align-items: center;
	gap: var(--cc-space);
	min-height: 40px;
	padding: 0 var(--cc-space-2);
	border: 1px solid var(--cc-color-border);
	border-radius: var(--cc-radius-sm);
	background: var(--cc-color-surface);
	color: var(--cc-color-text-muted);
	font-size: 0.875rem;
	font-weight: var(--cc-weight-medium, 500);
	line-height: 1;
	text-decoration: none;
	transition: color var(--cc-transition), border-color var(--cc-transition), background-color var(--cc-transition);
}

.cc-social__link:hover,
.cc-social__link:focus-visible {
	border-color: var(--cc-color-accent-text);
	background: var(--cc-color-surface-elevated);
	color: var(--cc-color-text);
}

.cc-social__link .cc-icon {
	flex: 0 0 auto;
}

/*
 * Icon-only squares at every width. The community links sit in one footer
 * column of four, which is never wide enough for five labelled buttons: with
 * the words in place the row wrapped onto three lines and stopped reading as
 * a set. The label stays as the accessible name.
 */
.cc-social {
	flex-wrap: nowrap;
}

.cc-social__link {
	width: 40px;
	padding: 0;
	justify-content: center;
}

.cc-social__label {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* An icon-less network still needs its words to be identifiable. */
.cc-social__link--text {
	width: auto;
	padding-inline: var(--cc-space-2);
}

.cc-social__link--text .cc-social__label {
	position: static !important;
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	clip: auto;
	clip-path: none;
}

/* --------------------------------------------------------------------------
   Shop toolbar: what is applied, and how the results are ordered.

   Sorting sits here rather than in the filter panel because it reorders the
   results instead of narrowing them, so it belongs beside what it reorders.
   -------------------------------------------------------------------------- */
.cc-shop-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--cc-space-2);
	margin-bottom: var(--cc-space-3);
}

.cc-sort {
	display: flex;
	align-items: center;
	gap: var(--cc-space);
	margin-left: auto;
}

.cc-sort__label {
	color: var(--cc-color-text-muted);
	font-size: 0.875rem;
	white-space: nowrap;
}

.cc-sort__select {
	min-height: 40px;
	padding: 6px 10px;
	border: 1px solid var(--cc-color-border);
	border-radius: var(--cc-radius-sm);
	background: var(--cc-color-surface);
	color: var(--cc-color-text);
	font: inherit;
	font-size: 0.9375rem;
}

/* Applied filters ---------------------------------------------------------
   Each one is removable on its own. A single "Clear filters" link forced an
   all-or-nothing choice, so narrowing by four things and wanting three meant
   starting again.
   ------------------------------------------------------------------------- */
.cc-active-filters__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--cc-space);
	margin: 0;
	padding: 0;
	list-style: none;
}

.cc-active-filters__item {
	margin: 0;
	list-style: none;
}

.cc-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 4px 4px 10px;
	border: 1px solid var(--cc-color-border);
	border-radius: 999px;
	background: var(--cc-color-surface);
	font-size: 0.8125rem;
	line-height: 1.4;
}

.cc-chip__label {
	color: var(--cc-color-text-muted);
}

.cc-chip__label::after {
	content: ":";
}

.cc-chip__value {
	color: var(--cc-color-text);
	font-weight: var(--cc-weight-medium, 500);
}

.cc-chip__remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	color: var(--cc-color-text-muted);
	font-size: 1rem;
	line-height: 1;
	text-decoration: none;
	transition: background-color var(--cc-transition), color var(--cc-transition);
}

.cc-chip__remove:hover,
.cc-chip__remove:focus-visible {
	background: var(--cc-color-accent);
	color: var(--cc-color-accent-contrast);
}

.cc-active-filters__clear {
	color: var(--cc-color-accent-text);
	font-size: 0.8125rem;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Typed price bounds ------------------------------------------------------
   The sliders are quick but imprecise, so the same two values are typeable.
   ------------------------------------------------------------------------- */
.cc-price-filter__inputs {
	display: flex;
	align-items: center;
	gap: var(--cc-space);
	margin-bottom: var(--cc-space);
}

.cc-price-filter__input {
	width: 100%;
	min-width: 0;
	min-height: 40px;
	padding: 6px 8px;
	border: 1px solid var(--cc-color-border);
	border-radius: var(--cc-radius-sm);
	background: var(--cc-color-bg);
	color: var(--cc-color-text);
	font: inherit;
	font-size: 0.9375rem;
	text-align: center;
}

.cc-price-filter__input:focus-visible {
	border-color: var(--cc-color-accent-text);
}

.cc-price-filter__joiner {
	flex: 0 0 auto;
	color: var(--cc-color-text-muted);
}

@media (max-width: 600px) {
	.cc-shop-toolbar {
		align-items: stretch;
	}

	.cc-sort {
		margin-left: 0;
		width: 100%;
	}

	.cc-sort__select {
		flex: 1;
	}
}

/* --------------------------------------------------------------------------
   Discounted prices.

   The old figure stays on the page rather than being replaced: a price that
   simply changed says nothing, while one shown next to what it was says how
   much has come off. The struck-through value is muted so the payable figure
   still reads first.
   -------------------------------------------------------------------------- */
.cc-product-card__was,
.cc-product__price del {
	margin-right: 6px;
	color: var(--cc-color-text-muted);
	font-weight: 400;
	text-decoration: line-through;
}

.cc-product-card__now,
.cc-product__price ins {
	color: var(--cc-color-text);
	text-decoration: none;
}

.cc-collection-discount {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 9px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--cc-color-success) 18%, transparent);
	color: var(--cc-color-success);
	font-size: 0.75rem;
	font-weight: var(--cc-weight-strong, 600);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Product media: silent video and animated stills.

   A cosmetic set is a thing that moves, so the gallery's main slot can hold a
   looping video. It never has sound and never shows controls: it is a moving
   image, not something to press play on.
   -------------------------------------------------------------------------- */
.cc-media__stage {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--cc-color-border);
	border-radius: var(--cc-radius);
	background: var(--cc-color-surface);
	aspect-ratio: 1 / 1;
}

.cc-media__video,
.cc-media__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cc-media__thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cc-space);
	margin: var(--cc-space-2) 0 0;
	padding: 0;
	list-style: none;
}

.cc-media__thumb {
	margin: 0;
	list-style: none;
}

.cc-media__thumb-button {
	position: relative;
	display: block;
	width: 64px;
	height: 64px;
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--cc-color-border);
	border-radius: var(--cc-radius-sm);
	background: var(--cc-color-surface);
	cursor: pointer;
	transition: border-color var(--cc-transition);
}

.cc-media__thumb-button img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cc-media__thumb-button:hover,
.cc-media__thumb-button:focus-visible {
	border-color: var(--cc-color-accent-text);
}

.cc-media__thumb-button.is-active {
	border-color: var(--cc-color-accent);
	box-shadow: inset 0 0 0 1px var(--cc-color-accent);
}

/* Marks which thumbnail is the moving one. */
.cc-media__badge {
	position: absolute;
	right: 4px;
	bottom: 4px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--cc-color-bg) 75%, transparent);
	color: var(--cc-color-text);
}

/* A video sitting in the WooCommerce gallery alongside the stills. */
.woocommerce-product-gallery .cc-media__video {
	width: 100%;
	height: auto;
}

@media (prefers-reduced-motion: reduce) {
	/*
	 * Someone who has asked for less movement should not be handed a looping
	 * video on load. The poster frame stays, and the thumbnail still starts it
	 * on request.
	 */
	.cc-media__video {
		animation: none;
	}
}

/* ==========================================================================
   Checkout: payment method descriptions in coloured boxes

   Each method gets its own accent, carried by one custom property, so the box,
   its edge and its step numbers agree. The tint is mixed into the surface
   colour rather than laid over it, which keeps body text at full contrast in
   both light and dark mode - the colour is in the frame, not behind the words.
   ========================================================================== */
.woocommerce-checkout #payment .payment_methods > li,
#add_payment_method #payment .payment_methods > li,
.woocommerce-order-pay #payment .payment_methods > li {
	--cc-pay: var(--cc-color-accent);
}

#payment .payment_methods > li.payment_method_cc_tf2_keys { --cc-pay: #cf6a32; --cc-pay-ink: #111; }
#payment .payment_methods > li.payment_method_cc_dota_items { --cc-pay: #c23c2a; --cc-pay-ink: #fff; }
#payment .payment_methods > li.payment_method_cc_crypto,
#payment .payment_methods > li.payment_method_direct_crypto,
#payment .payment_methods > li.payment_method_cc_heleket { --cc-pay: #d99a1e; --cc-pay-ink: #111; }
#payment .payment_methods > li.payment_method_cc_western_union { --cc-pay: #e6b800; --cc-pay-ink: #111; }

.woocommerce-checkout #payment .payment_methods > li > .payment_box,
.woocommerce-order-pay #payment .payment_methods > li > .payment_box {
	position: relative;
	margin: 10px 0 6px;
	padding: 14px 16px;
	border: 1px solid color-mix(in srgb, var(--cc-pay) 40%, var(--cc-color-border));
	border-left: 4px solid var(--cc-pay);
	border-radius: var(--cc-radius);
	background: color-mix(in srgb, var(--cc-pay) 9%, var(--cc-color-surface));
	color: var(--cc-color-text);
	font-size: 0.9375rem;
	line-height: 1.55;
}

/* WooCommerce's speech-bubble arrow does not suit a boxed panel. */
.woocommerce-checkout #payment .payment_methods > li > .payment_box::before,
.woocommerce-order-pay #payment .payment_methods > li > .payment_box::before {
	content: none;
	display: none;
}

.woocommerce-checkout #payment .payment_methods > li > .payment_box p:last-child {
	margin-bottom: 0;
}

.woocommerce-checkout #payment .payment_methods > li > .payment_box a {
	color: var(--cc-color-accent-text);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* The steps: numbered in the method's colour. */
.cc-pay-steps__lead {
	margin: 0 0 10px;
}

.cc-pay-steps__list,
.cc-payment-panel__steps {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: cc-step;
}

.cc-pay-steps__list > li,
.cc-payment-panel__steps > li {
	position: relative;
	margin: 0 0 8px;
	padding-left: 32px;
	counter-increment: cc-step;
}

.cc-pay-steps__list > li:last-child,
.cc-payment-panel__steps > li:last-child {
	margin-bottom: 0;
}

.cc-pay-steps__list > li::before,
.cc-payment-panel__steps > li::before {
	content: counter(cc-step);
	position: absolute;
	top: 1px;
	left: 0;
	display: inline-grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--cc-pay, var(--cc-color-accent));
	/* Dark or light numerals, whichever the method colour needs for contrast. */
	color: var(--cc-pay-ink, var(--cc-color-accent-contrast));
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1;
}

/* "Crypto payments": the choice between providers. */
.cc-crypto-choice {
	display: grid;
	gap: 12px;
}

.cc-crypto-choice__lead {
	margin: 0;
}

.cc-crypto-choice__providers {
	display: grid;
	gap: 8px;
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

@media (min-width: 560px) {
	.cc-crypto-choice__providers {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.cc-crypto-choice__legend {
	grid-column: 1 / -1;
	margin: 0 0 4px;
	padding: 0;
	color: var(--cc-color-text-muted);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.cc-provider {
	position: relative;
	display: flex;
	gap: 10px;
	margin: 0;
	padding: 12px 14px;
	border: 1px solid var(--cc-color-border);
	border-radius: var(--cc-radius-sm);
	background: var(--cc-color-surface);
	cursor: pointer;
	transition: border-color 0.15s ease;
}

.cc-provider input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.cc-provider:hover,
.cc-provider:has(input:checked) {
	border-color: var(--cc-pay, var(--cc-color-accent));
}

.cc-provider:has(input:checked) {
	box-shadow: inset 0 0 0 1px var(--cc-pay, var(--cc-color-accent));
}

.cc-provider:has(input:focus-visible) {
	outline: 2px solid var(--cc-color-accent-text);
	outline-offset: 2px;
}

.cc-provider__text {
	display: grid;
	gap: 2px;
}

.cc-provider__name {
	font-weight: 700;
}

.cc-provider__summary {
	color: var(--cc-color-text-muted);
	font-size: 0.8125rem;
	line-height: 1.4;
}

.cc-crypto-choice__panel[hidden] {
	display: none;
}

/* The Direct Crypto picker, inside the store's box. */
.cc-crypto-choice .dc-checkout {
	--dc-surface: var(--cc-color-surface);
	--dc-accent: var(--cc-pay, var(--cc-color-accent));
}

/* ==========================================================================
   Order page: how to pay (TF2 keys, Dota 2 items, Western Union)
   ========================================================================== */
.cc-payment-panel {
	--cc-pay: var(--cc-color-accent);

	margin: 0 0 var(--cc-space-4);
	padding: var(--cc-space-3);
	border: 1px solid color-mix(in srgb, var(--cc-pay) 40%, var(--cc-color-border));
	border-left: 4px solid var(--cc-pay);
	border-radius: var(--cc-radius);
	background: color-mix(in srgb, var(--cc-pay) 7%, var(--cc-color-surface));
	color: var(--cc-color-text);
}

.cc-payment-panel--tf2 { --cc-pay: #cf6a32; --cc-pay-ink: #111; }
.cc-payment-panel--dota { --cc-pay: #c23c2a; --cc-pay-ink: #fff; }
.cc-payment-panel--wu { --cc-pay: #e6b800; --cc-pay-ink: #111; }

.cc-payment-panel__header {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--cc-space-2);
	margin-bottom: var(--cc-space-2);
}

.cc-payment-panel__title {
	margin: 0;
	font-size: 1.25rem;
}

.cc-payment-panel__amount {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin: 0;
}

.cc-payment-panel__amount span {
	color: var(--cc-color-text-muted);
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.cc-payment-panel__amount strong {
	font-size: 1.25rem;
	font-variant-numeric: tabular-nums;
}

.cc-payment-panel__steps {
	margin-bottom: var(--cc-space-3);
}

.cc-payment-panel__details {
	display: grid;
	gap: 10px 24px;
	margin: 0 0 var(--cc-space-2);
	padding: var(--cc-space-2);
	border: 1px solid var(--cc-color-border);
	border-radius: var(--cc-radius-sm);
	background: var(--cc-color-bg);
}

@media (min-width: 640px) {
	.cc-payment-panel__details {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.cc-payment-panel__details dt {
	color: var(--cc-color-text-muted);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.cc-payment-panel__details dd {
	margin: 2px 0 0;
	font-weight: 600;
	overflow-wrap: anywhere;
}

.cc-payment-panel__copy {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.cc-payment-panel__copy code {
	font-size: 1rem;
	letter-spacing: 0.04em;
}

.cc-button--small {
	min-height: 32px;
	padding: 4px 12px;
	font-size: 0.8125rem;
}

.cc-payment-panel__note {
	margin: 0 0 var(--cc-space-2);
	color: var(--cc-color-text-muted);
	font-size: 0.875rem;
}

.cc-payment-panel__warning {
	margin: 0 0 var(--cc-space-3);
	padding: 10px 12px;
	border-left: 3px solid var(--cc-color-danger);
	border-radius: var(--cc-radius-sm);
	background: color-mix(in srgb, var(--cc-color-danger) 10%, var(--cc-color-surface));
	font-size: 0.875rem;
}

.cc-payment-panel__form {
	display: grid;
	gap: 4px;
	max-width: 520px;
}

.cc-payment-panel__form .cc-field {
	display: grid;
	gap: 6px;
	margin: 0 0 8px;
}

.cc-payment-panel__form label {
	font-weight: 600;
}

.cc-payment-panel__form input[type="text"] {
	width: 100%;
	min-height: 44px;
	padding: 8px 12px;
	border: 1px solid var(--cc-color-border);
	border-radius: var(--cc-radius-sm);
	background: var(--cc-color-bg);
	color: var(--cc-color-text);
	font-size: 1rem;
}

/* ==========================================================================
   Steam buyer showcase

   Modelled on a Steam mini-profile: a dark card with a banner, the avatar
   overlapping it, the name in white and a round "level" badge - here the
   number of sets in the order. Kept in Steam's own palette in both light and
   dark mode, the way an embedded Steam card looks on any site.
   ========================================================================== */
.cc-showcase {
	--cc-steam-bg: #1b2838;
	--cc-steam-deep: #0e141b;
	--cc-steam-text: #c7d5e0;
	--cc-steam-muted: #8f98a0;
	--cc-steam-blue: #66c0f4;
	--cc-steam-online: #57cbde;

	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	margin: 0;
	overflow: hidden;
	border: 1px solid rgba(102, 192, 244, 0.18);
	border-radius: var(--cc-radius);
	background: linear-gradient(180deg, var(--cc-steam-bg) 0%, var(--cc-steam-deep) 100%);
	color: var(--cc-steam-text);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
	font-size: 0.9375rem;
	line-height: 1.5;
}

.cc-showcase__banner {
	height: 72px;
	background:
		linear-gradient(180deg, rgba(14, 20, 27, 0.15) 0%, var(--cc-steam-bg) 100%),
		var(--cc-showcase-banner, linear-gradient(120deg, #2a475e 0%, #1b2838 60%, #3d1f22 100%));
	background-position: center;
	background-size: cover;
}

.cc-showcase__head {
	display: flex;
	position: relative;
	z-index: 1;
	align-items: flex-end;
	gap: 12px;
	margin-top: -36px;
	padding: 0 16px;
}

.cc-showcase__avatar {
	position: relative;
	flex: 0 0 auto;
	width: 68px;
	height: 68px;
	padding: 2px;
	border-radius: 4px;
	background: linear-gradient(180deg, var(--cc-steam-online) 0%, #3a7c93 100%);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
}

.cc-showcase__avatar img,
.cc-showcase__initial {
	display: block;
	width: 64px;
	height: 64px;
	border-radius: 2px;
	object-fit: cover;
	background: #0b1016;
}

.cc-showcase__initial {
	display: grid;
	place-items: center;
	color: var(--cc-steam-blue);
	font-size: 1.75rem;
	font-weight: 700;
}

.cc-showcase__who {
	display: grid;
	flex: 1 1 auto;
	min-width: 0;
	padding-bottom: 2px;
}

.cc-showcase__persona {
	overflow: hidden;
	color: #fff;
	font-size: 1.0625rem;
	font-weight: 700;
	text-decoration: none;
	text-overflow: ellipsis;
	white-space: nowrap;
}

a.cc-showcase__persona:hover,
a.cc-showcase__persona:focus-visible {
	color: var(--cc-steam-blue);
}

.cc-showcase__status {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
	color: var(--cc-steam-online);
	font-size: 0.8125rem;
}

.cc-showcase__date {
	color: var(--cc-steam-muted);
}

.cc-showcase__level {
	display: inline-grid;
	flex: 0 0 auto;
	place-items: center;
	width: 44px;
	height: 44px;
	margin-bottom: 2px;
	border: 2px solid var(--cc-color-accent, #a33a34);
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.35);
	line-height: 1;
	text-align: center;
}

.cc-showcase__level-number {
	color: #fff;
	font-size: 1rem;
	font-weight: 700;
}

.cc-showcase__level-label {
	margin-top: -8px;
	color: var(--cc-steam-muted);
	font-size: 0.625rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.cc-showcase__items {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
	margin: 14px 16px 0;
	padding: 10px;
	list-style: none;
	border-radius: 4px;
	background: rgba(0, 0, 0, 0.25);
}

.cc-showcase__item > a,
.cc-showcase__item > span {
	display: grid;
	gap: 4px;
	color: var(--cc-steam-text);
	text-decoration: none;
}

.cc-showcase__item img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 3px;
	object-fit: cover;
	background: #0b1016;
}

.cc-showcase__item a:hover img,
.cc-showcase__item a:focus-visible img {
	border-color: var(--cc-steam-blue);
}

.cc-showcase__item-name {
	overflow: hidden;
	font-size: 0.6875rem;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cc-showcase__item--more {
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	border: 1px dashed rgba(255, 255, 255, 0.18);
	border-radius: 3px;
	color: var(--cc-steam-muted);
	font-weight: 700;
}

.cc-showcase__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	margin: 12px 16px 0;
	color: var(--cc-steam-muted);
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.cc-showcase__total strong {
	color: #beee11;
	font-size: 1rem;
	letter-spacing: 0;
	text-transform: none;
	font-variant-numeric: tabular-nums;
}

.cc-showcase__quote {
	margin: 12px 16px 0;
	padding: 10px 12px;
	border-left: 3px solid var(--cc-steam-blue);
	border-radius: 0 4px 4px 0;
	background: rgba(102, 192, 244, 0.06);
	color: var(--cc-steam-text);
	font-style: italic;
}

.cc-showcase__quote p {
	margin: 0 0 6px;
}

.cc-showcase__quote p:last-child {
	margin-bottom: 0;
}

/* Breathing room at the foot of the card, whatever it ends with. */
.cc-showcase::after {
	content: "";
	display: block;
	height: 16px;
	margin-top: auto;
}

.cc-grid--showcases {
	grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 700px) {
	.cc-grid--showcases {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 900px) {
	.cc-grid--showcases {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Four to a row once there is room for four cards; three and two below. */
@media (min-width: 1100px) {
	.cc-grid--showcases {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.cc-grid--showcases {
	gap: var(--cc-space-3);
}

/*
 * Four to a row makes the cards narrow: three sets across rather than four,
 * the card's own padding a little tighter, and the text a size down so a long
 * quote does not run the card out to twice its neighbours' height.
 */
@media (min-width: 1100px) {
	.cc-grid--showcases .cc-showcase {
		font-size: 0.875rem;
	}

	.cc-grid--showcases .cc-showcase__head,
	.cc-grid--showcases .cc-showcase__total {
		padding-inline: 12px;
		margin-inline: 0;
	}

	.cc-grid--showcases .cc-showcase__items {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		margin-inline: 12px;
		padding: 8px;
	}

	.cc-grid--showcases .cc-showcase__total,
	.cc-grid--showcases .cc-showcase__quote {
		margin-inline: 12px;
	}

	.cc-grid--showcases .cc-showcase__total {
		padding-inline: 0;
	}
}

/* The button that closes a grid showing only some of the showcases. */
.cc-showcases-more {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	max-width: none;
	margin: var(--cc-space-6) 0 0;
	text-align: center;
}

.cc-showcases-more__button {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.cc-showcases-more__button .cc-icon {
	transition: transform var(--cc-transition);
}

.cc-showcases-more__button:hover .cc-icon,
.cc-showcases-more__button:focus-visible .cc-icon {
	transform: translateX(4px);
}

.cc-showcases-more__link {
	color: var(--cc-color-accent-text);
	font-weight: var(--cc-weight-strong, 600);
	text-underline-offset: 3px;
}

/* The editor preview. */
.cc-showcase-preview .cc-showcase {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* The customer's say, on their account page. */
.cc-showcase-optin {
	margin-top: var(--cc-space-4);
	padding: var(--cc-space-3);
}

.cc-showcase-optin__title {
	margin: 0 0 var(--cc-space);
	font-size: 1.0625rem;
}

.cc-showcase-optin__text {
	margin: 0 0 var(--cc-space-2);
	color: var(--cc-color-text-muted);
}

.cc-showcase-optin__choice {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
}

/* ==========================================================================
   Sliders

   Scroll-snap does the moving, so swiping works without any script. The
   script adds the buttons and dots, and only when the row overflows.
   ========================================================================== */
.cc-slider {
	position: relative;
}

.cc-slider__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin-top: var(--cc-space-2);
}

.cc-slider__controls[hidden] {
	display: none;
}

.cc-slider__nav {
	display: inline-grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--cc-color-border);
	border-radius: 50%;
	background: var(--cc-color-surface);
	color: var(--cc-color-text);
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.cc-slider__nav:hover,
.cc-slider__nav:focus-visible {
	border-color: var(--cc-color-accent);
	color: var(--cc-color-accent-text);
}

.cc-slider__dots {
	display: flex;
	flex: 0 1 auto;
	flex-wrap: wrap;
	justify-content: center;
	gap: 2px;
	min-width: 0;
}

/* A 22px target around an 8px dot. */
.cc-slider__dot {
	position: relative;
	width: 22px;
	height: 22px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.cc-slider__dot::before {
	content: "";
	position: absolute;
	inset: 7px;
	border-radius: 50%;
	background: var(--cc-color-border);
	transition: background-color 0.15s ease, transform 0.15s ease;
}

.cc-slider__dot.is-active::before {
	background: var(--cc-color-accent);
	transform: scale(1.3);
}

.cc-slider__dot:focus-visible {
	outline: 2px solid var(--cc-color-accent-text);
	outline-offset: -2px;
	border-radius: 50%;
}

/* The showcase slider: a row at every width. */
.cc-slider--showcases .cc-slider__track {
	display: flex;
	gap: var(--cc-space-3);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	padding: 4px 2px 12px;
}

.cc-slider--showcases .cc-slider__track::-webkit-scrollbar {
	display: none;
}

.cc-slider--showcases .cc-slider__slide {
	flex: 0 0 86%;
	min-width: 0;
	scroll-snap-align: start;
}

@media (min-width: 700px) {
	.cc-slider--showcases .cc-slider__slide {
		flex-basis: calc((100% - var(--cc-space-3)) / 2);
	}
}

@media (min-width: 1100px) {
	.cc-slider--showcases .cc-slider__slide {
		flex-basis: calc((100% - 2 * var(--cc-space-3)) / 3);
	}
}

/* Product and collection rows: a grid, except on phones. */
@media (max-width: 639.98px) {
	.cc-slider--mobile .cc-slider__track {
		display: flex;
		gap: var(--cc-space-2);
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		padding: 2px 2px 8px;
	}

	.cc-slider--mobile .cc-slider__track::-webkit-scrollbar {
		display: none;
	}

	/*
	 * Most of a card, and a sliver of the next one: the sliver is what tells
	 * someone there is more to swipe to.
	 */
	.cc-slider--mobile .cc-slider__track > * {
		flex: 0 0 80%;
		/* Stretch to the tallest card: a percentage height would opt out of it. */
		height: auto;
		align-self: stretch;
		min-width: 0;
		scroll-snap-align: start;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cc-slider__track {
		scroll-behavior: auto;
	}
}

/* ==========================================================================
   Price filter: typed amounts

   The native number spinners are drawn by the browser in its own colours -
   white arrows on a dark field in dark mode. The slider already does what the
   arrows do, so they are removed rather than restyled; the field still takes
   the arrow keys.
   ========================================================================== */
.cc-price-filter__input {
	-moz-appearance: textfield;
	appearance: textfield;
}

.cc-price-filter__input::-webkit-inner-spin-button,
.cc-price-filter__input::-webkit-outer-spin-button {
	margin: 0;
	-webkit-appearance: none;
	appearance: none;
}

/* WooCommerce positions inputs inside #payment with an id selector; the
   provider radios have to be laid over their cards at that weight. */
#payment .cc-provider input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
}

.cc-payment-panel__details > .cc-payment-panel__wide {
	grid-column: 1 / -1;
}

/* A set with no artwork still gets a tile, lettered, so the row keeps its
   rhythm. */
.cc-showcase__thumb {
	display: grid;
	place-items: center;
	width: 100%;
	aspect-ratio: 1;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 3px;
	background: linear-gradient(135deg, #2a475e 0%, #16202d 100%);
	color: var(--cc-steam-blue);
	font-size: 1.25rem;
	font-weight: 700;
}

.cc-showcase__item a:hover .cc-showcase__thumb,
.cc-showcase__item a:focus-visible .cc-showcase__thumb {
	border-color: var(--cc-steam-blue);
}

/* ==========================================================================
   Phone header and menu

   The header bar: logo, then search and cart, then the menu button. The panel:
   account and the light/dark switch on one row at the top, the links, cart
   and checkout on one row, and the community links at the foot.

   The panel takes the store's own colours in both modes. Left to the theme
   it kept a dark background in light mode, and the light-mode button text
   disappeared into it.
   ========================================================================== */
.cc-mobile-bar {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-inline-end: 10px;
}

.cc-mobile-bar .cc-header-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	min-width: 38px;
	height: 38px;
	min-height: 38px;
	padding: 0 8px;
	border-radius: var(--cc-radius-sm);
	font-size: 0.875rem;
}

.cc-mobile-bar .cc-header-cart__count {
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	font-size: 0.6875rem;
}

/*
 * The logo link is taller than the logo (the theme sizes it to the largest
 * logo allowed), and the image sat at its top edge, above the middle of the
 * header. Centring inside the link puts it on the header's midline.
 */
.ct-header .site-branding,
.ct-header .site-logo-container {
	display: inline-flex;
	align-items: center;
	align-self: center;
	line-height: 0;
}

/* Room for the logo beside them on the narrowest phones. */
@media (max-width: 380px) {
	[data-device="mobile"] .site-logo-container img {
		max-width: 132px;
		height: auto;
	}
}

body #offcanvas.ct-panel .ct-panel-inner {
	background: var(--cc-color-bg);
	color: var(--cc-color-text);
}

#offcanvas .mobile-menu .ct-menu-link {
	color: var(--cc-color-text);
}

#offcanvas .mobile-menu .ct-menu-link:hover,
#offcanvas .mobile-menu .ct-menu-link:focus-visible,
#offcanvas .mobile-menu .current-menu-item > .ct-menu-link {
	color: var(--cc-color-accent-text);
}

body #offcanvas .ct-toggle-close {
	--theme-icon-color: var(--cc-color-text);
	--theme-icon-hover-color: var(--cc-color-accent-text);
	color: var(--cc-color-text);
}

/* The two button rows. */
#offcanvas .mobile-menu li.cc-mobile-row {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-self: stretch;
	width: 100%;	flex-wrap: nowrap;
	align-items: center;
	gap: 8px;
	padding: 0;
	border: 0;
}

#offcanvas .mobile-menu li.cc-mobile-row--top {
	margin: 0 0 20px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--cc-color-border);
}

#offcanvas .mobile-menu li.cc-mobile-row--shop {
	margin: 22px 0 0;
	padding-top: 20px;
	border-top: 1px solid var(--cc-color-border);
}

#offcanvas .mobile-menu li.cc-mobile-row .cc-header-button,
#offcanvas .mobile-menu li.cc-mobile-row .cc-theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: auto;
	height: 40px;
	min-height: 40px;
	padding: 0 14px;
	border-radius: var(--cc-radius-sm);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.2;
}

/* The account takes what the switch leaves; a long name is cut, not wrapped. */
#offcanvas .mobile-menu li.cc-mobile-row--top > a {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

#offcanvas .mobile-menu li.cc-mobile-row--top .cc-header-button__label {
	overflow: hidden;
	text-overflow: ellipsis;
}

#offcanvas .mobile-menu li.cc-mobile-row .cc-theme-toggle {
	flex: 0 0 40px;
	width: 40px;
	padding: 0;
}

/* Cart and checkout share the row equally. */
#offcanvas .mobile-menu li.cc-mobile-row--shop > a {
	flex: 1 1 0;
}

/* Secondary buttons read in both modes: the store's text on its surface. */
#offcanvas .mobile-menu .cc-button--secondary,
#offcanvas .mobile-menu .cc-theme-toggle,
.cc-mobile-bar .cc-button--secondary {
	border: 1px solid var(--cc-button-outline, var(--cc-color-border));
	background: var(--cc-color-surface);
	color: var(--cc-color-text);
}

#offcanvas .mobile-menu .cc-header-checkout {
	color: var(--cc-color-accent-contrast);
}

/* The account is the panel's one primary action, as it is in the desktop header. */
#offcanvas .mobile-menu a.cc-header-account {
	border-color: var(--cc-color-accent);
	background: var(--cc-color-accent);
	color: var(--cc-color-accent-contrast);
}

#offcanvas .mobile-menu a.cc-header-account:hover,
#offcanvas .mobile-menu a.cc-header-account:focus-visible {
	border-color: var(--cc-color-accent-hover);
	background: var(--cc-color-accent-hover);
	color: var(--cc-color-accent-contrast);
}

#offcanvas .mobile-menu a.cc-header-account svg {
	color: currentColor;
	stroke: currentColor;
}

/* Find us elsewhere. */
#offcanvas .mobile-menu li.cc-mobile-social {
	align-self: stretch;
	width: 100%;
	text-align: center;	margin: 24px 0 0;
	padding: 16px;
	border: 1px solid var(--cc-color-border);
	border-radius: var(--cc-radius);
	background: var(--cc-color-surface);
}

.cc-mobile-social__text {
	margin: 0 0 12px;
	color: var(--cc-color-text-muted);
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.45;
}

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

.cc-mobile-social__link {
	display: inline-grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--cc-color-border);
	border-radius: var(--cc-radius-sm);
	background: var(--cc-color-bg);
	color: var(--cc-color-text);
	transition: border-color 0.15s ease, color 0.15s ease;
}

.cc-mobile-social__link:hover,
.cc-mobile-social__link:focus-visible {
	border-color: var(--cc-color-accent);
	color: var(--cc-color-accent-text);
}

/* The word "Cart" is only shown where there is room for it: the menu row. */
.cc-header-cart__label {
	display: none;
}

#offcanvas .mobile-menu li.cc-mobile-row--shop .cc-header-cart__label {
	display: inline;
}

.cc-mobile-social__title {
	margin: 0 0 4px;
	color: var(--cc-color-text);
	font-size: 0.9375rem;
	font-weight: 700;
}

/* ==========================================================================
   Notifications
   ========================================================================== */
.cc-toasts {
	position: fixed;
	top: 88px;
	left: 50%;
	z-index: 100000;
	display: grid;
	gap: 8px;
	width: min(440px, calc(100vw - 32px));
	transform: translateX(-50%);
	pointer-events: none;
}

.cc-toast {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 12px 12px 12px 16px;
	border: 1px solid var(--cc-color-border);
	border-left: 4px solid var(--cc-color-success);
	border-radius: var(--cc-radius);
	background: var(--cc-color-surface-elevated, var(--cc-color-surface));
	color: var(--cc-color-text);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
	pointer-events: auto;
	animation: cc-toast-in 0.2s ease-out;
}

.cc-toast--error {
	border-left-color: var(--cc-color-danger);
}

.cc-toast--info {
	border-left-color: var(--cc-color-accent);
}

.cc-toast.is-leaving {
	opacity: 0;
	transform: translateY(-6px);
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.cc-toast__text {
	flex: 1 1 auto;
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.45;
}

.cc-toast__close {
	display: inline-grid;
	flex: 0 0 auto;
	place-items: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: var(--cc-radius-sm);
	background: transparent;
	color: var(--cc-color-text-muted);
	cursor: pointer;
}

.cc-toast__close:hover,
.cc-toast__close:focus-visible {
	color: var(--cc-color-text);
}

@keyframes cc-toast-in {
	from {
		opacity: 0;
		transform: translateY(-8px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.cc-toast {
		animation: none;
	}
}

/* ==========================================================================
   Wishlist cards: the remove cross
   ========================================================================== */
.cc-product-card {
	position: relative;
}

.cc-product-card__remove {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 2;
	display: inline-grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border: 1px solid var(--cc-color-border);
	border-radius: 50%;
	background: color-mix(in srgb, var(--cc-color-bg) 85%, transparent);
	color: var(--cc-color-text);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
	transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.cc-product-card__remove:hover,
.cc-product-card__remove:focus-visible {
	border-color: var(--cc-color-danger);
	background: var(--cc-color-danger);
	color: #fff;
}

.cc-product-card.is-removing {
	opacity: 0.4;
	pointer-events: none;
	transition: opacity 0.2s ease;
}

/* ==========================================================================
   My account > Orders on a phone: one card per order

   WooCommerce stacks each order's cells on a phone, and the theme hid the
   order number, so one order ran straight into the next with nothing to say
   where it started. Each order is a card, headed by its number.
   ========================================================================== */
@media (max-width: 768px) {
	.woocommerce-account table.woocommerce-orders-table,
	.woocommerce-account table.woocommerce-orders-table tbody {
		display: block;
		border: 0;
		background: transparent;
	}

	.woocommerce-account table.woocommerce-orders-table tbody tr {
		display: block;
		margin: 0 0 var(--cc-space-2);
		padding: 0 var(--cc-space-2) var(--cc-space);
		border: 1px solid var(--cc-color-border);
		border-radius: var(--cc-radius);
		background: var(--cc-color-surface);
		box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
	}

	.woocommerce-account table.woocommerce-orders-table tbody tr > * {
		display: block;
		padding: 10px 0;
		border: 0;
		border-top: 1px dashed var(--cc-color-border);
		background: transparent;
		text-align: right;
	}

	.woocommerce-account table.woocommerce-orders-table tbody tr > *::before {
		float: left;
		margin-right: var(--cc-space-2);
		color: var(--cc-color-text-muted);
		font-weight: 600;
		text-align: left;
	}

	/* The order number heads the card. */
	.woocommerce-account table.woocommerce-orders-table tbody tr > .woocommerce-orders-table__cell-order-number {
		display: flex;
		margin: 0 calc(var(--cc-space-2) * -1);
		padding: 12px var(--cc-space-2);
		border-top: 0;
		border-bottom: 1px solid var(--cc-color-border);
		border-radius: var(--cc-radius) var(--cc-radius) 0 0;
		background: var(--cc-color-surface-elevated, var(--cc-color-surface));
		font-size: 1rem;
		font-weight: 700;
	}

	.woocommerce-account table.woocommerce-orders-table tbody tr > .woocommerce-orders-table__cell-order-number a {
		color: var(--cc-color-text);
		text-decoration: none;
	}

	.woocommerce-account table.woocommerce-orders-table tbody tr > .woocommerce-orders-table__cell-order-date {
		border-top: 0;
	}

	.woocommerce-account table.woocommerce-orders-table .woocommerce-orders-table__cell-order-actions {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 8px;
		justify-content: flex-end;
	}

	.woocommerce-account table.woocommerce-orders-table .woocommerce-orders-table__cell-order-actions::before {
		margin-right: auto;
	}

	.woocommerce-account table.woocommerce-orders-table .woocommerce-orders-table__cell-order-actions .button {
		margin: 0;
	}
}

/* ==========================================================================
   Cart page

   The theme pins the totals box as the page scrolls. With several sets in the
   cart it slid down beside the list and over the suggestions below, so it
   stays where it is. The suggestions get clear room of their own.
   ========================================================================== */
body .ct-woocommerce-cart-form .cart_totals {
	position: static;
	top: auto;
}

.woocommerce-cart .cc-cross-sell,
.woocommerce-checkout .cc-cross-sell {
	margin-top: var(--cc-space-6);
	padding-top: var(--cc-space-4);
	border-top: 1px solid var(--cc-color-border);
}

/* ==========================================================================
   Shop filters on a phone: folded away behind a button

   Search stays in view; the rest opens when asked for. The badge on the
   button says how many filters are on, so a filtered list is never a
   mystery. Without scripting the filters simply stay open.
   ========================================================================== */
.cc-filters__toggle {
	display: none;
}

@media (max-width: 899.98px) {
	.cc-filters__toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		width: 100%;
		min-height: 44px;
		margin-top: var(--cc-space-2);
		padding: 0 16px;
		border: 1px solid var(--cc-color-border);
		border-radius: var(--cc-radius-sm);
		background: var(--cc-color-surface);
		color: var(--cc-color-text);
		font-size: 0.9375rem;
		font-weight: 600;
		cursor: pointer;
	}

	.cc-filters__toggle[aria-expanded="true"] {
		border-color: var(--cc-color-accent);
	}

	.cc-filters__toggle-count {
		display: inline-grid;
		place-items: center;
		min-width: 22px;
		height: 22px;
		padding: 0 6px;
		border-radius: 999px;
		background: var(--cc-color-accent);
		color: var(--cc-color-accent-contrast);
		font-size: 0.75rem;
	}

	.cc-js .cc-filters__controls:not(.is-open) {
		display: none;
	}

	.cc-filters__controls.is-open {
		margin-top: var(--cc-space-2);
	}
}

/* ==========================================================================
   Product page: description and reviews as open sections
   ========================================================================== */
.woocommerce div.product .cc-product-section {
	box-sizing: border-box;
	clear: both;
	width: 100%;
	max-width: var(--cc-container);
	margin-inline: auto;
	padding: var(--cc-space-4) var(--cc-gutter);
}

.cc-product-section__title,
.cc-product-reviews .woocommerce-Reviews-title {
	margin: 0 0 var(--cc-space-2);
	font-size: 1.375rem;
	line-height: 1.25;
}

.cc-product-description__body > :last-child {
	margin-bottom: 0;
}

.woocommerce div.product .cc-product-reviews {
	margin-top: var(--cc-space-4);
	border-top: 1px solid var(--cc-color-border);
}

.cc-product-reviews .commentlist {
	display: grid;
	gap: var(--cc-space-2);
	margin: 0 0 var(--cc-space-4);
	padding: 0;
	list-style: none;
}

.cc-product-reviews .commentlist > li {
	margin: 0;
	padding: var(--cc-space-2);
	border: 1px solid var(--cc-color-border);
	border-radius: var(--cc-radius);
	background: var(--cc-color-surface);
}

.cc-product-reviews .commentlist .comment_container {
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr);
	align-items: start;
	column-gap: 12px;
	padding: 0;
}

.cc-product-reviews .commentlist .comment_container img.avatar {
	position: static;
	width: 40px;
	height: 40px;
	margin: 0;
	border-radius: 50%;
}

.cc-product-reviews .commentlist .comment-text {
	margin: 0;
	padding: 0;
	border: 0;
}

.cc-product-reviews .commentlist .comment-text .description p:last-child {
	margin-bottom: 0;
}

/* A product row that slides at every width: cart and checkout suggestions. */
.cc-slider--row .cc-slider__track {
	display: flex;
	gap: var(--cc-space-3);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	padding: 2px 2px 8px;
}

.cc-slider--row .cc-slider__track::-webkit-scrollbar {
	display: none;
}

.cc-slider--row .cc-slider__track > * {
	flex: 0 0 80%;
	height: auto;
	align-self: stretch;
	min-width: 0;
	scroll-snap-align: start;
}

@media (min-width: 600px) {
	.cc-slider--row .cc-slider__track > * {
		flex-basis: calc((100% - var(--cc-space-3)) / 2);
	}
}

@media (min-width: 900px) {
	.cc-slider--row .cc-slider__track > * {
		flex-basis: calc((100% - 2 * var(--cc-space-3)) / 3);
	}
}

@media (min-width: 1200px) {
	.cc-slider--row .cc-slider__track > * {
		flex-basis: calc((100% - 3 * var(--cc-space-3)) / 4);
	}
}

/* ==========================================================================
   Information pages: Guide, FAQ, Why trust us, Contact

   The copy on these pages is ordinary editor blocks carrying the store's
   classes, so the seller edits words, not markup. Everything here keys off
   those classes and the design tokens, so both theme modes follow.
   ========================================================================== */
/*
 * The lead runs the width of the content column, lined up with the title
 * and the cards below it. Capping its line length left it as a narrow column
 * beside empty space; no cap at all ran it past the column on wide screens.
 */
.cc-lead {
	max-width: var(--wp--style--global--content-size, 100%);
	margin-bottom: var(--cc-space-6);
	color: var(--cc-color-text-muted);
	font-size: 1.125rem;
	line-height: 1.6;
}

/*
 * Section rhythm on the information pages. Each h2 opens a section, so it
 * takes most of a section step above it; the blocks that make up a section
 * (card grids, lists, the FAQ, the contact form, the showcases) keep a clear
 * gap from their heading and from whatever follows.
 *
 * `.cc-info-page .entry-content > *` outranks WordPress's block-gap rule on
 * the constrained layout, which otherwise sets every child to the same 24px.
 */
.cc-info-page .entry-content > p,
.cc-info-page .entry-content > ul {
	max-width: var(--wp--style--global--content-size, 100%);
}

.cc-info-page .entry-content > h2 {
	margin-top: calc(var(--cc-section) * 0.8);
	margin-bottom: var(--cc-space-3);
}

.cc-info-page .entry-content > .cc-lead {
	margin-bottom: 0;
}

.cc-info-page .entry-content > .cc-lead + * {
	margin-top: var(--cc-space-6);
}

.cc-info-page .entry-content > .cc-points,
.cc-info-page .entry-content > .cc-faq,
.cc-info-page .entry-content > .cc-pay-methods,
.cc-info-page .entry-content > .cc-rules,
.cc-info-page .entry-content > .cc-contact {
	margin-top: var(--cc-space-4);
	margin-bottom: 0;
}

.cc-info-page .entry-content > h2 + .cc-points,
.cc-info-page .entry-content > h2 + .cc-faq,
.cc-info-page .entry-content > h2 + .cc-pay-methods,
.cc-info-page .entry-content > h2 + .cc-rules {
	margin-top: var(--cc-space-3);
}

.cc-info-page .entry-content > .cc-rules + p {
	margin-top: var(--cc-space-3);
}

/* Five payment methods fit one row on a desktop instead of leaving one alone. */
.cc-info-page .cc-pay-methods {
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.cc-info-page .entry-content > .cc-callout,
.cc-info-page .entry-content > .cc-section {
	margin-top: calc(var(--cc-section) * 0.8);
	margin-bottom: 0;
}

/* Points: a grid of titled cards. The "steps" variant numbers them. ------- */
.cc-points {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: var(--cc-space-2);
	margin: var(--cc-space-3) 0 var(--cc-space-6);
	counter-reset: cc-point;
}

/* Three across on wide screens: six points make two even rows, not 4 + 2. */
@media (min-width: 900px) {
	.cc-points {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.cc-points > .cc-point {
	position: relative;
	margin: 0;
	padding: var(--cc-space-3);
	border: 1px solid var(--cc-color-border);
	border-radius: var(--cc-radius);
	background: var(--cc-color-surface);
	counter-increment: cc-point;
}

.cc-point > h3 {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 var(--cc-space);
	font-size: 1.0625rem;
	line-height: var(--cc-leading-snug, 1.3);
}

.cc-point > h3::before {
	content: "";
	flex: 0 0 auto;
	width: 10px;
	height: 10px;
	border-radius: 2px;
	background: var(--cc-color-accent);
	transform: rotate(45deg);
}

.cc-point p {
	margin: 0;
	color: var(--cc-color-text-muted);
	line-height: 1.6;
}

.cc-point p + p {
	margin-top: var(--cc-space);
}

.cc-point a {
	color: var(--cc-color-accent-text);
	font-weight: var(--cc-weight-strong, 600);
}

/* The privacy point is the one to notice. */
.cc-points > .cc-point--highlight {
	border-color: var(--cc-color-accent);
	background:
		linear-gradient(135deg, color-mix(in srgb, var(--cc-color-accent) 14%, transparent) 0%, transparent 70%),
		var(--cc-color-surface);
}

.cc-points--steps .cc-point > h3::before {
	content: counter(cc-point);
	display: inline-grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--cc-color-accent);
	color: var(--cc-color-accent-contrast);
	font-size: 0.875rem;
	font-weight: 700;
	transform: none;
}

/* Rules list on the Guide. ------------------------------------------------ */
.cc-rules {
	display: grid;
	gap: var(--cc-space);
	margin: var(--cc-space-2) 0 var(--cc-space-3);
	padding: 0;
	list-style: none;
}

.cc-rules li {
	position: relative;
	margin: 0;
	padding: 14px 16px 14px 44px;
	border: 1px solid var(--cc-color-border);
	border-radius: var(--cc-radius-sm);
	background: var(--cc-color-surface);
	line-height: 1.6;
}

.cc-rules li::before {
	content: "";
	position: absolute;
	top: 21px;
	left: 18px;
	width: 10px;
	height: 10px;
	border-radius: 2px;
	background: var(--cc-color-accent);
	transform: rotate(45deg);
}

.cc-rules strong {
	color: var(--cc-color-text);
}

/* Payment methods. -------------------------------------------------------- */
.cc-pay-methods {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: var(--cc-space-2);
	margin: var(--cc-space-2) 0 var(--cc-space-6);
	padding: 0;
	list-style: none;
}

.cc-pay-method {
	margin: 0;
	padding: var(--cc-space-3);
	border: 1px solid var(--cc-color-border);
	border-radius: var(--cc-radius);
	background: var(--cc-color-surface);
}

.cc-pay-method--best {
	border-color: var(--cc-color-success);
}

.cc-pay-method__title {
	margin: 0 0 6px;
	font-size: 1.0625rem;
}

.cc-pay-method__price {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 var(--cc-space);
	color: var(--cc-color-text);
	font-size: 0.875rem;
	font-weight: var(--cc-weight-strong, 600);
}

.cc-pay-method__badge {
	padding: 2px 8px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--cc-color-success) 18%, transparent);
	color: var(--cc-color-text);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.cc-pay-method__text {
	margin: 0;
	color: var(--cc-color-text-muted);
	font-size: 0.9375rem;
	line-height: 1.6;
}

/* FAQ: the core Details block, as an accordion. ---------------------------- */
.cc-faq {
	display: grid;
	gap: var(--cc-space);
	margin: var(--cc-space-3) 0 var(--cc-space-6);
}

.cc-faq > .wp-block-details {
	margin: 0;
	border: 1px solid var(--cc-color-border);
	border-radius: var(--cc-radius);
	background: var(--cc-color-surface);
	transition: border-color var(--cc-transition);
}

.cc-faq > .wp-block-details[open] {
	border-color: color-mix(in srgb, var(--cc-color-accent) 55%, var(--cc-color-border));
}

.cc-faq summary {
	position: relative;
	margin: 0;
	padding: 18px 56px 18px 20px;
	color: var(--cc-color-text);
	font-size: 1.0625rem;
	font-weight: var(--cc-weight-strong, 600);
	line-height: var(--cc-leading-snug, 1.3);
	list-style: none;
	cursor: pointer;
}

.cc-faq summary::-webkit-details-marker {
	display: none;
}

/* A plus that turns into a minus. */
.cc-faq summary::before,
.cc-faq summary::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 22px;
	width: 14px;
	height: 2px;
	margin-top: -1px;
	border-radius: 1px;
	background: var(--cc-color-accent-text);
	transition: transform var(--cc-transition);
}

.cc-faq summary::after {
	transform: rotate(90deg);
}

.cc-faq details[open] > summary::after {
	transform: rotate(0deg);
}

.cc-faq summary:focus-visible {
	outline: 2px solid var(--cc-color-accent);
	outline-offset: -2px;
	border-radius: var(--cc-radius);
}

.cc-faq .wp-block-details > :not(summary) {
	max-width: none;
	margin: 0;
	padding: 0 20px 16px;
	color: var(--cc-color-text-muted);
	line-height: 1.65;
}

.cc-faq .wp-block-details a {
	color: var(--cc-color-accent-text);
}

/* A closing panel ("Still have a question?"). ------------------------------ */
.cc-callout {
	margin: var(--cc-space-4) 0;
	padding: var(--cc-space-4);
	border: 1px solid var(--cc-color-border);
	border-radius: var(--cc-radius);
	background: var(--cc-color-surface-elevated);
}

.cc-callout > h2 {
	margin: 0 0 var(--cc-space);
	font-size: 1.375rem;
}

.cc-callout p {
	max-width: none;
	margin: 0 0 var(--cc-space-2);
	color: var(--cc-color-text-muted);
}

.cc-callout a:not(.cc-social__link) {
	color: var(--cc-color-accent-text);
	font-weight: var(--cc-weight-strong, 600);
}

/* Community links with their names showing, where there is room for them. */
.cc-social.cc-social--inline {
	flex-wrap: wrap;
}

.cc-social--inline .cc-social__link {
	width: auto;
	padding: 0 var(--cc-space-2);
}

.cc-social--inline .cc-social__label {
	position: static !important;
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	clip: auto;
	clip-path: none;
}

/* The section "Trusted by many" jumps to clears the sticky header. */
#testimonials {
	scroll-margin-top: calc(var(--cc-space-8) + 24px);
}

/* Contact: form beside the seller card. ----------------------------------- */
.cc-contact {
	display: grid;
	gap: var(--cc-space-3);
	align-items: start;
	margin: var(--cc-space-3) 0 var(--cc-space-6);
	scroll-margin-top: calc(var(--cc-space-8) + 24px);
}

@media (min-width: 900px) {
	.cc-contact {
		grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr);
	}
}

.cc-contact-form {
	padding: var(--cc-space-4);
}

.cc-contact-form__title {
	margin: 0 0 6px;
	font-size: 1.375rem;
}

.cc-contact-form__intro {
	margin: 0 0 var(--cc-space-3);
	color: var(--cc-color-text-muted);
}

.cc-contact-form__row {
	display: grid;
	gap: 0 var(--cc-space-2);
}

@media (min-width: 640px) {
	.cc-contact-form__row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.cc-contact-form__field {
	display: grid;
	gap: 6px;
	margin: 0 0 var(--cc-space-2);
}

.cc-contact-form__field label {
	color: var(--cc-color-text);
	font-size: 0.875rem;
	font-weight: var(--cc-weight-medium, 500);
}

.cc-contact-form__field .required {
	color: var(--cc-color-danger-text);
}

.cc-contact-form__optional {
	color: var(--cc-color-text-muted);
	font-weight: 400;
}

.cc-contact-form input[type="text"],
.cc-contact-form input[type="email"],
.cc-contact-form input[type="url"],
.cc-contact-form select,
.cc-contact-form textarea {
	width: 100%;
	min-height: 44px;
	padding: 10px 12px;
	border: 1px solid var(--cc-color-border);
	border-radius: var(--cc-radius-sm);
	background-color: var(--cc-color-bg);
	color: var(--cc-color-text);
	font: inherit;
}

.cc-contact-form select {
	padding-inline-end: 32px;
}

/* An example, not a value: it must not read as filled in. */
.cc-contact-form ::placeholder {
	color: var(--cc-color-text-muted);
	opacity: 0.6;
}

.cc-contact-form textarea {
	min-height: 150px;
	resize: vertical;
}

.cc-contact-form input:focus,
.cc-contact-form select:focus,
.cc-contact-form textarea:focus {
	border-color: var(--cc-color-accent);
	outline: none;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--cc-color-accent) 25%, transparent);
}

.cc-contact-form [aria-invalid="true"] {
	border-color: var(--cc-color-danger);
}

.cc-contact-form__error {
	color: var(--cc-color-danger-text);
	font-size: 0.8125rem;
}

.cc-contact-form__alert {
	margin: 0 0 var(--cc-space-2);
	padding: 12px 14px;
	border-left: 3px solid var(--cc-color-danger);
	border-radius: var(--cc-radius-sm);
	background: color-mix(in srgb, var(--cc-color-danger) 12%, transparent);
	color: var(--cc-color-text);
}

.cc-contact-form__sent {
	padding: var(--cc-space-2) var(--cc-space-3);
	border-left: 3px solid var(--cc-color-success);
	border-radius: var(--cc-radius-sm);
	background: color-mix(in srgb, var(--cc-color-success) 12%, transparent);
}

.cc-contact-form__sent p {
	margin: 0 0 6px;
}

.cc-contact-form__sent p:last-child {
	margin-bottom: 0;
	color: var(--cc-color-text-muted);
}

/* Kept out of sight and out of the tab order; bots still find it. */
.cc-contact-form__trap {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.cc-contact-form__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--cc-space-2);
	margin: var(--cc-space) 0 0;
}

.cc-contact-form__or {
	color: var(--cc-color-text-muted);
	font-size: 0.9375rem;
}

.cc-contact-form__or a {
	color: var(--cc-color-accent-text);
}

/* The seller's Steam card. ------------------------------------------------ */
.cc-seller-card {
	height: auto;
}

.cc-seller-card__stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	margin: 14px 16px 0;
	padding: 0;
}

.cc-seller-card__stat {
	padding: 10px 12px;
	border-radius: 4px;
	background: rgba(0, 0, 0, 0.25);
}

.cc-seller-card__stat dt {
	margin: 0 0 2px;
	color: var(--cc-steam-muted);
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.cc-seller-card__stat dd {
	margin: 0;
	color: #fff;
	font-size: 1.25rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.cc-seller-card__actions {
	display: grid;
	gap: 10px;
	margin: 16px 16px 0;
	text-align: center;
}

.cc-seller-card__actions .cc-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border-color: transparent;
	background: linear-gradient(90deg, #47bfff 0%, #1a44c2 100%);
	color: #fff;
}

.cc-seller-card__actions .cc-button:hover,
.cc-seller-card__actions .cc-button:focus-visible {
	background: linear-gradient(90deg, #66c0f4 0%, #2a5ad8 100%);
	color: #fff;
}

.cc-seller-card__email {
	color: var(--cc-steam-blue);
	font-size: 0.9375rem;
	word-break: break-all;
}

.cc-seller-card__social {
	justify-content: center;
	margin: 14px 16px 0;
}

.cc-seller-card__social .cc-social__link {
	border-color: rgba(102, 192, 244, 0.25);
	background: rgba(0, 0, 0, 0.2);
	color: var(--cc-steam-text);
}

.cc-seller-card__social .cc-social__link:hover,
.cc-seller-card__social .cc-social__link:focus-visible {
	border-color: var(--cc-steam-blue);
	background: rgba(102, 192, 244, 0.1);
	color: #fff;
}

/* ==========================================================================
   My Account dashboard: tiles, then orders, then wishlist, support and the
   account side by side. Everything links through to its own tab.
   ========================================================================== */
.cc-dash {
	display: grid;
	gap: var(--cc-space-3);
}

.cc-dash__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--cc-space) var(--cc-space-3);
}

.cc-dash__hello {
	margin: 0 0 6px;
	font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
}

.cc-dash__intro {
	margin: 0;
	color: var(--cc-color-text-muted);
}

.cc-dash__logout {
	margin: 4px 0 0;
	color: var(--cc-color-text-muted);
	font-size: 0.875rem;
	white-space: nowrap;
}

.cc-dash__logout a,
.cc-dash__steam-missing a,
.cc-dash-panel__empty a,
.cc-dash-account a {
	color: var(--cc-color-accent-text);
	font-weight: var(--cc-weight-strong, 600);
}

.cc-dash__steam-missing {
	margin: 0;
}

/* Tiles ------------------------------------------------------------------ */
.cc-dash-tiles {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--cc-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 900px) {
	.cc-dash-tiles {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.cc-dash-tile {
	margin: 0;
}

.cc-dash-tile__link {
	display: grid;
	gap: 2px;
	height: 100%;
	padding: var(--cc-space-2) var(--cc-space-3);
	border: 1px solid var(--cc-color-border);
	border-radius: var(--cc-radius);
	background: var(--cc-color-surface);
	color: var(--cc-color-text);
	text-decoration: none;
	transition: border-color var(--cc-transition), transform var(--cc-transition);
}

.cc-dash-tile__link:hover,
.cc-dash-tile__link:focus-visible {
	border-color: color-mix(in srgb, var(--cc-color-accent) 60%, var(--cc-color-border));
	color: var(--cc-color-text);
	transform: translateY(-1px);
}

.cc-dash-tile__label {
	color: var(--cc-color-text-muted);
	font-size: 0.8125rem;
	font-weight: var(--cc-weight-strong, 600);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.cc-dash-tile__value {
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.15;
	font-variant-numeric: tabular-nums;
}

.cc-dash-tile__note {
	color: var(--cc-color-text-muted);
	font-size: 0.875rem;
}

.cc-dash-tile.is-alert .cc-dash-tile__link {
	border-color: var(--cc-color-warning);
	background:
		linear-gradient(135deg, color-mix(in srgb, var(--cc-color-warning) 14%, transparent) 0%, transparent 70%),
		var(--cc-color-surface);
}

.cc-dash-tile.is-alert .cc-dash-tile__note {
	color: var(--cc-color-text);
	font-weight: var(--cc-weight-strong, 600);
}

/* Panels ----------------------------------------------------------------- */
.cc-dash-panel {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: var(--cc-space-3);
	border: 1px solid var(--cc-color-border);
	border-radius: var(--cc-radius);
	background: var(--cc-color-surface);
	scroll-margin-top: calc(var(--cc-space-8) + 24px);
}

.cc-dash-panel--alert {
	border-color: var(--cc-color-warning);
}

.cc-dash-panel__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--cc-space-2);
	margin-bottom: var(--cc-space-2);
}

.cc-dash-panel__title {
	margin: 0;
	font-size: 1.125rem;
}

.cc-dash-panel__more {
	color: var(--cc-color-accent-text);
	font-size: 0.875rem;
	font-weight: var(--cc-weight-strong, 600);
	white-space: nowrap;
}

.cc-dash-panel__intro,
.cc-dash-panel__empty {
	max-width: none;
	margin: 0 0 var(--cc-space-2);
	color: var(--cc-color-text-muted);
	font-size: 0.9375rem;
}

.cc-dash-panel__foot {
	margin: auto 0 0;
	padding-top: var(--cc-space-2);
}

.cc-dash-grid {
	display: grid;
	gap: var(--cc-space-3);
}

@media (min-width: 1000px) {
	.cc-dash-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Orders ----------------------------------------------------------------- */
.cc-dash-orders {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cc-dash-order {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 8px var(--cc-space-2);
	margin: 0;
	padding: 14px 0;
	border-top: 1px solid var(--cc-color-border);
}

.cc-dash-order:first-child {
	border-top: 0;
	padding-top: 0;
}

.cc-dash-order__main {
	display: grid;
	gap: 2px;
	min-width: 0;
	color: var(--cc-color-text);
	text-decoration: none;
}

.cc-dash-order__main:hover .cc-dash-order__number,
.cc-dash-order__main:focus-visible .cc-dash-order__number {
	color: var(--cc-color-accent-text);
}

.cc-dash-order__number {
	font-weight: 700;
}

.cc-dash-order__items {
	overflow: hidden;
	color: var(--cc-color-text);
	font-size: 0.9375rem;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cc-dash-order__date,
.cc-dash-order__note {
	color: var(--cc-color-text-muted);
	font-size: 0.8125rem;
}

.cc-dash-order__total {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.cc-dash-order__state {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 10px;
}

.cc-dash-order__action {
	justify-self: end;
}

@media (min-width: 760px) {
	.cc-dash-order {
		grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.4fr) 110px 130px;
	}

	.cc-dash-order__state {
		grid-column: 2;
		grid-row: 1;
	}

	.cc-dash-order__total {
		grid-column: 3;
		grid-row: 1;
	}

	.cc-dash-order__action {
		grid-column: 4;
		grid-row: 1;
	}
}

.cc-dash-status {
	display: inline-block;
	padding: 3px 10px;
	border: 1px solid currentColor;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
}

.cc-dash-status--warning {
	color: var(--cc-color-warning);
}

.cc-dash-status--danger {
	color: var(--cc-color-danger-text, var(--cc-color-danger));
}

.cc-dash-status--success {
	color: var(--cc-color-success);
}

.cc-dash-status--info {
	color: var(--cc-color-accent-text);
}

.cc-dash-status--muted {
	color: var(--cc-color-text-muted);
}

/* Wishlist and support lists --------------------------------------------- */
.cc-dash-wishes,
.cc-dash-tickets {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cc-dash-wish {
	margin: 0;
}

.cc-dash-wish__link {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--cc-color-text);
	text-decoration: none;
}

.cc-dash-wish__thumb {
	flex: 0 0 48px;
	width: 48px;
	height: 48px;
	overflow: hidden;
	border-radius: var(--cc-radius-sm);
	background: var(--cc-color-surface-elevated);
}

.cc-dash-wish__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cc-dash-wish__body {
	display: grid;
	gap: 2px;
	min-width: 0;
}

.cc-dash-wish__name {
	overflow: hidden;
	font-weight: var(--cc-weight-strong, 600);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cc-dash-wish__link:hover .cc-dash-wish__name,
.cc-dash-wish__link:focus-visible .cc-dash-wish__name {
	color: var(--cc-color-accent-text);
}

.cc-dash-wish__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 10px;
	font-size: 0.8125rem;
}

.cc-dash-wish__stock {
	color: var(--cc-color-text-muted);
}

.cc-dash-wish__stock.is-available {
	color: var(--cc-color-success);
}

.cc-dash-ticket {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin: 0;
}

.cc-dash-ticket__link {
	display: grid;
	gap: 2px;
	min-width: 0;
	color: var(--cc-color-text);
	text-decoration: none;
}

.cc-dash-ticket__subject {
	overflow: hidden;
	font-weight: var(--cc-weight-strong, 600);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cc-dash-ticket__link:hover .cc-dash-ticket__subject,
.cc-dash-ticket__link:focus-visible .cc-dash-ticket__subject {
	color: var(--cc-color-accent-text);
}

.cc-dash-ticket__date {
	color: var(--cc-color-text-muted);
	font-size: 0.8125rem;
}

/* Account ---------------------------------------------------------------- */
.cc-dash-account {
	display: grid;
	gap: 10px;
	margin: 0;
}

.cc-dash-account__row {
	display: grid;
	gap: 2px;
}

.cc-dash-account dt {
	color: var(--cc-color-text-muted);
	font-size: 0.75rem;
	font-weight: var(--cc-weight-strong, 600);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.cc-dash-account dd {
	margin: 0;
	overflow-wrap: anywhere;
}

.cc-dash-steam {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.cc-dash-steam__avatar {
	width: 24px;
	height: 24px;
	border-radius: 4px;
}

/* ==========================================================================
   My Account and order pages: every section in a box

   The same panel as the dashboard - surface, hairline border, radius - for
   the store's own sections (.cc-account-box) and for WooCommerce's: the
   account form, an order's details, delivery and customer sections, order
   updates and the order-received overview.
   ========================================================================== */
.cc-account-box,
.woocommerce-account form.woocommerce-EditAccountForm,
.woocommerce-customer-details,
.woocommerce-OrderUpdates,
.woocommerce-MyAccount-content > p:has(.cc-order-head),
.woocommerce-order > p:has(.cc-order-head) {
	display: block;
	max-width: none;
	margin: 0 0 var(--cc-space-3);
	padding: var(--cc-space-3);
	border: 1px solid var(--cc-color-border);
	border-radius: var(--cc-radius);
	background: var(--cc-color-surface);
	box-shadow: none;
}

.cc-account-box > :last-child,
.woocommerce-customer-details > :last-child {
	margin-bottom: 0;
}

.cc-account-box__title,
.woocommerce-account form.woocommerce-EditAccountForm legend,
.woocommerce-order-details__title,
.woocommerce-customer-details .woocommerce-column__title {
	margin: 0 0 var(--cc-space-2);
	padding: 0;
	color: var(--cc-color-text);
	font-family: var(--cc-font-heading);
	font-size: 1.125rem;
	font-weight: var(--cc-weight-heading, 650);
	line-height: var(--cc-leading-snug, 1.3);
}

.cc-account-box__text {
	max-width: none;
	margin: 0 0 var(--cc-space-2);
	color: var(--cc-color-text-muted);
}

.cc-account-box__actions {
	margin: var(--cc-space-2) 0 0;
}

/* Inside a box the old outer spacing and frames would double up. */
.cc-account-box .cc-steam-profile {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
}

.cc-account-box .cc-steam-form,
.cc-account-box .cc-support-form,
.cc-account-box.cc-showcase-optin {
	margin-top: 0;
}

.cc-account-box .cc-support-list {
	border: 0;
	border-radius: 0;
}

.cc-account-box .cc-support-list__item {
	padding: 12px 0;
	background: none;
}

.cc-account-box .cc-support-list__item:first-child {
	padding-top: 0;
}

.cc-account-box.cc-support-thread {
	display: flex;
}

.cc-account-box .cc-support-thread__header {
	margin-bottom: 0;
}

/* Account details: the password change is a section of the form, not a
   dashed frame inside it. */
.woocommerce-account form.woocommerce-EditAccountForm fieldset {
	margin: var(--cc-space-3) 0 0;
	padding: var(--cc-space-3) 0 0;
	border: 0;
	border-top: 1px solid var(--cc-color-border);
}

.woocommerce-account form.woocommerce-EditAccountForm legend {
	float: left;
	width: 100%;
}

.woocommerce-account form.woocommerce-EditAccountForm legend + * {
	clear: both;
}

.woocommerce-account form.woocommerce-EditAccountForm > p:last-of-type {
	margin: var(--cc-space-3) 0 0;
}

/* Order pages ------------------------------------------------------------- */
.woocommerce-order-details {
	margin: 0;
}






/* The theme and WooCommerce each frame the address; the box is frame enough. */
.woocommerce .woocommerce-customer-details address,
.woocommerce-customer-details address {
	padding: 0;
	border: 0;
	border-radius: 0;
}

/* WooCommerce floats the overview facts with dashed dividers between them. */
.woocommerce .woocommerce-order ul.woocommerce-order-overview li {
	float: none;
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 0.8125rem;
	line-height: 1.4;
}

.woocommerce .woocommerce-order ul.woocommerce-order-overview::before,
.woocommerce .woocommerce-order ul.woocommerce-order-overview::after {
	display: none;
}


.woocommerce-customer-details address {
	margin: 0;
	padding: 0;
	border: 0;
	font-style: normal;
	line-height: 1.7;
}

.woocommerce-customer-details .woocommerce-customer-details--email {
	margin: 0;
}

.woocommerce-OrderUpdates {
	list-style: none;
}

.woocommerce-OrderUpdates .woocommerce-OrderUpdate + .woocommerce-OrderUpdate {
	margin-top: var(--cc-space-2);
	padding-top: var(--cc-space-2);
	border-top: 1px solid var(--cc-color-border);
}

/* The order's own header: number, date, and where it stands. */
.woocommerce-MyAccount-content > p:has(.cc-order-head),
.woocommerce-order > p:has(.cc-order-head) {
	padding-block: var(--cc-space-2);
}

.cc-order-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--cc-space) var(--cc-space-3);
}

.cc-order-head__id {
	display: grid;
	gap: 2px;
}

.cc-order-head__number {
	color: var(--cc-color-text);
	font-family: var(--cc-font-heading);
	font-size: 1.375rem;
	font-weight: 700;
	line-height: 1.2;
}

.cc-order-head__date,
.cc-order-head__note {
	color: var(--cc-color-text-muted);
	font-size: 0.875rem;
}

.cc-order-head__state {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 12px;
}

.cc-order-head mark {
	background: none;
}

/* Order received: the overview is a box too, its facts in a grid. */
.woocommerce-order .woocommerce-order-overview {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--cc-space-2);
	margin: 0 0 var(--cc-space-3);
	padding: var(--cc-space-3);
	list-style: none;
}

.woocommerce-order .woocommerce-order-overview li {
	display: grid;
	gap: 2px;
	margin: 0;
	padding: 0;
	border: 0;
	color: var(--cc-color-text-muted);
	font-size: 0.8125rem;
	font-weight: var(--cc-weight-strong, 600);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.woocommerce-order .woocommerce-order-overview li strong {
	color: var(--cc-color-text);
	font-size: 1rem;
	letter-spacing: 0;
	text-transform: none;
	overflow-wrap: anywhere;
}

.woocommerce-order .cc-payment-panel {
	margin: 0 0 var(--cc-space-3);
}

/* Orders list: one card per order ------------------------------------------ */
.cc-order-cards {
	display: grid;
	gap: var(--cc-space-3);
}

.cc-order-card {
	padding: var(--cc-space-3);
	border: 1px solid var(--cc-color-border);
	border-radius: var(--cc-radius);
	background: var(--cc-color-surface);
}

.cc-order-card__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--cc-space) var(--cc-space-2);
	padding-bottom: var(--cc-space-2);
	border-bottom: 1px solid var(--cc-color-border);
}

.cc-order-card__id {
	display: grid;
	gap: 2px;
}

.cc-order-card__number {
	color: var(--cc-color-text);
	font-size: 1.125rem;
	font-weight: 700;
	text-decoration: none;
}

.cc-order-card__number:hover,
.cc-order-card__number:focus-visible {
	color: var(--cc-color-accent-text);
}

.cc-order-card__date,
.cc-order-card__note,
.cc-order-card__method,
.cc-order-card__total-label {
	color: var(--cc-color-text-muted);
	font-size: 0.875rem;
}

.cc-order-card__state {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 4px 10px;
	text-align: right;
}

.cc-order-card__items {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: var(--cc-space-2) 0;
	list-style: none;
}

.cc-order-card__item {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	min-width: 0;
}

.cc-order-card__thumb {
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	overflow: hidden;
	border-radius: var(--cc-radius-sm);
	background: var(--cc-color-surface-elevated);
}

.cc-order-card__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cc-order-card__name {
	min-width: 0;
	overflow: hidden;
	color: var(--cc-color-text);
	font-weight: var(--cc-weight-strong, 600);
	text-decoration: none;
	text-overflow: ellipsis;
	white-space: nowrap;
}

a.cc-order-card__name:hover,
a.cc-order-card__name:focus-visible {
	color: var(--cc-color-accent-text);
}

.cc-order-card__qty {
	color: var(--cc-color-text-muted);
	font-size: 0.875rem;
}

.cc-order-card__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--cc-space-2);
	padding-top: var(--cc-space-2);
	border-top: 1px solid var(--cc-color-border);
}

.cc-order-card__total {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 8px;
	margin: 0;
}

.cc-order-card__total strong {
	color: var(--cc-color-text);
	font-size: 1.125rem;
	font-variant-numeric: tabular-nums;
}

.cc-order-card__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
}

/* WooCommerce's .button styles would otherwise repaint these. */
.cc-order-card__actions .cc-button.button {
	width: auto;
	margin: 0;
}

.woocommerce-MyAccount-content .cc-order-card__actions a.cc-button--secondary.button {
	border: 1px solid var(--cc-button-outline, var(--cc-color-border));
	background: transparent;
	color: var(--cc-color-text);
}

.woocommerce-MyAccount-content .cc-order-card__actions a.cc-button--secondary.button:hover,
.woocommerce-MyAccount-content .cc-order-card__actions a.cc-button--secondary.button:focus-visible {
	border-color: var(--cc-color-text-muted);
	background: var(--cc-color-surface-elevated);
}

.woocommerce-MyAccount-content .cc-order-card__actions a.cc-button--ghost.button {
	border: 1px solid transparent;
	background: transparent;
	color: var(--cc-color-danger-text, var(--cc-color-accent-text));
}

@media (max-width: 599px) {
	.cc-order-card {
		padding: var(--cc-space-2);
	}

	.cc-order-card__state {
		justify-content: flex-start;
		text-align: left;
	}

	.cc-order-card__actions {
		width: 100%;
	}

	.cc-order-card__actions .cc-button {
		flex: 1 1 auto;
	}
}

.cc-order-pages {
	display: flex;
	justify-content: space-between;
	gap: var(--cc-space-2);
	margin-top: var(--cc-space-3);
}

.cc-order-pages .cc-button:only-child {
	margin-left: auto;
}

/* ==========================================================================
   Cart and checkout boxes

   The same panel as the account dashboard - surface, hairline border,
   radius - around each part of the cart and the checkout. The box that
   carries the money (cart totals, the order summary at checkout) and the
   contact form take the accent in their outline and a soft wash from one
   corner, as the dashboard's "Pending payments" panel does with its colour.
   ========================================================================== */
.woocommerce-cart form.woocommerce-cart-form,
body .ct-woocommerce-cart-form .cart_totals,
.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .cc-checkout-section,
.woocommerce-checkout .cc-checkout-box,
body .ct-order-review {
	box-sizing: border-box;
	margin: 0 0 var(--cc-space-3);
	padding: var(--cc-space-3);
	border: 1px solid var(--cc-color-border);
	border-radius: var(--cc-radius);
	background: var(--cc-color-surface);
	box-shadow: none;
}

body .ct-woocommerce-cart-form .cart_totals,
body .ct-order-review,
.cc-contact-form,
.cc-tinted {
	border-color: color-mix(in srgb, var(--cc-color-accent) 55%, var(--cc-color-border));
	background:
		linear-gradient(135deg, color-mix(in srgb, var(--cc-color-accent) 12%, transparent) 0%, transparent 55%),
		var(--cc-color-surface);
}

.cc-cart-box__title,
body .ct-woocommerce-cart-form .cart_totals > h2,
.woocommerce-checkout .woocommerce-billing-fields > h3,
.woocommerce-checkout .cc-checkout-section > h3,
.woocommerce-checkout .cc-checkout-notes > h3,
body .ct-order-review #order_review_heading {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--cc-space-2);
	margin: 0 0 var(--cc-space-2);
	padding: 0;
	color: var(--cc-color-text);
	font-family: var(--cc-font-heading);
	font-size: 1.125rem;
	font-weight: var(--cc-weight-heading, 650);
	line-height: var(--cc-leading-snug, 1.3);
	text-transform: none;
	letter-spacing: 0;
}

.cc-cart-box__count {
	color: var(--cc-color-text-muted);
	font-size: 0.875rem;
	font-weight: var(--cc-weight-medium, 500);
}

/* Inside a box, tables lose their own frame and outer spacing. */
.woocommerce-cart form.woocommerce-cart-form table.shop_table,
body .ct-woocommerce-cart-form .cart_totals table.shop_table,
body .ct-order-review table.shop_table {
	margin: 0;
	border: 0;
}

.woocommerce-cart form.woocommerce-cart-form table.shop_table thead th,
body .ct-order-review table.shop_table thead th {
	padding-top: 0;
	color: var(--cc-color-text-muted);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* The grand total is what the box is for. */
body .ct-woocommerce-cart-form .cart_totals .order-total th,
body .ct-woocommerce-cart-form .cart_totals .order-total td,
body .ct-order-review .order-total th,
body .ct-order-review .order-total td {
	border-bottom: 0;
	color: var(--cc-color-text);
	font-size: 1.125rem;
	font-weight: 700;
}

body .ct-woocommerce-cart-form .cart_totals .wc-proceed-to-checkout {
	margin-bottom: 0;
	padding-bottom: 0;
}

.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .cc-checkout-section,
.woocommerce-checkout .cc-checkout-box {
	margin-top: 0;
}

.woocommerce-checkout .cc-checkout-notes .woocommerce-additional-fields__field-wrapper > :last-child,
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > :last-child {
	margin-bottom: 0;
}

/* The order summary's payment list sits on the box, not in a second frame. */
body .ct-order-review #payment {
	margin-top: var(--cc-space-3);
	background: none;
}

body .ct-order-review #payment .place-order {
	margin-bottom: 0;
	padding-bottom: 0;
}

@media (max-width: 599px) {
	.woocommerce-cart form.woocommerce-cart-form,
	body .ct-woocommerce-cart-form .cart_totals,
	.woocommerce-checkout .woocommerce-billing-fields,
	.woocommerce-checkout .cc-checkout-section,
	.woocommerce-checkout .cc-checkout-box,
	body .ct-order-review {
		padding: var(--cc-space-2);
	}
}

/* ==========================================================================
   Product page: Description and Reviews in boxes

   Each is a panel like the account dashboard's. The sections after the
   summary also take the theme's content width, so their edges line up with
   the image and summary above them and with "Related products" below,
   instead of running 40px wider on each side (the store's own container
   is wider than the theme's).
   ========================================================================== */
.woocommerce div.product .cc-product-section,
.woocommerce div.product .cc-collection-info,
.woocommerce div.product .cc-ingame {
	width: var(--theme-container-width, calc(100% - 2 * var(--cc-gutter)));
	max-width: var(--theme-normal-container-max-width, var(--cc-container));
	margin-inline: auto;
	padding-inline: 0;
}

.woocommerce div.product .cc-product-section {
	margin-block: var(--cc-space-4);
	padding: var(--cc-space-3) var(--cc-space-4);
	border: 1px solid var(--cc-color-border);
	border-radius: var(--cc-radius);
	background: var(--cc-color-surface);
}

.cc-product-section__title,
.cc-product-reviews .woocommerce-Reviews-title {
	margin: 0 0 var(--cc-space-2);
	padding-bottom: var(--cc-space-2);
	border-bottom: 1px solid var(--cc-color-border);
	font-size: 1.25rem;
}

.cc-product-description__body {
	max-width: 75ch;
	color: var(--cc-color-text);
	line-height: 1.7;
}

.cc-product-description__body h3 {
	margin: var(--cc-space-3) 0 var(--cc-space);
	font-size: 1.0625rem;
}

.cc-product-description__body ul {
	margin: 0 0 var(--cc-space-2);
	padding-left: 1.25em;
}

.cc-product-description__body li + li {
	margin-top: 4px;
}

.cc-product-description__body li::marker {
	color: var(--cc-color-accent-text);
}

/* Inside the box, each review is a quieter card on the elevated surface. */
.cc-product-reviews .commentlist > li {
	background: var(--cc-color-surface-elevated);
}

.cc-product-reviews .commentlist {
	margin-bottom: 0;
}

.cc-product-reviews #review_form_wrapper,
.cc-product-reviews .woocommerce-verification-required,
.cc-product-reviews .woocommerce-noreviews {
	margin-bottom: 0;
}

@media (max-width: 599px) {
	.woocommerce div.product .cc-product-section {
		padding: var(--cc-space-2);
	}
}

/* ==========================================================================
   Product cards: add to cart beside "View and buy"

   A square icon button, so the main action keeps its width. It turns into a
   tick for a moment once the set is in the cart.
   ========================================================================== */
.cc-product-card__actions {
	display: flex;
	gap: 8px;
	margin-top: var(--cc-space-2);
}

.cc-product-card__actions .cc-product-card__action {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
	margin: 0;
}

.cc-product-card__add {
	flex: 0 0 auto;
	width: 46px;
	min-width: 46px;
	padding: 0;
	gap: 0;
	border-color: color-mix(in srgb, var(--cc-color-accent) 55%, var(--cc-color-border));
	color: var(--cc-color-text);
}

.cc-product-card__add:hover,
.cc-product-card__add:focus-visible {
	border-color: var(--cc-color-accent);
	background: color-mix(in srgb, var(--cc-color-accent) 16%, transparent);
	color: var(--cc-color-text);
}

.cc-product-card__add .cc-icon--check {
	display: none;
}

.cc-product-card__add.is-added {
	border-color: var(--cc-color-success);
	background: color-mix(in srgb, var(--cc-color-success) 18%, transparent);
	color: var(--cc-color-success);
}

.cc-product-card__add.is-added .cc-icon--cart-add {
	display: none;
}

.cc-product-card__add.is-added .cc-icon--check {
	display: block;
}

.cc-product-card__add.is-loading {
	cursor: progress;
	opacity: 0.6;
}

.cc-product-card__add.is-loading .cc-icon {
	animation: cc-quick-add 0.8s ease-in-out infinite alternate;
}

@keyframes cc-quick-add {
	to {
		transform: translateX(3px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.cc-product-card__add.is-loading .cc-icon {
		animation: none;
	}
}

.cc-product-card__actions .added_to_cart {
	display: none;
}

/* ==========================================================================
   An order's page: the order box, the receipt and the updates

   The order box takes the colour of where the order stands - amber while a
   payment is due, green once delivered - in its outline and a wash from one
   corner, as the dashboard's panels do. The receipt reads like one: sets in
   rows with the quantity, price and amount in columns of their own, figures
   aligned on the right, and the grand total set apart in the accent.
   ========================================================================== */
.cc-order-summary {
	--cc-tone: var(--cc-color-border);
}

.cc-order-summary.cc-tone--warning { --cc-tone: var(--cc-color-warning); }
.cc-order-summary.cc-tone--danger { --cc-tone: var(--cc-color-danger); }
.cc-order-summary.cc-tone--success { --cc-tone: var(--cc-color-success); }
.cc-order-summary.cc-tone--info { --cc-tone: var(--cc-color-accent); }

.cc-order-summary:not(.cc-tone--muted) {
	border-color: color-mix(in srgb, var(--cc-tone) 55%, var(--cc-color-border));
	background:
		linear-gradient(135deg, color-mix(in srgb, var(--cc-tone) 12%, transparent) 0%, transparent 55%),
		var(--cc-color-surface);
}

.cc-order-summary .cc-order-head {
	margin-bottom: var(--cc-space-2);
	padding-bottom: var(--cc-space-2);
	border-bottom: 1px solid var(--cc-color-border);
}

h2.cc-order-head__number {
	margin: 0;
	padding: 0;
}

.cc-order-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--cc-space-2) var(--cc-space-3);
	margin: 0;
}

.cc-order-fact {
	display: grid;
	align-content: start;
	gap: 4px;
	min-width: 0;
}

.cc-order-fact dt,
.cc-receipt__label {
	color: var(--cc-color-text-muted);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.cc-order-fact dd {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 10px;
	margin: 0;
	color: var(--cc-color-text);
	overflow-wrap: anywhere;
}

.cc-order-fact__strong {
	font-weight: var(--cc-weight-strong, 600);
}

.cc-order-fact__code code {
	padding: 2px 6px;
	border-radius: var(--cc-radius-sm);
	background: var(--cc-color-surface-elevated);
	color: var(--cc-color-text-muted);
	font-size: 0.8125rem;
}

a.cc-order-fact__code {
	text-decoration: none;
}

a.cc-order-fact__code:hover code,
a.cc-order-fact__code:focus-visible code {
	color: var(--cc-color-accent-text);
}

.cc-order-summary__next {
	max-width: none;
	margin: var(--cc-space-2) 0 0;
	padding-top: var(--cc-space-2);
	border-top: 1px solid var(--cc-color-border);
	color: var(--cc-color-text-muted);
}

/* The receipt ------------------------------------------------------------- */
.cc-account-box.cc-receipt {
	padding: 0;
	overflow: hidden;
}

.cc-receipt__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--cc-space-2);
	padding: var(--cc-space-3);
	border-bottom: 1px solid var(--cc-color-border);
}

.cc-receipt__title {
	margin: 0;
	color: var(--cc-color-text);
	font-family: var(--cc-font-heading);
	font-size: 1.25rem;
	line-height: 1.2;
}

.cc-receipt__method {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 8px;
	margin: 6px 0 0;
	color: var(--cc-color-text);
	font-size: 0.9375rem;
}

.cc-receipt__download {
	gap: 8px;
}

.cc-receipt__items {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
}

.cc-receipt .cc-receipt__items th,
.cc-receipt .cc-receipt__items td {
	padding: 14px var(--cc-space-2);
	border: 0;
	border-bottom: 1px solid var(--cc-color-border);
	background: none;
	text-align: left;
	vertical-align: middle;
}

.cc-receipt .cc-receipt__items th:first-child,
.cc-receipt .cc-receipt__items td:first-child {
	padding-left: var(--cc-space-3);
}

.cc-receipt .cc-receipt__items th:last-child,
.cc-receipt .cc-receipt__items td:last-child {
	padding-right: var(--cc-space-3);
}

.cc-receipt .cc-receipt__items thead th {
	padding-block: 10px;
	background: var(--cc-color-surface-elevated);
	color: var(--cc-color-text-muted);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.cc-receipt .cc-receipt__items .cc-receipt__num {
	width: 1%;
	text-align: right;
	white-space: nowrap;
}

.cc-receipt__unit {
	color: var(--cc-color-text-muted);
}

.cc-receipt .cc-receipt__amount {
	color: var(--cc-color-text);
	font-weight: 700;
}

.cc-receipt__set {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

.cc-receipt__thumb {
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	overflow: hidden;
	border-radius: var(--cc-radius-sm);
	background: var(--cc-color-surface-elevated);
}

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

.cc-receipt__set-text {
	display: grid;
	gap: 2px;
	min-width: 0;
}

.cc-receipt__name {
	color: var(--cc-color-text);
	font-weight: var(--cc-weight-strong, 600);
	text-decoration: none;
}

a.cc-receipt__name:hover,
a.cc-receipt__name:focus-visible {
	color: var(--cc-color-accent-text);
}

.cc-receipt__details,
.cc-receipt__set-text .wc-item-meta {
	color: var(--cc-color-text-muted);
	font-size: 0.8125rem;
}

.cc-receipt__set-text .wc-item-meta {
	margin: 2px 0 0;
	padding: 0;
	list-style: none;
}

.cc-receipt__set-text .wc-item-meta p {
	display: inline;
	margin: 0;
}

.cc-receipt__purchase-note td {
	color: var(--cc-color-text-muted);
	font-size: 0.875rem;
}

.cc-receipt__foot {
	display: grid;
	gap: var(--cc-space-3);
	padding: var(--cc-space-3);
}

@media (min-width: 700px) {
	.cc-receipt__foot {
		grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
		align-items: start;
	}
}

.cc-receipt__note {
	max-width: none;
	margin: 0;
	padding: 12px 14px;
	border-left: 3px solid var(--cc-color-border);
	border-radius: var(--cc-radius-sm);
	background: var(--cc-color-surface-elevated);
	color: var(--cc-color-text);
}

.cc-receipt__note .cc-receipt__label {
	display: block;
	margin-bottom: 4px;
}

.cc-receipt__totals {
	display: grid;
	margin: 0;
	font-variant-numeric: tabular-nums;
}

.cc-receipt__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--cc-space-2);
	padding: 8px 0;
}

.cc-receipt__total + .cc-receipt__total:not(.is-grand) {
	border-top: 1px dashed var(--cc-color-border);
}

.cc-receipt__total dt {
	color: var(--cc-color-text-muted);
}

.cc-receipt__total dd {
	margin: 0;
	color: var(--cc-color-text);
	font-weight: var(--cc-weight-strong, 600);
	text-align: right;
}

.cc-receipt__total.is-grand {
	margin-top: 8px;
	padding: 12px 14px;
	border: 1px solid color-mix(in srgb, var(--cc-color-accent) 50%, var(--cc-color-border));
	border-radius: var(--cc-radius-sm);
	background: color-mix(in srgb, var(--cc-color-accent) 14%, var(--cc-color-surface));
}

.cc-receipt__total.is-grand dt {
	color: var(--cc-color-text);
	font-weight: 700;
}

.cc-receipt__total.is-grand dd {
	font-size: 1.375rem;
	font-weight: 800;
	letter-spacing: -0.01em;
}

.cc-receipt__total.is-grand dd small {
	display: block;
	color: var(--cc-color-text-muted);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0;
}

.cc-receipt__total--settle dt,
.cc-receipt__total--settle dd {
	color: var(--cc-color-text-muted);
	font-size: 0.875rem;
}

.cc-receipt__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 8px;
	padding: var(--cc-space-2) var(--cc-space-3);
	border-top: 1px solid var(--cc-color-border);
	background: var(--cc-color-surface-elevated);
}

/* WooCommerce's .button styles would otherwise repaint these. */
.cc-receipt__actions .cc-button.button {
	width: auto;
	margin: 0;
}

.cc-receipt__actions a.cc-button--ghost.button {
	border: 1px solid transparent;
	background: transparent;
	color: var(--cc-color-danger-text, var(--cc-color-accent-text));
}

.cc-receipt__actions a.cc-button--ghost.button:hover,
.cc-receipt__actions a.cc-button--ghost.button:focus-visible {
	border-color: color-mix(in srgb, var(--cc-color-danger) 50%, transparent);
	background: transparent;
}

/* Phones: each set on its own line, then the quantity, price and amount. */
@media (max-width: 599px) {
	.cc-receipt__head,
	.cc-receipt__foot {
		padding: var(--cc-space-2);
	}

	.cc-receipt__items thead {
		display: none;
	}

	.cc-receipt__items,
	.cc-receipt__items tbody {
		display: block;
	}

	.cc-receipt .cc-receipt__items tr.cc-receipt__item {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr) auto;
		align-items: baseline;
		gap: 8px 10px;
		padding: 14px var(--cc-space-2);
		border-bottom: 1px solid var(--cc-color-border);
	}

	.cc-receipt .cc-receipt__items tr.cc-receipt__item > td {
		display: block;
		width: auto;
		padding: 0;
		border: 0;
		text-align: left;
	}

	.cc-receipt .cc-receipt__items tr.cc-receipt__item > td.cc-receipt__col-item {
		grid-column: 1 / -1;
	}

	.cc-receipt .cc-receipt__items tr.cc-receipt__item > td.cc-receipt__amount {
		text-align: right;
	}

	.cc-receipt__item > td.cc-receipt__num:nth-child(2)::after {
		content: " \00d7";
		color: var(--cc-color-text-muted);
	}

	.cc-receipt__actions {
		padding: var(--cc-space-2);
	}

	.cc-receipt__actions .cc-button.button {
		flex: 1 1 auto;
	}
}

/* Order updates ----------------------------------------------------------- */
.cc-order-updates__list {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cc-order-updates__item {
	margin: 0;
}

.cc-order-updates__item + .cc-order-updates__item {
	margin-top: var(--cc-space-2);
	padding-top: var(--cc-space-2);
	border-top: 1px solid var(--cc-color-border);
}

.cc-order-updates__date {
	margin: 0 0 4px;
	color: var(--cc-color-text-muted);
	font-size: 0.8125rem;
}

.cc-order-updates__text > :last-child {
	margin-bottom: 0;
}

/* The receipt link among an order's actions on the Orders tab. */
.cc-order-card__actions .cc-button.receipt {
	gap: 6px;
}

/* On a phone the theme stacks each cart row and its heading row shrinks to
   a lone "Product"; the box's own title already says what the list is. */
@media (max-width: 689.98px) {
	.woocommerce-cart form.woocommerce-cart-form table.shop_table thead {
		display: none;
	}
}

/* ==========================================================================
   2.7.0: one support box, the receipt at checkout, boxed sign-in and
   account details, coloured price changes, set requests and the cart notice
   ========================================================================== */

/* Support tab: messages, the form and other ways to reach us in one box,
   each part under a hairline. */
.cc-support-box__part + .cc-support-box__part {
	margin-top: var(--cc-space-3);
	padding-top: var(--cc-space-3);
	border-top: 1px solid var(--cc-color-border);
}

.cc-support-box .cc-support-list {
	margin: 0;
}

.cc-support-box .cc-support-list__item:last-child {
	padding-bottom: 0;
}

.cc-support-form__actions {
	margin: 0;
}

/* Product cards: the tick stays while the set is in the cart, with a count
   once there is more than one; another click adds one more. ------------- */
.cc-product-card__add {
	position: relative;
}

.cc-product-card__add-count {
	position: absolute;
	top: -7px;
	right: -7px;
	display: none;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--cc-color-success);
	color: #fff;
	font-size: 0.6875rem;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
}

.cc-product-card__add.is-added .cc-product-card__add-count:not(:empty) {
	display: block;
}

.cc-product-card__add.is-added:hover,
.cc-product-card__add.is-added:focus-visible {
	border-color: var(--cc-color-success);
	background: color-mix(in srgb, var(--cc-color-success) 28%, transparent);
	color: var(--cc-color-success);
}

/* A sold-out set's card asks for one instead. */
.cc-product-card__request {
	color: var(--cc-color-text-muted);
}

/* The "added to your cart" notice. */
.cc-toast {
	position: fixed;
	left: 50%;
	bottom: 24px;
	z-index: 200;
	display: flex;
	align-items: center;
	gap: 10px;
	box-sizing: border-box;
	max-width: calc(100vw - 32px);
	padding: 10px 12px 10px 10px;
	border: 1px solid color-mix(in srgb, var(--cc-color-success) 55%, var(--cc-color-border));
	border-radius: var(--cc-radius);
	background: var(--cc-color-surface-elevated);
	box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.55);
	color: var(--cc-color-text);
	font-size: 0.9375rem;
	opacity: 0;
	pointer-events: none;
	transform: translate(-50%, 16px);
	transition: opacity 180ms ease, transform 180ms ease;
}

.cc-toast.is-visible {
	opacity: 1;
	pointer-events: auto;
	transform: translate(-50%, 0);
}

.cc-toast__icon {
	display: inline-grid;
	flex: 0 0 auto;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--cc-color-success) 22%, transparent);
	color: var(--cc-color-success);
}

.cc-toast__text {
	min-width: 0;
	font-weight: 600;
}

.cc-toast__link {
	flex: 0 0 auto;
	margin-left: 4px;
	padding: 4px 10px;
	border-radius: var(--cc-radius-sm);
	color: var(--cc-color-accent-text);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.cc-toast__link:hover,
.cc-toast__link:focus-visible {
	background: color-mix(in srgb, var(--cc-color-accent) 16%, transparent);
	color: var(--cc-color-text);
}

@media (prefers-reduced-motion: reduce) {
	.cc-toast {
		transition: none;
	}
}

/* Totals in the receipt's format: the cart totals and the checkout's
   "Your order". Labels muted, a dashed rule between lines, the grand total
   set apart in the accent. ------------------------------------------------ */
table.shop_table.cc-totals {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
}

table.shop_table.cc-totals tbody {
	display: grid;
}

body table.shop_table.cc-totals tr {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--cc-space-2);
	padding: 8px 0;
	border: 0;
	background: none;
}

body table.shop_table.cc-totals tr + tr:not(.is-grand) {
	border-top: 1px dashed var(--cc-color-border);
}

body table.shop_table.cc-totals th,
body table.shop_table.cc-totals td,
body .ct-order-review table.shop_table.cc-totals th,
body .ct-order-review table.shop_table.cc-totals td,
body .ct-woocommerce-cart-form .cart_totals table.shop_table.cc-totals th,
body .ct-woocommerce-cart-form .cart_totals table.shop_table.cc-totals td {
	display: block;
	width: auto;
	padding: 0;
	border: 0;
	background: none;
	color: var(--cc-color-text-muted);
	font-size: 1rem;
	font-weight: 400;
	text-align: left;
}

body table.shop_table.cc-totals td,
body .ct-order-review table.shop_table.cc-totals td,
body .ct-woocommerce-cart-form .cart_totals table.shop_table.cc-totals td {
	color: var(--cc-color-text);
	font-weight: var(--cc-weight-strong, 600);
	text-align: right;
}

/* WooCommerce's responsive tables print the label again before a value. */
body table.shop_table.cc-totals td::before {
	display: none;
}

body table.shop_table.cc-totals tr.is-grand {
	margin-top: 8px;
	padding: 12px 14px;
	border: 1px solid color-mix(in srgb, var(--cc-color-accent) 50%, var(--cc-color-border));
	border-radius: var(--cc-radius-sm);
	background: color-mix(in srgb, var(--cc-color-accent) 14%, var(--cc-color-surface));
}

body table.shop_table.cc-totals tr.is-grand th,
body .ct-order-review table.shop_table.cc-totals tr.is-grand th,
body .ct-woocommerce-cart-form .cart_totals table.shop_table.cc-totals tr.is-grand th {
	color: var(--cc-color-text);
	font-weight: 700;
}

body table.shop_table.cc-totals tr.is-grand td,
body .ct-order-review table.shop_table.cc-totals tr.is-grand td,
body .ct-woocommerce-cart-form .cart_totals table.shop_table.cc-totals tr.is-grand td {
	font-size: 1.375rem;
	font-weight: 800;
	letter-spacing: -0.01em;
}

body table.shop_table.cc-totals tr.is-grand td small {
	display: block;
	color: var(--cc-color-text-muted);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0;
}

/* A coupon or a cheaper payment method reads as the saving it is, and a
   dearer one as the extra, in the same colours as the product page. */
body table.shop_table.cc-totals tr.cart-discount td,
body table.shop_table.cc-totals tr.is-saving td,
body .ct-order-review table.shop_table.cc-totals tr.is-saving td,
body .ct-woocommerce-cart-form .cart_totals table.shop_table.cc-totals tr.is-saving td {
	color: var(--cc-color-success);
}

body table.shop_table.cc-totals tr.is-extra td,
body .ct-order-review table.shop_table.cc-totals tr.is-extra td,
body .ct-woocommerce-cart-form .cart_totals table.shop_table.cc-totals tr.is-extra td {
	color: var(--cc-color-danger-text);
}

/* The checkout's sets: the receipt's table, reaching the edges of the box
   the way it does on an order's page. */
.cc-receipt--embedded {
	container-type: inline-size;
	--cc-bleed: var(--cc-space-3);
}

body .ct-order-review .cc-receipt--embedded table.shop_table.cc-receipt__items {
	width: calc(100% + 2 * var(--cc-bleed));
	max-width: none;
	margin: 0 calc(-1 * var(--cc-bleed)) var(--cc-space-2);
	border: 0;
	border-top: 1px solid var(--cc-color-border);
	border-radius: 0;
}

body .ct-order-review .cc-receipt--embedded table.cc-receipt__items th,
body .ct-order-review .cc-receipt--embedded table.cc-receipt__items td {
	padding: 12px 10px;
	border: 0;
	border-bottom: 1px solid var(--cc-color-border);
	background: none;
	color: var(--cc-color-text);
	font-size: 0.9375rem;
	font-weight: 400;
	text-align: left;
	vertical-align: middle;
}

body .ct-order-review .cc-receipt--embedded table.cc-receipt__items th:first-child,
body .ct-order-review .cc-receipt--embedded table.cc-receipt__items td:first-child {
	padding-left: var(--cc-bleed);
}

body .ct-order-review .cc-receipt--embedded table.cc-receipt__items th:last-child,
body .ct-order-review .cc-receipt--embedded table.cc-receipt__items td:last-child {
	padding-right: var(--cc-bleed);
}

body .ct-order-review .cc-receipt--embedded table.cc-receipt__items thead th {
	padding-block: 9px;
	background: var(--cc-color-surface-elevated);
	color: var(--cc-color-text-muted);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

body .ct-order-review .cc-receipt--embedded table.cc-receipt__items .cc-receipt__num {
	width: 1%;
	text-align: right;
	white-space: nowrap;
}

body .ct-order-review .cc-receipt--embedded table.cc-receipt__items td.cc-receipt__unit {
	color: var(--cc-color-text-muted);
}

body .ct-order-review .cc-receipt--embedded table.cc-receipt__items td.cc-receipt__amount {
	font-weight: 700;
}

.cc-receipt--embedded .cc-receipt__set-text .variation {
	margin: 2px 0 0;
	color: var(--cc-color-text-muted);
	font-size: 0.8125rem;
}

/* A narrow column: each set on its own line, then quantity, price, amount. */
@container (max-width: 440px) {
	body .ct-order-review .cc-receipt--embedded table.cc-receipt__items thead {
		display: none;
	}

	body .ct-order-review .cc-receipt--embedded table.cc-receipt__items,
	body .ct-order-review .cc-receipt--embedded table.cc-receipt__items tbody {
		display: block;
	}

	body .ct-order-review .cc-receipt--embedded table.cc-receipt__items tr.cc-receipt__item {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr) auto;
		align-items: baseline;
		gap: 8px 10px;
		padding: 12px var(--cc-bleed);
		border-bottom: 1px solid var(--cc-color-border);
	}

	body .ct-order-review .cc-receipt--embedded table.cc-receipt__items tr.cc-receipt__item > td {
		display: block;
		width: auto;
		padding: 0;
		border: 0;
		text-align: left;
	}

	body .ct-order-review .cc-receipt--embedded table.cc-receipt__items tr.cc-receipt__item > td.cc-receipt__col-item {
		grid-column: 1 / -1;
	}

	body .ct-order-review .cc-receipt--embedded table.cc-receipt__items tr.cc-receipt__item > td.cc-receipt__amount {
		text-align: right;
	}

	body .ct-order-review .cc-receipt--embedded .cc-receipt__item > td.cc-receipt__num:nth-child(2)::after {
		content: " \00d7";
		color: var(--cc-color-text-muted);
	}
}

@media (max-width: 599px) {
	.cc-receipt--embedded {
		--cc-bleed: var(--cc-space-2);
	}
}

/* Sign in and register: each form in a box with the accent in its outline
   and a wash from one corner. -------------------------------------------- */
.woocommerce-account #customer_login.u-columns {
	display: grid;
	gap: var(--cc-space-3);
	align-items: start;
}

@media (min-width: 800px) {
	.woocommerce-account #customer_login.u-columns {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.woocommerce-account #customer_login.u-columns::before,
.woocommerce-account #customer_login.u-columns::after {
	display: none;
}

.woocommerce-account #customer_login > .u-column1,
.woocommerce-account #customer_login > .u-column2,
.woocommerce-account .woocommerce > form.woocommerce-form-login,
.woocommerce-account form.woocommerce-ResetPassword {
	box-sizing: border-box;
	float: none;
	width: auto;
	max-width: none;
	margin: 0;
	padding: var(--cc-space-3);
	border: 1px solid color-mix(in srgb, var(--cc-color-accent) 55%, var(--cc-color-border));
	border-radius: var(--cc-radius);
	background:
		linear-gradient(135deg, color-mix(in srgb, var(--cc-color-accent) 12%, transparent) 0%, transparent 55%),
		var(--cc-color-surface);
}

.woocommerce-account #customer_login > div > h2 {
	margin: 0 0 var(--cc-space-2);
	padding-bottom: var(--cc-space-2);
	border-bottom: 1px solid var(--cc-color-border);
	font-size: 1.25rem;
}

.woocommerce-account #customer_login form.woocommerce-form {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

.woocommerce-account #customer_login form.woocommerce-form > :last-child {
	margin-bottom: 0;
}

@media (max-width: 599px) {
	.woocommerce-account #customer_login > .u-column1,
	.woocommerce-account #customer_login > .u-column2 {
		padding: var(--cc-space-2);
	}
}

/* Account details: "Your details" and "Password change" as two boxes, with
   Save below both. The form itself is no longer a box. ------------------ */
.woocommerce-account form.woocommerce-EditAccountForm {
	padding: 0;
	border: 0;
	background: none;
}

.woocommerce-account form.woocommerce-EditAccountForm .cc-account-details::after {
	display: block;
	clear: both;
	content: "";
}

.woocommerce-account form.woocommerce-EditAccountForm .cc-account-details > p:last-of-type {
	margin-bottom: 0;
}

.woocommerce-account form.woocommerce-EditAccountForm fieldset {
	margin: 0 0 var(--cc-space-3);
	padding: var(--cc-space-3);
	border: 1px solid var(--cc-color-border);
	border-radius: var(--cc-radius);
	background: var(--cc-color-surface);
}

.woocommerce-account form.woocommerce-EditAccountForm fieldset > p:last-child {
	margin-bottom: 0;
}

.woocommerce-account form.woocommerce-EditAccountForm > p:last-of-type {
	margin: 0;
}

@media (max-width: 599px) {
	.woocommerce-account form.woocommerce-EditAccountForm fieldset {
		padding: var(--cc-space-2);
	}
}

/* Product page: the price table in the accent, each method's change in
   colour - red where it costs more, green where it saves. --------------- */
.cc-price-table.cc-tinted .cc-price-table__title {
	color: var(--cc-color-accent-text);
}

.cc-price-table.cc-tinted .cc-price-table__table th,
.cc-price-table.cc-tinted .cc-price-table__table td {
	border-bottom-color: color-mix(in srgb, var(--cc-color-accent) 22%, var(--cc-color-border));
}

.cc-price-table .cc-price-table__adjustment--up,
.cc-price-table .cc-price-table__adjustment--down {
	display: inline-block;
	padding: 1px 7px;
	border: 1px solid currentColor;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.5;
	vertical-align: 1px;
}

.cc-price-table .cc-price-table__adjustment--up {
	border-color: color-mix(in srgb, var(--cc-color-danger) 60%, transparent);
	background: color-mix(in srgb, var(--cc-color-danger) 16%, transparent);
	color: var(--cc-color-danger-text);
}

.cc-price-table .cc-price-table__adjustment--down {
	border-color: color-mix(in srgb, var(--cc-color-success) 60%, transparent);
	background: color-mix(in srgb, var(--cc-color-success) 16%, transparent);
	color: var(--cc-color-success);
}

/* Rounded images: the product page's gallery and the cart's thumbnails. */
.woocommerce div.product div.images .woocommerce-product-gallery__image,
.woocommerce div.product div.images .woocommerce-product-gallery__image img,
.woocommerce div.product div.images .flex-viewport,
.woocommerce div.product div.images .ct-media-container,
.woocommerce div.product div.images .flex-control-thumbs img,
.woocommerce div.product .ct-product-gallery-container .ct-media-container,
.woocommerce div.product .ct-product-gallery-container img,
.woocommerce-cart table.shop_table .product-thumbnail a,
.woocommerce-cart table.shop_table .product-thumbnail img,
.woocommerce-cart table.shop_table .product-thumbnail .ct-media-container {
	overflow: hidden;
	border-radius: var(--cc-radius);
}

.woocommerce div.product div.images .flex-control-thumbs img,
.woocommerce-cart table.shop_table .product-thumbnail a,
.woocommerce-cart table.shop_table .product-thumbnail img,
.woocommerce-cart table.shop_table .product-thumbnail .ct-media-container {
	border-radius: var(--cc-radius-sm);
}

/* Set requests ------------------------------------------------------------ */
.cc-set-request {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--cc-space-2);
	box-sizing: border-box;
	margin: var(--cc-space-4) 0 0;
	padding: var(--cc-space-2) var(--cc-space-3);
	border: 1px solid var(--cc-color-border);
	border-radius: var(--cc-radius);
}

.cc-set-request__icon {
	display: inline-grid;
	flex: 0 0 auto;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--cc-color-accent) 18%, transparent);
	color: var(--cc-color-accent-text);
}

.cc-set-request__text {
	flex: 1 1 260px;
	min-width: 0;
}

.cc-set-request__title {
	max-width: none;
	margin: 0 0 2px;
	color: var(--cc-color-text);
	font-family: var(--cc-font-heading);
	font-size: 1.0625rem;
	font-weight: var(--cc-weight-heading, 650);
}

.cc-set-request__body {
	max-width: none;
	margin: 0;
	color: var(--cc-color-text-muted);
}

.cc-set-request__action {
	flex: 0 0 auto;
	gap: 8px;
}

/* On a sold-out set's page it sits where the buy button would. */
.cc-set-request--product {
	display: grid;
	gap: 12px;
	margin: var(--cc-space-2) 0 var(--cc-space-3);
	padding: var(--cc-space-2);
	border-color: color-mix(in srgb, var(--cc-color-accent) 55%, var(--cc-color-border));
	background: color-mix(in srgb, var(--cc-color-accent) 8%, var(--cc-color-surface));
}

.cc-set-request--product .cc-set-request__action {
	justify-self: start;
}

/* The Contact page: how to ask for a set, above the form. */
.cc-set-request-guide {
	box-sizing: border-box;
	margin: 0 0 var(--cc-space-4);
	padding: var(--cc-space-3);
	border: 1px solid var(--cc-color-border);
	border-radius: var(--cc-radius);
}

.cc-set-request-guide__title {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 var(--cc-space-2);
	font-size: 1.25rem;
}

.cc-set-request-guide__title .cc-set-request__icon {
	width: 40px;
	height: 40px;
}

.cc-set-request-guide__intro {
	max-width: none;
	margin: 0 0 12px;
	color: var(--cc-color-text);
}

.cc-set-request-guide__steps {
	display: grid;
	gap: 8px;
	margin: 0;
	padding-left: 1.4em;
	color: var(--cc-color-text-muted);
}

.cc-set-request-guide__steps li::marker {
	color: var(--cc-color-accent-text);
	font-weight: 700;
}

@media (max-width: 599px) {
	.cc-set-request,
	.cc-set-request-guide {
		padding: var(--cc-space-2);
	}

	.cc-set-request__action {
		width: 100%;
	}
}

/* Cart and checkout suggestions: the wishlist row, then other sets. ------- */
.cc-cross-sell__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px var(--cc-space-2);
	margin-bottom: var(--cc-space-3);
}

.cc-cross-sell__head .cc-cross-sell__title {
	margin: 0;
}

.cc-cross-sell__link {
	color: var(--cc-color-accent-text);
	font-weight: 600;
	text-decoration: none;
}

.cc-cross-sell__link::after {
	content: " \2192";
}

.woocommerce-cart .cc-cross-sell + .cc-cross-sell,
.woocommerce-checkout .cc-cross-sell + .cc-cross-sell {
	margin-top: var(--cc-space-4);
	padding-top: 0;
	border-top: 0;
}

/* Direct crypto payments: the sticky "Payment details" panel stops below
   the sticky header instead of sliding under it (direct-crypto.css reads
   --dc-sticky-top). */
.cc-header-sticky {
	--dc-sticky-top: calc(76px + var(--cc-space-3));
}

.cc-header-sticky.admin-bar {
	--dc-sticky-top: calc(76px + var(--cc-space-3) + var(--wp-admin--admin-bar--height, 32px));
}

/* ==========================================================================
   Community, newsletter and the free set event

   Both home page sections are boxes in the accent tint the account and cart
   boxes use, so they read as part of the same design: a hairline in the
   accent, a corner of tint, the surface colour behind.
   ========================================================================== */
.cc-community,
.cc-event {
	display: grid;
	gap: var(--cc-space-4);
	align-items: center;
	padding: clamp(1.25rem, 0.75rem + 2.4vw, 2.5rem);
	border: 1px solid color-mix(in srgb, var(--cc-color-accent) 55%, var(--cc-color-border));
	border-radius: calc(var(--cc-radius) * 1.5);
	background:
		linear-gradient(135deg, color-mix(in srgb, var(--cc-color-accent) 14%, transparent) 0%, transparent 60%),
		var(--cc-color-surface);
}

.cc-community__title,
.cc-event__title {
	margin: 0 0 var(--cc-space);
	max-width: 22ch;
}

.cc-community__text,
.cc-event__text {
	max-width: 52ch;
	margin: 0;
	color: var(--cc-color-text-muted);
	font-size: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
	line-height: 1.6;
}

.cc-community__primary,
.cc-event__actions {
	margin: var(--cc-space-3) 0 0;
}

.cc-community__telegram,
.cc-event__actions .cc-button {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.cc-community__telegram {
	min-height: 52px;
	padding-inline: 26px;
	font-size: 1rem;
}

.cc-community__links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: var(--cc-space-3) 0 0;
	padding: 0;
	list-style: none;
}

.cc-community__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	padding: 8px 14px;
	border: 1px solid var(--cc-color-border);
	border-radius: 999px;
	background: var(--cc-color-surface);
	color: var(--cc-color-text);
	font-size: 0.9375rem;
	font-weight: var(--cc-weight-strong, 600);
	text-decoration: none;
	transition:
		border-color var(--cc-transition),
		background-color var(--cc-transition);
}

.cc-community__link:hover,
.cc-community__link:focus-visible {
	border-color: var(--cc-color-accent);
	background: var(--cc-color-surface-elevated);
}

.cc-community__form {
	padding: var(--cc-space-3);
	border: 1px solid var(--cc-color-border);
	border-radius: var(--cc-radius);
	background: var(--cc-color-bg);
}

.cc-community__form-title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 var(--cc-space-2);
	font-family: var(--cc-font-heading);
	font-size: 1.125rem;
	font-weight: var(--cc-weight-heading, 650);
}

@media (min-width: 900px) {
	.cc-community--with-form {
		grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
		gap: var(--cc-space-6);
	}
}

/* The form: one row at any width that has room, stacked on a phone. */
.cc-newsletter {
	margin: 0;
}

.cc-newsletter__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.cc-newsletter__label {
	display: block;
	margin: 0 0 var(--cc-space);
	color: var(--cc-color-text-muted);
	font-size: 0.9375rem;
}

.cc-newsletter__row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.cc-newsletter__input {
	flex: 1 1 200px;
	min-height: 46px;
	min-width: 0;
	padding: 10px 14px;
	border: 1px solid var(--cc-color-border);
	border-radius: var(--cc-radius-sm);
	background: var(--cc-color-surface);
	color: var(--cc-color-text);
	font: inherit;
}

.cc-newsletter__input:focus-visible {
	border-color: var(--cc-color-accent);
	outline: 2px solid color-mix(in srgb, var(--cc-color-accent) 45%, transparent);
	outline-offset: 1px;
}

.cc-newsletter__button {
	flex: 0 0 auto;
}

.cc-newsletter__fine {
	margin: var(--cc-space) 0 0;
	color: var(--cc-color-text-muted);
	font-size: 0.8125rem;
}

.cc-newsletter__notice {
	margin: 0 0 var(--cc-space-2);
	padding: 8px 12px;
	border-left: 3px solid var(--cc-color-success);
	border-radius: var(--cc-radius-sm);
	background: var(--cc-color-surface-elevated);
	color: var(--cc-color-text);
	font-size: 0.9375rem;
}

.cc-newsletter__notice--error {
	border-left-color: var(--cc-color-danger);
}

.cc-footer__column--newsletter {
	min-width: 0;
}

.cc-footer__column--newsletter .cc-newsletter__row {
	flex-direction: column;
}

.cc-footer__column--newsletter .cc-newsletter__input {
	flex: 0 0 auto;
	width: 100%;
}

.cc-flash {
	max-width: var(--cc-container);
	margin: var(--cc-space-2) auto 0;
}

.cc-newsletter-optin {
	margin-top: var(--cc-space-2);
}

/* The event banner: icon, words, then a few of the sets on offer. */
.cc-event {
	grid-template-columns: auto minmax(0, 1fr);
}

.cc-event__icon {
	display: grid;
	place-items: center;
	width: 68px;
	height: 68px;
	border-radius: 50%;
	background: var(--cc-color-accent);
	color: var(--cc-color-accent-contrast);
}

.cc-event__ends {
	margin: var(--cc-space) 0 0;
	color: var(--cc-color-text-muted);
	font-size: 0.875rem;
}

.cc-event__sets {
	grid-column: 1 / -1;
	padding-top: var(--cc-space-3);
	border-top: 1px dashed var(--cc-color-border);
}

.cc-event__sets-label {
	margin: 0 0 var(--cc-space-2);
	color: var(--cc-color-text-muted);
	font-size: 0.875rem;
	font-weight: var(--cc-weight-strong, 600);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.cc-event__list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cc-event__set a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 14px 6px 6px;
	border: 1px solid var(--cc-color-border);
	border-radius: 999px;
	background: var(--cc-color-surface);
	color: var(--cc-color-text);
	font-size: 0.9375rem;
	font-weight: var(--cc-weight-strong, 600);
	text-decoration: none;
}

.cc-event__set a:hover,
.cc-event__set a:focus-visible {
	border-color: var(--cc-color-accent);
}

.cc-event__set img,
.cc-event__set-blank {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--cc-color-surface-elevated);
}

@media (min-width: 800px) {
	.cc-event {
		column-gap: var(--cc-space-4);
	}

	.cc-event__icon {
		width: 88px;
		height: 88px;
	}
}

@media (max-width: 520px) {
	.cc-event {
		grid-template-columns: 1fr;
	}
}

/* The cart: progress, or the choice. */
.cc-free-set {
	margin-bottom: var(--cc-space-3);
	padding: var(--cc-space-3);
	border: 1px solid var(--cc-color-border);
	border-radius: var(--cc-radius);
	border-color: color-mix(in srgb, var(--cc-color-accent) 55%, var(--cc-color-border));
	background:
		linear-gradient(135deg, color-mix(in srgb, var(--cc-color-accent) 12%, transparent) 0%, transparent 55%),
		var(--cc-color-surface);
}

.cc-free-set__head {
	display: flex;
	align-items: center;
	gap: var(--cc-space-2);
}

.cc-free-set__icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--cc-color-accent);
	color: var(--cc-color-accent-contrast);
}

.cc-free-set__title {
	margin: 0;
	font-family: var(--cc-font-heading);
	font-size: 1.125rem;
	font-weight: var(--cc-weight-heading, 650);
}

.cc-free-set__text {
	margin: 2px 0 0;
	color: var(--cc-color-text-muted);
}

.cc-free-set__meter {
	height: 8px;
	margin-top: var(--cc-space-2);
	overflow: hidden;
	border-radius: 999px;
	background: var(--cc-color-surface-elevated);
}

.cc-free-set__meter span {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: var(--cc-color-accent);
}

.cc-free-set__choose {
	margin-top: var(--cc-space-2);
}

.cc-free-set__choose summary {
	cursor: pointer;
	color: var(--cc-color-accent-text);
	font-weight: var(--cc-weight-strong, 600);
}

.cc-free-set__list {
	display: grid;
	gap: 8px;
	margin: var(--cc-space-2) 0 0;
	padding: 0;
	list-style: none;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}

.cc-free-set__item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px;
	border: 1px solid var(--cc-color-border);
	border-radius: var(--cc-radius-sm);
	background: var(--cc-color-surface);
}

.cc-free-set__item.is-picked {
	border-color: var(--cc-color-success);
}

.cc-free-set__item img,
.cc-free-set__blank {
	flex: none;
	width: 48px;
	height: 48px;
	border-radius: var(--cc-radius-sm);
	object-fit: cover;
	background: var(--cc-color-surface-elevated);
}

.cc-free-set__name {
	flex: 1 1 auto;
	min-width: 0;
	font-weight: var(--cc-weight-strong, 600);
}

.cc-free-set__picked {
	color: var(--cc-color-success);
	font-size: 0.875rem;
	font-weight: var(--cc-weight-strong, 600);
}

.cc-free-badge {
	display: inline-block;
	margin-left: 6px;
	padding: 2px 8px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--cc-color-success) 18%, transparent);
	color: var(--cc-color-success);
	font-size: 0.75rem;
	font-weight: var(--cc-weight-strong, 600);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	vertical-align: middle;
}

.cc-free-price {
	color: var(--cc-color-success);
	font-weight: var(--cc-weight-strong, 600);
}

/* ==========================================================================
   Heroes index, "About this set", archive intro, and long showcase lists
   ========================================================================== */
.cc-heroes {
	display: grid;
	gap: var(--cc-space);
	margin: 0;
	padding: 0;
	list-style: none;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
}

.cc-heroes__link {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--cc-space);
	padding: 12px 14px;
	border: 1px solid var(--cc-color-border);
	border-radius: var(--cc-radius-sm);
	background: var(--cc-color-surface);
	color: var(--cc-color-text);
	text-decoration: none;
	transition:
		border-color var(--cc-transition),
		background-color var(--cc-transition);
}

.cc-heroes__link:hover,
.cc-heroes__link:focus-visible {
	border-color: var(--cc-color-accent);
	background: var(--cc-color-surface-elevated);
}

.cc-heroes__name {
	font-weight: var(--cc-weight-strong, 600);
}

.cc-heroes__count {
	flex: none;
	color: var(--cc-color-text-muted);
	font-size: 0.8125rem;
}

/* The panel itself is .cc-product-section, shared with Description and
   Reviews; this is only what is inside it. */
.cc-set-summary > p,
.cc-set-summary > ul {
	max-width: var(--cc-measure, 68ch);
}

.cc-set-summary > :last-child {
	margin-bottom: 0;
}

.cc-set-summary p {
	margin: 0 0 var(--cc-space-2);
	color: var(--cc-color-text-muted);
}

.cc-set-summary__prices strong {
	color: var(--cc-color-text);
}

.cc-set-summary__links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px var(--cc-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.cc-set-summary__links a {
	font-weight: var(--cc-weight-strong, 600);
}

.cc-archive-intro {
	max-width: var(--cc-measure, 68ch);
	margin: 0 0 var(--cc-space-3);
	color: var(--cc-color-text-muted);
}

/*
 * A page with sixty showcases: the browser skips the layout and painting of
 * the ones off screen until they are scrolled near.
 */
.cc-grid--showcases > .cc-showcase {
	content-visibility: auto;
	contain-intrinsic-size: auto 420px;
}