/* -------------------------------------------------------------------------------------------------
 * Shared pieces the blocks and patterns use everywhere.
 *
 * Every stylesheet in this folder is the plugin's default look, built from the theme's theme.json presets
 * and custom values ( --wp--preset--*, --wp--custom--* ).  A theme that sets those gets a finished site;
 * its own stylesheet is only for what a variable cannot carry, like its images and exact colours.
 * ------------------------------------------------------------------------------------------------- */

/* The points icon: add the class glp-points-icon to anything about points - a paragraph, a heading, a flex
 * row - and a crown sits in front of it.  It is a masked background rather than markup, so it takes the
 * colour of the words beside it, and a theme swaps it without touching a pattern:
 *
 *   --glp-points-icon       the glyph, as url( ... ), or none to drop it
 *   --glp-points-icon-size  its width and height, 1.5rem by default
 *   --glp-points-icon-gap   the space after it, 0.25rem by default; set it to 0 inside a flex row with a gap
 *
 * Set them on :root to change every one, or on one element to change just that one.  The defaults live in
 * the var() fallbacks, not on the class, so a :root value is never shadowed. */
.glp-points-icon::before {
	content: "";
	display: inline-block;
	flex: none;
	width: var(--glp-points-icon-size, 1.5rem);
	height: var(--glp-points-icon-size, 1.5rem);
	margin-inline-end: var(--glp-points-icon-gap, 0.25rem);
	vertical-align: middle;
	background-color: currentColor;
	-webkit-mask: var(--glp-points-icon, url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5.4135 19.5V18H18.5865V19.5H5.4135ZM5.38475 16.3077L4.023 8.475C3.98967 8.48133 3.95217 8.48708 3.9105 8.49225C3.86883 8.49742 3.83133 8.5 3.798 8.5C3.43267 8.5 3.125 8.37383 2.875 8.1215C2.625 7.869 2.5 7.5625 2.5 7.202C2.5 6.836 2.625 6.52492 2.875 6.26875C3.125 6.01275 3.43292 5.88475 3.79875 5.88475C4.16442 5.88475 4.47525 6.01275 4.73125 6.26875C4.98742 6.52492 5.1155 6.836 5.1155 7.202C5.1155 7.295 5.10775 7.38142 5.09225 7.46125C5.07692 7.54092 5.05258 7.616 5.01925 7.6865L8.18275 9.02875L11.2307 4.86925C11.0667 4.75508 10.9344 4.60492 10.8338 4.41875C10.7331 4.23258 10.6827 4.03208 10.6827 3.81725C10.6827 3.45142 10.8108 3.14042 11.0668 2.88425C11.3228 2.62808 11.6337 2.5 11.9995 2.5C12.3652 2.5 12.6762 2.62792 12.9327 2.88375C13.1891 3.13942 13.3173 3.45 13.3173 3.8155C13.3173 4.03467 13.2669 4.23658 13.1663 4.42125C13.0656 4.60575 12.9332 4.75508 12.7692 4.86925L15.8173 9.02875L18.9807 7.6865C18.9551 7.61833 18.9327 7.54325 18.9135 7.46125C18.8942 7.37942 18.8845 7.293 18.8845 7.202C18.8845 6.836 19.0095 6.52492 19.2595 6.26875C19.5095 6.01275 19.8174 5.88475 20.1833 5.88475C20.5489 5.88475 20.8598 6.01275 21.116 6.26875C21.372 6.52492 21.5 6.836 21.5 7.202C21.5 7.5615 21.3717 7.86775 21.1152 8.12075C20.8587 8.37358 20.5472 8.5 20.1807 8.5C20.1514 8.5 20.1184 8.49583 20.0818 8.4875C20.0453 8.47917 20.0093 8.475 19.9738 8.475L18.6152 16.3077H5.38475ZM6.6615 14.8077H17.3385L18.277 9.65175L15.3057 10.8885L12 6.352L8.69425 10.8885L5.723 9.65175L6.6615 14.8077Z"/></svg>')) no-repeat center / contain;
	mask: var(--glp-points-icon, url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5.4135 19.5V18H18.5865V19.5H5.4135ZM5.38475 16.3077L4.023 8.475C3.98967 8.48133 3.95217 8.48708 3.9105 8.49225C3.86883 8.49742 3.83133 8.5 3.798 8.5C3.43267 8.5 3.125 8.37383 2.875 8.1215C2.625 7.869 2.5 7.5625 2.5 7.202C2.5 6.836 2.625 6.52492 2.875 6.26875C3.125 6.01275 3.43292 5.88475 3.79875 5.88475C4.16442 5.88475 4.47525 6.01275 4.73125 6.26875C4.98742 6.52492 5.1155 6.836 5.1155 7.202C5.1155 7.295 5.10775 7.38142 5.09225 7.46125C5.07692 7.54092 5.05258 7.616 5.01925 7.6865L8.18275 9.02875L11.2307 4.86925C11.0667 4.75508 10.9344 4.60492 10.8338 4.41875C10.7331 4.23258 10.6827 4.03208 10.6827 3.81725C10.6827 3.45142 10.8108 3.14042 11.0668 2.88425C11.3228 2.62808 11.6337 2.5 11.9995 2.5C12.3652 2.5 12.6762 2.62792 12.9327 2.88375C13.1891 3.13942 13.3173 3.45 13.3173 3.8155C13.3173 4.03467 13.2669 4.23658 13.1663 4.42125C13.0656 4.60575 12.9332 4.75508 12.7692 4.86925L15.8173 9.02875L18.9807 7.6865C18.9551 7.61833 18.9327 7.54325 18.9135 7.46125C18.8942 7.37942 18.8845 7.293 18.8845 7.202C18.8845 6.836 19.0095 6.52492 19.2595 6.26875C19.5095 6.01275 19.8174 5.88475 20.1833 5.88475C20.5489 5.88475 20.8598 6.01275 21.116 6.26875C21.372 6.52492 21.5 6.836 21.5 7.202C21.5 7.5615 21.3717 7.86775 21.1152 8.12075C20.8587 8.37358 20.5472 8.5 20.1807 8.5C20.1514 8.5 20.1184 8.49583 20.0818 8.4875C20.0453 8.47917 20.0093 8.475 19.9738 8.475L18.6152 16.3077H5.38475ZM6.6615 14.8077H17.3385L18.277 9.65175L15.3057 10.8885L12 6.352L8.69425 10.8885L5.723 9.65175L6.6615 14.8077Z"/></svg>')) no-repeat center / contain;
}

/* A prize on the platform ( Appearance -> Settings -> General -> Platform image ): the competition hero's Competition
 * Image, and the product page's first photograph ( see ProductGallery ).  The platform is a plinth or a pillow ( "The
 * platform is a" ), --plinth or --pillow on the box.
 *
 *   .glp-on-platform              the box
 *   .glp-on-platform__prize       the prize's own box, holding its image
 *   .glp-on-platform__platform    the platform image, cropped to its edges so it centres on the prize
 *
 * Both look right with a prize image cropped to the prize: the prize's box is then the prize. */
.glp-on-platform .glp-on-platform__prize {
	position: relative;
	z-index: 1;
	min-height: 0;
	/* Its height ( cqh ) sizes the shadows: a prize cropped to its edges fills it. */
	container-type: size;
}

.glp-on-platform .glp-on-platform__platform {
	pointer-events: none;
	user-select: none;
}

/* ---- A plinth: the prize fills what is left of the box above it, sitting on its bottom edge, and stands into its top
 * face.  In the design ( 1479:11050 ) the plinth is 80% of the box's width and the prize stands 35px into it, 7.64% of
 * the plinth's width.  --glp-platform-width sets the plinth's width; the overlap follows it. */
.glp-on-platform--plinth {
	--glp-platform-width: 80%;

	display: flex;
	flex-direction: column;
	align-items: center;
}

.glp-on-platform--plinth .glp-on-platform__prize {
	flex: 1 1 0;
	align-self: stretch;
}

.glp-on-platform--plinth .glp-on-platform__prize img {
	object-position: center bottom;
}

/* Where the prize meets the plinth, a soft dark ellipse - the design's contact shadow, about 45% of the prize's width. */
.glp-on-platform--plinth .glp-on-platform__prize::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 50%;
	z-index: -1;
	width: 30cqh;
	height: 3.5cqh;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgb(0 0 0 / 0.7), rgb(0 0 0 / 0));
	filter: blur(3px);
	transform: translate(-50%, 40%);
	pointer-events: none;
}

.glp-on-platform--plinth .glp-on-platform__platform {
	flex: none;
	width: var(--glp-platform-width);
	height: auto;
	margin-block-start: calc(var(--glp-platform-width) * -0.0764);
}

/* ---- A pillow: the prize's bracelet is wrapped around it, as on the watch pillow in a presentation box ( 1366:8380 ).
 * The pillow sits behind the prize, centred and shorter than it, so the bracelet runs over its top and on below it.
 * The prize casts a soft shadow onto the felt.  --glp-pillow-height sets the pillow's height, as a share of the box. */
.glp-on-platform--pillow {
	--glp-pillow-height: 94%;

	display: grid;
	grid-template: 100% / 100%;
	place-items: center;
}

.glp-on-platform--pillow > * {
	grid-area: 1 / 1;
}

.glp-on-platform--pillow .glp-on-platform__prize {
	align-self: stretch;
	justify-self: stretch;
	filter: drop-shadow(0 1.2cqh 1.6cqh rgb(0 0 0 / 0.3));
}

.glp-on-platform--pillow .glp-on-platform__prize img {
	object-position: center;
}

.glp-on-platform--pillow .glp-on-platform__platform {
	z-index: 0;
	width: auto;
	height: var(--glp-pillow-height);
	max-width: 100%;
	object-fit: contain;
	filter: drop-shadow(0 12px 20px rgb(0 0 0 / 0.35));
}

/* WooCommerce's buttons - the mini-cart's View my cart and Go to checkout, the cart's Proceed to checkout, the checkout's
 * Proceed to payment, My Account's Pay, View and Cancel - at one size, the plugin's own Add to bag's, on one line.  They are
 * all wp-element-button, so the theme's button style ( theme.json ) dresses them, at a size meant for the hero's buttons.
 * Change these here and every one follows; where each sits ( full width, side by side ) stays with its page. */
:is(.wc-block-components-button, .woocommerce .button, .woocommerce-button).wp-element-button {
	padding: 0.75rem var(--wp--preset--spacing--small);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.2;
	letter-spacing: var(--wp--custom--letter-spacing--button);
	white-space: nowrap;
}

/* An error the customer has to act on - a package they can't add, a quantity they can't have: a tinted box
 * with a red rule and a red mark, so it reads as a problem at a glance rather than one more line of text.
 * WooCommerce's own error banners on the cart and checkout are dressed to match ( checkout.css ).
 *
 *   --glp-error-color  the red, var(--wp--custom--color--error--600) by default ( the theme has no red of its own )
 *   --glp-error-icon   the mark, as url( ... ), or none to drop it
 */
.glp-error {
	display: flex;
	align-items: flex-start;
	gap: 0.625rem;
	margin: 0;
	padding: 0.75rem 1rem;
	border: 1px solid var(--wp--custom--color--error--600);
	border-radius: var(--wp--custom--radius--medium);
	background: color-mix(in srgb, var(--wp--custom--color--error--600) 6%, var(--wp--preset--color--base));
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: var(--wp--custom--letter-spacing--tight);
	line-height: 1.4;
	overflow-wrap: anywhere;
}

.glp-error::before {
	content: "";
	flex: none;
	width: 1.25rem;
	height: 1.25rem;
	background-color: var(--wp--custom--color--error--600);
	-webkit-mask: var(--glp-error-icon, url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill-rule="evenodd" d="M480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-200q17 0 28.5-11.5T520-320q0-17-11.5-28.5T480-360q-17 0-28.5 11.5T440-320q0 17 11.5 28.5T480-280Zm-40-160h80v-240h-80v240Z"/></svg>')) no-repeat center / contain;
	mask: var(--glp-error-icon, url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill-rule="evenodd" d="M480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-200q17 0 28.5-11.5T520-320q0-17-11.5-28.5T480-360q-17 0-28.5 11.5T440-320q0 17 11.5 28.5T480-280Zm-40-160h80v-240h-80v240Z"/></svg>')) no-repeat center / contain;
}

.glp-error[hidden] {
	display: none;
}

/* The "label" style: small body face, uppercase, wide tracking, mid grey. */
.glp-competition-countdown__label,
.glp-competition-stats__label,
.glp-competition-progress-label,
.glp-competition-leaderboard__heading,
.glp-competition-leaderboard__quantity,
.glp-competition-winner-headline__eyebrow,
.glp-competition-winner-headline__tagline,
.glp-competition-winner-headline__date,
.glp-callout__sub {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	letter-spacing: var(--wp--custom--letter-spacing--label);
	line-height: 1.1;
	text-transform: uppercase;
	color: var(--wp--custom--color--secondary--700);
}

.glp-competition-progress-label {
	font-weight: 600;
}

/* A small uppercase eyebrow, used above section titles. */
.glp-eyebrow {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: var(--wp--custom--letter-spacing--label);
	line-height: 1.1;
	text-transform: uppercase;
	color: var(--wp--custom--color--secondary--600);
}

/* Leaderboard rows: rank in the display face, name in the primary colour, count on the right. */
.glp-competition-leaderboard__rank {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--wp--custom--color--secondary--700);
}

.glp-competition-leaderboard__who {
	font-size: var(--wp--preset--font-size--medium);
	letter-spacing: var(--wp--custom--letter-spacing--snug);
	color: var(--wp--preset--color--primary);
}

.glp-competition-leaderboard__quantity {
	text-transform: none;
	letter-spacing: var(--wp--custom--letter-spacing--wide);
}

/* The competition's tag: Most Popular, Best Odds. */
.glp-competition-tag {
	display: inline-flex;
	margin: 0;
	padding: 6px 10px;
	border-radius: var(--wp--custom--radius--medium);
	background: color-mix(in srgb, var(--wp--preset--color--primary) 5%, transparent);
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.625rem;
	font-weight: 400;
	letter-spacing: var(--wp--custom--letter-spacing--label);
	line-height: 1.1;
	text-transform: uppercase;
}

/* ---- Account quick stats ( logged in ) */
/* A full bleed bar straight under the header, whatever layout the wrapping group was inserted with. */
.wp-block-group.glp-account-stats-wrap {
	padding: 0;
}

.glp-account-stats-wrap > .glp-account-stats {
	max-width: none;
	margin: 0;
}

/* No block gap between the bar and the header above it or the block below it.  Closed, the bar is only its
 * chevron tab, which hangs over the block below. */
main:has(> .wp-block-post-content > .glp-audience:first-child .glp-account-stats) {
	margin-block-start: 0;
}

.glp-audience:has(.glp-account-stats) + * {
	margin-block-start: 0;
}

/* The account icon in the menu ( WooCommerce's Customer Account block ) as the customer's avatar, once they
 * have one worth showing ( controllers/ProfilePicture.php ).  The icon stays in the link, hidden, for the
 * Profile tab to bring back if they remove their picture. */
.wc-block-customer-account__link .glp-menu-avatar {
	display: none;
}

.wc-block-customer-account__link.has-avatar {
	display: inline-flex;
	align-items: center;
}

.wc-block-customer-account__link.has-avatar .glp-menu-avatar {
	display: block;
	width: 28px;
	height: 28px;
	max-width: none;
	border-radius: 50%;
	background: var(--wp--custom--color--secondary--50);
	object-fit: cover;
}

.wc-block-customer-account__link.has-avatar .wc-block-customer-account__account-icon {
	display: none;
}