/*---------------- COLORS ------------------*/
:root {
  --TextColorA: #fed78e;
  --TextColorB: #dabaff;
  --TextColorAHighlight: white;
  --TextColorFooter: #777;
  --BGcolorA: #2d243a;
  --BGcolorB: #3c2e4c;
  --BGcolorC: #5f5087;
  --BorderColor: #8d69cd;
  --BGPink: #de5ba3; /*pink */
  --BGpink2: #d379aa;
  --ButtonColorA: #53397a;
  --FooterBGColor: #342241;
  --HeaderColor: #3b3062;
  --ButtonHighlight: #6d3f98;
  --BGWebsiteBack: #28232d;
  --ButtonColorConsoles: #a18ec3;
  --ButtonColorConsolesHover: #b091e9;
  --KindaWhite: #d0cecf;
  --titleFonceColor: #394575;

/* white grey

  --ShopBGColor: #f7f7f7;

  --ShopItemColorA: #f5f5f5;
  --ShopItemColorB: #656595;

   --shopTextColorA: #484848;
*/

   --ShopBGColor: #534561;

  --ShopItemColorB: #dcd2ff;
  --ShopItemColorA: #5f5577;

  --shopTextColorA: #dbca89;
  --shopTextColorB: #232b3f;

  --HeaderHeight: 120px;

  --FontA :"export", sans-serif;
  --FontB :"bc-barell", sans-serif;
}

/*---------------- GENERAL FONTS ------------------*/
h1
{
	font-family: var(--FontA);
	font-weight: 400;
	font-style: normal;
}

h3
{
	font-family: var(--FontA);
	font-weight: 400;
	font-style: normal;
}

h4
{
	font-family: var(--FontA);
	font-weight: 400;
	font-style: normal;
	font-size: 25px;
}

p{
	font-family: var(--FontB);
	font-weight: 100;
	font-style: normal;
	font-size: 19px;
}

a{

	font-family: var(--FontB);
	font-weight: 100;
	font-style: normal;
	text-decoration: none;
	color: var(--TextColorA);
}	

.accent
{
    text-shadow: 2px 2px 2px rgba(255,0,255,0.9);
}

.current[aria-current="page"]{

	font-family: var(--FontB);
	font-weight: 100;
	font-style: normal;
	text-decoration: none;
	color:var(--TextColorAHighlight);
}

.titleFonce
{
    color: var(--titleFonceColor);
    text-shadow: 3px 3px 2px rgba(255,0,255,0.9);
}

.imgFullWidth img
{
	width: 100%;
}
/*---------------- HEADER ------------------*/

header{
	background:var(--HeaderColor);
	width:100%;
	height:var(--HeaderHeight);
}

header .top-bar {
list-style-type:  none !important;
padding:0 !important;
display:flex !important;
margin-top:25px !important;

}

header .top-bar li a{
	display:block !important;
	padding: 1rem 1rem !important;
	text-decoration: none !important;
	color: var(--TextColorA) !important;

	font-family: var(--FontA), sans-serif !important;
	font-weight: 400 !important;
	font-style: normal !important;
	height: 100% !important;

	border-radius: 6px !important;

	@media (min-width: 801px)
	{
		margin-left:15px !important;
		margin-right:15px !important;
	}
}

header .container
{
	height:100%;
	display:flex;
	justify-content: right;
	align-items: center;
	font-size: 13px;
}	

@media (min-width: 801px)
{
	header .container
	{
		height:100%;
		display:flex;
		justify-content: center;
		align-items: center;
		font-size: 20px;
	}
}

.top-bar a[aria-current="page"] {
    text-decoration: underline !important;
    /* optional: stronger if something else overrides it */
    /* text-decoration: underline !important; */
}

header .top-bar li:hover a
{
	color: var(--TextColorAHighlight);
	background-color: var(--BGcolorC);
}


/*logo*/

header .logo{
	display:flex;
	position: absolute;
	left:0;
    max-height: 80px;
    width: 160px;
    margin-left:50px;
	}


header .custom-logo {
    max-height: 100%;
    width: 100%;
}

/*---------------- FEATURED IMAGE ------------------*/

.featuredImage {
    max-height: 400px;
    overflow: hidden; 
    display: grid;
}
.featuredImage img {
    width: 100%;
    height: auto;
}

.featuredImage h1{
	position:absolute;
	font-size: 30px;
	color: #555;
	margin-top:5px;
	margin-left:25px;
	color:#fed78e; /*mettre important pr pas etre ovveride par autre*/
    text-shadow: -2px 2px 4px rgba(255,0,255,0.8);
}

@media (min-width: 801px)
{
	.featuredImage h1
	{
		margin-top:25px;
		font-size: 35px;
	}
}


/*---------------- BODY ------------------*/
body{
	  min-height: 100vh;
	  margin: 0;
	  display: grid;
	  grid-template-rows: auto 1fr auto;
}

.page-wrap{
	padding:0rem 2;
	min-height: 100vh;
	margin: 0;
	display: grid;
	grid-template-rows: auto 1fr auto;

    background-color: var(--BGWebsiteBack);
    background-image: url("http://piecesgames.test/wp-content/uploads/2026/03/looping_pieces_pattern.png");
    background-repeat: repeat;
    background-position: top left;
    background-size: auto;
}

.page-wrap-dino
{
    background-color: var(--BGPink);
    background-image: url("http://piecesgames.test/wp-content/uploads/2026/03/BG_dino_loop.png");
    background-repeat: repeat;
    background-position: top left;
    background-size: auto;
    padding:0px !important;
}

.page-wrap-dino-2
{
    background-color: var(--BGpink2);
    background-image: url("http://piecesgames.test/wp-content/uploads/2026/03/BG_dino_loop.png");
    background-repeat: repeat;
    background-position: top left;
    background-size: auto;
}


.page-wrap .container{
	color: #fed78e;
	width: 100%;
	margin: 0px;
	max-width: 100%;
	padding: 0;
}

.page-wrap .purpleContainer{
	background-color: var(--BGcolorA);
	color: #fed78e;
	width: 100%;
}

.page-wrap .purpleContainerB{
	background-color:var(--BGcolorB);
	color: #fed78e;
	width: 100%;
}

.page-wrap .pinkContainer{
	background-color: var(--BGPink);
	color: #fed78e;
	width: 100%;
}

.page-wrap .purpleContainerNarrow{
	background-color: var(--BGcolorA);
	color: #fed78e;
	max-width: 1020px;
	margin: 0 auto;
}

#DivTypeA{
	background-color: var(--BGcolorA);
	padding: 50px !important;
	margin: 0px !important;
}

#DivTypeB{
	background-color: var(--BGcolorB);
	padding: 50px !important;
	margin: 0px !important;
}

.pinkBG
{
	background-color: var(--BGPink);
}

.purpleBG
{
	background-color: var(--BGcolorA);
}

.purpleBGB
{
	background-color: var(--BGcolorB);
}

#CenterContentThird
{
  margin: 0 auto;
  text-align: center;
  margin-bottom: 10px;
}

#CoinArrondis
{
	border-radius:10px;
}

/*---------------- Buttons ------------------*/

#ConsoleButton
{
	background-color: var(--ButtonColorConsoles);
	border-radius: 10px;
	max-width: 250px;
	padding:15px;
	border-style: solid;
	border-width: 5px;
	border-color: var(--BorderColor);

    margin: 0 auto;
  	text-align: center;
  	margin-bottom: 10px;
  	max-width: 300px;
}

#ConsoleButton:hover
{
	background-color: var(--ButtonColorConsolesHover);
	border-color: var(--TextColorA);
}


/*---------------- PAGE CONTENT RESPONSIVE ------------------*/

.page-wrap .pageContent
{
	padding: 4rem 4rem;
	max-width: 1020px;
	margin: 0 auto;

	@media (max-width: 750px)
	{
		max-width: 450px;    
	}
}


/*--------------- UI -------------------*/
.buttonA {
  width: 105px;
  height: 50px;
  border-radius: 12px; /* Rounded corners proportional, not stretched */
  background-color: #532b88;
  color: white;

  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  cursor: pointer;
}


/*---------------- Woo commerce ------------------*/
.woocommerce
{
	background-color: var(--BGcolorA);
	padding: 4rem 5rem;
	width: 100%;
	margin: 0 auto;

	@media (max-width: 750px)
	{
		max-width: 450px;    
	}
}

.woocommerce a
{
	color: #fed78e;
}


/* Form text color */
label {
    color: #fed78e !important; 
    font-size:18px;
    font-family: var(--FontB);
    margin-right:15px;
}


/* newsletter */
input[type="text"],
input[type="email"],
input[type="submit"] {
    color: #fed78e !important; 
    border: 2px solid #fed78e;     
    background-color: transparent;
    border-radius: 10px;
    padding: 7px;
    font-size: 18px;
    font-family: var(--FontB);
}

input[type="email"]
{
	min-width: 370px;
}

/* Placeholder text color */
input::placeholder {
    color: #fed78e;
}


/*---------------- WOOCOMMERCE PRODUCTS ------------------*/
.products.columns-4
{
  	/*background-color: var(--BGcolorA);*/
}

/*
ul.products[class*="columns-"]
{
	display: grid;
  	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  	gap: 10px;
  	padding:2rem 22rem;

	@media (max-width: 1200px)
	{
  		padding:2rem 5rem;  
	}

	@media (max-width: 680px)
	{
		padding:1rem 0.5rem;  
  		grid-template-columns: repeat(auto-fill, minmax(160px, 0fr));
		gap: 0px;
	}
}*/

.JGB_shop
{
	background-color: var(--ShopBGColor);
}

/* default colors */
.JGB_shop .product h2,
.JGB_shop .product a{
    color: var(--shopTextColorB);
    text-shadow: 1px 1px 1px rgba(255,0,255,0.5);
    transition: all 0.1s ease; /* smooth color change */
}

/* hover on the whole product */
.JGB_shop .product:hover h2,
.JGB_shop .product:hover a{
    color: var(--shopTextColorA);
    text-shadow: 2px 2px 2px rgba(255,0,255,0.5);
}

.JGB_shop h1
{
	color: var(--shopTextColorB);
    text-shadow: 1px 1px 0px rgba(255,0,255,0.2);
}

 .products[class*="columns-"] li
 {
 	display: block;
 	float: left;
	overflow: hidden;
    list-style: none; /* optional: remove bullets */
	/*background: linear-gradient(var(--BGcolorC), var(--BGcolorA));*/
	background: linear-gradient(var(--ShopItemColorB), var(--ShopItemColorA));
    border-radius: 8px;
	padding: 0px 0px 80px 0px;
	margin:15px;
	max-width: 250px;
	padding-left:10px;
	padding-right:10px;
	max-height:370px;

	@media (max-width: 680px)
	{
    	margin:15px;
		max-width: 180px;
	}
}

 .products[class*="columns-"] img
{
	transition: transform 0.1s ease-in-out;
	width:100%;
	height: auto;
}

 .products[class*="columns-"] li img:hover
 {
	transform: scale(1.03);
}


 .products[class*="columns-"] h2
{
	font-size: 22px;
	height: auto;
	margin-top:15px;

	@media (max-width: 680px)
	{
		font-size: 14px;
	}
}

.woocommerce-ordering {
    display: flex;
  	justify-content: right;
  	background-color: var(--BGcolorC);
  	height:60px;
}

.orderby {
    font-size: 17px;
    padding: 5px;
    border-radius: 3px;
    background-color: var(--ButtonColorA);
    border-width: 0px;
    height:100%;

	font-family: var(--FontB);
	font-weight: 100;
	font-style: normal;
	text-decoration: none;
	color: var(--TextColorA);
	padding: 15px;
	padding-right: 50px;
	margin-right: 0px;
}

form.woocommerce-ordering
{
	/*background-color: var(--BGcolorA);*/
}

.add_to_cart_button {
    display: none !important;
}

 .products.columns-4 li .added_to_cart
{	
	margin-left:15px;
	background-color: var(--ButtonColorA);
	border-radius: 10px;
}

/*---------------- PRODUCT ------------------*/

/* 1. Force the main container to not wrap */
.jgb_shop_products_layout {
    display: flex !important;
    flex-wrap: nowrap !important; 
    align-items: flex-start !important;
}

/* 2. Fix the Sidebar */
.shop-sidebar {

    width: 300px !important;
    padding: 10px;
    padding-top: 25px;
    background-color: var(--BGcolorB);
    color: var(--TextColorA);

	@media (max-width: 850px)
	{
		text-align: center;
    	width: 100% !important;
	}
}

.jgb_shop_products_layout
{
	@media (max-width: 850px)
	{
		display: flex;
		flex-direction: column;
	}
}

.shop-sidebar ul
{
	padding: 0;
}

.shop-sidebar li {
	text-align: center;
    list-style: none;
    margin: 14px 0; /* vertical spacing */
    width: 100%;
}

.shop-sidebar li a {
    display: block;              /* makes the <a> fill the <li> */
    padding: 2px 0px;          /* clickable area */
    line-height: 45px;
    color: var(--TextColorA);
    text-decoration: none;       /* optional */
    transition: background 0.3s, color 0.3s; /* smooth hover */
    width: 100%;
	border-radius: 10px;
}

.shop-sidebar li a:hover {
    color: var(--BGPink);
    background-color: var(--BGcolorC);
	border-radius: 10px;
}
.shop-sidebar h2{
	font-size: 20px;
	font-family: var(--FontA);
    color: var(--TextColorB);
    text-align: center;
}



/* 3. Fix the Products Area */
.JGB_main_content {
    flex: 1 !important;
    min-width: 0 !important; /* Forces it to respect the parent's width */
}


/* 5. Fix the individual product items inside the grid */
/* Ensure the 4 columns stay inside the 1 column we just gave them */
.JGB_main_content ul.products li.product {
    margin-bottom: 30px !important;
}

.jgb_shop_products .products {
    flex: 1;         /* Take up all the remaining horizontal space */
}

.JGB_product .product
{
	background-color: var(--BGcolorC);
	display: flex;
	justify-content: center;
    align-items: flex-start;

    color: var(--shopTextColorA);
    text-shadow: 2px 2px 2px rgba(255,0,255,0.5);

    min-height:500px;

	@media (max-width: 850px)
	{
	    display: flex;    
	    flex-direction: column;
        min-height:0px;
	}
}

.JGB_product-Description
{
	padding: 50px;
	line-height: 35px;
    display: flex;    
    flex-direction: column;
    gap: 25px;
    min-height:350px;
    max-width: 650px;
}


.JGB_product-Description select
{
	background-color: var(--BGcolorB);
	padding: 3px;
	border-radius: 5px;
	color: var(--TextColorA);
	margin-left:3px;
	margin-right: 10px;
}

input[type="text"],

.JGB_product-Description h1
{
	font-size: 30px;
	font-family: var(--FontB);
}

.JGB_product-Description .summary
{
    display: flex;
    flex-direction: column; /* stack vertically */
    gap: 25px;
    margin-top:55px;
}

/*---- IMG  ----*/

/* Limit the gallery size */
.JGB_product-IMG .woocommerce-product-gallery {
    width: 650px;
    max-width: 100%;

	@media (max-width: 801px)
    {
    	    width: 500px;
    }
}

/* Main image */
.JGB_product-IMG .woocommerce-product-gallery__image img {
    width: 100%;
    height: auto;
}

/* Thumbnail list */
.JGB_product-IMG .flex-control-thumbs {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr); /* how many thumbs per row */
    gap: 4px;
    margin-top: 7px;
    list-style: none !important;
  	align-items: center;
    list-style: none !important;
    margin: 2 !important;
    padding: 0 !important;
}

/* thumbnail images */
.JGB_product-IMG .flex-control-thumbs img {
    width: 100%;
    height: auto;
    border-radius: 6px;
}
.JGB_product-Description .input-text
{
	background-color: var(--HeaderColor);
	color: var(--TextColorA);
	width: 60px;
	height:45px;
	text-align: center;
	margin-top:13px;
}

.single_add_to_cart_button
{
    transition: background-color 0.1s ease-in-out, color 0.1s ease-in-out;
	font-size: 15px;
	background-color: var(--ButtonColorA);
	border-style: none;
	border-radius: 12px;
	padding: 10px;
	width: 100%;
	font-family: var(--FontB);
	color: var(--TextColorA);
	margin-top:20px;
}

.single_add_to_cart_button:hover
{
	background-color: var(--BGPink);
	border-style: none;

	color: white;
}

.JGB_product-Description p.price
{
	font-size: 34px;
}

ul.tabs.wc-tabs {
    display: none !important;
}

/* Hide the product meta (categories, tags) */
.product_meta {
    display: none !important;
}

.woocommerce-Tabs-panel.woocommerce-Tabs-panel h2
{
	    display: none !important;
}

/*------Related product-------*/

.JGB_related-products
{
	display: block;
	background-color: var(--BGcolorB);

    margin-left: auto;
    margin-right: auto;
    padding:25px;
}

.JGB_related-products h2
{
	font-family: var(--FontB);
	text-align: center;
	color: var(--BGcolorC);
}

.JGB_related-products ul {
    display: flex;
    grid-template-columns: repeat(3, 275px) !important; 
    justify-content: left; 
}

.JGB_related-products li{
	font-size: 15px;
	padding: 15px !important;
	text-align: right;
	min-height: 355px !important;
}

.JGB_related-products ul li h2{
	font-size: 20px !important;
	text-align: right;
}

/*---------------- Woocommerce CHECK OUT ------------------*/

#JGB_checkout-content
{
	display: block;
	margin-left: auto;
	margin-right: auto;
	background-color: var(--BGcolorB);
	max-width: 1250px;
	padding:25px;
}

#JGB_checkout-content .wc-block-components-main
{
	background-color: var(--BGcolorA);
	padding:45px;
	max-width: 600px;
	border-radius: 25px;
}

#JGB_checkout-content .wc-block-cart__submit-container
{
	background-color: var(--ButtonColorA);
	border-radius: 8px;
}

#JGB_checkout-content .wc-block-cart__submit-container a:hover
{
	transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
	color:var(--TextColorAHighlight);
	background-color: var(--ButtonHighlight);
	border-radius: 8px;
}

#JGB_checkout-content button[type="submit"] 
{ 
	background-color: var(--ButtonColorA);
	color: var(--TextColorA);
}

#JGB_checkout-content input, #JGB_checkout-content select{
    background-color: var(--BGcolorA); /* replace with any color you want */
    color: var(--TextColorA); /* optional: text color */
    border: 1px solid #ccc; /* optional: border styling */
    border-radius: 5px; /* optional: rounded corners */
}

/*---------------- Woocommerce Message ------------------*/
.woocommerce-message
{
	background-color: var(--BGcolorB);
	color: white;
}


/*---------------- FOOTER ------------------*/
footer{
	background:var(--FooterBGColor);
	color:var(--TextColorFooter);
	width:100%;
	
	padding: 1rem 1rem;
}

footer .container
{
	text-align: center;
}


/*---------------- PRE LOADER ------------------*/
#preloader {
  position: fixed;
  top: var(--HeaderHeight);
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--BGcolorB); /* or any color you want */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

/* Spinner */
.spinner {
  border: 6px solid var(--BGcolorC);
  border-top: 6px solid var(--TextColorA); /* spinner color */
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

body.loading header {
    position: fixed; /* force it to stick at the top */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10001; /* higher than preloader */
}



/*--------------------My Account -----------------*/
.JGB_myAccount
{
	background-color: var(--BGcolorB);
	padding-left: 25px;
	padding-right: 25px;
	padding-top: 20px;
	padding-bottom: 20px;
	border-radius: 15px;
}

.JGB_myAccount input
{
	font-size: 20px;
    color: var(--TextColorA); /* optional: text color */
    border: 1px solid #ccc; /* optional: border styling */
    border-radius: 5px; /* optional: rounded corners */
	background-color: var(--BGcolorC) !important;
}

.JGB_myAccount input[type="password"]
{
    color: var(--TextColorA) !important;
    border: 1px solid #ccc;
    border-radius: 5px; 
	background-color: var(--BGcolorC) !important;
}


.woocommerce-ResetPassword input
{
	font-size: 20px;
    color: var(--TextColorA); /* optional: text color */
    border: 1px solid #ccc; /* optional: border styling */
    border-radius: 5px; /* optional: rounded corners */
	background-color: var(--BGcolorC) !important;
}


/* -- navigation bar -- */
.woocommerce-MyAccount-navigation
{
	background-color: var(--BGcolorB);
}

.woocommerce-MyAccount-navigation ul {
    display: flex;           /* horizontal by default */
    flex-wrap: wrap;         /* allow items to wrap on small screens */
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 10px;               /* space between items */
}

.woocommerce-MyAccount-navigation li a {
    display: block;              /* makes the <a> fill the <li> */
    padding: 5px 15px;          /* clickable area */
    line-height: 45px;
    color: var(--TextColorA);
    text-decoration: none;       /* optional */
    transition: background 0.3s, color 0.3s; /* smooth hover */
    width: 100%;
	border-radius: 10px;
}

.woocommerce-MyAccount-navigation li a:hover {
    color: var(--BGPink);
    background-color: var(--BGcolorC);
	border-radius: 10px;
}

.woocommerce-MyAccount-navigation a[aria-current="page"] {
    text-decoration: underline !important;
}

.woocommerce-MyAccount-content
{
	padding: 25px;
}

.woocommerce-Address-title
{
	border-radius: 20px;
	padding: 15px;
}

.woocommerce-Address-title a
{
	color: var(--TextColorAHighlight);
}

.woocommerce-Address-title a:hover
{
	text-decoration: underline;
}

.my-account-title
{
    font-family: var(--FontA);
}

.woocommerce-MyAccount-content input
{
	font-size: 20px;
    color: var(--TextColorA); 
    border: 1px solid #ccc;
    border-radius: 5px; 
	background-color: var(--BGcolorC) !important;
}

.woocommerce-MyAccount-content .selection span, .select2-search input
{
	font-size: 20px;
    color: var(--TextColorA) !important; 
    border-radius: 5px; 
	background-color: var(--BGcolorC) !important;
}

.order-date, .order-number, .order-status
{
	background-color: var(--BGcolorA) !important;
	color: var(--TextColorB); !important;
}


.wp-block-woocommerce-coming-soon, .wp-site-blocks
{
	color: var(--TextColorA);
	background-color: var(--BGcolorA);
    text-shadow: 2px 2px 4px rgba(210,0,255,0.5);
}


/*------- WooCommerce orders ---------*/

.woocommerce-orders-table__cell-order-actions a{
    margin-right: 10px !important;
}

.woocommerce-orders-table table {

    border-collapse: collapse !important;
    border-spacing: 0px;
}

.woocommerce-orders-table th, td {


}

.socialLinks
{
	list-style: none;
	display: flex;
	gap: 25px;
	justify-content: center;
	padding: 0px;
}

/*-------*/

.table-center
{
	margin-left: auto;
	margin-right: auto;
}

.table-center td{
	vertical-align: middle;
}

.table-center .vc_icon_element{
    margin: 0 !important;
    padding: 0 !important;
}

.table-center p{
	margin: 0 !important;
	padding: 0 !important;
    line-height: 1 !important; 
}

/*-------*/

.info-table .vc_icon_element {
    margin: 0 !important;
    padding: 0 !important;
}

.info-table p {
    margin: 0 !important;
    line-height: 1 !important; 
}

.responsive-paddingRight
{
	@media (min-width: 1401px)
	{
		padding-right:315px !important;
	}
}