/*
 Theme Name:   Mixo Creative
 Theme URI:    https://mixocreative.com/
 Description:  A Mixo Creative theme
 Author:       Adrian
 Author URI:   https://mixocreative.com/
 Template:     twentytwentyfour
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  mixocreative
*/

/* body, .wp-site-blocks, p, .has-body-font-family, .wp-block-paragraph, .wp-block-post-content, h1, h2, h3, h4, h5, h6, .wp-block-heading {
    font-family: 'Atkinson Hyperlegible', 'Noto Sans', sans-serif !important;
} */

.margin-0{ margin: 0 !important;}
.margin-bottom-0{ margin-bottom: 0 !important;}
.margin-top-0{ margin-top: 0 !important;}
.margin-left-0{ margin-left: 0 !important;}
.margin-right-0{ margin-right: 0 !important;}
.wc-block-cart{margin-bottom: 0 !important;}

body{
  /* background-color: var(--wp--preset--color--contrast) !important; */
}
/* .entry-content p{
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}
.entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4, .entry-content h5, .entry-content h6{
  margin-block-end: 0.5em !important;
} */
.fixed{
  position: fixed;
}
.nowrap {
  white-space: nowrap;
}

.wp-site-blocks *:focus {
    outline-style: none !important;
}
.wp-site-blocks {
    min-height: 100dvh;
    flex-direction: column;
    display: flex;
}
main{
  margin-bottom: 0;
}
footer{
  margin-top: 0;
}
.mixocreative-product-promo-collection{
  padding-inline-start: 0px;
  list-style-type: none;
}
.left-panel{
    align-self: stretch !important;
    flex-grow: 1 !important;
    min-width: 220px;
    text-decoration: none;
        padding-inline-start: 40px;
  list-style-type: none;
  }

.left-panel a{
    text-decoration: none;
  }
.left-panel a:hover{
    text-decoration: underline;
  }


.left-panel .cat ul, .left-panel li {
  list-style-type: none;
}

.left-panel .cat ul > li{
font-size: 1em;
}


.left-panel .cat ul li ul> li{

font-size: .8em;
}
.flex-grow {
    display: flex;
    flex-grow: 1;
  }

:root {
    --stl-color: #3d4d55; 
    --resin-color: #a5953c; 
    --theme-gold: #b9ab80;
    --shadow: 0 4px  10px 0 rgba( 0, 0, 0, 0.3 );
}

.shadow{
  box-shadow: var( --shadow );
}

.left-panel {
    flex-grow: 0;
    width: 100%;
    display: block;
    
    z-index: 1;
}
  .mobile-show{
    display: none;
  }
@media screen and (max-width: 779px) {
  main, .flex-grow {
    flex-grow: 1;
      gap: 0;
  }
  .mobile-hide{
    display: none;
  }
  .mobile-show{
    display: inline-block;
  }
}

.no-margin{
  margin: 0;
}

.woocommerce div.product form.cart {
    margin-bottom: 0;
}
/* -------------------------------
MENU
------------------------------- */
.wc-block-mini-cart__badge{
 background-color: #cc1818;
}

@media screen and (max-width: 750px){
  .wp-block-woocommerce-customer-account > a > .label{
    display: none;
  }
  .nav-home{display: none !important;}
}
.wp-block-navigation .wp-block-navigation-item a:hover{
text-decoration: none;
}
.nav-sm .wp-block-navigation .wp-block-navigation-item {
border-bottom: solid 1px lightgray;
}
.nav-sm .wp-block-navigation .wp-block-navigation-item:hover {
border-bottom: solid 2px gray;
}
.nav-lg .wp-block-navigation .wp-block-navigation-item:hover {
border-bottom: solid 2px gray;
}
.nav-sm{display: block !important;}
.nav-lg{display: none !important;}

@media screen and (min-width: 600px){
  .nav-sm{display: none !important;}
  .nav-lg{display: flex !important;}
}

.wp-block-navigation__responsive-container-open svg {
  margin-top: 8px;
    height: 42px;
    width: 42px;
    margin-right: 8px;
}

.wp-block-navigation__responsive-container-close svg {
  margin-top: 8px;
    height: 42px;
    width: 42px;
    margin-right: 8px;
}


.nav-sm .nav-home{display: inline-block !important;}
.nav-sm ul{
  width: 100%;
  text-align: left;
}
.nav-sm ul li{
  width: 100%;
  text-align: left;
  display: block !important;
  width: 100% !important;
}

.nav-sm .wp-block-navigation__responsive-container a{
  padding-left: 1em !important;
}
.nav-sm .wp-block-navigation-item__content{
  padding-left: 1em !important;
}

/* -------------------------------
Shop button
------------------------------- */
.button-shop-front {
    /* margin-left: 60px; */
    margin-top: -74px !important;
    padding-left: 145px !important;
    
}


/* -------------------------------
My Account
------------------------------- */

.woocommerce-order-downloads thead th {
    background-color: black;
    color: white;
	border: thin grey solid;
}

.woocommerce-orders-table thead th {
    background-color: #e6e6e6;
}

.woocommerce-Addresses .woocommerce-Address{
	padding:1em;
	border: solid thin grey;
	border-radius: 0.5em;
    box-sizing: border-box;
	background-color: white;
}
.woocommerce-Addresses h2 {
    margin-top: 0px;
    margin-bottom: 0px;
}

.woocommerce-Address a{
	padding: 2px 8px;
    border: solid thin grey;
    border-radius: 7px;
    color: white;
    background-color: #3f3f3f;
    text-decoration: none;
}

.woocommerce-Address a:hover{
    background-color: black;
}

.woocommerce-Address{
    background-color: white;
}

/* -------------------------------
PRODUCT LOOP
------------------------------- */
.wp-block-woocommerce-product-template{
 grid-gap: 0.5rem;
 row-gap: 0.5rem;
}
/* -------------------------------
RIBBON STYLES
------------------------------- */
/* Ribbon styles (top-left diagonal) */
.onsale {
    position: relative !important;
    top: -2px !important;
    left: -2px !important;
    overflow: hidden !important;
    width: 64px !important;
    height: 64px !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;

}





.onsale span {
    position: absolute !important;
    display: block !important;
    width: 96px !important;
    padding: 0px 0 !important;
    background-color: #C70039  !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .1);
    color: #fff !important;
    text-transform: uppercase !important;
    text-align: center !important;
    left: -27px !important;
    top: 13px !important;
    transform: rotate(-45deg) !important;
    font-size: 12px;
    font-weight:normal;
}

.product-loop-name{
  margin-bottom: 0 !important;
}

/* -------------------------------

      Badge Styles

------------------------------- */
.mixo-product-format-printedresin{
		background-color: var(--resin-color);
	}
	.mixo-product-format-printstl{
		background-color: var(--stl-color);
	}
	.mixo-product-format-badge {
		margin-right: 2px;
		display: inline-flex;
		justify-content: center;
		align-items: center;
		color: #fff;
		border-radius: 28px;
		height: 28px;
		min-width: 28px;
        padding: 2px 2px 0px 2px;
		i {
			text-align: center;
		}
	
	}
/* -------------------------------
     category styles
------------------------------- */
.taxonomy-product_cat a{
color: white;
background-color: #000;
  padding: 0.25em 1em;
  border-radius: 0;
  margin-bottom: 2px;
} 

.out-of-stock{display: inline-block;
    padding: 0.25em 1em;
    background-color: #e00000bf;
    color: white;}

/* -------------------------------
     aDD TO cARD SINGLE BUTTON
------------------------------- */
input[type="radio"], label { /* Apply to your custom visual and the text label */
  cursor: pointer;
}

input[type="radio"]:focus {outline: none;outline-style: none;}

.add-to-cart, .single_add_to_cart_button{
    display: inline-block;
    white-space: nowrap;
      background: linear-gradient(-45deg, #cd3a00, #cd3a00, #cd3a00, rgb(255, 183, 0), #cd3a00, #cd3a00, #cd3a00);
  background-size: 600%;
  -webkit-animation: animeshine 2s linear infinite;
          animation: animeshine 2s linear infinite;
transition: box-shadow 0.3s ease-in-out;
  box-shadow: 4px 4px 10px -2px var(--wp--preset--color--custom-gold);
-webkit-box-shadow: 4px 4px 10px -2px var(--wp--preset--color--custom-gold);
-moz-box-shadow: 4px 4px 10px -2px var(--wp--preset--color--custom-gold);
}
.add-to-cart, .single_add_to_cart_button:hover{
  scale: 1.05;
  box-shadow: 8px 8px 20px -4px var(--wp--preset--color--custom-gold);
-webkit-box-shadow: 8px 8px 20px -4px var(--wp--preset--color--custom-gold);
-moz-box-shadow: 8px 8px 20px -4px var(--wp--preset--color--custom-gold);

}


@-webkit-keyframes animeshine {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}
@keyframes animeshine {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}
.single_add_to_cart_button.disabled{
  opacity: .2 !important;
  background-color: black !important;  -webkit-animation: none !important; /* For WebKit browsers (Chrome, Safari) */
  animation: none !important;         /* Standard property */
  background-image: none !important;
}
/* -------------------------------
     Single Product Styles
------------------------------- */
.product-title-zh{
  font-family: "Noto Serif TC", serif;
}
.product-title-ja{
  font-family: "Noto Serif JP", serif;
}
.variation-terms{
  color: grey;
}
.single_add_to_cart_button{
  display: inline-block;
}
.wc-block-components-sale-badge {
    color: #ff2200;
}

.single_add_to_cart_button.loading {
    opacity: 0.5;
    cursor: not-allowed;
}
.single_add_to_cart_button.loading:after {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid #000;
    border-radius: 50%;
    border-top-color: transparent;
    animation: spin 1s linear infinite;
    margin-left: 10px;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

a.added_to_cart {
    display: none !important;
}

/* -------------------------------
     AR buttons
------------------------------- */


.button-ar, .button-blur{
  transition: transform .2s; /* Animation */
  position: relative;
  display: block;
  z-index: 2;
  width: 140px;
  padding: 0.5em 1em;
  font-size: 1.2em;
  text-align: center;
  color: rgba(255,255,255,0.9);
  border-radius: 50px;
  background: linear-gradient(-45deg, #ffa63d, #ff3d77, #338aff, #3cf0c5);
  background-size: 600%;
  -webkit-animation: anime 16s linear infinite;
          animation: anime 16s linear infinite;
}
.button-ar:hover{
  transform: scale(1.1)
}
.button-blur {
  position: absolute;
  margin-top: -1.5em;
  filter: blur(12px);
  opacity: 0.8;
    height: 1em;
    z-index: 0;
  /* //z-index: -1; */
}
@-webkit-keyframes anime {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@keyframes anime {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* -------------------------------
     wp-block-woocommerce-product-image-gallery  Gallery
------------------------------- */
.wp-block-woocommerce-product-image-gallery {margin-left: auto;
  margin-right: auto;}




/* -------------------------------
   Product loop
------------------------------- */
 .wp-block-woocommerce-product-template .mixocreative-showcase-image {
  transition: transform 0.2s, filter 0.5s ease-in-out;

}

.wp-block-woocommerce-product-template .mixocreative-showcase-image:hover {
  transform: scale(1.1);

}


/* -------------------------------
   login page
------------------------------- */
body.woocommerce-account:has(#customer_login) {
  background-color: #181818;
  background-image: url('assets/images/login2.png');
  background-size: cover; /* This is the key property */
    background-position: center center; /* Centers the image */
    background-repeat: no-repeat; /* Prevents the image from repeating */
}

body.woocommerce-account:has(#customer_login) .wp-block-post-content{
  background-color: rgba(0, 0, 0, 0.5);
}

.woocommerce .woocommerce-form-login .woocommerce-form-login__submit {
    float: right;
    margin-left: 1em;
}

.woocommerce-form .form-row{
  text-align: end;
}
.woocommerce-form-row{
  text-align: start !important;
}
body.woocommerce-account:has(#customer_login) h2{
  color: white;
}

#customer_login h2{
  color: white;
  background-color: rgba(0, 0, 0, 0.9);
  margin: 0 0 0 0;
  padding: 0.25em 0.5em;
}

.woocommerce-form{
  padding: 0;
  margin: 0 0 0 0 !important;
}

.woocommerce-form.woocommerce-form-register{
  /* background-color: rgb(235, 235, 235, 0.9); */
}

.woocommerce-form.woocommerce-form-login{
  /* background-color: rgb(235, 235, 235, 0.9); */
}
.u-column1:has(.woocommerce-form), .u-column2:has(.woocommerce-form){
  background-color: rgb(235, 235, 235, 0.9);
  padding-top: 0;
  margin-bottom: 0;
}


/* -------------------------------
   Button
------------------------------- */
.btn-action, .btn-action-b  { /* Add this */
    position: relative; /* Essential for z-index to work on children relative to this parent */
}
.btn-action > a, .btn-action-b > a{
  transition: transform .2s;
  position: relative;
  display: block;
  padding: 0.5em 1em;
  font-size: 1.2em;
  text-align: center;
  color: rgba(255,255,255,0.9);
  border-radius: 50px;
  background: linear-gradient(-45deg, #ffa63d, #ff3d3d, #000000, #000000);
  background-size: 600%;
  -webkit-animation: animeaction 2s linear infinite;
          animation: animeaction 2s linear infinite;
}
.btn-action-b > a{
  background: linear-gradient(-45deg, #ff3d3d, #be3dff, #000000, #000000);
  background-size: 600%;
  -webkit-animation: animeaction 5s linear infinite;
          animation: animeaction 5s linear infinite;
}
.btn-action > a:hover{
  transform: scale(1.1); 
}
.btn-action-b > a:hover{
  transform: scale(1.1); 
}


/* CSS for the blurred shadow */
.btn-action::before, .btn-action-b::before {
  content: ''; /* Essential for pseudo-elements */
  position: absolute;
  bottom: -10px;
  left: 2px;
  height: 24px;
  width: 100%;
  background: linear-gradient(-45deg, #ffa63d, #ff3d77, #338aff, #3cf0c5);
  background-size: 600%;
  border-radius: 50px;
  filter: blur(15px); /* Adjust the blur amount as needed */
  transition: transform 0.2s; /* Apply transition for hover effect */
  -webkit-animation: animeaction 2s linear infinite; /* Same animation as button */
  animation: animeaction 7s linear infinite;
  animation-delay: 0.1s; /* Slightly delay the shadow's animation for a more dynamic look */
}
@-webkit-keyframes animeaction-b {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@keyframes animeaction-b {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@-webkit-keyframes animeaction {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@keyframes animeaction {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}



/*-----------------------------
           CHAT BUTTON
/*-----------------------------
/* Container for the floating button */
.floating-chat-button-container {
    position: fixed;
    bottom: 30px; /* Adjust distance from bottom */
    right: 30px;  /* Adjust distance from right */
    z-index: 9999; /* Ensures it stays on top of other content */
}

/* Style for the circular button */
.floating-chat-button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 70px; /* Size of the circle */
    height: 70px; /* Size of the circle */
    background-color: #E1306C; /* Instagram-like pink/red */
    color: #fff; /* Icon color */
    border-radius: 50%; /* Makes it perfectly circular */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); /* Soft shadow */
    cursor: pointer;
    text-decoration: none; /* Remove underline from the link */
    transition: background-color 0.3s ease, transform 0.2s ease-in-out; /* Add transition for smooth hover */
    animation: pulse 2s infinite ease-in-out; /* Apply the pulse animation */
}

/* Icon styling (for Bootstrap Icons) */
.floating-chat-button i.bi { /* Target any Bootstrap Icon within the button */
    font-size: 32px; /* Size of the icon */
}

/* Hover effect */
.floating-chat-button:hover {
    background-color: #C13584; /* Slightly darker Instagram shade on hover */
    transform: scale(1.05); /* Slight grow on hover */
    animation: none; /* Stop pulsing on hover if desired */
}

/* Keyframes for the "breathing" (pulse) animation */
@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    }
    50% {
        transform: scale(1.05); /* Grows slightly */
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5); /* Shadow expands */
    }
    100% {
        transform: scale(1);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    }
}

/* Media queries for responsiveness */
/* Container for the floating button */
.floating-chat-button-container {
    position: fixed;
    bottom: 42px; /* Adjust distance from bottom */
    right: 8px;  /* Adjust distance from right */
    z-index: 9999; /* Ensures it stays on top of other content */
}

/* Style for the circular button */
.floating-chat-button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60px; /* Size of the circle */
    height: 60px; /* Size of the circle */
    background-color: #00aa16; /* Instagram-like pink/red */
    color: #fff; /* Icon color */
    border-radius: 50%; /* Makes it perfectly circular */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); /* Soft shadow */
    cursor: pointer;
    text-decoration: none; /* Remove underline from the link */
    transition: background-color 0.3s ease, transform 0.2s ease-in-out; /* Add transition for smooth hover */
    animation: pulse 2s infinite ease-in-out; /* Apply the pulse animation */
}

/* Icon styling (for Bootstrap Icons) */
.floating-chat-button i.bi { /* Target any Bootstrap Icon within the button */
    font-size: 32px; /* Size of the icon */
}

/* Hover effect */
.floating-chat-button:hover {
    background-color: #2fb8f2; /* Slightly darker Instagram shade on hover */
    transform: scale(1.05); /* Slight grow on hover */
    animation: none; /* Stop pulsing on hover if desired */
}

/* Keyframes for the "breathing" (pulse) animation */
@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    }
    50% {
        transform: scale(1.1); /* Grows slightly */
        background-color: #35c135;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5); /* Shadow expands */
    }
    100% {
        transform: scale(1);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    }
}

/* Media queries for responsiveness */
@media (max-width: 768px) {
    .floating-chat-button-container {
        bottom: 20px;
        right: 20px;
    }
    .floating-chat-button {
        width: 60px;
        height: 60px;
    }
    .floating-chat-button i.bi {
        font-size: 28px;
    }
}