/* WooCommerce product page: layout, tabs, details table, ratings and reviews. */
/* Product page: pictures left, buying right on computers (.cc-product-top); everything stacked on phones */
.woocommerce div.product,
.cc-product-top {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--cc-space-6);
}

.woocommerce div.product {
	margin-bottom: var(--cc-space-8);
}

.woocommerce div.product div.images,
.woocommerce div.product div.summary {
	float: none;
	width: auto;
	margin: 0;
}

@media (min-width: 900px) {
	.cc-product-top {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
		align-items: start;
		column-gap: var(--cc-space-8);
	}

	/* The buying column is usually the taller one: the pictures travel with it instead of leaving an empty column,
	   and stop at the end of this box, where the description starts. */
	.cc-product-top > div.images {
		position: sticky;
		top: var(--cc-space-5);
	}
}

/*
 * Phones and tablets: the SALE pill, the name and the price first, then the pictures, then the rest of the buying
 * column, so the first screen says what the product is. The buying column's box steps aside (display: contents) so
 * its parts can be ordered around the pictures; the page keeps its one h1. The pictures use the full width (the
 * gallery add-on stops them at 650px).
 */
@media (max-width: 899px) {
	.cc-product-top {
		gap: 0;
	}

	.woocommerce div.product .cc-product-top > div.summary {
		display: contents;
	}

	.woocommerce div.product .cc-product-top > div.images {
		order: 2;
		max-width: none;
		margin-bottom: var(--cc-space-5);
	}

	.cc-product-top > div.summary > * {
		order: 3;
	}

	.cc-product-top > div.summary > :is(.cc-sale-badge, .product_title, .cc-price-row) {
		order: 0;
	}

	/* Pinterest for WooCommerce's Save button (live only) sits at the top left of this box, which here is the SALE
	   pill. A row of no height just above the pictures instead: its own top and left (10px) then put the button on
	   the picture's corner, as on computers. */
	.cc-product-top > .pinterest-for-woocommerce-image-wrapper {
		position: relative;
		order: 1;
		display: flex;
		justify-self: start;
		height: 0;
	}

	.cc-product-top > div.summary > .cc-sale-badge {
		justify-self: start;
	}
}

.woocommerce div.product .product_title {
	margin: 0 0 var(--cc-space-3);
	font-size: var(--cc-size-h2);
	line-height: 1.25;
	text-transform: none;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	margin: 0 0 var(--cc-space-5);
	color: var(--cc-ink);
	font-size: var(--cc-size-h3);
	font-weight: 700;
}

.woocommerce div.product .woocommerce-product-details__short-description {
	margin-bottom: var(--cc-space-5);
}

.woocommerce div.product form.cart {
	margin-bottom: var(--cc-space-5);
}

.woocommerce div.product form.cart .button.single_add_to_cart_button {
	width: 100%;
	min-height: 3.25rem;
	float: none;
}

.woocommerce div.product form.cart div.quantity {
	float: none;
	margin: 0 0 var(--cc-space-3);
}

.woocommerce div.product .stock {
	color: var(--cc-ink);
}

.woocommerce div.product .cc-facts {
	margin: var(--cc-space-6) 0 var(--cc-space-4);
}

/* "More in <category> →", straight under the table's last line */
.woocommerce div.product .cc-product-more {
	margin: 0;
}

/* The red SALE pill above the name (owner, 2026-10-18) */
.cc-sale-badge {
	display: inline-block;
	margin-bottom: var(--cc-space-3);
	padding: var(--cc-space-2) 0.8125rem;
	border-radius: var(--cc-radius-pill);
	background: var(--cc-badge);
	color: var(--cc-white);
	font-family: var(--cc-font-heading);
	font-size: var(--cc-size-body);
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
}

/* "Guaranteed Safe Checkout" under Add to cart */
.cc-safe-checkout {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--cc-space-2);
	margin: var(--cc-space-3) 0 0;
	color: var(--cc-ink);
	font-family: var(--cc-font-heading);
	font-size: var(--cc-size-small);
	font-weight: 600;
}

.cc-safe-checkout .cc-icon {
	width: 1.125rem;
	height: 1.125rem;
	flex: none;
}

/* "Already in cart": the shop rules colour that button with an inline !important style (cc-shop-rules, which the
   theme does not change); only an !important rule after it can put it in our grey. */
.woocommerce div.product form.cart:has(style) .single_add_to_cart_button {
	border-color: var(--cc-grey-200) !important;
	background: var(--cc-grey-200) !important;
	color: var(--cc-ink) !important;
}

/* Phones: a shorter name and a one-line breadcrumb, so the price and Add to cart are on the first screen */
@media (max-width: 599px) {
	.woocommerce div.product .product_title {
		font-size: var(--cc-size-h3);
	}

	.single-product .woocommerce-breadcrumb {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}

/* Phones: the price and Add to cart in a bar at the bottom while the page's own button is out of view */
.cc-buy-bar {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 50;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--cc-space-3);
	padding: var(--cc-space-3) var(--cc-gutter);
	border-top: var(--cc-line) solid var(--cc-grey-200);
	background: var(--cc-white);
}

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

.woocommerce .cc-buy-bar .cc-buy-bar__price {
	margin: 0;
	font-size: var(--cc-size-h4);
	white-space: nowrap;
}

.cc-buy-bar__button {
	flex: none;
	min-width: 9rem;
}

@media (min-width: 900px) {
	.cc-buy-bar {
		display: none;
	}
}

/* Product page tabs: a line of words, the open one underlined */
.woocommerce div.product .woocommerce-tabs ul.tabs {
	display: flex;
	gap: var(--cc-space-5);
	margin: 0 0 var(--cc-space-5);
	padding: 0;
	overflow-x: auto;
	border-bottom: var(--cc-line) solid var(--cc-grey-200);
}

/* Phones: the tab names wrap to a second line rather than hiding past the edge */
@media (max-width: 599px) {
	.woocommerce div.product .woocommerce-tabs ul.tabs {
		flex-wrap: wrap;
		gap: 0 var(--cc-space-5);
		overflow: visible;
	}
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
	display: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	display: block;
	margin-bottom: calc(-1 * var(--cc-line));
	padding: var(--cc-space-3) 0;
	border-bottom: var(--cc-line-strong) solid transparent;
	color: var(--cc-grey-600);
	font-family: var(--cc-font-heading);
	font-size: var(--cc-size-card);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
	border-bottom-color: var(--cc-ink);
	color: var(--cc-ink);
}

.woocommerce div.product .woocommerce-tabs .panel {
	max-width: var(--cc-content);
	margin: 0 0 var(--cc-space-7);
}

.woocommerce div.product .woocommerce-tabs .panel > h2:first-child {
	display: none;
}

/* Related and "You may also like" rows: three larger cards, not the shop's four; under 720px two, so none is left
   alone on a row */
@media (max-width: 719px) {
	.woocommerce :is(.related, .upsells) ul.products li.product:nth-child(n + 3) {
		display: none;
	}
}

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

.woocommerce div.product section.related > h2,
.woocommerce div.product section.upsells > h2,
.woocommerce .cross-sells > h2 {
	margin-bottom: var(--cc-space-5);
	padding-bottom: var(--cc-space-3);
	border-bottom: var(--cc-line) solid var(--cc-grey-200);
	font-size: var(--cc-size-h2);
}

.woocommerce table.shop_attributes {
	border-top: var(--cc-line) solid var(--cc-grey-200);
}

.woocommerce table.shop_attributes th,
.woocommerce table.shop_attributes td {
	padding: var(--cc-space-3) var(--cc-space-3) var(--cc-space-3) 0;
	border-bottom: var(--cc-line) solid var(--cc-grey-200);
	background: none;
	font-style: normal;
	text-align: left;
}

.woocommerce table.shop_attributes tr:nth-child(even) th,
.woocommerce table.shop_attributes tr:nth-child(even) td {
	background: none;
}

/* Ratings and reviews */
.woocommerce .star-rating::before {
	color: var(--cc-grey-500);
}

.woocommerce .star-rating span::before,
.woocommerce p.stars a {
	color: var(--cc-ink);
}

.woocommerce #reviews #comments ol.commentlist li .comment-text,
.woocommerce #reviews #comments ol.commentlist #respond {
	border-color: var(--cc-grey-200);
}

.woocommerce #reviews #comments ol.commentlist li img.avatar {
	border-color: var(--cc-grey-200);
	background: var(--cc-white);
}