/* Shared Gloskin goo-loader system and stable commerce remove controls.
   Presentation only: existing Woo/hero/Quick Add controllers remain state owners. */

/* Final semantic remove owner. Component classes, not page wrappers or JS-applied
   utility classes, define geometry so Home/Shop and fragment refreshes converge. */
.gloskin-ui1-icon-remove{
	background-color:var(--gloskin-remove-icon-color,currentColor);
}
body.gloskin-ui1 a.gloskin-ui1-cart-sheet__item-remove.remove_from_cart_button,
body.gloskin-ui1 button.gloskin-ui1-wishlist-sheet__item-remove[data-gloskin-wishlist-toggle]{
	--gloskin-remove-icon-color:var(--gloskin-accent-strong);
	appearance:none;
	display:grid;
	box-sizing:border-box;
	flex:0 0 28px;
	width:28px;
	min-width:28px;
	max-width:28px;
	height:28px;
	min-height:28px;
	max-height:28px;
	margin:0;
	padding:0;
	border:0;
	border-radius:999px;
	background:var(--gloskin-surface-strong);
	color:var(--gloskin-accent-strong);
	font-size:0;
	line-height:0;
	text-decoration:none;
	cursor:pointer;
	place-items:center;
	align-self:center;
	transition:background-color 140ms ease,box-shadow 140ms ease;
}
body.gloskin-ui1 a.gloskin-ui1-cart-sheet__item-remove.remove_from_cart_button:hover,
body.gloskin-ui1 a.gloskin-ui1-cart-sheet__item-remove.remove_from_cart_button:focus-visible,
body.gloskin-ui1 button.gloskin-ui1-wishlist-sheet__item-remove[data-gloskin-wishlist-toggle]:hover,
body.gloskin-ui1 button.gloskin-ui1-wishlist-sheet__item-remove[data-gloskin-wishlist-toggle]:focus-visible{
	--gloskin-remove-icon-color:var(--gloskin-inverse);
	background:var(--gloskin-accent-strong);
	color:var(--gloskin-inverse);
}
body.gloskin-ui1 a.gloskin-ui1-cart-sheet__item-remove.remove_from_cart_button:focus-visible,
body.gloskin-ui1 button.gloskin-ui1-wishlist-sheet__item-remove[data-gloskin-wishlist-toggle]:focus-visible{
	outline:3px solid var(--gloskin-accent-readable);
	outline-offset:2px;
}

/* One shared goo motion owner. Surfaces provide only footprint/travel sizing. */
.gloskin-ui1-goo-loader-defs{
	position:absolute;
	width:0;
	height:0;
	overflow:hidden;
	pointer-events:none;
}
@keyframes gloskin-ui1-goo-loader-dance{
	0%,100%{transform:translate(-50%,-50%) scale(1)}
	25%{transform:translate(calc(-50% + var(--gloskin-goo-loader-travel)),calc(-50% - var(--gloskin-goo-loader-travel))) scale(.8)}
	50%{transform:translate(calc(-50% - var(--gloskin-goo-loader-travel)),calc(-50% + var(--gloskin-goo-loader-travel))) scale(1.1)}
	75%{transform:translate(calc(-50% + var(--gloskin-goo-loader-travel)),calc(-50% + var(--gloskin-goo-loader-travel))) scale(.9)}
}

/* Cart <-> Checkout keeps its established host/state lifecycle; only the
   animation name is redirected to the shared primitive. */
.gloskin-ui1-commerce-handoff{
	--gloskin-goo-loader-travel:var(--gloskin-commerce-handoff-travel);
}
html.gloskin-ui1-commerce-journey-leaving body.woocommerce-cart .gloskin-ui1-commerce-handoff__blob,
html.gloskin-ui1-commerce-journey-leaving body.woocommerce-checkout .gloskin-ui1-commerce-handoff__blob,
html.gloskin-ui1-commerce-journey-arriving body.woocommerce-cart .gloskin-ui1-commerce-handoff__blob,
html.gloskin-ui1-commerce-journey-arriving body.woocommerce-checkout .gloskin-ui1-commerce-handoff__blob{
	animation-name:gloskin-ui1-goo-loader-dance;
}

/* Native Woo Cart hydration gets a second presentation trigger on the SAME
   handoff host. Woo owns the is-loading class and hydration lifecycle; CSS
   merely reflects that state, so no observer/request/controller is added. */
body.woocommerce-cart:has(.wp-block-woocommerce-cart.is-loading) .gloskin-ui1-commerce-handoff{
	z-index:60;
	opacity:1;
	transform:translate(-50%,-50%) scale(1);
}
body.woocommerce-cart:has(.wp-block-woocommerce-cart.is-loading) .gloskin-ui1-commerce-handoff__blob{
	animation:gloskin-ui1-goo-loader-dance 3.5s infinite ease-in-out;
	animation-delay:var(--gloskin-commerce-handoff-delay,0s);
}

/* Home hero: reuse its existing preparing/ready/failed state machine. The
   existing loader node becomes a compact goo field; no new JS state exists. */
.gloskin-ui1-hero-bg-video__loader{
	--gloskin-goo-loader-size:clamp(96px,8vw,112px);
	--gloskin-goo-loader-blob:clamp(31px,2.8vw,38px);
	--gloskin-goo-loader-hero-blob:clamp(38px,3.4vw,46px);
	--gloskin-goo-loader-travel:clamp(26px,2.5vw,32px);
	position:absolute;
	inset:auto;
	top:50%;
	left:50%;
	display:block;
	width:var(--gloskin-goo-loader-size);
	height:var(--gloskin-goo-loader-size);
	opacity:1;
	pointer-events:none;
	transform:translate(-50%,-50%);
	filter:url("#gloskin-ui1-commerce-handoff-goo");
}
.gloskin-ui1-hero-bg-video__loader-dot{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	border:0;
	border-radius:0;
	background:transparent;
	animation:none;
}
.gloskin-ui1-hero-bg-video__loader::before,
.gloskin-ui1-hero-bg-video__loader::after,
.gloskin-ui1-hero-bg-video__loader-dot::before,
.gloskin-ui1-hero-bg-video__loader-dot::after{
	position:absolute;
	top:50%;
	left:50%;
	width:var(--gloskin-goo-loader-blob);
	height:var(--gloskin-goo-loader-blob);
	border:0;
	border-radius:50%;
	background:var(--gloskin-accent);
	content:"";
	pointer-events:none;
	transform:translate(-50%,-50%) scale(1);
	transform-origin:center;
}
.gloskin-ui1-hero-bg-video__loader-dot::after{
	width:var(--gloskin-goo-loader-hero-blob);
	height:var(--gloskin-goo-loader-hero-blob);
	background:var(--gloskin-accent-strong);
	box-shadow:0 0 20px color-mix(in srgb,var(--gloskin-accent) 38%,transparent);
}
.gloskin-ui1-hero--video-only.is-video-preparing .gloskin-ui1-hero-bg-video__loader::before,
.gloskin-ui1-hero--video-only.is-video-preparing .gloskin-ui1-hero-bg-video__loader::after,
.gloskin-ui1-hero--video-only.is-video-preparing .gloskin-ui1-hero-bg-video__loader-dot::before,
.gloskin-ui1-hero--video-only.is-video-preparing .gloskin-ui1-hero-bg-video__loader-dot::after{
	animation:gloskin-ui1-goo-loader-dance 3.5s infinite ease-in-out;
	will-change:transform;
}
.gloskin-ui1-hero--video-only.is-video-preparing .gloskin-ui1-hero-bg-video__loader::before{animation-delay:0s}
.gloskin-ui1-hero--video-only.is-video-preparing .gloskin-ui1-hero-bg-video__loader::after{animation-delay:-.8s}
.gloskin-ui1-hero--video-only.is-video-preparing .gloskin-ui1-hero-bg-video__loader-dot::before{animation-delay:-1.6s}
.gloskin-ui1-hero--video-only.is-video-preparing .gloskin-ui1-hero-bg-video__loader-dot::after{animation-delay:-2.4s}

/* Quick Add + discovery-card loading presentation moved to the canonical
   neutral Apple skeleton owner. Hero/video and journey goo loaders remain
   intentionally separate critical-transition primitives. */
@media (max-width:760px){
	.gloskin-ui1-hero-bg-video__loader{
		--gloskin-goo-loader-size:clamp(82px,23vw,96px);
		--gloskin-goo-loader-blob:clamp(28px,8vw,32px);
		--gloskin-goo-loader-hero-blob:clamp(34px,10vw,40px);
		--gloskin-goo-loader-travel:clamp(22px,6.4vw,27px);
	}
}

.gloskin-ui1-commerce-handoff__g{
	position:absolute;
	top:50%;
	left:50%;
	z-index:2;
	width:34px;
	height:42px;
	pointer-events:none;
	transform:translate(-50%,-50%);
	filter:brightness(0) invert(1);
}

/* Page-to-page cross-document transition overlay.
   This overlay is presentation-only: JS owns the is-active lifecycle, BFCache
   cleanup runs on pageshow, and a hard timeout prevents permanent lockout.
   Woo AJAX/cart/checkout/modal flows are explicitly excluded in initPageTransitions(). */
:root{
	--gl-transition-bg:transparent;
	--gl-transition-duration:360ms;
	--gl-transition-g-size:104px;
}
.gloskin-ui1-page-transition{
	position:fixed;
	inset:0;
	z-index:9990;
	display:flex;
	align-items:center;
	justify-content:center;
	background:var(--gl-transition-bg);
	pointer-events:none;
	opacity:0;
	transition:opacity var(--gl-transition-duration) cubic-bezier(.22,1,.36,1);
}
.gloskin-ui1-page-transition.is-active{
	pointer-events:all;
	opacity:1;
}
.gloskin-ui1-page-transition__blob{
	--gloskin-goo-loader-size:var(--gl-transition-g-size);
	--gloskin-goo-loader-blob:clamp(28px,2.6vw,34px);
	--gloskin-goo-loader-hero-blob:clamp(34px,3.2vw,42px);
	--gloskin-goo-loader-travel:clamp(22px,2.1vw,28px);
	position:relative;
	display:block;
	width:var(--gloskin-goo-loader-size);
	height:var(--gloskin-goo-loader-size);
	filter:url("#gloskin-ui1-commerce-handoff-goo");
}
.gloskin-ui1-page-transition__blob>span{
	position:absolute;
	inset:0;
	display:block;
	width:100%;
	height:100%;
	font-size:0;
	line-height:0;
	color:transparent;
}
.gloskin-ui1-page-transition__blob::before,
.gloskin-ui1-page-transition__blob::after,
.gloskin-ui1-page-transition__blob>span::before,
.gloskin-ui1-page-transition__blob>span::after{
	position:absolute;
	top:50%;
	left:50%;
	width:var(--gloskin-goo-loader-blob);
	height:var(--gloskin-goo-loader-blob);
	border:0;
	border-radius:50%;
	background:var(--gloskin-accent);
	content:"";
	pointer-events:none;
	transform:translate(-50%,-50%) scale(1);
	transform-origin:center;
	will-change:transform;
	animation:gloskin-ui1-goo-loader-dance 3.5s infinite ease-in-out;
}
.gloskin-ui1-page-transition__blob>span::after{
	width:var(--gloskin-goo-loader-hero-blob);
	height:var(--gloskin-goo-loader-hero-blob);
	background:var(--gloskin-accent-strong);
	box-shadow:0 0 16px color-mix(in srgb,var(--gloskin-accent) 34%,transparent);
}
.gloskin-ui1-page-transition__blob::before{animation-delay:0s}
.gloskin-ui1-page-transition__blob::after{animation-delay:-.8s}
.gloskin-ui1-page-transition__blob>span::before{animation-delay:-1.6s}
.gloskin-ui1-page-transition__blob>span::after{animation-delay:-2.4s}
.gloskin-ui1-page-transition__g{
	position:absolute;
	top:50%;
	left:50%;
	z-index:2;
	width:calc(var(--gl-transition-g-size) * .54);
	height:auto;
	pointer-events:none;
	transform:translate(-50%,-50%);
	filter:brightness(0) invert(1);
}

@media (max-width:760px){
	:root{--gl-transition-g-size:84px}
}

@media (prefers-reduced-motion:reduce){
	body.woocommerce-cart:has(.wp-block-woocommerce-cart.is-loading) .gloskin-ui1-commerce-handoff__blob,
	html.gloskin-ui1-commerce-journey-leaving body.woocommerce-cart .gloskin-ui1-commerce-handoff__blob,
	html.gloskin-ui1-commerce-journey-leaving body.woocommerce-checkout .gloskin-ui1-commerce-handoff__blob,
	html.gloskin-ui1-commerce-journey-arriving body.woocommerce-cart .gloskin-ui1-commerce-handoff__blob,
	html.gloskin-ui1-commerce-journey-arriving body.woocommerce-checkout .gloskin-ui1-commerce-handoff__blob,
	.gloskin-ui1-hero--video-only.is-video-preparing .gloskin-ui1-hero-bg-video__loader::before,
	.gloskin-ui1-hero--video-only.is-video-preparing .gloskin-ui1-hero-bg-video__loader::after,
	.gloskin-ui1-hero--video-only.is-video-preparing .gloskin-ui1-hero-bg-video__loader-dot::before,
	.gloskin-ui1-hero--video-only.is-video-preparing .gloskin-ui1-hero-bg-video__loader-dot::after{
		animation:none;
		will-change:auto;
	}
	.gloskin-ui1-page-transition{transition:none}
	.gloskin-ui1-page-transition__blob::before,
	.gloskin-ui1-page-transition__blob::after,
	.gloskin-ui1-page-transition__blob>span::before,
	.gloskin-ui1-page-transition__blob>span::after{animation:none;will-change:auto}
}