/* MODZGPX Office Style: everything is scoped to html.mgo. No backdrop blur (text stays crisp). */
html.mgo{--mgo-a:#22d3ee;--mgo-b:#8b5cf6;--mgo-glow:0 0 0 1px color-mix(in srgb,var(--mgo-b) 55%,transparent),0 0 28px -4px color-mix(in srgb,var(--mgo-b) 60%,transparent)}

/* palette: the theme's dark colors become the Office navy / violet (the light palette is left alone) */
html.mgo[data-theme="dark"] body{
	--wp--preset--color--dark-base:#05060f;--wp--preset--color--dark-surface:#0f1426;--wp--preset--color--dark-contrast:#e9ecf8;
	--wp--preset--color--dark-muted:#8a94b6;--wp--preset--color--dark-border:rgba(255,255,255,.1);
	--wp--preset--color--dark-primary:#8b7bff;--wp--preset--color--dark-primary-dark:#6d5ef5;--wp--preset--color--dark-primary-soft:rgba(139,123,255,.16);
	--wp--preset--color--dark-accent:#22d3ee;--wp--preset--color--dark-accent-soft:rgba(34,211,238,.14);
	--wp--preset--shadow--card:0 20px 50px -28px rgba(0,0,0,.9);
}

/* slow aurora behind the page */
html.mgo body::before,html.mgo body::after{content:"";position:fixed;z-index:-1;width:60vmax;height:60vmax;border-radius:50%;filter:blur(90px);opacity:.3;pointer-events:none;animation:mgo-aurora 28s ease-in-out infinite alternate}
html.mgo body::before{left:-18vmax;top:-22vmax;background:radial-gradient(circle,var(--mgo-b),transparent 65%)}
html.mgo body::after{right:-20vmax;bottom:-26vmax;background:radial-gradient(circle,var(--mgo-a),transparent 65%);animation-duration:34s;animation-delay:-9s}
html.mgo[data-theme="light"] body::before,html.mgo:not([data-theme]) body::before,html.mgo[data-theme="light"] body::after,html.mgo:not([data-theme]) body::after{opacity:.12}
@keyframes mgo-aurora{to{transform:translate(9vmax,6vmax) scale(1.18)}}

/* cards: soft glass look, neon edge + spotlight on hover (--mx / --my come from office.js) */
html.mgo :is(.wc-block-product,.wp-block-woocommerce-product-template>li,.kreativa-cat,.kreativa-editor__card,.kreativa-review,.kreativa-message,.kreativa-tracking,.kreativa-seller__info>*,.woocommerce-MyAccount-content>section,.wc-block-cart__main,.wc-block-cart__sidebar,.wc-block-checkout__main,.wc-block-checkout__sidebar,.kreativa-event){
	--mx:50%;--my:0%;position:relative;border:1px solid color-mix(in srgb,currentColor 12%,transparent);border-radius:18px;
	background:radial-gradient(420px circle at var(--mx) var(--my),color-mix(in srgb,var(--mgo-a) 12%,transparent),transparent 60%),linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.01) 45%),var(--wp--preset--color--surface);
	box-shadow:inset 0 1px 0 rgba(255,255,255,.1),var(--wp--preset--shadow--card);transition:border-color .25s,box-shadow .25s,transform .25s;
}
html.mgo :is(.wc-block-product,.wp-block-woocommerce-product-template>li,.kreativa-cat):hover{border-color:color-mix(in srgb,var(--mgo-b) 60%,transparent);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),var(--mgo-glow);transform:translateY(-3px)}
html.mgo :is(.wc-block-product,.wp-block-woocommerce-product-template>li) img{border-radius:12px}

/* header: solid, with a neon hairline */
html.mgo .kreativa-header{border-bottom-color:color-mix(in srgb,var(--mgo-a) 30%,transparent)!important;box-shadow:0 10px 40px -24px var(--mgo-b)}

/* buttons: gradient (outline / secondary buttons are left alone) */
html.mgo :is(.wp-element-button,.wp-block-button__link,.wc-block-components-button,button.button,a.button,.single_add_to_cart_button):not(.is-style-outline *,.is-style-outline,.is-secondary,.kreativa-lightbox__btn,.mgl-btn,.mgl-save,.kreativa-pin-composer__row button,.wc-block-components-button.outlined,.wp-block-search__button,.wp-block-navigation__responsive-container-open,.wp-block-navigation__responsive-container-close,.kreativa-mode-toggle){
	position:relative;overflow:hidden;border:0;color:#fff!important;background:linear-gradient(135deg,var(--mgo-a),var(--mgo-b))!important;
	box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 8px 24px -10px var(--mgo-b);transition:box-shadow .25s,transform .15s;
}
html.mgo :is(.wp-element-button,.wp-block-button__link,.wc-block-components-button,button.button,a.button,.single_add_to_cart_button):not(.is-style-outline *,.is-style-outline,.is-secondary,.kreativa-lightbox__btn,.mgl-btn,.mgl-save,.kreativa-pin-composer__row button,.wc-block-components-button.outlined,.wp-block-search__button,.wp-block-navigation__responsive-container-open,.wp-block-navigation__responsive-container-close,.kreativa-mode-toggle):hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 10px 32px -6px var(--mgo-a);filter:none}
html.mgo :is(.wp-element-button,.wp-block-button__link,.wc-block-components-button,button.button,a.button):active{transform:translateY(1px)}

/* form fields: neon focus */
html.mgo :is(input:not([type=checkbox],[type=radio],[type=range],[type=color]),select,textarea):focus{outline:0;border-color:var(--mgo-a)!important;box-shadow:0 0 18px -6px var(--mgo-a)}

/* links in running text and the mode switch pick up the accent */
html.mgo .kreativa-mode-toggle:hover,html.mgo .wc-block-mini-cart__button:hover{filter:drop-shadow(0 0 8px var(--mgo-a))}
html.mgo ::selection{background:color-mix(in srgb,var(--mgo-b) 55%,transparent);color:#fff}

@media (prefers-reduced-motion:reduce){html.mgo body::before,html.mgo body::after{animation:none}html.mgo *{transition-duration:0s!important}}

/* headlines: gradient text like the Office page titles (text color -> cyan). Headings that set their own color,
   and the always-dark sections (hero, footer, call-to-action boxes), are left alone so they stay readable. */
html.mgo :is(h1,h2,h3,.wp-block-post-title,.wp-block-query-title):not(.kreativa-previews *,.kreativa-pinlist *,.kreativa-lightbox__side *,.woocommerce-message *,.wc-block-components-notice-banner *,.kreativa-seller__deliver summary *,.has-text-color,[style*="color"],.has-ink-gradient-background *,.kreativa-hero *,.kreativa-footer *,footer *,.kreativa-fb *,.kreativa-lightbox *,.mgl *,.mgm *){
	background:linear-gradient(90deg,var(--wp--preset--color--contrast),color-mix(in srgb,var(--mgo-a) 75%,var(--wp--preset--color--contrast)));
	-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
	padding-bottom:.08em; /* keeps descenders (g, y) from being clipped by the text-shaped background */
}

/* Motion Home (the homepage): its headlines are split into masked words, so the gradient is painted on the words
   themselves, running from the text color to the accent (the words together read as one gradient). */
html.mgo .mgm :is(h1,h2) .w>i{
	background:linear-gradient(90deg,var(--mg-ink,#f4f2ff),color-mix(in srgb,var(--mg-a,#22d3ee) 55%,#22d3ee 45%));
	background-size:var(--mgo-span,100%) 100%;background-position:var(--mgo-x,0) 0;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
}