/* ========================================================================== 
   WISEASS GOODS — GLOBAL DESIGN SYSTEM
   Blocksy handles the structure. This file handles the personality problem.
   ========================================================================== */

:root {
	--wg-ink: #17131f;
	--wg-ink-soft: #292233;
	--wg-cream: #fff2cf;
	--wg-paper: #f7dfad;
	--wg-orange: #f45b32;
	--wg-yellow: #f6c94c;
	--wg-pink: #ed4c86;
	--wg-blue: #4bb6cf;
	--wg-green: #7dbd60;
	--wg-white: #fffdf6;
	--wg-border: 3px solid var(--wg-ink);
	--wg-border-thick: 5px solid var(--wg-ink);
	--wg-radius-sm: 12px;
	--wg-radius: 22px;
	--wg-radius-xl: 44px;
	--wg-shadow: 7px 7px 0 var(--wg-ink);
	--wg-shadow-small: 4px 4px 0 var(--wg-ink);
	--wg-shadow-hover: 10px 10px 0 var(--wg-ink);
	--wg-content: min(1180px, calc(100vw - 40px));
	--wg-font-display: "Arial Black", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--wg-font-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--wg-ease: cubic-bezier(.2, .8, .2, 1);
}

html {
	scroll-behavior: smooth;
}

body.wiseass-goods-site {
	position: relative;
	isolation: isolate;
	background:
		radial-gradient(circle at 15% 10%, rgba(244, 91, 50, .10), transparent 28rem),
		radial-gradient(circle at 90% 15%, rgba(75, 182, 207, .10), transparent 24rem),
		var(--wg-cream);
	color: var(--wg-ink);
	font-family: var(--wg-font-body);
	accent-color: var(--wg-orange);
}

body.wiseass-goods-site::selection {
	background: var(--wg-yellow);
	color: var(--wg-ink);
}

body.wiseass-goods-site a {
	text-decoration-thickness: .11em;
	text-underline-offset: .18em;
}

body.wiseass-goods-site :where(h1, h2, h3, h4, h5, h6) {
	color: var(--wg-ink);
	font-family: var(--wg-font-display);
	font-weight: 900;
	letter-spacing: -.035em;
	line-height: .98;
	text-wrap: balance;
}

body.wiseass-goods-site :where(p, li) {
	line-height: 1.68;
}

body.wiseass-goods-site :focus-visible {
	outline: 4px solid var(--wg-blue);
	outline-offset: 4px;
}

/* Keep the site's real content above the visual-effects layer. */
body.wiseass-goods-site > :not(.wg-effects) {
	position: relative;
	z-index: 1;
}

/* ========================================================================== 
   BACKGROUND EFFECTS
   ========================================================================== */

.wg-effects {
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
}

.wg-starfield {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: .62;
}

.wg-cursor-glow {
	position: fixed;
	left: 0;
	top: 0;
	width: 340px;
	height: 340px;
	border-radius: 999px;
	background: radial-gradient(circle, rgba(246, 201, 76, .22), rgba(244, 91, 50, .08) 42%, transparent 72%);
	transform: translate3d(-999px, -999px, 0);
	will-change: transform;
	mix-blend-mode: multiply;
}

.wg-film-grain {
	position: absolute;
	inset: -50%;
	opacity: .055;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
	animation: wg-grain .28s steps(2) infinite;
}

@keyframes wg-grain {
	0% { transform: translate3d(-2%, 1%, 0); }
	25% { transform: translate3d(2%, -1%, 0); }
	50% { transform: translate3d(-1%, 2%, 0); }
	75% { transform: translate3d(1%, -2%, 0); }
	100% { transform: translate3d(0, 0, 0); }
}

/* ========================================================================== 
   BLOCKSY HEADER + NAVIGATION
   ========================================================================== */

body.wiseass-goods-site [data-header*="type-1"] {
	border-bottom: var(--wg-border);
	box-shadow: 0 5px 0 rgba(23, 19, 31, .12);
}

body.wiseass-goods-site [data-header*="type-1"] .ct-header-text,
body.wiseass-goods-site [data-header*="type-1"] .menu-item > a {
	font-weight: 850;
	letter-spacing: .02em;
}

body.wiseass-goods-site [data-header*="type-1"] .menu-item > a {
	position: relative;
}

body.wiseass-goods-site [data-header*="type-1"] .menu-item > a::after {
	content: "";
	position: absolute;
	left: 18%;
	right: 18%;
	bottom: 6px;
	height: 4px;
	border-radius: 99px;
	background: var(--wg-orange);
	transform: scaleX(0) rotate(-2deg);
	transform-origin: left;
	transition: transform .22s var(--wg-ease);
}

body.wiseass-goods-site [data-header*="type-1"] .menu-item > a:hover::after,
body.wiseass-goods-site [data-header*="type-1"] .current-menu-item > a::after {
	transform: scaleX(1) rotate(-2deg);
}

body.wiseass-goods-site .ct-cart-item,
body.wiseass-goods-site .ct-header-account {
	transition: transform .2s var(--wg-ease);
}

body.wiseass-goods-site .ct-cart-item:hover,
body.wiseass-goods-site .ct-header-account:hover {
	transform: translateY(-2px) rotate(-2deg);
}

/* ========================================================================== 
   REUSABLE CUSTOM CLASSES
   Add these in the WordPress block editor under Advanced > Additional CSS class.
   ========================================================================== */

.wg-wrap {
	width: var(--wg-content);
	margin-inline: auto;
}

.wg-section {
	position: relative;
	padding: clamp(64px, 9vw, 128px) 0;
}

.wg-section--ink {
	background: var(--wg-ink);
	color: var(--wg-cream);
}

.wg-section--ink :where(h1, h2, h3, h4, h5, h6) {
	color: var(--wg-cream);
}

.wg-section--orange { background: var(--wg-orange); }
.wg-section--yellow { background: var(--wg-yellow); }
.wg-section--blue { background: var(--wg-blue); }
.wg-section--pink { background: var(--wg-pink); }

.wg-panel {
	position: relative;
	background: var(--wg-white);
	border: var(--wg-border);
	border-radius: var(--wg-radius);
	box-shadow: var(--wg-shadow);
	padding: clamp(24px, 4vw, 48px);
}

.wg-panel--tilted {
	transform: rotate(-1deg);
}

.wg-kicker {
	display: inline-flex;
	align-items: center;
	gap: .55em;
	margin-bottom: 16px;
	padding: 8px 13px;
	border: 2px solid currentColor;
	border-radius: 999px;
	font-family: var(--wg-font-display);
	font-size: .78rem;
	font-weight: 900;
	letter-spacing: .09em;
	line-height: 1;
	text-transform: uppercase;
	transform: rotate(-1deg);
}

.wg-display {
	font-family: var(--wg-font-display);
	font-size: clamp(3.5rem, 10vw, 9.5rem);
	font-weight: 950;
	letter-spacing: -.065em;
	line-height: .83;
	text-transform: uppercase;
}

.wg-outline-text {
	color: transparent !important;
	-webkit-text-stroke: clamp(1px, .04em, 4px) currentColor;
	paint-order: stroke fill;
}

.wg-shadow-text {
	text-shadow: .055em .055em 0 var(--wg-yellow), .1em .1em 0 var(--wg-ink);
}

.wg-sticker {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 92px;
	min-height: 92px;
	padding: 15px;
	background: var(--wg-yellow);
	border: var(--wg-border);
	border-radius: 45% 55% 52% 48% / 50% 45% 55% 50%;
	box-shadow: var(--wg-shadow-small);
	font-family: var(--wg-font-display);
	font-size: .82rem;
	font-weight: 900;
	line-height: 1.05;
	text-align: center;
	text-transform: uppercase;
	transform: rotate(7deg);
}

.wg-sticker:hover {
	animation: wg-wobble .45s ease-in-out;
}

@keyframes wg-wobble {
	0%, 100% { transform: rotate(7deg) scale(1); }
	35% { transform: rotate(-4deg) scale(1.08); }
	70% { transform: rotate(11deg) scale(1.04); }
}

.wg-tape {
	position: relative;
}

.wg-tape::before {
	content: "";
	position: absolute;
	z-index: 3;
	left: 50%;
	top: -18px;
	width: 112px;
	height: 34px;
	background: rgba(246, 201, 76, .82);
	border: 1px solid rgba(23, 19, 31, .25);
	transform: translateX(-50%) rotate(-3deg);
	clip-path: polygon(4% 3%, 98% 0, 95% 94%, 2% 100%);
}

.wg-rough-edge {
	clip-path: polygon(0 2%, 8% 0, 18% 2%, 29% 0, 39% 2%, 49% 0, 60% 2%, 70% 0, 82% 2%, 91% 0, 100% 2%, 100% 98%, 91% 100%, 81% 98%, 70% 100%, 59% 98%, 48% 100%, 38% 98%, 27% 100%, 16% 98%, 7% 100%, 0 98%);
}

.wg-marquee {
	display: flex;
	overflow: hidden;
	width: 100%;
	border-block: var(--wg-border-thick);
	background: var(--wg-yellow);
	color: var(--wg-ink);
}

.wg-marquee__track {
	display: flex;
	flex: none;
	min-width: max-content;
	animation: wg-marquee 24s linear infinite;
}

.wg-marquee:hover .wg-marquee__track {
	animation-play-state: paused;
}

.wg-marquee__item {
	display: inline-flex;
	align-items: center;
	gap: 1.4rem;
	padding: 16px 24px;
	font-family: var(--wg-font-display);
	font-size: clamp(1.05rem, 2vw, 1.7rem);
	font-weight: 900;
	letter-spacing: .025em;
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
}

.wg-marquee__item::after {
	content: "✦";
	font-size: 1.1em;
}

@keyframes wg-marquee {
	to { transform: translateX(-50%); }
}

.wg-button,
body.wiseass-goods-site .wp-element-button,
body.wiseass-goods-site .wp-block-button__link {
	position: relative;
	isolation: isolate;
	border: var(--wg-border) !important;
	border-radius: 999px !important;
	box-shadow: var(--wg-shadow-small) !important;
	font-family: var(--wg-font-display);
	font-weight: 900 !important;
	letter-spacing: .025em;
	text-transform: uppercase;
	transition: transform .18s var(--wg-ease), box-shadow .18s var(--wg-ease), background-color .18s ease;
}

.wg-button:hover,
body.wiseass-goods-site .wp-element-button:hover,
body.wiseass-goods-site .wp-block-button__link:hover {
	transform: translate(-2px, -2px) rotate(-1deg);
	box-shadow: 7px 7px 0 var(--wg-ink) !important;
}

.wg-button:active,
body.wiseass-goods-site .wp-element-button:active,
body.wiseass-goods-site .wp-block-button__link:active {
	transform: translate(3px, 3px);
	box-shadow: 1px 1px 0 var(--wg-ink) !important;
}

.wg-parallax {
	will-change: transform;
	transition: transform .12s linear;
}

[data-wg-reveal],
.wg-reveal {
	opacity: 0;
	transform: translateY(32px) rotate(.5deg);
	transition: opacity .7s var(--wg-ease), transform .7s var(--wg-ease);
}

[data-wg-reveal].is-visible,
.wg-reveal.is-visible {
	opacity: 1;
	transform: translateY(0) rotate(0);
}

.wg-squiggle {
	position: relative;
	display: inline;
}

.wg-squiggle::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -.15em;
	height: .16em;
	background: url("data:image/svg+xml,%3Csvg width='120' height='12' viewBox='0 0 120 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 7C14 1 23 12 36 6S58 1 70 7s22 5 49-2' fill='none' stroke='%23f45b32' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x center / 120px 12px;
}

/* ========================================================================== 
   WOOCOMMERCE
   ========================================================================== */

body.wiseass-goods-site .woocommerce-breadcrumb {
	font-size: .84rem;
	font-weight: 750;
	letter-spacing: .04em;
	text-transform: uppercase;
}

body.wiseass-goods-site .woocommerce-result-count,
body.wiseass-goods-site .woocommerce-ordering {
	font-weight: 700;
}

body.wiseass-goods-site .woocommerce-ordering select,
body.wiseass-goods-site .select2-container .select2-selection,
body.wiseass-goods-site .woocommerce form .form-row input.input-text,
body.wiseass-goods-site .woocommerce form .form-row textarea,
body.wiseass-goods-site .woocommerce form .form-row select,
body.wiseass-goods-site input[type="text"],
body.wiseass-goods-site input[type="email"],
body.wiseass-goods-site input[type="tel"],
body.wiseass-goods-site input[type="password"],
body.wiseass-goods-site textarea,
body.wiseass-goods-site select {
	border: 2px solid var(--wg-ink) !important;
	border-radius: 12px !important;
	background: var(--wg-white) !important;
	box-shadow: 3px 3px 0 rgba(23, 19, 31, .85);
}

body.wiseass-goods-site .woocommerce ul.products,
body.wiseass-goods-site ul.products {
	gap: clamp(24px, 3.5vw, 44px);
}

body.wiseass-goods-site .woocommerce ul.products li.product,
body.wiseass-goods-site ul.products li.product {
	position: relative;
	isolation: isolate;
	background: var(--wg-white);
	border: var(--wg-border);
	border-radius: var(--wg-radius);
	box-shadow: var(--wg-shadow);
	padding: 14px 14px 22px;
	transform-style: preserve-3d;
	will-change: transform;
	transition: box-shadow .22s var(--wg-ease), border-color .22s ease;
}

body.wiseass-goods-site .woocommerce ul.products li.product:hover,
body.wiseass-goods-site ul.products li.product:hover {
	box-shadow: var(--wg-shadow-hover);
}

body.wiseass-goods-site .woocommerce ul.products li.product a img,
body.wiseass-goods-site ul.products li.product a img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border: 2px solid var(--wg-ink);
	border-radius: 15px;
	background: var(--wg-paper);
}

body.wiseass-goods-site .woocommerce ul.products li.product .woocommerce-loop-product__title,
body.wiseass-goods-site ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--wg-font-display);
	font-size: clamp(1.1rem, 1.7vw, 1.45rem);
	font-weight: 900;
	line-height: 1.02;
}

body.wiseass-goods-site .woocommerce ul.products li.product .price,
body.wiseass-goods-site ul.products li.product .price {
	color: var(--wg-orange);
	font-size: 1.08rem;
	font-weight: 900;
}

.wg-product-kicker {
	display: block;
	margin: 6px 0 10px;
	color: color-mix(in srgb, var(--wg-ink) 68%, transparent);
	font-size: .74rem;
	font-weight: 800;
	letter-spacing: .05em;
	text-transform: uppercase;
}

body.wiseass-goods-site .woocommerce span.onsale,
body.wiseass-goods-site span.onsale {
	inset: 10px auto auto 10px;
	min-width: auto;
	min-height: auto;
	padding: 8px 11px;
	background: var(--wg-yellow);
	color: var(--wg-ink);
	border: 2px solid var(--wg-ink);
	border-radius: 999px;
	box-shadow: var(--wg-shadow-small);
	font-family: var(--wg-font-display);
	font-size: .72rem;
	font-weight: 900;
	line-height: 1;
	text-transform: uppercase;
	transform: rotate(-7deg);
}

body.wiseass-goods-site .woocommerce a.button,
body.wiseass-goods-site .woocommerce button.button,
body.wiseass-goods-site .woocommerce input.button,
body.wiseass-goods-site .woocommerce #respond input#submit,
body.wiseass-goods-site .wg-shop-button {
	border: 2px solid var(--wg-ink) !important;
	border-radius: 999px !important;
	background: var(--wg-orange) !important;
	color: var(--wg-white) !important;
	box-shadow: var(--wg-shadow-small) !important;
	font-family: var(--wg-font-display);
	font-weight: 900 !important;
	letter-spacing: .02em;
	text-transform: uppercase;
	transition: transform .18s var(--wg-ease), box-shadow .18s var(--wg-ease), filter .18s ease;
}

body.wiseass-goods-site .woocommerce a.button:hover,
body.wiseass-goods-site .woocommerce button.button:hover,
body.wiseass-goods-site .woocommerce input.button:hover,
body.wiseass-goods-site .woocommerce #respond input#submit:hover,
body.wiseass-goods-site .wg-shop-button:hover {
	filter: saturate(1.1) brightness(1.02);
	transform: translate(-2px, -2px) rotate(-1deg);
	box-shadow: 7px 7px 0 var(--wg-ink) !important;
}

body.wiseass-goods-site .single-product div.product .product_title {
	font-size: clamp(2.5rem, 6vw, 5.8rem);
	text-transform: uppercase;
}

body.wiseass-goods-site .single-product div.product .woocommerce-product-gallery {
	background: var(--wg-paper);
	border: var(--wg-border);
	border-radius: var(--wg-radius);
	box-shadow: var(--wg-shadow);
	padding: clamp(10px, 2vw, 20px);
}

body.wiseass-goods-site .single-product div.product .summary {
	background: rgba(255, 253, 246, .76);
	border: 2px solid rgba(23, 19, 31, .18);
	border-radius: var(--wg-radius);
	padding: clamp(20px, 4vw, 44px);
	backdrop-filter: blur(12px);
}

body.wiseass-goods-site .single-product div.product p.price,
body.wiseass-goods-site .single-product div.product span.price {
	color: var(--wg-orange);
	font-family: var(--wg-font-display);
	font-size: clamp(1.6rem, 3vw, 2.4rem);
	font-weight: 900;
}

body.wiseass-goods-site .woocommerce div.product form.cart .quantity .qty {
	min-height: 48px;
	border: 2px solid var(--wg-ink);
	border-radius: 999px;
	font-weight: 900;
}

body.wiseass-goods-site .woocommerce div.product .woocommerce-tabs ul.tabs {
	gap: 8px;
}

body.wiseass-goods-site .woocommerce div.product .woocommerce-tabs ul.tabs li {
	border: 2px solid var(--wg-ink);
	border-radius: 999px;
	background: var(--wg-white);
	box-shadow: 3px 3px 0 var(--wg-ink);
}

body.wiseass-goods-site .woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	background: var(--wg-yellow);
}

body.wiseass-goods-site .woocommerce-message,
body.wiseass-goods-site .woocommerce-info,
body.wiseass-goods-site .woocommerce-error {
	border: var(--wg-border);
	border-top: var(--wg-border) !important;
	border-radius: var(--wg-radius-sm);
	background: var(--wg-white);
	box-shadow: var(--wg-shadow-small);
	color: var(--wg-ink);
}

body.wiseass-goods-site .woocommerce-message::before { color: var(--wg-green); }
body.wiseass-goods-site .woocommerce-info::before { color: var(--wg-blue); }
body.wiseass-goods-site .woocommerce-error::before { color: var(--wg-orange); }

body.wiseass-goods-site .woocommerce-cart-form,
body.wiseass-goods-site .cart_totals,
body.wiseass-goods-site .woocommerce-checkout-review-order,
body.wiseass-goods-site .woocommerce-checkout-payment,
body.wiseass-goods-site .woocommerce-account .woocommerce-MyAccount-navigation,
body.wiseass-goods-site .woocommerce-account .woocommerce-MyAccount-content {
	background: var(--wg-white);
	border: var(--wg-border);
	border-radius: var(--wg-radius);
	box-shadow: var(--wg-shadow-small);
	padding: clamp(18px, 3vw, 34px);
}

/* Checkout: calm the circus down. */
body.wiseass-goods-site.woocommerce-checkout .wg-starfield,
body.wiseass-goods-site.woocommerce-cart .wg-starfield {
	opacity: .24;
}

body.wiseass-goods-site.woocommerce-checkout .wg-cursor-glow,
body.wiseass-goods-site.woocommerce-cart .wg-cursor-glow {
	display: none;
}

/* Add-to-cart toast. */
.wg-toast {
	position: fixed;
	z-index: 99999;
	right: 22px;
	bottom: 22px;
	max-width: min(360px, calc(100vw - 44px));
	padding: 15px 18px;
	border: var(--wg-border);
	border-radius: 16px;
	background: var(--wg-yellow);
	color: var(--wg-ink);
	box-shadow: var(--wg-shadow);
	font-family: var(--wg-font-display);
	font-weight: 900;
	line-height: 1.15;
	transform: translateY(140%) rotate(3deg);
	opacity: 0;
	transition: transform .35s var(--wg-ease), opacity .35s ease;
}

.wg-toast.is-visible {
	transform: translateY(0) rotate(-1deg);
	opacity: 1;
}

/* ========================================================================== 
   FOOTER
   ========================================================================== */

body.wiseass-goods-site footer.ct-footer {
	border-top: var(--wg-border-thick);
}

body.wiseass-goods-site footer.ct-footer a:hover {
	color: var(--wg-orange);
}

/* ========================================================================== 
   RESPONSIVE + ACCESSIBILITY
   ========================================================================== */

@media (max-width: 781px) {
	:root {
		--wg-shadow: 5px 5px 0 var(--wg-ink);
		--wg-shadow-hover: 6px 6px 0 var(--wg-ink);
	}

	.wg-cursor-glow {
		display: none;
	}

	.wg-display {
		font-size: clamp(3rem, 17vw, 6.5rem);
	}

	body.wiseass-goods-site .woocommerce ul.products li.product,
	body.wiseass-goods-site ul.products li.product {
		transform: none !important;
	}
}

@media (hover: none), (pointer: coarse) {
	.wg-cursor-glow { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: .001ms !important;
	}

	.wg-starfield,
	.wg-cursor-glow,
	.wg-film-grain {
		display: none !important;
	}

	[data-wg-reveal],
	.wg-reveal {
		opacity: 1 !important;
		transform: none !important;
	}
}