/*
 * Page frame. One rule for alignment: everything sits in the same container (1200px plus gutters), so the logo,
 * page titles, content, product rows and the footer share one left edge. Text pages and posts use a centred
 * reading column, title included.
 */
.cc-container {
	width: 100%;
	max-width: calc(var(--cc-wide) + 2 * var(--cc-gutter));
	margin-inline: auto;
	padding-inline: var(--cc-gutter);
}

.cc-main {
	padding-block: var(--cc-space-6) var(--cc-space-8);
}

/* The last block on a page sits on main's bottom padding: one step to the footer, not three. */
.cc-main > :last-child {
	margin-bottom: 0;
}

/* Page headers and entries */
.cc-page-header {
	margin-bottom: var(--cc-space-6);
}

.cc-page-header__intro {
	max-width: 60ch;
	font-size: var(--cc-size-h4);
}

.cc-entry--reading {
	max-width: var(--cc-content);
	margin-inline: auto;
}

.cc-entry--form {
	max-width: 32rem;
	margin-inline: auto;
	text-align: center;
}

.cc-entry--form .cc-entry__content {
	text-align: left;
}

.cc-entry__title {
	margin-bottom: var(--cc-space-5);
}

.cc-entry__header {
	margin-bottom: var(--cc-space-6);
}

.cc-entry__header .cc-entry__title {
	margin-bottom: var(--cc-space-2);
}

.cc-entry__header .cc-label a {
	color: inherit;
	text-decoration: none;
}

.cc-entry__meta {
	margin: 0;
	color: var(--cc-grey-600);
	font-size: var(--cc-size-small);
}

.cc-entry__content::after {
	content: "";
	display: table;
	clear: both;
}

/* Blog post: the post and a sidebar from 1100px; the sidebar stays in view while reading */
.cc-article-layout {
	display: grid;
	gap: var(--cc-space-7);
	margin-bottom: var(--cc-space-8);
}

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

.cc-article .cc-entry__content {
	max-width: 52rem;
}

/* Previous and next post */
.cc-post-nav {
	margin-top: var(--cc-space-7);
}

.cc-post-nav .nav-links {
	display: grid;
	gap: var(--cc-space-4);
	padding-block: var(--cc-space-5);
	border-block: var(--cc-line) solid var(--cc-grey-200);
}

.cc-post-nav a {
	display: block;
	text-decoration: none;
}

.cc-post-nav .cc-label {
	display: block;
	margin-bottom: var(--cc-space-1);
}

.cc-post-nav__title {
	font-family: var(--cc-font-heading);
	font-size: var(--cc-size-card);
	font-weight: 600;
	line-height: 1.4;
}

.cc-post-nav a:hover .cc-post-nav__title {
	text-decoration: underline;
}

@media (min-width: 720px) {
	.cc-post-nav .nav-links {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--cc-space-6);
	}

	.cc-post-nav .nav-next {
		grid-column: 2;
		text-align: right;
	}
}

.cc-article-aside {
	display: grid;
	gap: var(--cc-space-5);
	align-content: start;
}

@media (min-width: 1100px) {
	.cc-article-layout {
		grid-template-columns: minmax(0, 1fr) 18.75rem;
		gap: var(--cc-space-8);
	}

	.cc-article-aside {
		position: sticky;
		top: var(--cc-space-5);
		align-self: start;
	}
}

/* Under 1100px the sidebar's products and offer would sit after the post, as repeats of the rows below it */
@media (max-width: 1099px) {
	.cc-article-aside {
		display: none;
	}
}

.cc-mini-products {
	padding: var(--cc-space-5);
	border: var(--cc-line) solid var(--cc-grey-200);
}

.cc-mini-products ul {
	margin: var(--cc-space-3) 0 var(--cc-space-4);
	padding: 0;
	list-style: none;
}

.cc-mini-product {
	display: grid;
	grid-template-columns: 4rem minmax(0, 1fr);
	gap: var(--cc-space-3);
	align-items: start;
	padding-block: var(--cc-space-3);
	border-bottom: var(--cc-line) solid var(--cc-grey-200);
}

.cc-mini-product img {
	display: block;
	width: 4rem;
	height: 4rem;
	object-fit: cover;
	border: var(--cc-line) solid var(--cc-grey-200);
}

.cc-mini-product__name {
	display: -webkit-box;
	overflow: hidden;
	text-decoration: none;
	font-family: var(--cc-font-heading);
	font-size: var(--cc-size-small);
	font-weight: 500;
	line-height: 1.35;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
}

.cc-mini-product__name:hover {
	text-decoration: underline;
}

.cc-mini-product__price {
	margin: var(--cc-space-1) 0 0;
	font-size: var(--cc-size-small);
	font-weight: 700;
}

.cc-mini-product__price del {
	margin-right: var(--cc-space-1);
	color: var(--cc-grey-600);
	font-weight: 400;
}

.cc-mini-product__price ins {
	color: var(--cc-sale);
	text-decoration: none;
}

.cc-aside-offer {
	padding: var(--cc-space-5);
	background: var(--cc-ink);
	color: var(--cc-white);
}

.cc-aside-offer p {
	margin-bottom: var(--cc-space-4);
	color: var(--cc-grey-200);
}

.cc-aside-offer .cc-aside-offer__title {
	margin-bottom: var(--cc-space-2);
	color: var(--cc-white);
	font-family: var(--cc-font-heading);
	font-size: var(--cc-size-h4);
	font-weight: 600;
	line-height: var(--cc-line-heading);
}

.cc-aside-offer :focus-visible {
	outline-color: var(--cc-white);
}

/* Home page welcome */
.cc-hero {
	display: grid;
	gap: var(--cc-space-6);
	align-items: center;
	margin-bottom: var(--cc-space-8);
}

.cc-hero__title {
	margin: 0 0 var(--cc-space-4);
	font-size: var(--cc-size-display);
	line-height: 1.1;
}

/* The brand, inside the heading, on its own line above the title in the label's look (components.css) */
.cc-hero__brand {
	display: block;
	margin-bottom: var(--cc-space-2);
}

.cc-hero__tagline {
	margin: var(--cc-space-2) 0 0;
	color: var(--cc-grey-600);
	font-size: var(--cc-size-small);
}

.cc-hero__intro {
	max-width: 42ch;
	color: var(--cc-grey-600);
	font-size: var(--cc-size-h4);
}

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

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

.cc-hero__pictures a {
	display: block;
}

.cc-hero__pictures img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border: var(--cc-line) solid var(--cc-grey-200);
}

/* Phones: a short welcome, the pictures as one row, so the first products are near the top */
@media (max-width: 719px) {
	.cc-hero {
		gap: var(--cc-space-5);
		margin-bottom: var(--cc-space-7);
	}

	.cc-hero__intro {
		font-size: var(--cc-size-body);
	}

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

/* Home pictures: on phones the first two, side by side (four in a row were too small to read); tablets all four in
   one row; computers two by two beside the welcome */
@media (max-width: 599px) {
	.cc-hero__pictures li:nth-child(n + 3) {
		display: none;
	}
}

@media (min-width: 600px) and (max-width: 899px) {
	.cc-hero__pictures {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--cc-space-2);
	}
}

@media (min-width: 900px) {
	.cc-hero {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--cc-space-8);
		padding-top: var(--cc-space-4);
	}
}

/* Post cards and lists */
.cc-post-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--cc-space-6) var(--cc-space-4);
}

@media (min-width: 720px) {
	.cc-post-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--cc-space-7) var(--cc-space-5);
	}
}

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

.cc-post-card {
	position: relative;
}

/* The posts' own landscape shape (12:7, parts/post-summary.php); product cards stay square */
.cc-post-card__image {
	margin-bottom: var(--cc-space-3);
	aspect-ratio: 12 / 7;
	overflow: hidden;
	border: var(--cc-line) solid var(--cc-grey-200);
}

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

.cc-post-card__title {
	display: -webkit-box;
	margin: 0 0 var(--cc-space-1);
	overflow: hidden;
	font-size: var(--cc-size-card);
	font-weight: 500;
	line-height: 1.4;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
}

/* Phones: two cards to a row are narrow; long titles get a third line */
@media (max-width: 719px) {
	.cc-post-card__title {
		-webkit-line-clamp: 3;
		line-clamp: 3;
	}
}

.cc-post-card__link {
	text-decoration: none;
}

.cc-post-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.cc-post-card__link:hover {
	text-decoration: underline;
}

.cc-post-card__meta {
	margin: 0;
	color: var(--cc-grey-600);
	font-size: var(--cc-size-small);
}

/* Page numbers (blog and shop lists) */
.cc-pagination .nav-links,
.woocommerce nav.woocommerce-pagination ul.page-numbers {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--cc-space-2);
	margin: var(--cc-space-7) 0 0;
	padding: 0;
	border: 0;
}

.cc-pagination .page-numbers,
.woocommerce nav.woocommerce-pagination ul li > .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--cc-control-height);
	min-height: var(--cc-control-height);
	padding: 0 var(--cc-space-3);
	border: var(--cc-line) solid var(--cc-ink);
	border-radius: var(--cc-radius);
	color: var(--cc-ink);
	font-family: var(--cc-font-heading);
	font-size: var(--cc-size-small);
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
}

.cc-pagination .page-numbers.dots,
.woocommerce nav.woocommerce-pagination ul li > span.dots {
	border-color: transparent;
}

.cc-pagination .page-numbers.current,
.cc-pagination a.page-numbers:hover,
.woocommerce nav.woocommerce-pagination ul li > span.current,
.woocommerce nav.woocommerce-pagination ul li > a:hover,
.woocommerce nav.woocommerce-pagination ul li > a:focus {
	background: var(--cc-ink);
	color: var(--cc-white);
}

/* The arrow inside the previous/next links is not a box of its own (WooCommerce pads every span in its page links) */
.woocommerce nav.woocommerce-pagination ul li > .page-numbers span[aria-hidden="true"] {
	display: inline;
	min-width: 0;
	padding: 0;
}