/* =========================================================================
   GETU Shopping — minicart drawer CSS
   -------------------------------------------------------------------------
   Ported from the reference's own injectMinicart() <style> block (repo-root
   cart.js), authored here as a real stylesheet instead of an injected <style>
   tag — consistent with how every other component in this theme ships its
   CSS (getu-chrome.css, getu-home.css), and loaded before the drawer ever
   opens so there is no flash of unstyled motion on first use.

   #minicart/#minicart-backdrop are appended directly to <body> by
   getu-cart.js, not nested under #brx-header or .getu-vanilla-scope (the
   drawer has to work on every page the header renders on, not only the
   homepage) — so the reference's --shadow-deep/--shadow-float/--ease-*
   custom-property ALIASES, defined for those two scopes in getu-chrome.css,
   never reach it. Redeclared here, scoped to the drawer's own two root
   elements, same names the ported markup asks for. --shadow-deep is new: no
   existing scope aliases it yet, so its literal value comes straight from
   the reference's own :root (assets/css/style.css) rather than inventing a
   fourth --getu-shadow-* global for a single component.

   .tracking-tightest is ported the same way, for the same reason: the
   drawer heading uses it and no existing wp-child stylesheet defines it yet
   (only the reference's own assets/css/style.css does).

   Ports to production unchanged: no URLs, no ids, no environment
   assumptions.
   ========================================================================= */

#minicart,
#minicart-backdrop {
	--shadow-deep: 0 10px 30px rgba(20, 6, 10, .35), 0 30px 60px rgba(20, 6, 10, .45);
	--shadow-float: var(--getu-shadow-float);
	--ease-out: var(--getu-ease-out);
	--ease-spring: var(--getu-ease-spring);
}

.tracking-tightest { letter-spacing: -0.03em; }

#minicart { transition: transform .38s var(--ease-out, cubic-bezier(.16, 1, .3, 1)); }
#minicart-backdrop { transition: opacity .3s var(--ease-out, ease); }

.mc-remove { transition: color .2s, background-color .2s; }
.mc-remove:hover { color: var(--getu-color-wine-600); background: rgba(110, 26, 42, .07); }

[data-cart-count].pulse { animation: getuCartPulse .5s var(--ease-spring, cubic-bezier(.34, 1.56, .64, 1)); }
@keyframes getuCartPulse {
	0% { transform: scale(1); }
	35% { transform: scale(1.4); }
	100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
	#minicart,
	#minicart-backdrop { transition: none; }
	[data-cart-count].pulse { animation: none; }
}

/* =========================================================================
   Cart PAGE (/carrinho/) — rendered into #cart-root by getu-cart-page.js.
   Only what the vanilla utilities can't express: the empty-state category
   tiles (ported from carrinho.html's own <style>), the quantity-stepper
   button hover, and the during-fetch busy veil. The tiles live inside
   .getu-vanilla-scope, where getu-chrome.css already aliases
   --shadow-raised/--shadow-float/--ease-out, so the reference values resolve.
   ========================================================================= */
.tile { position: relative; overflow: hidden; box-shadow: var(--shadow-raised); transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out); }
.tile:hover { transform: translateY(-6px); box-shadow: var(--shadow-float); }
.tile img { transition: transform .7s var(--ease-out); }
.tile:hover img { transform: scale(1.07); }

.mc-step { transition: color .2s, background-color .2s; }
.mc-step:hover { color: var(--getu-color-wine-600); background: rgba(110, 26, 42, .07); }

/* While a mutation is in flight, dim the cart and block further clicks so a
   double-tap can't fire two quantity changes before the snapshot returns. */
#cart-root.is-busy { opacity: .6; pointer-events: none; transition: opacity .15s var(--ease-out, ease); }

@media (prefers-reduced-motion: reduce) {
	.tile,
	.tile img { transition: none; }
}
