/* ==================================================================
   08 - FOOTER
   Brand block, link columns, social icons, bottom bar.

   Mobile first. Below 600px the link columns collapse to labels and
   open with the particle spray. From 600px up every link is shown in
   a normal multi-column layout.
   ================================================================== */


/* ------------------------------------------------------------------
   SHELL
   ------------------------------------------------------------------ */

.wo-footer {
	position: relative;
	z-index: var(--wo-z-content);
	margin-top: auto;

	/* Same glass recipe as the header, at lower intensity - a large
	   surface needs less wash than a small pill to read the same. */
	background: linear-gradient(
		168deg,
		rgba(255, 255, 255, 0.095) 0%,
		rgba(255, 255, 255, 0.035) 45%,
		rgba(255, 255, 255, 0.055) 100%
	);
	border-top: 1px solid rgba(255, 255, 255, 0.16);

	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.22),
		inset 0 0 90px rgba(214, 202, 255, 0.04),
		0 -18px 50px rgba(6, 3, 20, 0.30);

	color: var(--wo-text-muted);

	backdrop-filter: blur(30px) saturate(185%) brightness(1.05);
	-webkit-backdrop-filter: blur(30px) saturate(185%) brightness(1.05);
}

/* Light catching the top edge, brightest at the centre. */
.wo-footer::before {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: min(100%, 1100px);
	height: 1px;
	background: linear-gradient(
		90deg,
		transparent,
		rgba(255, 255, 255, 0.38),
		var(--wo-primary-line),
		rgba(255, 255, 255, 0.38),
		transparent
	);
	pointer-events: none;
}

/* Broad specular sweep across the surface. Sits above the backdrop
   blur without being blurred itself - that contrast is what makes
   the surface read as crystal rather than as frosting. */
.wo-footer::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background:
		linear-gradient(
			125deg,
			rgba(255, 255, 255, 0.09) 0%,
			rgba(255, 255, 255, 0.02) 28%,
			transparent 50%
		),
		radial-gradient(
			90% 130% at 8% -20%,
			rgba(255, 255, 255, 0.11),
			transparent 60%
		);
}

.wo-footer__main,
.wo-footer__bottom {
	position: relative;
	z-index: 1;
}

/* Older Android browsers have no backdrop-filter. Without this the
   footer would render almost transparent over the page content. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.wo-footer {
		background: rgba(15, 10, 32, 0.96);
	}

	.wo-footer::after {
		display: none;
	}
}

.wo-footer__main {
	padding-block: clamp(3rem, 7vw, 5rem);
}


/* ------------------------------------------------------------------
   BRAND COLUMN
   ------------------------------------------------------------------ */

.wo-footer__brand {
	max-width: 340px;
}

.wo-footer__logo {
	display: inline-flex;
	margin-bottom: var(--wo-space-5);
	text-decoration: none;
}

.wo-footer__logo .wo-logo__text {
	font-size: var(--wo-text-lg);
}

.wo-footer__about {
	font-size: var(--wo-text-base);
	line-height: var(--wo-leading-relaxed);
	color: var(--wo-text-muted);
	margin-bottom: var(--wo-space-6);
}


/* ------------------------------------------------------------------
   SOCIAL
   Circular outline icons, treated as small glass discs.
   ------------------------------------------------------------------ */

.wo-social {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wo-space-3);
	list-style: none;
	margin: 0;
	padding: 0;
}

.wo-social__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 40px;
	height: 40px;

	color: var(--wo-text-muted);

	background: linear-gradient(
		140deg,
		rgba(255, 255, 255, 0.10) 0%,
		rgba(255, 255, 255, 0.03) 100%
	);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: var(--wo-radius-circle);

	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);

	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);

	transition:
		color var(--wo-transition),
		background var(--wo-transition),
		border-color var(--wo-transition),
		box-shadow var(--wo-transition),
		transform var(--wo-duration-fast) var(--wo-ease);
}

.wo-social__link:hover {
	color: var(--wo-text);
	background: var(--wo-primary);
	border-color: var(--wo-primary);
	box-shadow:
		var(--wo-glow-primary),
		inset 0 1px 0 rgba(255, 255, 255, 0.28);
	transform: translateY(-2px);
}

.wo-social__link:focus-visible {
	outline: none;
	box-shadow: var(--wo-ring);
}

.wo-social__link svg {
	width: 17px;
	height: 17px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}


/* ------------------------------------------------------------------
   LINK COLUMNS
   EXPLORE / HELP / LEGAL
   ------------------------------------------------------------------ */

.wo-footer__col {
	min-width: 0;
}

.wo-footer__heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wo-space-3);

	width: 100%;
	padding: 0;
	margin-bottom: var(--wo-space-5);

	font-family: var(--wo-font-body);
	font-size: var(--wo-text-xs);
	font-weight: var(--wo-weight-bold);
	letter-spacing: var(--wo-tracking-wider);
	text-transform: uppercase;
	text-align: left;
	color: var(--wo-gold);

	background: none;
	border: none;
}

/* Chevron only appears on phones, where the columns collapse. */
.wo-footer__heading-icon {
	display: none;
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform var(--wo-transition);
}

.wo-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wo-space-4);
}

.wo-footer__list a {
	display: inline-block;
	font-size: var(--wo-text-base);
	color: var(--wo-text-muted);
	text-decoration: none;
	transition: color var(--wo-transition), transform var(--wo-transition);
}

.wo-footer__list a:hover {
	color: var(--wo-text);
	transform: translateX(3px);
}


/* ------------------------------------------------------------------
   COLLAPSIBLE PANEL
   Closed by default; 13-responsive.css forces every panel open from
   600px up, where the spray interaction is switched off entirely.
   ------------------------------------------------------------------ */

.wo-footer__panel {
	display: grid;
	grid-template-rows: 0fr;
	overflow: hidden;
	transition: grid-template-rows var(--wo-duration-slow) var(--wo-ease-out);
}

.wo-footer__panel > * {
	min-height: 0;
}

.wo-footer__col.is-open .wo-footer__panel {
	grid-template-rows: 1fr;
}

/* Fallback for browsers without grid-row animation support. */
@supports not (grid-template-rows: 0fr) {
	.wo-footer__panel {
		display: block;
		max-height: 0;
		transition: max-height var(--wo-duration-slow) var(--wo-ease-out);
	}

	.wo-footer__col.is-open .wo-footer__panel {
		max-height: 600px;
	}
}


/* ------------------------------------------------------------------
   NEWSLETTER
   Optional block in the brand column.
   ------------------------------------------------------------------ */

.wo-footer__newsletter {
	margin-top: var(--wo-space-8);
}

.wo-footer__newsletter-title {
	font-family: var(--wo-font-body);
	font-size: var(--wo-text-sm);
	font-weight: var(--wo-weight-semibold);
	color: var(--wo-text);
	margin-bottom: var(--wo-space-3);
}

.wo-footer__newsletter .wo-inline-form .wo-input {
	min-height: 44px;
	border-radius: var(--wo-radius-pill);
}


/* ------------------------------------------------------------------
   BOTTOM BAR
   Copyright is centred at every width.
   ------------------------------------------------------------------ */

.wo-footer__bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.10);
	padding-block: var(--wo-space-6);
}

.wo-footer__bottom-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--wo-space-4);
	text-align: center;
}

.wo-footer__copy {
	width: 100%;
	font-size: var(--wo-text-sm);
	color: var(--wo-text-dim);
	text-align: center;
	margin: 0;
}

.wo-footer__legal {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--wo-space-2) var(--wo-space-5);
	list-style: none;
	margin: 0;
	padding: 0;
}

.wo-footer__legal a {
	font-size: var(--wo-text-xs);
	color: var(--wo-text-dim);
	text-decoration: none;
}

.wo-footer__legal a:hover {
	color: var(--wo-text-muted);
}


/* ------------------------------------------------------------------
   PAYMENT ICONS
   Optional row of accepted payment methods.
   ------------------------------------------------------------------ */

.wo-footer__payments {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wo-space-3);
	list-style: none;
	margin: 0;
	padding: 0;
}

.wo-footer__payments li {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 26px;
	padding-inline: var(--wo-space-3);

	font-size: 10px;
	font-weight: var(--wo-weight-semibold);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--wo-text-dim);

	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--wo-radius-xs);
}


/* ------------------------------------------------------------------
   BACK TO TOP
   Appears after scrolling; toggled by navigation.js.
   ------------------------------------------------------------------ */

.wo-to-top {
	position: fixed;
	right: var(--wo-gutter);
	bottom: var(--wo-space-6);
	z-index: var(--wo-z-sticky);

	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 44px;
	height: 44px;

	color: var(--wo-text);

	background: linear-gradient(
		140deg,
		rgba(255, 255, 255, 0.16) 0%,
		rgba(255, 255, 255, 0.05) 100%
	);
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: var(--wo-radius-circle);

	box-shadow:
		0 10px 28px rgba(6, 3, 20, 0.48),
		inset 0 1px 0 rgba(255, 255, 255, 0.30);

	backdrop-filter: blur(18px) saturate(180%);
	-webkit-backdrop-filter: blur(18px) saturate(180%);

	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition:
		opacity var(--wo-transition),
		visibility var(--wo-transition),
		transform var(--wo-transition),
		background var(--wo-transition),
		box-shadow var(--wo-transition);
}

.wo-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.wo-to-top:hover {
	background: var(--wo-primary);
	border-color: var(--wo-primary);
	box-shadow:
		var(--wo-glow-primary),
		inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.wo-to-top svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.wo-to-top {
		background: rgba(38, 28, 78, 0.92);
	}
}

/* Keep it clear of the mobile sticky add-to-cart bar. */
body.has-sticky-cart .wo-to-top {
	bottom: calc(var(--wo-space-6) + 72px);
}


/* ==================================================================
   SPRAY NAVIGATION (phones only, below 600px)
   Labels stay visible; links are released along particle trails.
   ================================================================== */

@media (max-width: 599.98px) {

	.wo-grid--footer {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.wo-footer__brand {
		grid-column: 1 / -1;
		max-width: none;
		margin-bottom: var(--wo-space-10);
	}

	/* Label left, links right - the origin and destination of the
	   spray. Position anchors the SVG overlay. */
	.wo-footer__col {
		position: relative;
		display: grid;
		grid-template-columns: auto 1fr;
		column-gap: clamp(2rem, 13vw, 5rem);
		align-items: start;
		padding-block: 0;
	}

	.wo-footer__heading {
		margin: 0;
		padding-block: var(--wo-space-3);
		justify-content: flex-start;
		gap: var(--wo-space-3);
		white-space: nowrap;
		cursor: pointer;
		transition: color var(--wo-transition), text-shadow var(--wo-transition);
	}

	/* Chevron points right when closed, so a collapsed section reads
	   as tappable. */
	.wo-footer__heading-icon {
		display: block;
		width: 12px;
		height: 12px;
		flex: 0 0 auto;
		opacity: 0.6;
		transform: rotate(-90deg);
		transition:
			transform 340ms var(--wo-ease-out),
			opacity var(--wo-transition);
	}

	/* Once open, the spray is the only indicator needed - the arrow
	   fades out rather than disappearing abruptly. Kept in the layout
	   so the label does not shift sideways as it goes. */
	.wo-footer__col.is-open .wo-footer__heading-icon,
	.wo-footer__heading[aria-expanded='true'] .wo-footer__heading-icon {
		opacity: 0;
		transform: rotate(-90deg) scale(0.6);
	}

	.wo-footer__col.is-open .wo-footer__heading {
		color: #FFF6DC;
		text-shadow: 0 0 14px rgba(245, 197, 66, 0.55);
	}

	/* Layout settles instantly so the particle trails can be plotted
	   against final coordinates; the reveal is carried by the
	   particles and the links, not by a height transition. */
	.wo-footer__panel {
		transition: none;
		visibility: hidden;
	}

	.wo-footer__col.is-open .wo-footer__panel,
	.wo-footer__col.is-closing .wo-footer__panel {
		visibility: visible;
	}

	.wo-footer__col.is-closing .wo-footer__panel {
		grid-template-rows: 1fr;
	}

	.wo-footer__list {
		gap: var(--wo-space-5);
		padding-block: var(--wo-space-5);
	}

	/* Links settle in as their trail lands. --link-delay is written
	   per item by footer-spray.js. */
	.wo-footer__list li {
		opacity: 0;
		transform: translateX(-10px);
		transition:
			opacity 420ms var(--wo-ease-out),
			transform 420ms var(--wo-ease-out);
	}

	.wo-footer__col.is-open .wo-footer__list li {
		opacity: 1;
		transform: none;
		transition-delay: var(--link-delay, 0ms);
	}

	.wo-footer__col.is-closing .wo-footer__list li {
		opacity: 0;
		transform: translateX(-6px);
		transition-duration: 200ms;
		transition-delay: 0ms;
	}

	/* Measuring pass: forced open for one synchronous frame so the
	   script can read final link positions. Never painted. */
	.wo-footer__col.wo-measuring .wo-footer__panel {
		grid-template-rows: 1fr;
		visibility: visible;
		transition: none;
	}

	/* ---- Particle overlay ---- */

	.wo-spray {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 0;
		overflow: visible;
		pointer-events: none;
	}

	.wo-spray__dot {
		fill: #F4F0FF;
		opacity: 0;

		transform-box: fill-box;
		transform-origin: center;
		transform: scale(0.2);

		filter: drop-shadow(0 0 3px rgba(226, 218, 255, 0.75));

		animation: wo-spray-in 460ms var(--wo-ease-out) forwards;
		animation-delay: var(--dot-delay, 0ms);
	}

	.wo-footer__col.is-closing .wo-spray__dot {
		animation: wo-spray-out 220ms var(--wo-ease) forwards;
		animation-delay: var(--dot-delay, 0ms);
	}

	/* Content sits above the trails. */
	.wo-footer__heading,
	.wo-footer__panel {
		position: relative;
		z-index: 1;
	}
}

@keyframes wo-spray-in {
	0%   { opacity: 0; transform: scale(0.2); }
	55%  { opacity: var(--dot-o, 0.8); transform: scale(1.25); }
	100% { opacity: calc(var(--dot-o, 0.8) * 0.75); transform: scale(1); }
}

@keyframes wo-spray-out {
	0%   { opacity: calc(var(--dot-o, 0.8) * 0.75); transform: scale(1); }
	100% { opacity: 0; transform: scale(0.2); }
}

/* Reduced motion: plain expand, no particles. */
@media (prefers-reduced-motion: reduce) and (max-width: 599.98px) {

	.wo-footer__list li {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.wo-spray {
		display: none;
	}
}

/* Narrow phones: tighten the gap so link text keeps its width. */
@media (max-width: 400px) {

	.wo-footer__col {
		column-gap: 1.75rem;
	}
}


/* ==================================================================
   TABLET FOOTER - CLEAN COLUMNS
   From 600px the footer shows every link. No spray, no toggling.
   ================================================================== */

@media (min-width: 600px) and (max-width: 991.98px) {

	.wo-grid--footer {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		column-gap: clamp(1.25rem, 3vw, 2.25rem);
		row-gap: var(--wo-space-10);
		align-items: start;
	}

	.wo-footer__brand {
		grid-column: 1 / -1;
		max-width: 540px;
	}

	.wo-footer__col {
		display: block;
	}

	.wo-footer__heading {
		margin-bottom: var(--wo-space-4);
		padding-block: 0;
	}

	.wo-footer__list {
		padding: 0;
		gap: var(--wo-space-2);
	}

	.wo-footer__list a {
		min-height: 0;
		line-height: 1.45;
	}
}