/**
 * Fall Savings promotion (includes/fall-promotion.php): the banner above the header and the gift tag in the cart.
 *
 * Banner: deep Peptogenesis navy at both ends, burgundy and burnt orange gathering into copper and amber at the centre with one
 * soft glow, champagne hairlines top and bottom. Leaves drift down BEHIND the copy, clipped to the banner and faded through
 * the middle so the text stays easy to read at all times. Transforms and opacity only; a still arrangement under reduced
 * motion. Theme tokens are used where the Peptogenesis theme provides them, with literal fallbacks so the banner holds up
 * on its own.
 */

.pcs-fall {
	--pcs-navy: var(--pg-navy-950, #04091A);
	--pcs-ivory: var(--pg-ivory, #F7F4EC);
	--pcs-gold-200: var(--pg-gold-200, #F3E4B0);
	--pcs-gold-300: var(--pg-gold-300, #E8D28C);
	--pcs-gold-400: var(--pg-gold-400, #DDC26A);
	--pcs-gold-line: var(--pg-gold-line-strong, rgba(212, 175, 55, .6));
	--pcs-gold-metal: var(--pg-gold-metal, linear-gradient(155deg, #EFD98F 0%, #D4AF37 42%, #B8922C 78%, #D4B75A 100%));
	--pcs-gold-metal-hover: var(--pg-gold-metal-hover, linear-gradient(155deg, #F5E3A2 0%, #DDBB48 42%, #C29B33 78%, #DEC36A 100%));
	--pcs-burgundy: #7A2432;
	--pcs-burnt: #8C3A14;
	--pcs-copper: #B4531E;
	--pcs-amber: #D98A2B;
	--pcs-glow: rgba(232, 160, 60, .36);
	--pcs-font-display: var(--pg-font-display, "Manrope", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
	--pcs-font-mono: var(--pg-font-mono, "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
	--pcs-fall-h: 66px;   /* the fall distance for the leaves; the banner itself is sized by its content */
	position: relative; isolation: isolate; overflow: hidden;
	background: var(--pcs-navy); color: var(--pcs-ivory);
	border-bottom: 1px solid var(--pcs-gold-line);
	text-align: center;
}
/* the fall band: navy kept visible at both ends, burgundy and burnt orange next, copper and amber at the centre */
.pcs-fall::before {
	content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
	background:
		radial-gradient(50% 170% at 50% 56%, var(--pcs-glow) 0%, transparent 68%),
		linear-gradient(90deg,
			var(--pcs-navy) 0%,
			var(--pcs-navy) 7%,
			color-mix(in srgb, var(--pcs-burgundy) 40%, var(--pcs-navy)) 19%,
			color-mix(in srgb, var(--pcs-burnt) 62%, var(--pcs-navy)) 31%,
			color-mix(in srgb, var(--pcs-copper) 74%, var(--pcs-navy)) 42%,
			color-mix(in srgb, var(--pcs-amber) 36%, var(--pcs-copper)) 50%,
			color-mix(in srgb, var(--pcs-copper) 74%, var(--pcs-navy)) 58%,
			color-mix(in srgb, var(--pcs-burnt) 62%, var(--pcs-navy)) 69%,
			color-mix(in srgb, var(--pcs-burgundy) 40%, var(--pcs-navy)) 81%,
			var(--pcs-navy) 93%,
			var(--pcs-navy) 100%);
}
/* champagne hairline along the top edge (the bottom edge is the border) */
.pcs-fall::after {
	content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; z-index: 2; pointer-events: none;
	background: linear-gradient(90deg, transparent 0%, var(--pcs-gold-line) 30%, var(--pcs-gold-line) 70%, transparent 100%);
}

/* ------------------------------------------------------------------ copy */
.pcs-fall__inner { position: relative; z-index: 1; max-width: 1440px; margin-inline: auto; padding: 9px 24px 8px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.pcs-fall__main { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px; margin: 0; color: var(--pcs-ivory); line-height: 1.2; }
.pcs-fall__season { font-family: var(--pcs-font-display); font-weight: 500; font-size: .8125rem; letter-spacing: .24em; text-transform: uppercase; color: var(--pcs-gold-300); text-shadow: 0 1px 2px rgba(4, 9, 26, .55); }
.pcs-fall__offer { font-family: var(--pcs-font-display); font-weight: 800; font-size: 1rem; letter-spacing: .02em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 2px rgba(4, 9, 26, .6); }
.pcs-fall__sep { width: 1px; height: 16px; background: var(--pcs-gold-line); flex: none; }
.pcs-fall__code {
	display: inline-flex; align-items: center; gap: .45em; min-height: 28px; margin: 0; padding: 0 12px 0 11px; border-radius: 999px;
	background: var(--pcs-gold-metal); color: var(--pcs-navy); border: 1px solid rgba(255, 255, 255, .28);
	font-family: var(--pcs-font-mono); font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; line-height: 1;
	box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 6px 16px -8px rgba(212, 175, 55, .75); cursor: pointer;
	transition: transform .16s ease-out, box-shadow .24s ease-out, background .24s ease-out;
}
.pcs-fall__code-label { font-weight: 500; opacity: .78; }
.pcs-fall__code-value { min-width: 5.5ch; text-align: left; }
@media (hover: hover) { .pcs-fall__code:hover { background: var(--pcs-gold-metal-hover); transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255, 255, 255, .4) inset, 0 10px 22px -8px rgba(212, 175, 55, .85); } }
.pcs-fall__code:active { transform: translateY(0); }
.pcs-fall__code.is-copied { background: var(--pcs-gold-200); }
.pcs-fall__code:focus-visible { outline: 2px solid var(--pcs-gold-200); outline-offset: 2px; }
.pcs-fall__sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.pcs-fall__perks { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 3px 0; margin: 0; padding: 0; list-style: none; }
.pcs-fall__perk { display: inline-flex; align-items: center; margin: 0; font-family: var(--pcs-font-mono); font-size: .6875rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--pcs-gold-300); text-shadow: 0 1px 2px rgba(4, 9, 26, .6); white-space: nowrap; }
.pcs-fall__perk + .pcs-fall__perk::before { content: ""; width: 4px; height: 4px; margin: 0 .95em; background: var(--pcs-gold-400); transform: rotate(45deg); opacity: .9; flex: none; }

/* ------------------------------------------------------ the gift line's light */
/* Polished champagne lettering and, now and then, light crossing it. One soft-edged highlight travels left to right through the
   letters in about 1.9 s, then the line rests for about 4.5 s. The highlight is a background clipped to the text, so it exists
   only inside the glyphs (nothing washes over the banner), and the base gold beneath it never changes, so the line reads the
   same at every moment: no flashing, no flicker (the highlight is outside the text at both ends of the loop). One animation on
   the whole line, so both entries are crossed as a single reflection, two lines at once where they wrap. Its 6.4 s period
   shares no rhythm with the leaves (10 to 16 s each, all different), so the two never fall into step. The gift line only:
   the headline, the offer and the code pill stay as they are. Solid champagne gold where a browser cannot clip a background
   to text, and under reduced motion. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.pcs-fall__perks {
		--pcs-wave: 255, 250, 232; --pcs-wave-a: .96;
		background:
			linear-gradient(100deg, rgba(var(--pcs-wave), 0) 0%, rgba(var(--pcs-wave), 0) 12%, rgba(var(--pcs-wave), var(--pcs-wave-a)) 50%, rgba(var(--pcs-wave), 0) 88%, rgba(var(--pcs-wave), 0) 100%) no-repeat -75% 0 / 42% 100%,
			linear-gradient(var(--pcs-gold-300), var(--pcs-gold-300));
		-webkit-background-clip: text; background-clip: text;
		filter: drop-shadow(0 1px 1px rgba(4, 9, 26, .62));   /* a text-shadow would show through the transparent letters */
		animation: pcs-gift-wave 6.4s linear 1.6s infinite;
	}
	.pcs-fall__perk { color: transparent; -webkit-text-fill-color: transparent; text-shadow: none; }
}
@keyframes pcs-gift-wave {
	0%        { background-position: -75% 0, 0 0; animation-timing-function: cubic-bezier(.4, 0, .3, 1); }
	29%, 100% { background-position: 175% 0, 0 0; }
}

/* --------------------------------------------------------------- leaves */
.pcs-fall__sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
/* clipped to the banner, and faded through the middle third where the copy sits */
.pcs-fall__leaves {
	position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
	-webkit-mask-image: linear-gradient(90deg, #000 0%, #000 24%, rgba(0, 0, 0, .34) 36%, rgba(0, 0, 0, .34) 64%, #000 76%, #000 100%);
	mask-image: linear-gradient(90deg, #000 0%, #000 24%, rgba(0, 0, 0, .34) 36%, rgba(0, 0, 0, .34) 64%, #000 76%, #000 100%);
}
.pcs-fall__leaf {
	position: absolute; top: 0; left: var(--x); width: var(--size); height: var(--size); margin-left: calc(var(--size) / -2);
	opacity: 0; will-change: transform, opacity;
	animation: pcs-leaf-fall var(--dur) linear var(--delay) infinite;
}
.pcs-fall__leaf-shape { display: block; width: 100%; height: 100%; overflow: visible; animation: pcs-leaf-sway var(--sway-dur) ease-in-out calc(var(--delay) * .5) infinite alternate; }
/* a leaf's colour reaches its <use> clone by inheritance: selectors cannot match inside the clone, custom properties do cross into it */
.pcs-fall__leaf--amber    { --pcs-leaf-fill: url(#pcs-lg-amber);    --pcs-leaf-stem: #8D5A1C; }
.pcs-fall__leaf--copper   { --pcs-leaf-fill: url(#pcs-lg-copper);   --pcs-leaf-stem: #753614; }
.pcs-fall__leaf--rust     { --pcs-leaf-fill: url(#pcs-lg-rust);     --pcs-leaf-stem: #6A2B12; }
.pcs-fall__leaf--burnt    { --pcs-leaf-fill: url(#pcs-lg-burnt);    --pcs-leaf-stem: #5B260D; }
.pcs-fall__leaf--burgundy { --pcs-leaf-fill: url(#pcs-lg-burgundy); --pcs-leaf-stem: #4F1720; }
.pcs-fall__leaf--red      { --pcs-leaf-fill: url(#pcs-lg-red);      --pcs-leaf-stem: #641B17; }
.pcs-fall__leaf--brown    { --pcs-leaf-fill: url(#pcs-lg-brown);    --pcs-leaf-stem: #3C2210; }
.pcs-fall__leaf--gold     { --pcs-leaf-fill: url(#pcs-lg-gold);     --pcs-leaf-stem: #836930; }
.pcs-leaf__blade { fill: var(--pcs-leaf-fill, #B4531E); }
.pcs-leaf__half { fill: rgba(20, 8, 2, .13); }
.pcs-leaf__stem { fill: none; stroke: var(--pcs-leaf-stem, #5C3418); stroke-width: 1.5; stroke-linecap: round; }
.pcs-leaf__vein { fill: none; stroke: rgba(255, 236, 205, .30); stroke-width: .7; stroke-linecap: round; }
.pcs-leaf__vein--mid { stroke: rgba(255, 236, 205, .42); stroke-width: 1.1; }

@keyframes pcs-leaf-fall {
	0%   { transform: translate3d(0, calc(var(--pcs-fall-h) * -.45), 0) rotate(0turn); opacity: 0; }
	14%  { opacity: .95; }
	86%  { opacity: .95; }
	100% { transform: translate3d(var(--drift), calc(var(--pcs-fall-h) * 1.25), 0) rotate(calc(var(--spin) * 1turn)); opacity: 0; }
}
@keyframes pcs-leaf-sway {
	0%   { transform: translateX(calc(var(--sway) * -1)) rotate3d(1, .35, 0, -34deg); }
	100% { transform: translateX(var(--sway)) rotate3d(1, .35, 0, 34deg); }
}

/* --------------------------------------------------------------- phones */
@media (max-width: 781px) {
	.pcs-fall { --pcs-fall-h: 92px; }
	.pcs-fall__inner { padding: 8px 12px 8px; gap: 4px; }
	.pcs-fall__main { gap: 6px 10px; }
	.pcs-fall__season { font-size: .6875rem; letter-spacing: .2em; }
	.pcs-fall__offer { font-size: .9375rem; }
	.pcs-fall__sep { height: 13px; }
	.pcs-fall__code { min-height: 24px; padding: 0 11px 0 10px; font-size: .6875rem; }
	.pcs-fall__perks { row-gap: 3px; }
	.pcs-fall__perk { font-size: .625rem; letter-spacing: .08em; line-height: 1.25; }
	.pcs-fall__perk + .pcs-fall__perk::before { margin: 0 .8em; }
	.pcs-fall__perks { --pcs-wave-a: .7; }   /* the light stays visible, a little quieter on a small screen */
	/* fewer, smaller leaves: the three nearest each edge, so both sides get them and the copy stays clear */
	.pcs-fall__leaf { width: calc(var(--size) * .72); height: calc(var(--size) * .72); }
	.pcs-fall__leaf:not(.pcs-fall__leaf--phone) { display: none; }
	/* the copy spans nearly the whole width here, so the fade covers more of it */
	.pcs-fall__leaves {
		-webkit-mask-image: linear-gradient(90deg, #000 0%, #000 9%, rgba(0, 0, 0, .4) 20%, rgba(0, 0, 0, .4) 80%, #000 91%, #000 100%);
		mask-image: linear-gradient(90deg, #000 0%, #000 9%, rgba(0, 0, 0, .4) 20%, rgba(0, 0, 0, .4) 80%, #000 91%, #000 100%);
	}
}
@media (max-width: 479px) {
	/* season and offer share the first line, the code takes the second, the gifts wrap beneath — spaced, without separators,
	   so a wrapped line never starts with one */
	.pcs-fall__sep { display: none; }
	.pcs-fall__perks { column-gap: 16px; }
	.pcs-fall__perk + .pcs-fall__perk::before { display: none; }
}

/* ------------------------------------------------------ reduced motion */
@media (prefers-reduced-motion: reduce) {
	.pcs-fall__leaf, .pcs-fall__leaf-shape { animation: none; }
	.pcs-fall__leaf { opacity: .85; will-change: auto; transform: translate3d(0, var(--ry), 0) rotate(var(--rr)); }
	/* a still scattering along the outer thirds, clear of the copy */
	.pcs-fall__leaf:not(.pcs-fall__leaf--still) { display: none; }
	.pcs-fall__code { transition: none; }
	.pcs-fall__perks { animation: none; }   /* static champagne gold: the highlight stays outside the text */
}

@media print { .pcs-fall { display: none; } }

/* ============================================================ gift lines */
/* "Fall Savings Gift — FREE" on a gift line in the cart, the drawer, the checkout review and the order. */
.pcs-fall-tagline { margin: 5px 0 0; line-height: 1; }
.pcs-fall-tag {
	display: inline-flex; align-items: center; gap: .5em; max-width: 100%; padding: 4px 8px; border-radius: 8px;
	font-family: var(--pg-font-mono, "IBM Plex Mono", ui-monospace, Menlo, monospace); font-size: .59375rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; line-height: 1.3; text-wrap: balance;
	color: var(--pg-gold-300, #E8D28C); background: rgba(212, 175, 55, .1); border: 1px solid var(--pg-gold-line, rgba(212, 175, 55, .35));
}
.pcs-fall-tag::before { content: ""; width: 5px; height: 5px; flex: none; background: currentColor; transform: rotate(45deg); opacity: .9; }
.pcs-fall-free { font-family: var(--pg-font-display, "Manrope", sans-serif); font-weight: 800; letter-spacing: .04em; color: var(--pg-gold-300, #E8D28C); }
.pcs-fall-qty { font-family: var(--pg-font-mono, "IBM Plex Mono", ui-monospace, Menlo, monospace); font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--pg-text-low, #8B98AC); white-space: nowrap; }
.pcs-fall-gift-row .pg-price__each, .pcs-fall-gift-row .pg-drawer__each { display: none; }   /* "FREE each" reads wrong */
.pcs-fall-gift-row .pg-cart__price { display: none; }   /* the cart row already says FREE in its total column and in the tag */
.pg-order-review__item.pcs-fall-gift-row .pcs-fall-qty { display: inline-block; margin-top: 6px; }
/* phones: the tag fits one line beside a 72 px thumbnail; on the narrowest screens it breaks after "GIFT" instead of stretching */
@media (max-width: 479px) { .pcs-fall-tag { font-size: .5625rem; letter-spacing: .04em; padding: 4px 7px; gap: .4em; } }
@media (max-width: 359px) { .pcs-fall-tag { max-width: 20ch; } }