/* 
Theme Name: Niuti Storefront 
Version: 1.0 
Description: Child theme for Storefront. 
Author: Chibious
Author URI: https://chibious.com 
Template: storefront 
*/

@layer variables, animations, fonts;

/* ---------------------------------------------
 Variables
--------------------------------------------- */

@layer variables {
  :root {
    --background-color: hsla(360,100%,100%,1);
    --text-color: hsla(210,0%,12%,1);
	--error-color: hsla(0,66%,50%,1);
    --gradientBackground: hsla(324,79%,46%,1);
	--text-font-family: 'Switzer-Variable', 'Open Sans Regular', 'Helvetica', 'Arial', sans-serif;
	--max-z-index: 100000;
	--search-border-opacity: 1;
	--search-border-color: hsla(0,0%,76%,var(--search-border-opacity,1));
	--border-value: 2px;
	--header-height: 5.5em;
	--floating-bar-height: 2.3em;
	--gradient-animation-duration: 20s;
  }
  
  /*@media (prefers-color-scheme: dark) {
	  :root {
		--background-color: hsla(0,0%,7%,1);
		--text-color: hsla(0,0%,89%,1);
		--search-border-color: hsla(0,0%,46%,1);
	  }
  }*/
  
  * {
    --radialGradient: radial-gradient(var(--gradX) var(--gradY), hsl(var(--hue) var(--saturation) var(--luminosity) / 1), hsl(var(--hue) var(--saturation) var(--luminosity) / 0));
    --Niuti-gradient:
		radial-gradient(
			50% 50% at var(--grad3-x,44%) var(--grad3-y,83%),
			hsl(var(--grad3-h,338) var(--grad3-s,91%) var(--grad3-l,75%) / var(--grad3-alpha,1)),
			hsl(var(--grad3-h,338) var(--grad3-s,91%) var(--grad3-l,75%) / 0)
		),radial-gradient(
			50% 50% at var(--grad2-x,98%) var(--grad2-y,4%),
			hsl(var(--grad2-h,272) var(--grad2-s,63%) var(--grad2-l,68%) / var(--grad2-alpha,1)),
			hsl(var(--grad2-h,272) var(--grad2-s,63%) var(--grad2-l,68%) / 0)
		), radial-gradient(
			50% 50% at var(--grad1-x,10%) var(--grad1-y,97%),
			hsl(var(--grad1-h,300) var(--grad1-s,92%) var(--grad1-l,79%) / var(--grad1-alpha,1)),
			hsl(var(--grad1-h,300) var(--grad1-s,92%) var(--grad1-l,79%) / 0)
		), radial-gradient(
			50% 50% at var(--grad0-x,44%) var(--grad0-y,47%),
			hsl(var(--grad0-h,292) var(--grad0-s,90%) var(--grad0-l,85%) / var(--grad0-alpha,1)),
			hsl(var(--grad0-h,292) var(--grad0-s,90%) var(--grad0-l,85%) / 0)
		), radial-gradient(
			hsl(var(--bg-h,324) var(--bg-s,79%) var(--bg-l,46%) / var(--bg-alpha,1)),
			hsl(var(--bg-h,324) var(--bg-s,79%) var(--bg-l,46%) / var(--alpha,1))
		);
	--alpha:1;
    --bg-h:324;
    --bg-s:79%;
    --bg-l:46%;
	--bg-alpha:var(--alpha,1);
    --bg-hsl:hsl(var(--bg-h) var(--bg-s) var(--bg-l));
    --bg-hsla:hsl(var(--bg-h) var(--bg-s) var(--bg-l) / var(--bg-alpha,1));
    --grad0-x:44%;
    --grad0-y:47%;
    --grad0-h:292;
    --grad0-s:90%;
    --grad0-l:85%;
	--grad0-alpha:var(--alpha,1);
    --grad0-hsl:hsl(var(--grad0-h) var(--grad0-s) var(--grad0-l));
    --grad0-hsla:hsl(var(--grad0-h) var(--grad0-s) var(--grad0-l) / var(--grad0-alpha,1));
    --grad1-x:10%;
    --grad1-y:97%;
    --grad1-h:300;
    --grad1-s:92%;
    --grad1-l:79%;
	--grad1-alpha:var(--alpha,1);
    --grad1-hsl:hsl(var(--grad1-h) var(--grad1-s) var(--grad1-l));
    --grad1-hsla:hsl(var(--grad1-h) var(--grad1-s) var(--grad1-l) / var(--grad1-alpha,1));
    --grad2-x:98%;
    --grad2-y:4%;
    --grad2-h:272;
    --grad2-s:63%;
    --grad2-l:68%;
	--grad2-alpha:var(--alpha,1);
    --grad2-hsl:hsl(var(--grad2-h) var(--grad2-s) var(--grad2-l));
    --grad2-hsla:hsl(var(--grad2-h) var(--grad2-s) var(--grad2-l) / var(--grad2-alpha,1));
    --grad3-x:44%;
    --grad3-y:83%;
    --grad3-h:338;
    --grad3-s:91%;
    --grad3-l:75%;
	--grad3-alpha:var(--alpha,1);
    --grad3-hsl:hsl(var(--grad3-h) var(--grad3-s) var(--grad3-l));
    --grad3-hsla:hsl(var(--grad3-h) var(--grad3-s) var(--grad3-l) / var(--grad3-alpha,1));
  }
  
  @property --h {
    syntax: "<number>";
    inherits: false;
    initial-value: 324;
  }
  
  @property --s {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 79%;
  }
  
  @property --l {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 46%;
  }
  
  @property --alpha {
    syntax: "<number>";
    inherits: false;
    initial-value: 1;
  }
  
  @property --bg-h {
    syntax: "<number>";
    inherits: false;
    initial-value: 324;
  }
  
  @property --bg-s {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 79%;
  }
  
  @property --bg-l {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 46%;
  }
  
  @property --bg-alpha {
    syntax: "<number>";
    inherits: false;
    initial-value: 1;
  }
  
  @property --grad0-x {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 44%;
  }
  
  @property --grad0-y {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 47%;
  }
  
  @property --grad0-h {
    syntax: "<number>";
    inherits: false;
    initial-value: 292;
  }
  
  @property --grad0-s {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 90%;
  }
  
  @property --grad0-l {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 85%;
  }
  
  @property --grad0-alpha {
    syntax: "<number>";
    inherits: false;
    initial-value: 1;
  }
  
  @property --grad1-x {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 10%;
  }
  
  @property --grad1-y {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 97%;
  }
  
  @property --grad1-h {
    syntax: "<number>";
    inherits: false;
    initial-value: 300;
  }
  
  @property --grad1-s {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 92%;
  }
  
  @property --grad1-l {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 79%;
  }
  
  @property --grad1-alpha {
    syntax: "<number>";
    inherits: false;
    initial-value: 1;
  }
  
  @property --grad2-x {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 98%;
  }
  
  @property --grad2-y {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 4%;
  }
  
  @property --grad2-h {
    syntax: "<number>";
    inherits: false;
    initial-value: 272;
  }
  
  @property --grad2-s {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 63%;
  }
  
  @property --grad2-l {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 68%;
  }
  
  @property --grad2-alpha {
    syntax: "<number>";
    inherits: false;
    initial-value: 1;
  }
  
  @property --grad3-x {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 44%;
  }
  
  @property --grad3-y {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 83%;
  }
  
  @property --grad3-h {
    syntax: "<number>";
    inherits: false;
    initial-value: 338;
  }
  
  @property --grad3-s {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 91%;
  }
  
  @property --grad3-l {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 75%;
  }
  
  @property --grad3-alpha {
    syntax: "<number>";
    inherits: false;
    initial-value: 1;
  }
  
  @property --border-top-left-radius-horizontal {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 48%;
  }
  
  @property --border-top-left-radius-vertical {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 47%;
  }
  
  @property --border-top-right-radius-horizontal {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 52%;
  }

  @property --border-top-right-radius-vertical {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 55%;
  }
  
  @property --border-bottom-right-radius-horizontal {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 55%;
  }
  
  @property --border-bottom-right-radius-vertical {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 45%;
  }
  
  @property --border-bottom-left-radius-horizontal {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 45%;
  }
    
  @property --border-bottom-left-radius-vertical {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 53%;
  }
  
  @property --gradient-animation-duration {
    syntax: "<time>";
    inherits: false;
    initial-value: 10s;
  }
}

@layer animations {
	@keyframes niuti-gradient-animation {
		0% {
			--grad0-x:44%;
			--grad0-y:47%;
			--grad0-h:292;
			--grad0-s:90%;
			--grad0-l:85%;
			--grad1-x:10%;
			--grad1-y:97%;
			--grad1-h:300;
			--grad1-s:92%;
			--grad1-l:79%;
			--grad2-x:98%;
			--grad2-y:4%;
			--grad2-h:272;
			--grad2-s:63%;
			--grad2-l:68%;
			--grad3-x:44%;
			--grad3-y:83%;
			--grad3-h:338;
			--grad3-s:91%;
			--grad3-l:75%;
		} 12.5% {
			--grad0-x:64%;
			--grad0-y:27%;
		} 16.67% {
			--grad3-x:84%;
			--grad3-y:23%;
		} 25% {
			--grad0-x:84%;
			--grad0-y:47%;
		} 33.33% {
			--grad3-x:94%;
			--grad3-y:93%;
		} 37.5% {
			--grad0-x:64%;
			--grad0-y:87%;
		} 50% {
			--grad0-x:44%;
			--grad0-y:47%;
			--grad1-y:17%;
			--grad2-x:-25%;
			--grad3-x:44%;
			--grad3-y:83%;
		} 62.5% {
			--grad0-x:64%;
			--grad0-y:27%;
		} 66.67% {
			--grad3-x:84%;
			--grad3-y:23%;
		} 75% {
			--grad0-x:84%;
			--grad0-y:47%;
		} 83.33% {
			--grad3-x:94%;
			--grad3-y:93%;
		} 87.5% {
			--grad0-x:64%;
			--grad0-y:87%;
		} 100% {
			--grad0-x:44%;
			--grad0-y:47%;
			--grad0-h:292;
			--grad0-s:90%;
			--grad0-l:85%;
			--grad1-x:10%;
			--grad1-y:97%;
			--grad1-h:300;
			--grad1-s:92%;
			--grad1-l:79%;
			--grad2-x:98%;
			--grad2-y:4%;
			--grad2-h:272;
			--grad2-s:63%;
			--grad2-l:68%;
			--grad3-x:44%;
			--grad3-y:83%;
			--grad3-h:338;
			--grad3-s:91%;
			--grad3-l:75%;
		}
	}
	
	@keyframes hover-colors {
		0% {
			--h: var(--bg-h,324);
			--s: var(--bg-s,79%);
			--l: var(--bg-l,46%);
		} 20% {
			--h: var(--grad0-h,292);
			--s: var(--grad0-s,90%);
			--l: var(--grad0-l,85%);
		} 40% {
			--h: var(--grad1-h,300);
			--s: var(--grad1-s,92%);
			--l: var(--grad1-l,79%);
		} 60% {
			--h: var(--grad2-h,272);
			--s: var(--grad2-s,63%);
			--l: var(--grad2-l,68%);
		} 80% {
			--h: var(--grad3-h,338);
			--s: var(--grad3-s,91%);
			--l: var(--grad3-l,75%);
		} 100% {
			--h: var(--bg-h,324);
			--s: var(--bg-s,79%);
			--l: var(--bg-l,46%);
		}
	}
	
	/*@keyframes menu-open-color-animation {
	    0% {
	        --bg-h:324;
	        --bg-s:79%;
	        --bg-l:46%;
			--grad0-h:292;
			--grad0-s:90%;
			--grad0-l:85%;
			--grad1-h:300;
			--grad1-s:92%;
			--grad1-l:79%;
			--grad2-h:272;
			--grad2-s:63%;
			--grad2-l:68%;
			--grad3-h:338;
			--grad3-s:91%;
			--grad3-l:75%;
	    } 100% {
	        --bg-h:0;
            --bg-s:0%;
            --bg-l:100%;
            --grad0-h:0;
            --grad0-s:0%;
            --grad0-l:100%;
            --grad1-h:0;
            --grad1-s:0%;
            --grad1-l:100%;
            --grad2-h:0;
            --grad2-s:0%;
            --grad2-l:100%;
            --grad3-h:0;
            --grad3-s:0%;
            --grad3-l:100%;
	    }
	}
	
	@keyframes menu-blob-animation {
		0% {
			--border-top-left-radius-horizontal: 48%;
    	    --border-top-left-radius-vertical: 47%;
    	    --border-top-right-radius-horizontal: 52%;
    	    --border-top-right-radius-vertical: 55%;
    	    --border-bottom-right-radius-horizontal: 55%;
    	    --border-bottom-right-radius-vertical: 45%;
    	    --border-bottom-left-radius-horizontal: 45%;
    	    --border-bottom-left-radius-vertical: 53%;
		} 25% {
			--border-top-left-radius-horizontal: 24%;
    	    --border-top-left-radius-vertical: 64%;
    	    --border-top-right-radius-horizontal: 76%;
    	    --border-top-right-radius-vertical: 32%;
    	    --border-bottom-right-radius-horizontal: 30%;
    	    --border-bottom-right-radius-vertical: 68%;
    	    --border-bottom-left-radius-horizontal: 70%;
    	    --border-bottom-left-radius-vertical: 36%;
		} 50% {
			--border-top-left-radius-horizontal: 57%;
    	    --border-top-left-radius-vertical: 51%;
    	    --border-top-right-radius-horizontal: 43%;
    	    --border-top-right-radius-vertical: 69%;
    	    --border-bottom-right-radius-horizontal: 58%;
    	    --border-bottom-right-radius-vertical: 31%;
    	    --border-bottom-left-radius-horizontal: 42%;
    	    --border-bottom-left-radius-vertical: 49%;
		} 75% {
			--border-top-left-radius-horizontal: 64%;
    	    --border-top-left-radius-vertical: 64%;
    	    --border-top-right-radius-horizontal: 36%;
    	    --border-top-right-radius-vertical: 60%;
    	    --border-bottom-right-radius-horizontal: 70%;
    	    --border-bottom-right-radius-vertical: 40%;
    	    --border-bottom-left-radius-horizontal: 30%;
    	    --border-bottom-left-radius-vertical: 36%;
		} 100% {
			--border-top-left-radius-horizontal: 48%;
    	    --border-top-left-radius-vertical: 47%;
    	    --border-top-right-radius-horizontal: 52%;
    	    --border-top-right-radius-vertical: 55%;
    	    --border-bottom-right-radius-horizontal: 55%;
    	    --border-bottom-right-radius-vertical: 45%;
    	    --border-bottom-left-radius-horizontal: 45%;
    	    --border-bottom-left-radius-vertical: 53%;
		}
	}*/
	
	@keyframes mobile-menu-open {
		0% {
			visibility: hidden;
			transform: translateY(-100%);
		} 100% {
			visibility: visible;
			transform: translateY(0);
		}
	}
	
	@keyframes mobile-menu-close {
		0% {
			visibility: visible;
			transform: translateY(0);
		} 100% {
			visibility: hidden;
			transform: translateY(-100%);
		}
	}
	
	@keyframes desktop-menu-open {
		0% {
			visibility: hidden;
			transform: translateX(-100%);
		} 100% {
			visibility: visible;
			transform: translateX(0);
		}
	}
	
	@keyframes desktop-menu-close {
		0% {
			visibility: visible;
			transform: translateX(0);
		} 100% {
			visibility: hidden;
			transform: translateX(-100%);
		}
	}
	
	@keyframes cookie-notice-slideup {
		0% {
			transform: translateY(50em);
		} 50% {
			transform: translateY(50em);
		} 100% {
			transform: translateY(0);
		}
	}
	
	@keyframes shine {
      to{background-position: bottom right;}
    }
}

/* ---------------------------------------------
 Admin bar
--------------------------------------------- */

@media screen and (max-width: 600px) {
	#wpadminbar {
		position: fixed;
	}
}

/* ---------------------------------------------
 Links
--------------------------------------------- */

a {
	--h: var(--bg-h,324);
	--s: var(--bg-s,79%);
	--l: var(--bg-l,46%);
	color: hsl(var(--h,324) var(--s,79%) var(--l,46%) / var(--alpha,1));
}

a:hover {
	--h: var(--grad0-h,292);
	--s: var(--grad0-s,90%);
	--l: var(--grad0-l,85%);
}

.hentry .entry-content a:hover:not(.button):not(.components-button:not(.is-link)):not(.wp-block-button__link) {
	text-decoration: underline;
}

/* ---------------------------------------------
 Focus
--------------------------------------------- */

a:focus,
button:focus,
.button.alt:focus,
input:focus,
textarea:focus,
input[type="button"]:focus,
input[type="reset"]:focus,
input[type="submit"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus {
	outline: none;
}

a:focus-visible,
button:focus-visible,
.button.alt:focus-visible,
input:focus-visible,
textarea:focus-visible,
input[type="button"]:focus-visible,
input[type="reset"]:focus-visible,
input[type="submit"]:focus-visible,
input[type="email"]:focus-visible,
input[type="tel"]:focus-visible,
input[type="url"]:focus-visible,
input[type="password"]:focus-visible,
input[type="search"]:focus-visible {
	outline: 2px solid black;
}

::-moz-selection {
  background: var(--grad0-hsla,hsl(300 92% 79% / 1));
}

::selection {
  background: var(--grad0-hsla,hsl(300 92% 79% / 1));
}

/* ---------------------------------------------
 Fonts
--------------------------------------------- */

@layer fonts {
    @font-face {
      font-family: 'Switzer-Variable';
      src: url('assets/fonts/Switzer-Variable.woff2') format('woff2'),
    	   url('assets/fonts/Switzer-Variable.woff') format('woff'),
    	   url('assets/fonts/Switzer-Variable.ttf') format('truetype');
      font-weight: 100 900;
      font-display: swap;
      font-style: normal;
    }
    
    @font-face {
      font-family: 'Switzer-VariableItalic';
      src: url('assets/fonts/Switzer-VariableItalic.woff2') format('woff2'),
    	   url('assets/fonts/Switzer-VariableItalic.woff') format('woff'),
    	   url('assets/fonts/Switzer-VariableItalic.ttf') format('truetype');
      font-weight: 100 900;
      font-display: swap;
      font-style: italic;
    }
}

/* ---------------------------------------------
 Images
--------------------------------------------- */

img {
	border-radius: 0;
}

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

body,
button,
input,
select,
optgroup,
textarea {
	color: var(--text-color,hsla(210,0%,12%,1));
	font-family: var(--text-font-family);
	font-size: 1.1rem;
	line-height: 1.5;
	font-variation-settings: "wght" 350;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-variation-settings: "wght" 600;
}

h1,
h2,
h3,
h4,
h5,
h6,
.wc-block-grid__product-title {
    color: var(--text-color,hsla(210,0%,12%,1));
}

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

button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.button,
.widget_shopping_cart a.button,
.added_to_cart,
.site-header-cart .widget_shopping_cart a.button,
.wc-block-grid__products .wc-block-grid__product .wp-block-button__link {
    border: var(--border-value,2px) solid var(--text-color,hsla(210,0%,12%,1));
    background-color: var(--background-color,#FFF);
    color: var(--text-color,hsla(210,0%,12%,1));
    padding:0.75em 1em;
	font-weight: 600;
	font-variation-settings: "wght" 600;
	cursor: pointer;
	transition: border-color 0.1s linear, color 0.1s linear;
	line-height: 1;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
.button:hover,
.widget_shopping_cart a.button:hover,
.added_to_cart:hover,
.site-header-cart .widget_shopping_cart a.button:not(.checkout):hover,
.wc-block-grid__products .wc-block-grid__product .wp-block-button__link:hover {
    --text-color: var(--bg-hsla,hsl(324 79% 46% / 1));
    background-color: var(--background-color,#FFF);
    border-color: var(--text-color,hsl(324 79% 46% / 1));
    color: var(--text-color,hsl(324 79% 46% / 1));
}

.add_to_cart_button:not(.product_type_variable),
.added_to_cart.alt,
.widget a.button.checkout,
.wc-proceed-to-checkout .button.checkout-button {
    background: var(--Niuti-gradient,radial-gradient(50% 50% at 44% 83%, hsl(338 91% 75% / 1), hsl(338 91% 75% / 0)), radial-gradient(50% 50% at 98% 4%, hsl(272 63% 68% / 1), hsl(272 63% 68% / 0)), radial-gradient(50% 50% at 10% 97%, hsl(300 92% 79% / 1), hsl(300 92% 79% / 0)), radial-gradient(50% 50% at 44% 47%, hsl(292 90% 85% / 1), hsl(292 90% 85% / 0)), radial-gradient(hsl(324 79% 46% / 1), hsl(324 79% 46% / 1)));
    border: none;
    color: #FFF;
    padding:calc(0.75em + var(--border-value,2px)) calc(1em + var(--border-value,2px));
}

button.menu-toggle {
	background: none;
	border: none;
	padding: 0.2466em 0.325em;
}

button.menu-toggle::before,
button.menu-toggle::after,
button.menu-toggle span::before {
	content: none;
}

.added_to_cart {
	margin-left: 1em;
}

/* ---------------------------------------------
 Inputs
--------------------------------------------- */

input[type=text],
input[type=number],
input[type=email],
input[type=tel],
input[type=url],
input[type=password],
input[type=search],
textarea,
.input-text {
	--outline-width:0.1rem;
    background-color: var(--background-color,#FFF);
    color: var(--text-color,hsla(210,0%,12%,1));
    box-shadow: none;
	border: hsla(0, 0%, 80%, 1) var(--outline-width,0.1rem) solid;
}

input[type=text]:focus,
input[type=number]:focus,
input[type=email]:focus,
input[type=tel]:focus,
input[type=url]:focus,
input[type=password]:focus,
input[type=search]:focus,
textarea:focus,
.input-text:focus {
	background-color: var(--background-color,#FFF);
	outline: none;
}

/* ---------------------------------------------
 Header
--------------------------------------------- */

.site-header {
	display: grid;
	grid-template-columns: repeat(3,1fr);
	grid-template-rows: 1fr;
	align-items: center;
	border-bottom: none;
	padding: 0;
	position: fixed;
	width: 100%;
	height: var(--header-height,5.5em);
	top: 0;
	box-shadow: 0 0 5px 2px hsla(0,0%,46%,0.2)
}

body.has-floating-bars .site-header {
	grid-template-rows: var(--floating-bar-height,2.3em) 1fr;
	height: calc(var(--header-height,5.5em) + var(--floating-bar-height,2.3em));
}

.admin-bar .site-header {
	top: var(--wp-admin--admin-bar--height,32px);
}

@media (min-width: 768px) {
	.woocommerce-active .site-header .site-branding {
		width: 100%;
		float: none;
		margin: 0;
		line-height: 1;
	}
}

.site-header .site-branding {
	display: flex;
	justify-content: center;
	align-items: center;
	grid-column: 2/span 1;
	grid-row: 1/span 1;
	width: 100%;
	height: 100%;
	background-color: var(--background-color,#FFF);
}

body.has-floating-bars .site-header .site-branding {
	grid-row: 2/span 1;
}

.site-header .site-branding svg#niuti-logo {
	max-width: 100%;
	height: auto;
}

.storefront-primary-navigation {
	/*position: relative;*/
	display: flex;
	justify-content: flex-start;
	align-items: center;
	grid-column: 1/span 1;
	grid-row: 1/span 1;
	padding-left: 1em;
	width: 100%;
	height: 100%;
	background-color: var(--background-color,#FFF);
}

body.has-floating-bars .site-header .storefront-primary-navigation {
	grid-row: 2/span 1;
}

.ecommerce-menu {
	display: flex;
	gap: .75em;
	justify-content: flex-end;
	align-items: center;
	grid-column: 3/span 1;
	grid-row: 1/span 1;
	width: 100%;
	height: 100%;
	padding-right: 1em;
	background-color: var(--background-color,#FFF);
}

body.has-floating-bars .site-header .ecommerce-menu {
	grid-row: 2/span 1;
}

#account {
	line-height: 1;
}

#account a {
	display: block;
	line-height: 0;
}

.site-branding .site-title a {
	display: block;
	line-height: 0;
}

.main-navigation {
	display: flex;
	justify-content: center;
	align-items: center;
}

/*.main-navigation:before {
	content: '';
	position: absolute;
	background: var(--Niuti-gradient,radial-gradient(50% 50% at 44% 83%, hsl(338 91% 75% / 1), hsl(338 91% 75% / 0)), radial-gradient(50% 50% at 98% 4%, hsl(272 63% 68% / 1), hsl(272 63% 68% / 0)), radial-gradient(50% 50% at 10% 97%, hsl(300 92% 79% / 1), hsl(300 92% 79% / 0)), radial-gradient(50% 50% at 44% 47%, hsl(292 90% 85% / 1), hsl(292 90% 85% / 0)), radial-gradient(hsl(324 79% 46% / 1), hsl(324 79% 46% / 1)));
	border-radius: 100%;
	width: 220vh;
	aspect-ratio: 1 / 1;
	transform: scale(0);
	z-index: 1;
}
*/

.main-navigation > * {
	z-index: 2;
}

.main-navigation .primary-navigation {
	position: absolute;
	left: 0;
	top: var(--header-height,5.5em);
	padding: 2em;
    height: calc(100vh - var(--header-height,5.5em) - 1.5em);
	width: 100%;
	--alpha:0.75;
	background: var(--Niuti-gradient,radial-gradient(50% 50% at 44% 83%, hsl(338 91% 75% / 1), hsl(338 91% 75% / 0)), radial-gradient(50% 50% at 98% 4%, hsl(272 63% 68% / 1), hsl(272 63% 68% / 0)), radial-gradient(50% 50% at 10% 97%, hsl(300 92% 79% / 1), hsl(300 92% 79% / 0)), radial-gradient(50% 50% at 44% 47%, hsl(292 90% 85% / 1), hsl(292 90% 85% / 0)), radial-gradient(hsl(324 79% 46% / 1), hsl(324 79% 46% / 1))) var(--background-color, hsla(360,100%,100%,1));
	box-shadow: 0 0 5px 2px hsla(0,0%,46%,0.2);
	z-index: -1;
	display: block;
	overflow-y: auto;
	visibility: hidden;
	transform: translateY(-100%);
}

body.has-floating-bars .site-header .main-navigation .primary-navigation {
	top: calc(var(--header-height,5.5em) + var(--floating-bar-height,2.3em));
}

.main-navigation .primary-navigation:last-child {
	visibility: hidden;
}

.main-navigation.toggled .primary-navigation {
	visibility: visible;
	transform: translate(0);
}

.main-navigation ul.nav-menu {
	display: flex;
	flex-direction: column;
	margin-left: 0;
}

.main-navigation ul.menu>li>a,
.main-navigation ul.nav-menu>li>a {
	padding: 1em 0;
	color: var(--background-color, hsla(360,100%,100%,1));
	font-weight: 400;
    font-variation-settings: "wght" 400;
}

.main-navigation ul.menu>li>a:hover,
.main-navigation ul.nav-menu>li>a:hover {
	color: var(--background-color, hsla(360,100%,100%,1));
	/*opacity: 0.8;*/
	font-weight: 600;
    font-variation-settings: "wght" 600;
}

.main-navigation ul li a,
.site-title a,
ul.menu li a,
.main-navigation ul li a:hover,
.main-navigation ul li:hover > a,
.site-title a:hover,
.site-header ul.menu li.current-menu-item > a {
	color: var(--background-color, hsla(360,100%,100%,1));
}

@media (min-width: 768px) {
	.main-navigation .primary-navigation {
		/*display: none;*/
		min-width: 30em;
		width: auto;
		transform: translateX(-100%);
	}
	
	.menu-toggle, .handheld-navigation,
	.main-navigation.toggled .handheld-navigation,
	.main-navigation.toggled .primary-navigation {
		display: block;
	}
	
	.woocommerce-active .site-header .main-navigation {
		width: fit-content;
		float: none;
		margin-right: 0;
	}
	
	.main-navigation ul ul,
	.secondary-navigation ul ul {
		position: initial;
	}
	
	.main-navigation ul.menu>li.menu-item-has-children>a::after,
	.main-navigation ul.menu>li.page_item_has_children>a::after,
	.main-navigation ul.nav-menu>li.menu-item-has-children>a::after,
	.main-navigation ul.nav-menu>li.page_item_has_children>a::after {
		content: none;
	}
	
	.main-navigation ul.menu ul.sub-menu,
	.main-navigation ul.nav-menu ul.children,
	.main-navigation ul.menu ul a,
	.main-navigation ul.menu ul li>a {
		background: none;
	}
	
	.main-navigation ul.menu ul.sub-menu,
	.main-navigation ul.nav-menu ul.children,
	.main-navigation ul.menu ul.sub-menu,
	.main-navigation ul.nav-menu ul.children,
	.main-navigation ul.menu ul a,
	.main-navigation ul.menu ul li>a,
	.main-navigation ul.menu ul a:hover,
	.main-navigation ul.menu ul li:hover>a,
	.main-navigation ul.menu ul li.focus,
	.main-navigation ul.nav-menu ul a:hover,
	.main-navigation ul.nav-menu ul li:hover>a,
	.main-navigation ul.nav-menu ul li.focus {
		background: none;
		width: 100%;
	}
	
	.main-navigation ul li a:hover,
	.site-title a:hover,
	ul.menu li a:hover,
	.main-navigation ul li a:focus,
	.site-title a:focus,
	ul.menu li a:focus {
		color: var(--background-color, hsla(360,100%,100%,1));
		font-weight: 600;
		font-variation-settings: "wght" 600;
	}
}


/* ---------------------------------------------
 Floating Bars
--------------------------------------------- */

.floating-bars {
	grid-column: 1/span 3;
	grid-row: 1/span 1;
	width: 100%;
	height: var(--floating-bar-height,2.3em);
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-rows: 1fr;
	grid-template-columns: 1fr;
	justify-content: center;
	align-items: center;
}

.floating-bars li {
	grid-row: 1/span 1;
	grid-column: 1/span 1;
	width: 100%;
	height: 100%;
	text-align: center;
	line-height: 1;
	display: flex;
    justify-content: center;
    align-items: center;
	background-color: #000; /*fallback*/
	color: #FFF;
	font-size: 90%;
	font-size: clamp(0.8em, 3vw, 90%);
	opacity: 0;
	visibility: hidden;
}

.floating-bars li a {
	color: #fff;
	text-decoration: underline;
}

.floating-bars li:first-of-type {
	background-color: var(--bg-hsla,hsl(324 79% 46% / 1));
	z-index: 5;
}

.floating-bars li:nth-of-type(2) {
	color: #000;
	background-color: var(--grad0-hsla,hsl(292 90% 85% / 1));
	z-index: 4;
}

.floating-bars li:nth-of-type(3) {
	background-color: var(--grad1-hsla,hsl(300 92% 79% / 1));
	z-index: 3;
}

.floating-bars li:nth-of-type(4) {
	background-color: var(--grad2-hsla,hsl(272 63% 68% / 1));
	z-index: 2;
}

.floating-bars li:nth-of-type(5) {
	background-color: var(--grad3-hsla,hsl(338 91% 75% / 1));
	z-index: 1;
}

.floating-bars li p {
	margin: 0;
}

.floating-bars li:nth-of-type(2) a {
	color: #000;
}

.floating-bars li.active {
	opacity: 1;
	visibility: visible;
}

@media (prefers-reduced-motion: no-preference) {
	.floating-bars li {
		transition: opacity 0.5s linear;
	}
}

/* ---------------------------------------------
 Cart
--------------------------------------------- */

.woocommerce-active .site-header .site-header-cart {
	width: fit-content;
	position: relative;
}

.site-header-cart .cart-contents::after {
	content: none;
}

.site-header-cart .cart-contents {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}

.site-header-cart .cart-contents .count {
	position: absolute;
	font-weight: 500;
    margin-top: 0.25em;
    opacity: 1;
    font-variation-settings: "wght" 500;
	color: var(--bg-hsla,hsl(324 79% 46% / 1));
}

@supports (not (selector(:has()))) {
	.site-header-cart > li:nth-of-type(2) {
		position: absolute;
		min-width: 12em;
		width: max-content;
		right: 0;
	}
}

@supports selector(:has()) {
	.site-header-cart li:has(.widget_shopping_cart) {
		position: absolute;
		min-width: 12em;
		width: max-content;
		right: 0;
	}
}

.site-header-cart .widget_shopping_cart {
	box-shadow: 0 0 15px 7px hsla(0,0%,46%,0.2);
}

.site-header-cart .widget_shopping_cart:before {
	content: '';
	position: absolute;
	display: block;
	width: 0;
	height: 0;
	top: -1.4em;
    right: 0.5em;
    border-left: 0.75em solid transparent;
    border-right: 0.75em solid transparent;
    border-top: 0.75em solid transparent;
    border-bottom: 0.75em solid var(--background-color,#fff);
}

.site-header-cart:hover .widget_shopping_cart:has(.woocommerce-mini-cart__empty-message),
.site-header-cart:focus-within .widget_shopping_cart:has(.woocommerce-mini-cart__empty-message) {
    top: -1.5em;
}

.site-header .widget_shopping_cart p.total,
.site-header .widget_shopping_cart p.buttons,
.site-header .widget_shopping_cart li {
	padding-left: 0;
	padding-right: 0;
}

.site-header .widget_shopping_cart li:has(a:not(.remove):focus) {
	outline: 2px solid black;
}

.site-header .widget_shopping_cart li a:not(.remove):focus {
	outline: none;
}

.site-header-cart .widget_shopping_cart,
.site-header-cart .widget_shopping_cart .buttons,
.site-header-cart .widget_shopping_cart .total {
	background-color: var(--background-color, hsla(360,100%,100%,1));
}

.site-header-cart .widget_shopping_cart .product_list_widget {
	display: flex;
    flex-direction: column;
    gap: 1em;
	overflow: auto;
    overscroll-behavior: contain;
	max-height: 18.5em;
	padding: 0 0 1.5em;
}

.site-header-cart .widget_shopping_cart .product_list_widget::-webkit-scrollbar {
	width: 0.5em;
	background-color: var(--background-color,#fff);
}

.site-header-cart .widget_shopping_cart .product_list_widget::-webkit-scrollbar-thumb {
	background-color: var(--search-border-color,hsla(0,0%,76%,1));
	border-radius: 25px;
}

.product_list_widget li {
	padding: 0 1.41575em;
}

.widget_shopping_cart p.total,
.product_list_widget li {
	border-bottom: none;
}

.site-header-cart .widget_shopping_cart .woocommerce-mini-cart__empty-message {
	/*padding: 2em;*/
	margin: 0;
	text-align: center;
}

a.cart-contents,
.site-header-cart .widget_shopping_cart a,
a.cart-contents:hover,
.site-header-cart .widget_shopping_cart a:hover {
	color: var(--text-color,hsla(210,0%,12%,1));
}

.site-header-cart .widget_shopping_cart .product_list_widget li img {
	max-width: 4em;
}

.site-header .widget_shopping_cart p.buttons {
	display: flex;
    flex-wrap: nowrap;
    gap: 1em;
	padding-bottom: 0;
}

.widget_shopping_cart .buttons a {
	margin-bottom: 0;
	flex: 1 0 0;
}

.wc-forward::after,
.woocommerce-Button--next::after {
	content: none;
}

.site-header .widget_shopping_cart p.total {
	padding: 1em 0 0.5em;
	text-align: right;
	margin: 0;
	border-top: 1px solid var(--search-border-color,hsla(0,0%,76%,1));
}

.site-header .widget_shopping_cart p.total .woocommerce-Price-amount bdi {
	font-weight: 600;
	font-variation-settings: "wght" 500;
}

@media (min-width: 768px) {
	.site-header-cart:focus-within .widget_shopping_cart {
		display: block;
		left: 0;
	}
	
	.site-header-cart:hover .widget_shopping_cart,
	.site-header-cart:focus-within .widget_shopping_cart {
		position: relative;
		top: 0.2em;
		min-width: 20em;
		padding: 1.5em;
	}
	
	.site-header-cart:hover .widget_shopping_cart:has(li:nth-child(4)),
	.site-header-cart:focus-within .widget_shopping_cart:has(li:nth-child(4)) {
		padding-right: 1em;
	}
	
	.site-header-cart:hover .widget_shopping_cart .product_list_widget:has(li:nth-child(4)),
	.site-header-cart:focus-within .widget_shopping_cart .product_list_widget:has(li:nth-child(4)) {
		padding-right: 1em;
	}
	
	.site-header-cart:hover .widget_shopping_cart:has(li:nth-child(4)) p.total,
	.site-header-cart:focus-within .widget_shopping_cart:has(li:nth-child(4)) p.total,
	.site-header-cart:hover .widget_shopping_cart:has(li:nth-child(4)) p.buttons,
	.site-header-cart:focus-within .widget_shopping_cart:has(li:nth-child(4)) p.buttons {
		padding-right: .5em;
	}
	
	.site-header-cart:focus-within .widget_shopping_cart .product_list_widget {
		height: auto;
	}
}

/* ---------------------------------------------
 Body
--------------------------------------------- */

body {
	background-color: var(--background-color, hsla(360,100%,100%,1));
	padding-top: calc( var(--header-height,5.5em) + 4em);
}

body.has-floating-bars {
	padding-top: calc( var(--header-height,5.5em) + var(--floating-bar-height,2.3em) + 4em);
}

.site-header,
.secondary-navigation ul ul,
.main-navigation ul.menu > li.menu-item-has-children:after,
.secondary-navigation ul.menu ul,
.storefront-handheld-footer-bar,
.storefront-handheld-footer-bar ul li > a,
.storefront-handheld-footer-bar ul li.search .site-search {
	background-color: var(--background-color, hsla(360,100%,100%,1));
}

/* ---------------------------------------------
 Products
--------------------------------------------- */

.onsale {
    width: 6em;
    height: 6em;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    background: linear-gradient(135deg,
		var(--grad3-hsla,hsl(338 91% 75% / 1)),
		var(--grad2-hsla,hsl(272 63% 68% / 1)) 40%,
		var(--grad0-hsla,hsl(292 90% 85% / 1)) 50%,
		var(--grad3-hsla,hsl(338 91% 75% / 1)) 60%,
		var(--grad2-hsla,hsl(272 63% 68% / 1)));
    background-size: 400%;
    background-position: top left;
    clip-path: polygon(100%0,0 0,0 100%);
    display: flex;
    justify-content: center;
    align-items: center;
	color: #FFF;
	border: none;
	border-radius: 0;
}

html[lang="pt-PT"] .onsale {
    width: 5em;
    height: 5em;
}

.onsale span {
  position:absolute;
  top: -18.75%; /* Average of 25% and 12.5% */
  left: -18.75%;
  width: 100%;
  height: 100%;
  line-height: 1.2;
  text-align: center;
  font-size: 1.1em;
  font-weight: 600;
  font-variation-settings: "wght" 600;
  transform: rotate(-45deg);
  color: #FFF;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
}

/* ---------------------------------------------
 Footer
--------------------------------------------- */

.site-footer {
	--bg-alpha:.5;
	--grad0-alpha:.5;
	--grad1-alpha:.5;
	--grad2-alpha:.5;
	--grad3-alpha:.5;
	background: var(--Niuti-gradient,radial-gradient(50% 50% at 44% 83%, hsl(338 91% 75% / 1), hsl(338 91% 75% / 0)), radial-gradient(50% 50% at 98% 4%, hsl(272 63% 68% / 1), hsl(272 63% 68% / 0)), radial-gradient(50% 50% at 10% 97%, hsl(300 92% 79% / 1), hsl(300 92% 79% / 0)), radial-gradient(50% 50% at 44% 47%, hsl(292 90% 85% / 1), hsl(292 90% 85% / 0)), radial-gradient(hsl(324 79% 46% / 1), hsl(324 79% 46% / 1)));
	color: #FFF;
	padding: 2em 0;
}

.site-footer a:not(.button):not(.components-button) {
	color: #FFF;
}

.site-footer a:not(.button):not(.components-button):hover,
.site-footer a:not(.button):not(.components-button):focus {
	opacity: 0.9;
	text-decoration: underline;
	font-variation-settings: "wght" 350;
}

.site-footer h2 {
	font-size: 1.5em;
	color: #FFF;
	margin-bottom: 1em;
}

.site-footer .footer-container {
    display: flex;
    justify-content: center;
    gap: 1em;
	flex-wrap: wrap;
	margin: 2em auto;
	width: 100%;
}

.site-footer #email-subscription {
	width: 100%;
}

.site-footer #email-subscription form {
	display: grid;
	/*max-width: 600px;*/
	gap: 1em;
}

.site-footer #email-subscription .form-fields {
	display: grid;
	gap: 0.5em;
}

.site-footer #email-subscription .form-fields input {
	text-overflow: ellipsis;
	border: none;
}

.site-footer #email-subscription .gdpr {
	text-align: center;
	accent-color: #000;
}

.site-footer #email-subscription button[type="submit"] {
	background-color: #000;
	color: #FFF;
	border: none;
}

.site-footer #email-subscription button[type="submit"]:hover,
.site-footer #email-subscription button[type="submit"]:focus {
	background-color: var(--grad1-hsla,hsl(300 92% 79% / 1));
}

.site-footer #email-subscription #response {
	/*width: fit-content;*/
	width: 100%;
    flex-grow: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 900px;
    max-height: 0;
    overflow: hidden;
}

.site-footer #email-subscription #response:has(p) {
    max-height: 10em;
}

.site-footer #email-subscription #response p {
	max-width: 100%;
	width: 100%;
    color: var(--bg-hsla,hsl(324 79% 46% / 1));
    background: #FFF;
    padding: 1em;
	text-align: center;
}

.site-footer .footer-menus {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 100%;
	margin-right: auto;
}

.site-footer .footer-menus .footer-links {
    margin-bottom: 2em;
}

.site-footer .footer-menus ul {
	list-style: none;
	margin: 0;
}

.site-footer .footer-menus ul li:not(:last-child) {
    margin-bottom: 0.5em;
    line-height: 1.2;
}

.site-footer .footer-menus ul li a {
	text-decoration: none;
}

.site-footer .footer-menus ul.social-menu {
	display: flex;
	gap: 0.25em;
	flex-wrap: wrap;
}

.site-footer .footer-menus ul.social-menu .svg-icon path {
	fill: #FFF;
}

.site-info {
	display: flex;
	justify-content: space-between;
	padding: 0;
	flex-wrap: wrap;
	gap: 1em;
	margin-bottom: 1em;
}

@media screen and (min-width: 940px) {
	.site-footer #email-subscription {
		max-width: fit-content;
		margin-right: auto;
	}

	.site-footer #email-subscription form {
		max-width: 100%;
		grid-template-columns: 4fr 1fr;
		grid-template-rows: 1fr .5fr;
	}

	.site-footer #email-subscription .form-fields {
		display: flex;
		grid-column: 1/span 1;
		grid-row: 1/span 1;
	}
	
	.site-footer #email-subscription .form-fields input[type="text"] {
		max-width: calc(50% / 2);
	}
	
	.site-footer #email-subscription .form-fields input[type="email"] {
		width: 50%;
	}

	.site-footer #email-subscription .gdpr {
		grid-column: 1/span 1;
		grid-row: 2/span 1;
		text-align: right;
	}
	
	.site-footer #email-subscription #response {
		max-width: 900px;
	}
	
	.site-footer .footer-menus {
		width: auto;
		flex-wrap: nowrap;
		min-width: 18em;
		flex-direction: row;
		gap: clamp(1em,6vw,5em);
	}
}

@media screen and (min-width: 1200px) {
	.site-footer .footer-container {
		flex-wrap: nowrap;
		gap: clamp(1em,6vw,5em);
	}
	
	.site-footer #email-subscription {
		max-width: min-content;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.site-footer {
		animation: niuti-gradient-animation var(--gradient-animation-duration,20s) linear infinite;
	}
	
	.site-footer #email-subscription button[type="submit"] {
		transition: background-color 0.1s linear;
	}
	
	.site-footer #email-subscription #response:has(p) {
		transition: max-height 0.1s linear;
	}
}

/* ---------------------------------------------
 Alerts
--------------------------------------------- */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
p.no-comments {
	--grad0-alpha:.25;
	--grad1-alpha:.25;
	--grad2-alpha:.25;
	--grad3-alpha:.25;
	background: var(--Niuti-gradient,radial-gradient(50% 50% at 44% 83%, hsl(338 91% 75% / 1), hsl(338 91% 75% / 0)), radial-gradient(50% 50% at 98% 4%, hsl(272 63% 68% / 1), hsl(272 63% 68% / 0)), radial-gradient(50% 50% at 10% 97%, hsl(300 92% 79% / 1), hsl(300 92% 79% / 0)), radial-gradient(50% 50% at 44% 47%, hsl(292 90% 85% / 1), hsl(292 90% 85% / 0)), radial-gradient(hsl(324 79% 46% / 1), hsl(324 79% 46% / 1)));
	border-left: none;
}

.woocommerce-error {
	background: var(--error-color,hsla(0,66%,50%,1));
}


/* ---------------------------------------------
 Cookie Notice
--------------------------------------------- */

#cookie-notice {
    color: #000;
    font-family: inherit;
    background: #fff;
    padding: 1.5em;
    position: fixed;
    width: 100%;
    bottom: 0;
    right: 0;
	max-width: 100%;
    box-shadow: 0px 0px 50px 5px rgb(117 117 117 / 30%);
    visibility: hidden;
    z-index: 1000000;
    box-sizing: border-box;
}

#cookie-notice p {
    margin: 0 0 1em;
    color: #000;
    font-size: 1em;
    line-height: 1.7;
    font-variation-settings: "wght" 350;
}

#cookie-notice #cookie-buttons {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 1em;
}

#cookie-notice #cookie-buttons button#acceptcookie {
    background: var(--Niuti-gradient,radial-gradient(50% 50% at 44% 83%, hsl(338 91% 75% / 1), hsl(338 91% 75% / 0)), radial-gradient(50% 50% at 98% 4%, hsl(272 63% 68% / 1), hsl(272 63% 68% / 0)), radial-gradient(50% 50% at 10% 97%, hsl(300 92% 79% / 1), hsl(300 92% 79% / 0)), radial-gradient(50% 50% at 44% 47%, hsl(292 90% 85% / 1), hsl(292 90% 85% / 0)), radial-gradient(hsl(324 79% 46% / 1), hsl(324 79% 46% / 1)));
	border: none;
    color: #FFF;
    padding: calc(0.75em + var(--border-value,2px)) calc(1em + var(--border-value,2px));
}

@media screen and (min-width: 601px) {

	#cookie-notice {
		bottom: 2em;
		right: 2em;
		max-width: 26em;
	}
	
}

/* ---------------------------------------------
 Animations
--------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
	/* Prevent animations running on load */
	.loading *,
	.loading *:before,
	.loading *:after {
	  animation: none;
	  animation-duration: 0s !important;
	}
	
	a {
		transition: color 0.1s linear;;
	}
	
	a:hover	{
		--h: var(--bg-h,324);
		--s: var(--bg-s,79%);
		--l: var(--bg-l,46%);
		animation: hover-colors 10s linear infinite;
	}
	
    .add_to_cart_button:not(.product_type_variable),
    .added_to_cart.alt,
    .widget a.button.checkout,
	.wc-proceed-to-checkout .button.checkout-button,
	#cookie-notice #cookie-buttons button#acceptcookies {
        animation: niuti-gradient-animation var(--gradient-animation-duration,20s) linear infinite;
    }
	
	/*.main-navigation.toggled:before {
		transform: scale(1);
	}*/
	
	/*.main-navigation:before {
		transition: transform 0.5s ease-in-out;
	}*/
	
	.main-navigation button.menu-toggle svg path {
		transition: all 0.2s ease-in-out;
	}
	
	@supports (d:path("M0 12.5h25v0H0Z")) {
    	.main-navigation button.menu-toggle svg#menu-close {
    	    display: none;
    	}
	    
	    .main-navigation.toggled button.menu-toggle svg#menu-hamburger {
	        display: block;
	        animation: menu-open-color-animation 0.2s ease-in-out;
	    }
	    
    	.main-navigation.toggled button.menu-toggle svg#menu-hamburger path:first-child {
    	    transform: matrix(0.7071, 0.7071, -0.7071, 0.7071, 12.5206, -5.1693);
            d: path("M-2.683 10.034h30.367v4.989H-2.683Z");
    	}
    	
    	.main-navigation.toggled button.menu-toggle svg#menu-hamburger path:nth-child(2) {
    	    d: path("M0 12.5h25v0H0Z");
    	}
    	
    	.main-navigation.toggled button.menu-toggle svg#menu-hamburger path:nth-child(3) {
    	    transform: matrix(-0.7071, 0.7071, -0.7071, -0.7071, 30.1781, 12.5002);
            d: path("M -2.667 9.99 h 30.335 v 5.02 H -2.667 Z");
    	}
	}
	
	.main-navigation .primary-navigation {
		transition: visibility 1s linear, transform 0.25s ease-in-out;
	}
	
	@media (min-width: 768px) {
		.main-navigation .primary-navigation {
			animation: niuti-gradient-animation var(--gradient-animation-duration,20s) linear infinite/*, mobile-menu-close 0.2s ease-in-out*/;
		}
	}
	
	/*.main-navigation.toggled .primary-navigation {
		transition: visibility 300ms linear, transform 0.25s ease-in-out;
		animation: niuti-gradient-animation 10s linear infinite;
	}*/
	
	.main-navigation ul.menu ul.sub-menu,
	.main-navigation ul.nav-menu ul.children,
	.main-navigation ul.menu ul.sub-menu,
	.main-navigation ul.nav-menu ul.children,
	.main-navigation ul.menu ul a,
	.main-navigation ul.menu ul li>a,
	.main-navigation ul.menu>li>a,
	.main-navigation ul.nav-menu>li>a {
		transition: font-variation-settings 0.1s linear;
	}
	
	.woocommerce-message,
	.woocommerce-info,
	.woocommerce-error,
	.woocommerce-noreviews,
	p.no-comments {
		animation: niuti-gradient-animation var(--gradient-animation-duration,20s) linear infinite;
	}
	
	#cookie-notice {
		animation: cookie-notice-slideup 2s ease-out;
	}
	
	@media screen and (min-width: 768px) {
	  li.product a:hover .onsale,
      li.product a:focus .onsale {
        animation: shine 0.4s linear;
      }
	}
}