/*
 * Primal Gear brand layer on top of Blocksy. MOBILE FIRST.
 *
 * Base rules are written for phones. Larger screens add to them at Blocksy's
 * own breakpoints, so the theme and this file switch layouts at the same width:
 *   tablet  @media (min-width: 690px)
 *   desktop @media (min-width: 1000px)
 *
 * Sections:
 *   1. Tokens and font
 *   2. Shared: sections, titles, buttons
 *   3. Hero
 *   4. Product rail (home page)
 *   5. Category tiles
 *   6. Brand story, store text, newsletter
 *   7. Shop: title, category buttons, count and sort
 *   8. Product cards (shop, home rail, related products)
 *   9. Utilities
 *  10. Footer
 *  11. Product page
 *
 * Everything is scoped to pg-* classes or to WooCommerce/Blocksy shop markup,
 * so the rest of the site is untouched.
 *
 * The hero, category tiles and story photo size themselves for each screen.
 * A height saved in the editor (for example by dragging a cover's resize
 * handle) is ignored for them, which is why those few rules use !important:
 * the editor writes heights inline, and only !important outranks that.
 */

/* 1. Tokens and font ------------------------------------------------------ */

@font-face {
	font-family: "PG Display";
	src: url("fonts/anton-latin-400-normal.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	--pg-black: #0a0a0a;
	--pg-white: #ffffff;
	--pg-grey: #f2f2f2;
	--pg-line: #dedede;
	--pg-muted: #6f6f6f;
	--pg-red: var(--theme-palette-color-2, #d81c22); /* Blocksy palette colour 2 */
	--pg-red-dark: #a8141a;
	--pg-font-display: "PG Display", "Anton", "Arial Narrow", Impact, sans-serif;
	--pg-gutter: 16px;
	--pg-section-y: 48px;
}

@media (min-width: 690px) {
	:root {
		--pg-gutter: 24px;
		--pg-section-y: 72px;
	}
}

@media (min-width: 1000px) {
	:root {
		--pg-gutter: 48px;
		--pg-section-y: 104px;
	}
}

/* 2. Shared: sections, titles, buttons ------------------------------------ */

.pg-section {
	padding: var(--pg-section-y) var(--pg-gutter);
}

/* Phones and tablets: titles, product rows, tiles and text all start at the
   same gutter. Blocksy would otherwise give some of them its own, narrower
   content width, so their edges wouldn't line up. Computers keep Blocksy's. */
@media (max-width: 999.98px) {
	.pg-section :is(.pg-section-head, .pg-rail, .pg-tiles, .pg-split),
	.pg-seo :is(h2, p) {
		width: auto !important;
		max-width: none !important;
		margin-inline: 0 !important;
	}
}

/* Home sections butt up against each other; each carries its own padding. */
.entry-content > :is(.pg-section, .pg-hero),
.is-layout-constrained > :is(.pg-section, .pg-hero),
.is-layout-flow > :is(.pg-section, .pg-hero) {
	margin-block: 0;
}

/* Two white sections in a row share one gap instead of doubling it. */
.pg-section:not(.pg-dark) + .pg-section:not(.pg-dark):not(.pg-seo) {
	padding-top: 0;
}

.pg-dark {
	background-color: var(--pg-black);
	color: var(--pg-white);
	--theme-text-color: var(--pg-white);
	--theme-headings-color: var(--pg-white);
	--theme-link-initial-color: var(--pg-white);
	--theme-link-hover-color: var(--pg-white);
}

.pg-section-head {
	gap: 12px;
	margin-block-end: 20px;
}

.pg-section-head > * {
	min-width: 0;
}

.pg-title,
.pg-display,
.pg-tile-title {
	font-family: var(--pg-font-display);
	font-weight: 400; /* the display face is already heavy */
	text-transform: uppercase;
	letter-spacing: 0.01em;
	overflow-wrap: normal;
	word-break: normal;
}

.pg-title {
	font-size: clamp(1.625rem, 7vw, 2.125rem);
	line-height: 0.95;
	margin: 0;
}

.pg-title-xl {
	font-size: clamp(2.25rem, 10vw, 3rem);
	line-height: 0.92;
}

.pg-eyebrow {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	margin: 0 0 10px;
	opacity: 0.85;
}

.pg-lede {
	font-size: 0.9375rem;
	line-height: 1.55;
	max-width: 34ch;
	opacity: 0.85;
}

.pg-more {
	margin: 0;
	white-space: nowrap;
}

.pg-more a {
	color: inherit;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: underline;
	text-underline-offset: 5px;
	text-decoration-thickness: 2px;
}

@media (min-width: 690px) {
	.pg-section-head {
		margin-block-end: 28px;
	}

	.pg-title {
		font-size: clamp(2rem, 4.5vw, 2.5rem);
	}

	.pg-lede {
		font-size: 1.0625rem;
		max-width: 44ch;
	}

	.pg-more a {
		font-size: 0.8125rem;
	}
}

@media (min-width: 1000px) {
	.pg-section-head {
		margin-block-end: 36px;
	}

	.pg-title {
		font-size: clamp(2.5rem, 3.2vw, 2.75rem);
	}

	.pg-title-xl {
		font-size: clamp(3.25rem, 5.5vw, 5rem);
	}

	.pg-eyebrow {
		font-size: 0.75rem;
		margin-bottom: 14px;
	}
}

/* Buttons: square, uppercase, heavy. "PG Red" and "PG Outline" styles.
   48px tall minimum, so they're easy to tap. */
.wp-block-button:is(.is-style-pg-solid, .is-style-pg-outline) .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 14px 28px;
	border-radius: 0;
	border: 2px solid transparent;
	font-size: 0.8125rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	line-height: 1.2;
	text-transform: uppercase;
	white-space: nowrap;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.wp-block-button.is-style-pg-solid .wp-block-button__link {
	background-color: var(--pg-red);
	border-color: var(--pg-red);
	color: var(--pg-white);
}

.wp-block-button.is-style-pg-solid .wp-block-button__link:is(:hover, :focus-visible) {
	background-color: var(--pg-red-dark);
	border-color: var(--pg-red-dark);
	color: var(--pg-white);
}

.wp-block-button.is-style-pg-outline .wp-block-button__link {
	background-color: transparent;
	border-color: currentColor;
	color: inherit;
}

.wp-block-button.is-style-pg-outline .wp-block-button__link:is(:hover, :focus-visible) {
	background-color: var(--pg-black);
	border-color: var(--pg-black);
	color: var(--pg-white);
}

.pg-dark .wp-block-button.is-style-pg-outline .wp-block-button__link:is(:hover, :focus-visible) {
	background-color: var(--pg-white);
	border-color: var(--pg-white);
	color: var(--pg-black);
}

.pg-actions {
	gap: 10px;
	margin-block-start: 22px;
}

@media (min-width: 690px) {
	.wp-block-button:is(.is-style-pg-solid, .is-style-pg-outline) .wp-block-button__link {
		min-height: 54px;
		padding: 16px 38px;
		letter-spacing: 0.14em;
	}

	.pg-actions {
		gap: 12px;
		margin-block-start: 28px;
	}
}

/* 3. Hero ------------------------------------------------------------------ */

/* Phones: a square banner, like YoungLA's: as tall as the screen is wide, so the
   next section shows below it. Never more than 85% of the screen's height
   (a phone held sideways). svh ignores the browser bar, so it doesn't jump. */
.pg-hero {
	min-height: min(100vw, 85vh) !important;
	min-height: min(100vw, 85svh) !important;
	padding: 24px var(--pg-gutter) 28px;
	color: var(--pg-white);
}

/* With a photo: swap the solid fill for a fade that darkens the bottom, where the text sits. */
.pg-hero:has(.wp-block-cover__image-background, .wp-block-cover__video-background) > .wp-block-cover__background,
.pg-tile:has(.wp-block-cover__image-background) > .wp-block-cover__background {
	background-color: transparent !important; /* overrides the block's inline overlay colour */
	background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.35) 58%, rgba(0, 0, 0, 0.82) 100%);
	opacity: 1;
}

.pg-hero .pg-display {
	color: var(--pg-white);
	font-size: clamp(2.75rem, 13.5vw, 4.25rem);
	line-height: 0.9;
	max-width: 11ch;
	margin: 0 auto;
}

.pg-hero .pg-eyebrow,
.pg-hero .pg-lede {
	color: var(--pg-white);
}

/* On phones the banner keeps to the headline and the button; the line under
   the headline shows from tablets up. */
.pg-hero .pg-lede {
	display: none;
	margin: 14px auto 0;
	max-width: 30ch;
}

.pg-hero .pg-actions {
	margin-block-start: 18px;
}

.pg-hero .wp-block-button__link {
	min-width: 200px;
}

/* Tablets: 4:3, and never more than 80% of the screen's height. */
@media (min-width: 690px) {
	.pg-hero {
		min-height: min(75vw, 80vh) !important;
		min-height: min(75vw, 80svh) !important;
		padding-bottom: 48px;
	}

	.pg-hero .pg-display {
		font-size: clamp(4.25rem, 10vw, 6.5rem);
		max-width: 12ch;
	}

	.pg-hero .pg-lede {
		display: block;
		margin-top: 18px;
		max-width: 40ch;
	}

	.pg-hero .pg-actions {
		margin-block-start: 28px;
	}
}

/* Computers: nearly full screen, as before, but no taller than 16:10 on
   squarish screens (an iPad Pro upright would otherwise get a 1200px hero). */
@media (min-width: 1000px) {
	.pg-hero {
		min-height: min(88vh, 62.5vw) !important;
		padding-bottom: clamp(56px, 8vh, 96px);
	}

	.pg-hero .pg-display {
		font-size: clamp(6rem, 8.5vw, 8rem);
		line-height: 0.88;
	}
}

/* 4. Product rail (home page) ---------------------------------------------- */

.pg-products .pg-section-head,
.pg-categories .pg-section-head {
	align-items: flex-end;
}

/* The rail is opt-in: add class="pg-rail" to a [products] shortcode to get it.
   The Product row pattern no longer does, so home product rows use the same
   tight grid as the shop (section 8). Kept here for when a swipe row is wanted.

   Phones and tablets: one row you swipe sideways, like Gymshark's. The first
   card lines up with the title; the row runs off the right edge of the screen
   so the next card peeks in, and swiping ends with the last card at the gutter. */
.pg-rail ul.products {
	display: grid !important;
	grid-template-columns: none !important;
	grid-auto-flow: column;
	grid-auto-columns: 64%; /* a fixed share, so cards never squash to fit the screen */
	gap: 4px !important;
	margin: 0 calc(-1 * var(--pg-gutter)) 0 0 !important;
	padding: 0 var(--pg-gutter) 4px 0 !important;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	list-style: none;
}

.pg-rail ul.products::-webkit-scrollbar {
	display: none;
}

.pg-rail ul.products > li.product {
	width: auto !important;
	min-width: 0;
	margin: 0 !important;
	scroll-snap-align: start;
}

@media (min-width: 690px) {
	.pg-rail ul.products {
		grid-auto-columns: 40%;
		gap: 4px !important;
	}
}

/* Computers: back to a grid, 4 across. */
@media (min-width: 1000px) {
	.pg-rail ul.products {
		grid-auto-flow: row;
		grid-auto-columns: auto;
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
		gap: 36px 24px !important;
		margin: 0 !important;
		padding: 0 !important;
		overflow: visible;
	}
}

/* 5. Category tiles -------------------------------------------------------- */

/* Phones: a swipeable row of tall tiles, built like the product rail: in line
   with the title, running off the right edge.
   !important where core's columns block and layout rules use it. */
.pg-tiles.wp-block-columns {
	display: flex;
	flex-wrap: nowrap !important;
	gap: 4px;
	margin: 0 calc(-1 * var(--pg-gutter)) 0 0 !important;
	padding: 0 var(--pg-gutter) 0 0 !important;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.pg-tiles.wp-block-columns::-webkit-scrollbar {
	display: none;
}

.pg-tiles.wp-block-columns > .wp-block-column {
	flex: 0 0 72% !important;
	min-width: 0;
	margin: 0 !important;
	scroll-snap-align: start;
}

.pg-tile.wp-block-cover {
	aspect-ratio: 4 / 5 !important;
	min-height: 0 !important;
	height: auto !important;
	padding: 0;
	overflow: hidden;
}

/* The text layer fills the tile so the title link can cover all of it. */
.pg-tile > .wp-block-cover__inner-container {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	max-width: none;
	padding: 20px;
}

.pg-tile .pg-tile-title {
	font-size: 1.875rem;
	line-height: 0.95;
	margin: 0;
}

.pg-tile .pg-tile-title a {
	color: var(--pg-white);
	text-decoration: none;
}

/* Whole tile clickable on the live site (not in the editor, where you need to click the text). */
:where(body:not(.editor-styles-wrapper)) .pg-tile .pg-tile-title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.pg-tile .pg-tile-sub {
	margin: 6px 0 0;
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
	color: rgba(255, 255, 255, 0.82);
}

.pg-tile .pg-tile-sub::after {
	content: " →";
}

.pg-tile .wp-block-cover__image-background {
	transition: transform 0.6s ease;
}

@media (hover: hover) {
	.pg-tile:hover .wp-block-cover__image-background {
		transform: scale(1.04);
	}
}

/* Tablets and up: three tiles side by side. */
@media (min-width: 690px) {
	.pg-tiles.wp-block-columns {
		display: grid !important;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 12px;
		margin: 0 !important;
		padding: 0 !important;
		overflow: visible;
	}

	.pg-tiles.wp-block-columns > .wp-block-column {
		flex: none !important;
	}

	.pg-tile > .wp-block-cover__inner-container {
		padding: 20px;
	}

	.pg-tile .pg-tile-title {
		font-size: clamp(1.75rem, 3.6vw, 2.25rem);
	}
}

@media (min-width: 1000px) {
	.pg-tiles.wp-block-columns {
		margin-inline: auto !important; /* back to the theme's centred content width */
		gap: 16px;
	}

	.pg-tile > .wp-block-cover__inner-container {
		padding: 32px;
	}

	.pg-tile .pg-tile-title {
		font-size: clamp(2.25rem, 3.2vw, 3rem);
	}

	.pg-tile .pg-tile-sub {
		font-size: 0.875rem;
	}
}

/* 6. Brand story, store text, newsletter ---------------------------------- */

.pg-split {
	gap: 24px;
	margin: 0;
}

.pg-story-media.wp-block-cover {
	aspect-ratio: 1 / 1 !important;
	min-height: 0 !important;
	height: auto !important;
}

.pg-story .pg-lede {
	margin-block: 14px 0;
}

/* Tablets, still stacked: a wide photo instead of a tall square. */
@media (min-width: 690px) {
	.pg-story-media.wp-block-cover {
		aspect-ratio: 16 / 9 !important;
	}
}

@media (min-width: 782px) { /* where core's columns sit side by side */
	.pg-split {
		gap: clamp(32px, 5vw, 80px);
	}

	.pg-story-media.wp-block-cover {
		aspect-ratio: 4 / 5 !important;
	}
}

.pg-seo {
	border-top: 1px solid var(--pg-line);
	font-size: 0.875rem;
	line-height: 1.7;
	color: var(--pg-muted);
}

.pg-seo .pg-title {
	font-size: 1.25rem;
	line-height: 1.1;
	color: var(--pg-black);
	margin-bottom: 10px;
}

.pg-seo a {
	color: var(--pg-black);
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (min-width: 690px) {
	.pg-seo {
		font-size: 0.9375rem;
	}

	.pg-seo .pg-title {
		font-size: 1.5rem;
	}
}

.pg-newsletter {
	text-align: center;
}

.pg-newsletter .pg-lede {
	margin: 12px auto 0;
}

/* WPForms: phones get the email box and button stacked, full width;
   from tablets up they sit in one row. Modern markup reads the variables;
   the rules (with WPForms-strength !important) cover both markups. */
.pg-newsletter .wpforms-container {
	--wpforms-button-background-color: var(--pg-red);
	--wpforms-button-text-color: var(--pg-white);
	--wpforms-button-border-radius: 0px;
	--wpforms-button-border-color: var(--pg-red);
	--wpforms-field-background-color: transparent;
	--wpforms-field-border-color: rgba(255, 255, 255, 0.45);
	--wpforms-field-text-color: var(--pg-white);
	--wpforms-field-border-radius: 0px;
	--wpforms-label-color: var(--pg-white);
	--wpforms-label-sublabel-color: rgba(255, 255, 255, 0.7);
	--wpforms-label-error-color: #ff8a8a;
	max-width: 520px;
	margin: 24px auto 0 !important;
	padding: 0 !important;
	text-align: left;
}

.pg-newsletter .wpforms-container .wpforms-form {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.pg-newsletter .wpforms-container .wpforms-form :is(.wpforms-field-container, .wpforms-submit-container) {
	width: 100%;
	margin: 0 !important;
	padding: 0 !important;
}

.pg-newsletter .wpforms-container .wpforms-form .wpforms-field {
	margin: 0 !important;
	padding: 0 !important;
}

.pg-newsletter .wpforms-container .wpforms-form :is(input[type="email"], input[type="text"]) {
	width: 100% !important;
	max-width: none !important;
	height: 52px !important;
	padding: 0 16px !important;
	background-color: transparent !important;
	border: 1.5px solid rgba(255, 255, 255, 0.45) !important;
	border-radius: 0 !important;
	color: var(--pg-white) !important;
	font-size: 1rem !important; /* 16px stops iPhones zooming into the field */
	box-shadow: none !important;
}

.pg-newsletter .wpforms-container .wpforms-form :is(input[type="email"], input[type="text"])::placeholder {
	color: rgba(255, 255, 255, 0.6);
}

.pg-newsletter .wpforms-container .wpforms-form :is(button[type="submit"], .wpforms-submit) {
	width: 100% !important;
	height: 52px !important;
	padding: 0 28px !important;
	background-color: var(--pg-red) !important;
	border: 2px solid var(--pg-red) !important;
	border-radius: 0 !important;
	color: var(--pg-white) !important;
	font-size: 0.8125rem !important;
	font-weight: 800 !important;
	letter-spacing: 0.12em !important;
	line-height: 1 !important;
	text-transform: uppercase;
	white-space: nowrap !important;
	box-shadow: none !important;
}

.pg-newsletter .wpforms-container .wpforms-form :is(button[type="submit"], .wpforms-submit):hover {
	background-color: var(--pg-red-dark) !important;
	border-color: var(--pg-red-dark) !important;
}

.pg-newsletter .wpforms-confirmation-container-full {
	background: transparent !important;
	border: 1.5px solid rgba(255, 255, 255, 0.45) !important;
	color: var(--pg-white) !important;
	text-align: center;
}

@media (min-width: 690px) {
	.pg-newsletter .wpforms-container .wpforms-form {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: stretch;
	}

	.pg-newsletter .wpforms-container .wpforms-form .wpforms-field-container {
		flex: 1 1 260px;
		width: auto;
	}

	.pg-newsletter .wpforms-container .wpforms-form .wpforms-submit-container {
		flex: 0 0 auto;
		width: auto;
	}

	.pg-newsletter .wpforms-container .wpforms-form :is(button[type="submit"], .wpforms-submit) {
		width: auto !important;
	}

	/* Error and confirmation messages take a full line. */
	.pg-newsletter .wpforms-container .wpforms-form > :not(.wpforms-field-container):not(.wpforms-submit-container) {
		flex-basis: 100%;
	}
}

/* 7. Shop: title, category buttons, count and sort ------------------------ */

body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) .hero-section .page-title {
	font-family: var(--pg-font-display);
	font-weight: 400;
	font-size: clamp(2.25rem, 11vw, 3rem);
	line-height: 0.92;
	letter-spacing: 0.01em;
	text-transform: uppercase;
}

body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) .hero-section .ct-breadcrumbs {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

@media (min-width: 1000px) {
	body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) .hero-section .page-title {
		font-size: clamp(3rem, 5vw, 4.75rem);
	}
}

/* Category buttons: one swipeable row on phones. */
.pg-chips {
	/* Stays inside the page column (no negative margins), so it can never push the page sideways. */
	margin: 0 0 16px;
	max-width: 100%;
	min-width: 0;
}

.pg-chips ul {
	display: flex;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	scrollbar-width: none;
}

.pg-chips ul::-webkit-scrollbar {
	display: none;
}

.pg-chip {
	display: inline-flex;
	align-items: center;
	height: 40px;
	padding: 0 16px;
	border: 1.5px solid var(--pg-line);
	border-radius: 2px;
	color: var(--pg-black);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.pg-chip:hover {
	border-color: var(--pg-black);
	color: var(--pg-black);
}

.pg-chip[aria-current="page"] {
	background-color: var(--pg-black);
	border-color: var(--pg-black);
	color: var(--pg-white);
}

@media (min-width: 690px) {
	.pg-chips {
		margin: 0 0 24px;
	}

	.pg-chips ul {
		flex-wrap: wrap;
		padding: 0;
		overflow: visible;
	}
}

/* Product count and sort menu. */
.woocommerce-result-count {
	margin: 0;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--pg-muted);
}

.woocommerce-ordering select.orderby {
	height: 40px;
	min-height: 40px;
	padding: 0 36px 0 12px;
	border: 1.5px solid var(--pg-line);
	border-radius: 2px;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--pg-black);
	background-color: var(--pg-white);
}

/* 8. Product cards (shop, home rail, related products) -------------------- */

/*
 * Gymshark-style cards: photo on a light grey ground, edge to edge with 4px
 * between cards; then the name, a grey line with the category, and the price.
 * Nothing centred, no borders, no buttons. Badges sit on the photo's bottom-left
 * corner: "New" (products added in the last 30 days, see functions.php),
 * "Sale" and "Sold out".
 */

/* Shop and category pages: 2 / 3 / 4 across with Gymshark's tight gaps.
   (The home rail sets its own spacing in section 4.) */
ul.products:not(.pg-rail ul) {
	column-gap: 4px !important;
	row-gap: 28px !important;
	--grid-columns-gap: 4px;
}

@media (min-width: 1000px) {
	ul.products:not(.pg-rail ul) {
		row-gap: 40px !important;
	}
}

ul.products li.product {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	box-shadow: none !important;
	text-align: start !important;
}

/* Every photo the same shape (4:5), so rows line up. Square product shots lose
   a little from each side; shoot new photos at 4:5 to avoid that. Blocksy puts
   the photo's own shape inline on the image, hence !important. */
ul.products li.product img:is(.wp-post-image, .attachment-woocommerce_thumbnail),
ul.products li.product .ct-media-container img {
	display: block; /* no gap under the photo */
	width: 100%;
	aspect-ratio: 4 / 5 !important;
	height: auto !important;
	object-fit: cover !important;
	object-position: center;
	border-radius: 0 !important;
	background-color: var(--pg-grey);
}

ul.products li.product figure {
	position: relative; /* Blocksy puts the sale / sold-out badge here, beside the photo link */
	margin: 0 !important;
}

ul.products li.product .ct-media-container {
	position: relative;
	display: block;
	margin: 0 !important;
	border-radius: 0 !important;
	overflow: hidden;
	background-color: var(--pg-grey);
}

/* Name: regular weight, sentence case, two lines at most. */
ul.products li.product .woocommerce-loop-product__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	margin: 10px 0 0 !important;
	padding: 0;
	font-family: inherit;
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0;
	text-transform: none;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

ul.products li.product .woocommerce-loop-product__title a {
	color: var(--pg-black);
	text-decoration: none;
}

/* Grey second line: the product's category (Blocksy's card "categories"
   element), like Gymshark's "Regular · Cherry Purple". */
ul.products li.product .entry-meta {
	display: block;
	margin: 2px 0 0 !important;
	padding: 0;
	list-style: none;
	font-size: 0.8125rem;
	line-height: 1.4;
	color: var(--pg-muted);
}

ul.products li.product .entry-meta li {
	display: inline;
	margin: 0;
	padding: 0;
}

ul.products li.product .entry-meta a {
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	color: inherit !important;
	font-size: inherit !important;
	font-weight: 400 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	text-decoration: none;
}

/* Price: its own line, a little apart, like Gymshark. */
ul.products li.product .price {
	display: block;
	margin: 10px 0 0 !important;
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.4;
	color: var(--pg-black);
	white-space: nowrap;
}

ul.products li.product .price del {
	margin-inline-end: 6px;
	color: var(--pg-muted);
	font-weight: 400;
	opacity: 1;
}

ul.products li.product .price ins {
	color: var(--pg-red);
	text-decoration: none;
	font-weight: 500;
}

/* No star ratings or buttons on cards (the shop settings also turn them off). */
ul.products li.product :is(.star-rating, .ct-woo-card-actions, .ct-woo-card-extra, .add_to_cart_button) {
	display: none !important;
}

@media (min-width: 690px) {
	ul.products li.product .woocommerce-loop-product__title {
		margin-top: 12px !important;
		font-size: 0.9375rem;
	}

	ul.products li.product .price {
		font-size: 0.9375rem;
	}
}

/* Badges: small white tag on the photo's bottom-left corner, Gymshark style.
   Sale is red, sold out is black. */
ul.products li.product :is(.onsale, .out-of-stock-badge),
ul.products li.product.pg-new .ct-media-container::after {
	position: absolute;
	top: auto !important;
	bottom: 8px !important;
	left: 8px !important;
	right: auto !important;
	z-index: 2;
	min-width: 0 !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 5px 8px !important;
	border-radius: 0 !important;
	font-size: 0.75rem !important;
	font-weight: 500 !important;
	line-height: 1.2 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
}

ul.products li.product.pg-new .ct-media-container::after {
	content: "New";
	background-color: var(--pg-white);
	color: var(--pg-black);
}

/* A sale or sold-out tag takes the corner; "New" steps aside. */
ul.products li.product.pg-new:is(.sale, .outofstock) .ct-media-container::after {
	content: none;
}

ul.products li.product .onsale {
	background-color: var(--pg-red) !important;
	color: var(--pg-white) !important;
}

ul.products li.product .out-of-stock-badge {
	background-color: var(--pg-black) !important;
	color: var(--pg-white) !important;
}

/* Sold-out cards fade back a little, so in-stock gear leads. */
ul.products li.product.outofstock img:is(.wp-post-image, .attachment-woocommerce_thumbnail) {
	opacity: 0.6;
}

/* 9. Utilities ------------------------------------------------------------- */

/* Hide text visually but keep it for Google and screen readers,
   e.g. the hero headline when your photo already carries the words. */
.pg-sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* 10. Footer --------------------------------------------------------------- */

/*
 * The footer's content is one block widget (Appearance → Widgets → Footer
 * Widget Area 1) built by tools/footer.php, on white: the logo with one line about the
 * brand, then Help, Account and Get in touch. Blocksy's footer builder holds it
 * in its top row, with the copyright in the bottom row.
 *
 *   Phones:    logo and text, then Help and Account side by side, then contact
 *   Tablets:   logo and text, then the three groups in a row
 *   Computers: everything in one row
 *
 * The rules on Blocksy's footer markup only apply while the new footer is in
 * place: the page needs the body class pg-foot-on (see functions.php) AND the
 * footer must contain the new widget (:has(.pg-foot)). Put the old widgets
 * back, by the undo command or by hand, and these rules switch themselves off,
 * so the old footer is never half restyled. ":not(#pg-x)" matches every
 * footer; it is there to outrank Blocksy's generated rules without !important.
 * While the new footer is in place, its colour and spacing come from here
 * rather than from the Customizer.
 */

.pg-foot-on .ct-footer:not(#pg-x):has(.pg-foot) {
	--pg-foot-text: #5c5c5c;
	--pg-foot-line: #e3e3e3;
	background: var(--pg-white);
	border-top: 1px solid var(--pg-foot-line);
	color: var(--pg-foot-text);
	color-scheme: light;
}

/* Rows: no backgrounds or dividers of their own; spacing set below. */
.pg-foot-on .ct-footer:not(#pg-x):has(.pg-foot) [data-row] {
	background: transparent;
	border: 0;
	padding-block: 0;
}

.pg-foot-on .ct-footer:not(#pg-x):has(.pg-foot) [data-row] > div {
	border-block: 0;
}

/* The old logo row, if Blocksy still prints it empty. */
.pg-foot-on .ct-footer:not(#pg-x):has(.pg-foot) [data-row*="middle"]:not(:has(img, .ct-widget, nav, p)) {
	display: none;
}

/* Top row: one full-width column holding the widget. */
.pg-foot-on .ct-footer:not(#pg-x):has(.pg-foot) [data-row*="top"] > div {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	padding-block: 40px;
}

.pg-foot-on .ct-footer:not(#pg-x):has(.pg-foot) [data-row*="top"] [data-column] {
	display: block;
	width: 100%;
	min-width: 0;
	justify-self: stretch;
	text-align: start;
}

.pg-foot-on .ct-footer:not(#pg-x):has(.pg-foot) [data-row*="top"] [data-column] > * {
	width: 100%;
	max-width: none;
	margin: 0;
}

/* Bottom row: the copyright, left-aligned under a hairline. */
.pg-foot-on .ct-footer:not(#pg-x):has(.pg-foot) [data-row*="bottom"] > div {
	padding-block: 20px;
	border-top: 1px solid var(--pg-foot-line);
}

.pg-foot-on .ct-footer:not(#pg-x):has(.pg-foot) [data-row*="bottom"] [data-column] {
	justify-content: flex-start;
	align-items: flex-start;
	justify-self: stretch;
	text-align: start;
}

.pg-foot-on .ct-footer:not(#pg-x):has(.pg-foot) .ct-footer-copyright {
	width: 100%;
	color: #767676;
	font-size: 0.75rem;
	line-height: 1.5;
	letter-spacing: 0.02em;
	text-align: start;
}

.pg-foot-on .ct-footer:not(#pg-x):has(.pg-foot) .ct-footer-copyright p {
	margin: 0;
}

/* The widget itself. Scoped to the live footer, so in the widget editor it
   shows as plain, readable blocks. */
.ct-footer .pg-foot:not(#pg-x) {
	--theme-text-color: var(--pg-foot-text, #5c5c5c);
	--theme-link-initial-color: var(--pg-foot-text, #5c5c5c);
	--theme-link-hover-color: var(--pg-black);
	--theme-heading-color: var(--pg-black);
	--theme-headings-color: var(--pg-black);
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 32px 16px;
	width: 100%;
	margin: 0;
	color: var(--pg-foot-text, #5c5c5c);
	font-size: 0.875rem;
	line-height: 1.5;
	text-align: start;
}

/* Themes without theme.json get an extra wrapper inside every group
   (wp-block-group__inner-container); let its children join the grid. */
.ct-footer .pg-foot:not(#pg-x) > .wp-block-group__inner-container {
	display: contents;
}

.ct-footer .pg-foot:not(#pg-x) :is(.pg-foot-brand, .pg-foot-col) {
	min-width: 0;
	margin: 0;
}

.ct-footer .pg-foot:not(#pg-x) :is(.pg-foot-brand, .pg-foot-contact) {
	grid-column: 1 / -1;
}

.ct-footer .pg-foot:not(#pg-x) :is(.pg-foot-brand, .pg-foot-col) > .wp-block-group__inner-container {
	margin: 0;
}

.ct-footer .pg-foot:not(#pg-x) .pg-foot-logo {
	margin: 0 0 14px;
}

.ct-footer .pg-foot:not(#pg-x) .pg-foot-logo img {
	display: block;
	filter: brightness(0); /* one solid black logo on the white footer (the white "GEAR" would vanish) */
	width: 140px;
	max-width: 100%;
	height: auto;
}

.ct-footer .pg-foot:not(#pg-x) .pg-foot-wordmark {
	margin: 0 0 12px;
	font-family: var(--pg-font-display);
	font-size: 1.75rem;
	line-height: 1;
	text-transform: uppercase;
	color: var(--pg-black);
}

.ct-footer .pg-foot:not(#pg-x) .pg-foot-about {
	max-width: 38ch;
	margin: 0;
	color: var(--pg-foot-text, #5c5c5c);
	font-size: 0.875rem;
	line-height: 1.6;
}

.ct-footer .pg-foot:not(#pg-x) .pg-foot-title {
	margin: 0 0 8px;
	font-family: var(--pg-font-display);
	font-size: 1rem;
	font-weight: 400;
	font-style: normal;
	line-height: 1.1;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--pg-black);
}

.ct-footer .pg-foot:not(#pg-x) .pg-foot-links {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ct-footer .pg-foot:not(#pg-x) .pg-foot-links li {
	margin: 0;
	padding: 0;
}

/* Each link is about 34px tall: comfortable to tap, still compact. */
.ct-footer .pg-foot:not(#pg-x) .pg-foot-links a {
	display: inline-block;
	padding-block: 6px;
	color: var(--pg-foot-text, #5c5c5c);
	font-size: 0.875rem;
	line-height: 1.6;
	text-decoration: none;
	overflow-wrap: anywhere;
}

.ct-footer .pg-foot:not(#pg-x) .pg-foot-links a:is(:hover, :focus-visible) {
	color: var(--pg-black);
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* Tablets: the three groups in one row, the contact column as wide as the email. */
@media (min-width: 690px) {
	.pg-foot-on .ct-footer:not(#pg-x):has(.pg-foot) [data-row*="top"] > div {
		padding-block: 56px;
	}

	.pg-foot-on .ct-footer:not(#pg-x):has(.pg-foot) [data-row*="bottom"] > div {
		padding-block: 24px;
	}

	.ct-footer .pg-foot:not(#pg-x) {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
		gap: 40px 32px;
	}

	.ct-footer .pg-foot:not(#pg-x) .pg-foot-contact {
		grid-column: auto;
	}
}

/* Computers: logo and text, then the three groups, all in one row. */
@media (min-width: 1000px) {
	.pg-foot-on .ct-footer:not(#pg-x):has(.pg-foot) [data-row*="top"] > div {
		padding-block: 72px;
	}

	.ct-footer .pg-foot:not(#pg-x) {
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) auto;
		gap: 48px;
	}

	.ct-footer .pg-foot:not(#pg-x) .pg-foot-brand {
		grid-column: auto;
	}
}

/* 11. Product page --------------------------------------------------------- */

/*
 * Gymshark-style product page on Blocksy's product layout: full-width swipeable
 * photos (dots, not thumbnails, below computer size), a "New" tag, the name in
 * the display face, a grey category line with "Size guide", the price, size
 * buttons (assets/pg-product.js), one black "Add to bag", a small delivery box,
 * then light text tabs and a "You might also like" row. SKU, category label,
 * quantity box and the empty reviews tab are gone (see functions.php).
 */

.single-product {
	--pg-pdp-line: #e3e3e3;
}

/* Breadcrumbs only on computers; on phones the photos come first. */
.single-product .hero-section {
	display: none;
}

/* Photos: edge to edge on phones and tablets. */
.single-product .woocommerce-product-gallery {
	width: auto !important;
	max-width: none !important;
	margin-inline: calc(50% - 50vw) !important;
	margin-bottom: 0 !important;
}

.single-product .woocommerce-product-gallery .flexy-view,
.single-product .woocommerce-product-gallery .ct-media-container,
.single-product .woocommerce-product-gallery img {
	border-radius: 0 !important;
}

.single-product .woocommerce-product-gallery__trigger {
	display: none !important;
}

/* Thumbnails become small dots under the photo. */
.single-product .flexy-pills[data-type="thumbs"] {
	margin: 12px 0 0 !important;
	padding: 0 !important;
}

.single-product .flexy-pills[data-type="thumbs"] ol {
	display: flex !important;
	justify-content: center;
	gap: 6px !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: visible !important;
	grid-template-columns: none !important;
	--thumbs-width: auto;
}

.single-product .flexy-pills[data-type="thumbs"] li {
	flex: 0 0 6px !important;
	width: 6px !important;
	height: 6px !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: #cfcfcf;
	opacity: 1 !important;
	overflow: hidden;
	cursor: pointer;
}

.single-product .flexy-pills[data-type="thumbs"] li.active {
	background: var(--pg-black);
}

.single-product .flexy-pills[data-type="thumbs"] li > * {
	display: none !important;
}

/* The details. */
.single-product .entry-summary {
	padding-top: 20px;
}

.single-product .entry-summary > * {
	margin-block: 0;
}

.single-product .pg-new-tag {
	display: inline-block;
	margin: 0 0 10px !important;
	padding: 4px 8px;
	background: var(--pg-grey);
	color: var(--pg-black);
	font-size: 0.75rem;
	font-weight: 500;
	line-height: 1.3;
}

.single-product .entry-summary .product_title {
	margin: 0 !important;
	font-family: var(--pg-font-display);
	font-size: clamp(1.75rem, 7.5vw, 2.25rem);
	font-weight: 400;
	line-height: 1.02;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--pg-black);
}

.single-product .pg-product-sub {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin: 6px 0 0 !important;
	font-size: 0.875rem;
	line-height: 1.4;
	color: var(--pg-muted);
}

.single-product .pg-size-guide-link {
	flex: none;
	margin: 0 0 0 auto;
	padding: 0;
	border: 0;
	background: none;
	color: var(--pg-black);
	font: inherit;
	font-size: 0.8125rem;
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.single-product .entry-summary > .price {
	margin: 10px 0 0 !important;
	font-size: 1rem !important;
	font-weight: 600;
	color: var(--pg-black) !important;
}

.single-product .entry-summary .price del {
	margin-inline-end: 6px;
	color: var(--pg-muted);
	font-weight: 400;
}

.single-product .entry-summary .price ins {
	color: var(--pg-red);
	text-decoration: none;
}

.single-product .entry-summary :is(.ct-product-divider, .product_meta) {
	display: none !important;
}

.single-product .entry-summary .woocommerce-product-details__short-description {
	margin: 16px 0 0 !important;
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--pg-muted);
}

/* Add to bag area. */
.single-product .entry-summary .ct-product-add-to-cart,
.single-product .entry-summary form.cart {
	margin: 24px 0 0 !important;
}

.single-product .entry-summary form.cart .ct-product-add-to-cart,
.single-product .entry-summary .ct-product-add-to-cart form.cart {
	margin-top: 0 !important;
}

.single-product .entry-summary .quantity {
	display: none !important; /* one at a time, like Gymshark; change it in the bag */
}

.single-product .entry-summary .ct-cart-actions,
.single-product .entry-summary .woocommerce-variation-add-to-cart {
	display: block !important;
	width: 100%;
}

.single-product .entry-summary .single_add_to_cart_button {
	--theme-button-background-initial-color: var(--pg-black);
	--theme-button-background-hover-color: #2b2b2b;
	--theme-button-text-initial-color: var(--pg-white);
	--theme-button-text-hover-color: var(--pg-white);
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 100% !important;
	min-height: 56px;
	margin: 0 !important;
	padding: 0 24px !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: var(--pg-black) !important;
	color: var(--pg-white) !important;
	font-size: 0.8125rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.12em !important;
	text-transform: uppercase !important;
	white-space: nowrap;
	transition: background-color 0.15s ease;
}

.single-product .entry-summary .single_add_to_cart_button:is(:hover, :focus-visible) {
	background: #2b2b2b !important;
}

.single-product .entry-summary .single_add_to_cart_button:is(.disabled, :disabled) {
	background: #8a8a8a !important;
	opacity: 1 !important;
	cursor: not-allowed;
}

/* Size buttons (assets/pg-product.js builds them from WooCommerce's menu). */
.single-product table.variations {
	width: 100%;
	margin: 0 0 16px !important;
	border: 0 !important;
}

.single-product table.variations :is(tbody, tr, td) {
	display: block;
	width: 100%;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
}

.single-product table.variations tr + tr {
	margin-top: 16px;
}

.single-product form.has-pg-swatches table.variations th,
.single-product table.variations .reset_variations {
	display: none !important;
}

.single-product .pg-select-hidden {
	position: absolute !important;
	width: 1px !important;
	min-width: 0 !important;
	max-width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	border: 0 !important;
}

.single-product .pg-swatch-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin: 0 0 10px;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--pg-black);
}

/* Sizes and text options: boxes that wrap to fit the space, never squeezed
   (each at least 76px wide), sharing their 1px lines like Gymshark's grid. */
.single-product .pg-swatches {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
	padding: 0 1px 1px 0;
}

.single-product .pg-swatch {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	min-height: 52px;
	margin: 0 -1px -1px 0;
	padding: 8px 6px;
	border: 1px solid var(--pg-pdp-line);
	border-radius: 0;
	background: var(--pg-white);
	color: var(--pg-black);
	font: inherit;
	font-size: 0.875rem;
	line-height: 1.2;
	text-align: center;
	overflow-wrap: anywhere;
	cursor: pointer;
	position: relative;
}

.single-product .pg-swatch:hover:not(:disabled) {
	z-index: 1;
	border-color: var(--pg-black);
}

.single-product .pg-swatch[aria-pressed="true"] {
	z-index: 2;
	border-color: var(--pg-black);
	box-shadow: inset 0 0 0 1px var(--pg-black);
}

.single-product .pg-swatch:disabled {
	color: #b3b3b3;
	cursor: not-allowed;
}

.single-product .pg-swatch.is-sold-out {
	background: linear-gradient(to top right, transparent calc(50% - 0.5px), var(--pg-pdp-line) 50%, transparent calc(50% + 0.5px));
	text-decoration: line-through;
}

/* The chosen colour's name beside "Select a colour". */
.single-product .pg-swatch-value {
	margin-inline-start: auto;
	color: var(--pg-muted);
	font-weight: 400;
}

/* Colours as round swatches. */
.single-product .pg-swatches--circles {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	padding: 4px;
}

.single-product .pg-swatches--circles .pg-swatch {
	align-items: center;
	justify-content: center;
	width: 36px;
	min-width: 36px;
	height: 36px;
	min-height: 36px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	box-shadow: none;
}

.single-product .pg-swatch-dot {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
}

.single-product .pg-swatches--circles .pg-swatch:hover:not(:disabled) {
	box-shadow: 0 0 0 2px var(--pg-white), 0 0 0 3px #9b9b9b;
}

.single-product .pg-swatches--circles .pg-swatch[aria-pressed="true"] {
	box-shadow: 0 0 0 2px var(--pg-white), 0 0 0 4px var(--pg-black);
}

/* Colours as small photos (when every colour has its own variation photo). */
.single-product .pg-swatches--images {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 0;
}

.single-product .pg-swatches--images .pg-swatch {
	width: 60px;
	min-width: 60px;
	min-height: 0;
	margin: 0;
	padding: 0;
	aspect-ratio: 4 / 5;
	overflow: hidden;
}

.single-product .pg-swatches--images .pg-swatch img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.single-product .pg-swatches--images .pg-swatch[aria-pressed="true"] {
	box-shadow: inset 0 0 0 2px var(--pg-black);
}

.single-product .pg-swatches--images .pg-swatch[aria-pressed="true"] img {
	padding: 2px;
}

.single-product :is(.pg-swatches--circles, .pg-swatches--images) .pg-swatch.is-sold-out {
	opacity: 0.35;
	text-decoration: none;
}

.single-product .woocommerce-variation:not(:empty) {
	margin: 0 0 12px;
	font-size: 0.875rem;
}

.single-product .entry-summary .stock {
	margin: 0 0 12px;
	font-size: 0.8125rem;
	color: var(--pg-muted) !important;
}

.single-product .entry-summary .stock.out-of-stock {
	color: var(--pg-red) !important;
}

/* The delivery box under the button. */
.single-product .pg-product-info {
	margin: 16px 0 0 !important;
	padding: 14px 16px;
	border: 1px solid var(--pg-pdp-line);
	list-style: none;
	font-size: 0.8125rem;
	line-height: 1.45;
	color: var(--pg-black);
}

.single-product .pg-product-info li {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 0;
}

.single-product .pg-product-info li + li {
	margin-top: 10px;
}

.single-product .pg-product-info svg {
	flex: none;
}

/* Tabs: light text tabs in a row, the active one black and underlined. */
.single-product .woocommerce-tabs {
	margin-top: 40px !important;
	border: 0 !important;
}

.single-product .woocommerce-tabs ul.tabs {
	display: flex !important;
	flex-direction: row !important;
	align-items: stretch !important;
	flex-wrap: nowrap !important;
	justify-content: flex-start !important;
	gap: 24px;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-bottom: 1px solid var(--pg-pdp-line) !important;
	overflow-x: auto;
	scrollbar-width: none;
	list-style: none;
}

.single-product .woocommerce-tabs ul.tabs::-webkit-scrollbar {
	display: none;
}

.single-product .woocommerce-tabs ul.tabs :is(li, li a) {
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	box-shadow: none;
}

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

.single-product .woocommerce-tabs ul.tabs li {
	flex: none;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
}

.single-product .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 12px 0 !important;
	color: #9b9b9b !important;
	font-size: 0.9375rem !important;
	font-weight: 500 !important;
	letter-spacing: 0 !important;
	line-height: 1.3;
	text-transform: none !important;
	text-decoration: none;
	white-space: nowrap;
}

.single-product .woocommerce-tabs ul.tabs li.active a {
	color: var(--pg-black) !important;
	box-shadow: inset 0 -2px 0 var(--pg-black);
}

.single-product .woocommerce-tabs .panel {
	margin: 0 !important;
	padding: 20px 0 0 !important;
	border: 0 !important;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: #333;
}

.single-product .woocommerce-tabs .panel > :first-child {
	margin-top: 0;
}

/* The tab already says "Description"; WooCommerce's repeat heading goes. */
.single-product .woocommerce-tabs .panel > h2:first-child {
	display: none;
}

/* "You might also like": a swipe row on phones and tablets, like the home page. */
.single-product :is(section.related, section.upsells) {
	margin-top: 56px !important;
}

@media (max-width: 999.98px) {
	.single-product :is(section.related, section.upsells):is(.ct-hidden-sm, .ct-hidden-md) {
		display: block !important;
	}

	.single-product :is(section.related, section.upsells) ul.products {
		display: grid !important;
		grid-template-columns: none !important;
		grid-auto-flow: column;
		grid-auto-columns: 64%;
		gap: 4px !important;
		margin: 0 calc(50% - 50vw) 0 0 !important;
		padding: 0 calc(50vw - 50%) 4px 0 !important;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	.single-product :is(section.related, section.upsells) ul.products::-webkit-scrollbar {
		display: none;
	}

	.single-product :is(section.related, section.upsells) ul.products > li.product {
		width: auto !important;
		min-width: 0;
		scroll-snap-align: start;
	}
}

@media (min-width: 690px) and (max-width: 999.98px) {
	.single-product :is(section.related, section.upsells) ul.products {
		grid-auto-columns: 40%;
	}
}

.single-product :is(section.related, section.upsells) > h2 {
	margin: 0 0 20px !important;
	font-family: var(--pg-font-display);
	font-size: clamp(1.625rem, 7vw, 2.125rem);
	font-weight: 400;
	line-height: 0.95;
	letter-spacing: 0.01em;
	text-align: start !important;
	text-transform: uppercase;
	color: var(--pg-black);
}

/* Size guide pop-up. */
.pg-size-guide {
	width: min(92vw, 640px);
	max-width: none;
	max-height: 90vh;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: var(--pg-white);
	color: var(--pg-black);
}

.pg-size-guide::backdrop {
	background: rgba(0, 0, 0, 0.6);
}

.pg-size-guide__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	border-bottom: 1px solid #e3e3e3;
}

.pg-size-guide__head h2 {
	margin: 0;
	font-family: var(--pg-font-display);
	font-size: 1.25rem;
	font-weight: 400;
	letter-spacing: 0.01em;
	text-transform: uppercase;
}

.pg-size-guide__close {
	width: 44px;
	height: 44px;
	margin: -8px -12px -8px 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font-size: 1.75rem;
	line-height: 1;
	cursor: pointer;
}

.pg-size-guide__img {
	display: block;
	width: 100%;
	height: auto;
}

/* No sidebar on product pages ("Top rated products" squeezed the details). */
.single-product .ct-container[data-sidebar] > #sidebar,
.single-product .ct-container[data-sidebar] > aside {
	display: none !important;
}

.single-product .ct-container[data-sidebar] {
	grid-template-columns: minmax(0, 1fr) !important;
	--sidebar-width: 0px;
}

/* Computers: Blocksy's two columns, thumbnails and breadcrumbs come back. */
@media (min-width: 1000px) {
	.single-product .hero-section {
		display: block;
	}

	.single-product .woocommerce-product-gallery {
		width: revert !important;
		max-width: revert !important;
		margin-inline: 0 !important;
	}

	.single-product .flexy-pills[data-type="thumbs"] {
		margin-top: 8px !important;
	}

	.single-product .flexy-pills[data-type="thumbs"] ol {
		display: grid !important;
		grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
		justify-content: stretch;
	}

	.single-product .flexy-pills[data-type="thumbs"] li {
		width: auto !important;
		height: auto !important;
		border-radius: 0 !important;
		background: none;
		opacity: 0.55 !important;
	}

	.single-product .flexy-pills[data-type="thumbs"] li.active {
		opacity: 1 !important;
	}

	.single-product .flexy-pills[data-type="thumbs"] li > * {
		display: block !important;
	}

	.single-product .entry-summary {
		padding-top: 0;
	}

	.single-product .entry-summary .product_title {
		font-size: clamp(2.25rem, 3vw, 2.75rem);
	}
}