/* ==========================================================
RETRO ARCADE CHILD
DESIGN SYSTEM
========================================================== */

/* ==========================================================
01. DESIGN TOKENS
========================================================== */

:root {


/* ------------------------------------------------------
   Colors
   ------------------------------------------------------ */



--ra-color-black: #08080a;
--ra-color-bg: #0d0d10;

--ra-color-surface: #151519;
--ra-color-surface-2: #1d1d23;
--ra-color-surface-3: #25252d;

--ra-color-white: #ffffff;
--ra-color-text: #f5f5f7;
--ra-color-text-muted: #9b9ba4;
--ra-color-text-dark: #6f6f78;

--ra-color-primary: #ff2fa3;
--ra-color-primary-hover: #ff5db8;

--ra-color-secondary: #7c4dff;
--ra-color-secondary-hover: #9873ff;

--ra-color-accent: #39ff88;
--ra-color-accent-hover: #63ffa1;

--ra-color-yellow: #ffe45e;
--ra-color-red: #ff4057;
--ra-color-blue: #3db8ff;

/* ------------------------------------------------------
   Gradients
   ------------------------------------------------------ */

--ra-gradient-primary:
	linear-gradient(
		135deg,
		#ff2fa3 0%,
		#7c4dff 100%
	);

--ra-gradient-dark:
	linear-gradient(
		135deg,
		#16161b 0%,
		#0b0b0d 100%
	);

--ra-gradient-glow:
	radial-gradient(
		circle at center,
		rgba(124, 77, 255, 0.25) 0%,
		rgba(13, 13, 16, 0) 70%
	);


/* ------------------------------------------------------
   Typography
   ------------------------------------------------------ */

--ra-font-body:
	"Inter",
	Arial,
	sans-serif;

--ra-font-heading:
	"Space Grotesk",
	Arial,
	sans-serif;


/* ------------------------------------------------------
   Font sizes
   ------------------------------------------------------ */

--ra-text-xs: 0.75rem;
--ra-text-sm: 0.875rem;
--ra-text-base: 1rem;
--ra-text-lg: 1.125rem;
--ra-text-xl: 1.25rem;

--ra-heading-sm: 1.5rem;
--ra-heading-md: 2rem;
--ra-heading-lg: 3rem;
--ra-heading-xl: 4.5rem;
--ra-heading-xxl: 6rem;


/* ------------------------------------------------------
   Spacing
   ------------------------------------------------------ */

--ra-space-1: 4px;
--ra-space-2: 8px;
--ra-space-3: 12px;
--ra-space-4: 16px;
--ra-space-5: 20px;
--ra-space-6: 24px;
--ra-space-8: 32px;
--ra-space-10: 40px;
--ra-space-12: 48px;
--ra-space-16: 64px;
--ra-space-20: 80px;
--ra-space-24: 96px;
--ra-space-32: 128px;


/* ------------------------------------------------------
   Layout
   ------------------------------------------------------ */

--ra-container: 1280px;

--ra-gutter: 24px;

--ra-header-height: 80px;


/* ------------------------------------------------------
   Border radius
   ------------------------------------------------------ */

--ra-radius-sm: 4px;
--ra-radius-md: 8px;
--ra-radius-lg: 16px;
--ra-radius-xl: 24px;

--ra-radius-pill: 999px;


/* ------------------------------------------------------
   Borders
   ------------------------------------------------------ */

--ra-border-color: #29292f;

--ra-border:
	1px solid var(--ra-border-color);


/* ------------------------------------------------------
   Shadows
   ------------------------------------------------------ */

--ra-shadow-sm:
	0 4px 15px rgba(0, 0, 0, 0.25);

--ra-shadow-md:
	0 10px 30px rgba(0, 0, 0, 0.35);

--ra-shadow-lg:
	0 20px 60px rgba(0, 0, 0, 0.45);

--ra-shadow-primary:
	0 10px 40px rgba(255, 47, 163, 0.18);

--ra-shadow-secondary:
	0 10px 40px rgba(124, 77, 255, 0.18);


/* ------------------------------------------------------
   Transitions
   ------------------------------------------------------ */

--ra-transition-fast:
	150ms ease;

--ra-transition:
	250ms ease;

--ra-transition-slow:
	400ms ease;


}

/* ==========================================================
02. RESET / BASE
========================================================== */

html {
scroll-behavior: smooth;
}

body {


margin: 0;

background-color: var(--ra-color-bg);

color: var(--ra-color-text);

font-family: var(--ra-font-body);

font-size: var(--ra-text-base);

line-height: 1.6;

-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;


}

*,
*::before,
*::after {
box-sizing: border-box;
}

img {
display: block;
max-width: 100%;
height: auto;
}

button,
input,
textarea,
select {
font: inherit;
}

a {


color: inherit;

text-decoration: none;

transition:
	color var(--ra-transition-fast),
	background-color var(--ra-transition-fast),
	border-color var(--ra-transition-fast),
	opacity var(--ra-transition-fast);


}

a:hover {
color: var(--ra-color-primary);
}

/* ==========================================================
03. TYPOGRAPHY
========================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {


margin-top: 0;

font-family: var(--ra-font-heading);

font-weight: 700;

line-height: 1.1;

letter-spacing: -0.025em;

color: var(--ra-color-white);


}

h1 {
font-size: clamp(2.75rem, 6vw, var(--ra-heading-xxl));
}

h2 {
font-size: clamp(2rem, 4vw, var(--ra-heading-xl));
}

h3 {
font-size: clamp(1.5rem, 3vw, var(--ra-heading-lg));
}

h4 {
font-size: var(--ra-heading-md);
}

h5 {
font-size: var(--ra-heading-sm);
}

p {
margin-top: 0;
}

.text-muted {
color: var(--ra-color-text-muted);
}

/* ==========================================================
04. LAYOUT
========================================================== */

.ra-container {


width: min(
	calc(100% - (var(--ra-gutter) * 2)),
	var(--ra-container)
);

margin-inline: auto;


}

.ra-section {
padding-block: var(--ra-space-24);
}

.ra-section--small {
padding-block: var(--ra-space-16);
}

.ra-section--large {
padding-block: var(--ra-space-32);
}

/* ==========================================================
05. SECTION HEADINGS
========================================================== */

.ra-section-header {


display: flex;

align-items: end;

justify-content: space-between;

gap: var(--ra-space-8);

margin-bottom: var(--ra-space-12);


}

.ra-section-eyebrow {


display: block;

margin-bottom: var(--ra-space-3);

color: var(--ra-color-accent);

font-family: var(--ra-font-heading);

font-size: var(--ra-text-sm);

font-weight: 700;

letter-spacing: 0.15em;

text-transform: uppercase;


}

.ra-section-title {
margin-bottom: 0;
}

.ra-section-description {


max-width: 600px;

margin-top: var(--ra-space-4);

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

font-size: var(--ra-text-lg);


}

/* ==========================================================
06. BUTTONS
========================================================== */

.ra-button {


display: inline-flex;

align-items: center;

justify-content: center;

gap: var(--ra-space-2);

min-height: 48px;

padding:
	0 var(--ra-space-6);

border: 0;

border-radius: var(--ra-radius-md);

background: var(--ra-color-primary);

color: var(--ra-color-white);

font-family: var(--ra-font-heading);

font-size: var(--ra-text-sm);

font-weight: 700;

line-height: 1;

cursor: pointer;

transition:
	transform var(--ra-transition),
	background-color var(--ra-transition),
	box-shadow var(--ra-transition);


}

.ra-button:hover {


background: var(--ra-color-primary-hover);

color: var(--ra-color-white);

transform: translateY(-2px);

box-shadow: var(--ra-shadow-primary);


}

.ra-button--secondary {


background: var(--ra-color-secondary);


}

.ra-button--secondary:hover {


background: var(--ra-color-secondary-hover);

box-shadow: var(--ra-shadow-secondary);


}

.ra-button--outline {


border: 1px solid var(--ra-border-color);

background: transparent;

color: var(--ra-color-text);


}

.ra-button--outline:hover {


border-color: var(--ra-color-primary);

background: rgba(255, 47, 163, 0.08);

color: var(--ra-color-primary);

box-shadow: none;


}

/* ==========================================================
07. BADGES
========================================================== */

.ra-badge {


display: inline-flex;

align-items: center;

min-height: 26px;

padding:
	0 var(--ra-space-3);

border-radius: var(--ra-radius-pill);

font-family: var(--ra-font-heading);

font-size: 11px;

font-weight: 800;

letter-spacing: 0.05em;

text-transform: uppercase;


}

.ra-badge--new {


background: var(--ra-color-accent);

color: #07140c;


}

.ra-badge--sale {


background: var(--ra-color-primary);

color: var(--ra-color-white);


}

.ra-badge--limited {


background: var(--ra-color-secondary);

color: var(--ra-color-white);


}

.ra-badge--sold-out {


background: var(--ra-color-surface-3);

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


}

/* ==========================================================
08. CARDS
========================================================== */

.ra-card {


background: var(--ra-color-surface);

border: var(--ra-border);

border-radius: var(--ra-radius-lg);

overflow: hidden;


}

.ra-card--hover {


transition:
	transform var(--ra-transition),
	border-color var(--ra-transition),
	box-shadow var(--ra-transition);


}

.ra-card--hover:hover {


transform: translateY(-5px);

border-color: rgba(255, 47, 163, 0.4);

box-shadow: var(--ra-shadow-md);


}

/* ==========================================================
09. PRODUCT CARDS
========================================================== */

.woocommerce ul.products {


display: grid;

grid-template-columns:
	repeat(4, minmax(0, 1fr));

gap: var(--ra-space-6);

margin: 0;

padding: 0;


}

.woocommerce ul.products::before,
.woocommerce ul.products::after {
display: none;
}

.woocommerce ul.products li.product {


display: flex;

flex-direction: column;

width: auto !important;

margin: 0 !important;

padding: 0;

background: var(--ra-color-surface);

border: 1px solid var(--ra-border-color);

border-radius: var(--ra-radius-lg);

overflow: hidden;

transition:
	transform var(--ra-transition),
	border-color var(--ra-transition),
	box-shadow var(--ra-transition);


}

.woocommerce ul.products li.product:hover {


transform: translateY(-5px);

border-color: rgba(255, 47, 163, 0.45);

box-shadow: var(--ra-shadow-primary);


}

.woocommerce ul.products li.product a img {


width: 100%;

margin: 0;

transition:
	transform var(--ra-transition-slow);


}

.woocommerce ul.products li.product:hover a img {


transform: scale(1.04);


}

.woocommerce ul.products li.product .woocommerce-loop-product__title {


padding:
	var(--ra-space-5)
	var(--ra-space-5)
	var(--ra-space-2);

color: var(--ra-color-white);

font-family: var(--ra-font-heading);

font-size: var(--ra-text-lg);

font-weight: 700;


}

.woocommerce ul.products li.product .price {


padding-inline: var(--ra-space-5);

color: var(--ra-color-text);

font-size: var(--ra-text-lg);

font-weight: 700;


}

.woocommerce ul.products li.product .button {


align-self: stretch;

margin:
	auto
	var(--ra-space-5)
	var(--ra-space-5);

padding: 14px 20px;

border-radius: var(--ra-radius-md);

background: var(--ra-color-primary);

color: var(--ra-color-white);

text-align: center;

font-weight: 700;


}

.woocommerce ul.products li.product .button:hover {


background: var(--ra-color-primary-hover);

color: var(--ra-color-white);


}

/* ==========================================================
10. WOOCOMMERCE
========================================================== */

.woocommerce .woocommerce-breadcrumb {


margin-bottom: var(--ra-space-8);

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

font-size: var(--ra-text-sm);


}

.woocommerce span.onsale {


top: var(--ra-space-4);

left: var(--ra-space-4);

min-width: auto;

min-height: auto;

padding:
	var(--ra-space-2)
	var(--ra-space-3);

border-radius: var(--ra-radius-pill);

background: var(--ra-color-primary);

font-size: 11px;

font-weight: 800;

line-height: 1.4;


}

/* Buttons */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {


min-height: 48px;

padding:
	0 var(--ra-space-6);

border: 0;

border-radius: var(--ra-radius-md);

background: var(--ra-color-primary);

color: var(--ra-color-white);

font-family: var(--ra-font-heading);

font-weight: 700;

}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {


background: var(--ra-color-primary-hover);

color: var(--ra-color-white);


}

/* Notices */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {


border: 1px solid var(--ra-border-color);

border-top: 3px solid var(--ra-color-primary);

border-radius: var(--ra-radius-md);

background: var(--ra-color-surface);

color: var(--ra-color-text);


}

/* ==========================================================
11. FORMS
========================================================== */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
textarea,
select {


width: 100%;
min-height: 35px;
padding:
	10px
	14px;

border: 1px solid var(--ra-border-color);
border-radius: var(--ra-radius-md);
background: var(--ra-color-surface);
color: var(--ra-color-text-dark);
outline: none;
transition:
	border-color var(--ra-transition-fast),
	box-shadow var(--ra-transition-fast);


}

input:focus,
textarea:focus,
select:focus {
border-color: var(--ra-color-primary);
box-shadow:
	0 0 0 3px rgba(255, 47, 163, 0.12);
}

/* ==========================================================
12. ACCESSIBILITY
========================================================== */

:focus-visible {


outline: 2px solid var(--ra-color-accent);

outline-offset: 3px;


}

/* ==========================================================
13. RESPONSIVE
========================================================== */

/* Tablet */

@media (max-width: 1024px) {


:root {
	--ra-gutter: 20px;
}

.ra-section {
	padding-block: var(--ra-space-20);
}

.woocommerce ul.products {

	grid-template-columns:
		repeat(3, minmax(0, 1fr));

}


}

/* Mobile */

@media (max-width: 767px) {


:root {

	--ra-gutter: 16px;

}

.ra-section {
	padding-block: var(--ra-space-16);
}

.ra-section-header {

	display: block;

	margin-bottom: var(--ra-space-8);

}

.ra-section-description {

	font-size: var(--ra-text-base);

}

.woocommerce ul.products {

	grid-template-columns:
		repeat(2, minmax(0, 1fr));

	gap: var(--ra-space-4);

}

.woocommerce ul.products li.product
.woocommerce-loop-product__title {

	font-size: var(--ra-text-base);

}

.woocommerce ul.products li.product .price {

	font-size: var(--ra-text-base);

}


}

/* Small mobile */

@media (max-width: 480px) {

.woocommerce ul.products {

	grid-template-columns: 1fr;

}


}



/* ==========================================================
14. OVERRIDE TEMPLATE
========================================================== */
/*  
@media (min-width: 1200px) {
  .page-header .entry-title, .site-footer .footer-inner, .site-footer:not(.dynamic-footer), .site-header .header-inner, .site-header:not(.dynamic-header), body:not([class*="elementor-page-"]) .site-main {
    max-width: none;
	width: 100%;
	}
}*/

.page-header .entry-title {
	display: none !important;
}

.page-header {
	display: none !important;
}

[type="button"]:focus, [type="button"]:hover, [type="submit"]:focus, [type="submit"]:hover, button:focus, button:hover {
  color: #c36;
}

[type="button"], [type="submit"], button {
  color: #292929;
}

[tabindex]:not([tabindex="-1"]):focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  box-shadow: 0 0 0 4px #fff;
  outline: none !important;
  outline-offset: 2px;
}

button[type="submit"]{
    border: none;
}
 button[type="submit"]:hover, button[type="submit"]:active,  button[type="submit"]:focus,  button[type="submit"]:visited{
    background-color: transparent;
}

/*
 * ANIMATION TEXT 
*/

.text-transform h1 {
	/*background: linear-gradient(90deg,#ff6a00,#ee0979,#1d2671,#009ffd) !important;*/
	background: linear-gradient(90deg,#ff5a00, #ff0080, #9d00ff, #0066ff, #00eaff) !important;
	background-size: 100% 100% !important;
	-webkit-background-clip: text !important;
	background-clip: text !important;
	color: transparent !important;
	-webkit-text-fill-color: transparent !important;
	animation: smooth-color-cycle 10s linear infinite !important;
}

@keyframes smooth-color-cycle {
	0% {filter: hue-rotate(0deg) saturate(1.3);}

	100% {filter: hue-rotate(360deg) saturate(1.3);}

}