/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

@layer framework {

	/* CSS Reset & general Settings */
	*,
	::after,
	::before {
		margin: 0;
		padding: 0;
		outline: none;
		box-sizing: border-box;
	}

	*:focus-visible {
		outline: var(--outline);
		outline-offset: var(--outline-offset-m);
	}

	img,
	svg {
		display: block;
		object-fit: cover;
		/*max-width: 100%;*/
	}

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

	p {
		text-wrap: pretty;
		overflow-wrap: break-word;
	}

	h1,
	h2,
	h3 {
		text-wrap: balance;
		overflow-wrap: break-word;
	}

	a,
	button,
	input,
	fieldset {
		/*all: unset;*/

		&:not(input) {
			cursor: pointer;
		}
	}

	li {
		list-style-type: none;
	}

	/* CSS Reset & general Settings END */

	/* Custom Properties */
	:root {
		--content-width: clamp(280px, 90cqw, 1800px);
		--outer-margin: calc((100cqw - var(--content-width)) / 2);
		--outer-margin-wg: calc(var(--outer-margin) - var(--gap));
		--header-height: clamp(100px, 84px + 5vw, 180px);
		--footer-height: clamp(120px, 116px + 1.25vw, 140px);
		--hero-height: calc(100svh - var(--header-height));
		--content-height: calc(100svh - var(--header-height) - var(--footer-height));
		--section-padding: var(--space-xl);
		--gap-m: var(--space-m);
		--gap-l: var(--space-l);
		--gap-faq: var(--space-xs);
		--card-padding: var(--space-m);
		--toggle-size: 55px;
		
		@media (min-aspect-ratio: 2) {
			--header-height: clamp(100px, 96px + 1.25vw, 120px);
			--toggle-size: 50px;
		}

		/* Font Sizes */
		--step--2: clamp(0.6076rem, 0.5692rem + 0.1924vw, 0.8rem);
		--step--1: clamp(0.7292rem, 0.675rem + 0.2708vw, 1rem);
		--step-0: clamp(0.875rem, 0.8rem + 0.375vw, 1.25rem);
		--step-1: clamp(1.05rem, 0.9475rem + 0.5125vw, 1.5625rem);
		--step-2: clamp(1.26rem, 1.1214rem + 0.6931vw, 1.9531rem);
		--step-3: clamp(1.512rem, 1.3261rem + 0.9294vw, 2.4414rem);
		--step-4: clamp(1.8144rem, 1.5669rem + 1.2374vw, 3.0518rem);
		--step-5: clamp(2.1773rem, 1.8498rem + 1.6374vw, 3.8147rem);
		--step-6: clamp(2.6127rem, 2.1816rem + 2.1556vw, 4.7684rem);
		--step-7: clamp(3.1353rem, 2.5702rem + 2.8252vw, 5.9605rem);
		--step-8: clamp(3.7623rem, 3.0247rem + 3.6882vw, 7.4506rem);

		/* Adaptive line height */
		--line-height-s: calc(0.95em + 0.45rem);
		--line-height-m: calc(1em + 0.5rem);
		--line-height-l: calc(1.2em + 0.8rem);

		/* Spaces */
		--space-3xs: clamp(4px, 3.8px + 0.0625vw, 5px);
		--space-2xs: clamp(7px, 6.4px + 0.1875vw, 10px);
		--space-xs: clamp(11px, 10.2px + 0.25vw, 15px);
		--space-s: clamp(14px, 12.8px + 0.375vw, 20px);
		--space-m: clamp(21px, 19.2px + 0.5625vw, 30px);
		--space-l: clamp(28px, 25.6px + 0.75vw, 40px);
		--space-xl: clamp(42px, 38.4px + 1.125vw, 60px);
		--space-2xl: clamp(56px, 51.2px + 1.5vw, 80px);
		--space-3xl: clamp(84px, 76.8px + 2.25vw, 120px);

		/* One-up pairs */
		--space-3xs-2xs: clamp(4px, 2.8px + 0.375vw, 10px);
		--space-2xs-xs: clamp(7px, 5.4px + 0.5vw, 15px);
		--space-xs-s: clamp(11px, 9.2px + 0.5625vw, 20px);
		--space-s-m: clamp(14px, 10.8px + 1vw, 30px);
		--space-m-l: clamp(21px, 17.2px + 1.1875vw, 40px);
		--space-l-xl: clamp(28px, 21.6px + 2vw, 60px);
		--space-xl-2xl: clamp(42px, 34.4px + 2.375vw, 80px);
		--space-2xl-3xl: clamp(56px, 43.2px + 4vw, 120px);

		/* Radius */
		--radius-s: clamp(4px, 3.3043px + 0.2174vw, 6px);
		--radius-m: clamp(15px, 12.5652px + 0.7609vw, 22px);
		--radius-l: clamp(37px, 32.4783px + 1.413vw, 50px);

		/* Border & Outline */
		--border-width-s: 2px;
		--border-width-m: 3px;
		--border-s: var(--border-width-s) solid var(--primary);
		--border-m: var(--border-width-m) solid var(--primary);
		--outline: var(--border-width-m) dotted var(--primary);
		--outline-offset-s: var(--border-width-m);
		--outline-offset-m: calc(var(--border-width-m) * 2);
		--outline-offset-l: calc(var(--border-width-m) * 5);

		/* Miscellaneous */
		--shadow: 15px 15px 30px hsla(0, 0%, 0%, 0.1);
		--shadow-m: 15px 15px 30px hsla(0, 0%, 0%, 0.1);
		--shadow-s: 5px 5px 10px hsla(0, 0%, 0%, 0.2);
		--golden-ratio: 1.6180/1;
	}

	/* Custom Properties END */

	/* Layout Settings */
	body {
		/*overflow-x: clip;*/
		min-height: 100svh;

		section {
			container: section / inline-size;
			margin-inline: auto;
			padding-block: var(--section-padding);
			display: grid;
			gap: var(--space-l);
		}

		@media (width >=2080px) {
			section:not(.full) {
				max-width: 1980px;
			}
		}

		.brxe-container {
			width: var(--content-width);
			display: flex;
			gap: var(--gap-l);
			margin-inline: auto;
		}

		.brxe-block {
			gap: var(--gap-m);
		}
	}

	/* Layout Settings END */

	/* Font Styles */
	/* use --limit-font-size in cqw to limit font size */
	.navigation,
	.bricks-button {
		font: 400 var(--step-1) / 1em "Borna";
		text-transform: lowercase;
	}

	.title-1-xl {
		font: 600 min(var(--step-6), var(--font-size-limit, 100vw)) / var(--line-height-m) "Borna";
		text-transform: none;
	}

	.title-1-l {
		font: 600 min(var(--step-5), var(--font-size-limit, 100vw)) / var(--line-height-m) "Borna";
		text-transform: none;
	}

	.title-1-m {
		font: 600 min(var(--step-4), var(--font-size-limit, 100vw)) / var(--line-height-m) "Borna";
		text-transform: none;
	}

	.title-1-s {
		font: 600 min(var(--step-3), var(--font-size-limit, 100vw)) / var(--line-height-m) "Borna";
		text-transform: none;
	}

	.title-1-xs {
		font: 600 min(var(--step-2), var(--font-size-limit, 100vw)) / var(--line-height-m) "Borna";
		text-transform: none;
	}

	.title-2-m {
		font: 400 min(var(--step-4), var(--font-size-limit, 100vw)) / var(--line-height-m) "Basier Circle";
		text-transform: none;
	}

	.title-2-s {
		font: 400 min(var(--step-3), var(--font-size-limit, 100vw)) / var(--line-height-m) "Basier Circle";
		text-transform: none;
	}

	.title-2-xs {
		font: 400 min(var(--step-2), var(--font-size-limit, 100vw)) / var(--line-height-m) "Basier Circle";
		text-transform: none;
	}

	.subtitle-1-l {
		font: min(var(--step-5), var(--font-size-limit, 100vw)) / var(--line-height-m) "Basier Circle";
		text-transform: none;
	}

	.subtitle-1-m {
		font: min(var(--step-4), var(--font-size-limit, 100vw)) / var(--line-height-m) "Basier Circle";
		text-transform: none;
	}

	.subtitle-1-s {
		font: min(var(--step-3), var(--font-size-limit, 100vw)) / var(--line-height-m) "Basier Circle";
		text-transform: none;
	}


	.overline-1-xl {
		font: min(var(--step-2), var(--font-size-limit, 100vw)) / var(--line-height-m) "Basier Circle";
		text-transform: none;
		order: -1;
		margin-bottom: calc(var(--space-m) * -1);
	}

	.paragraph,
	body {
		font: 400 var(--step-0) / var(--line-height-l) "Basier Circle";
		text-transform: uppercase;
	}

	.caption,
	input[type="checkbox"]+label {
		font: 400 var(--step-0) / var(--line-height-m) "Basier Circle" !important;
		text-transform: none !important;
	}

	/* Fonts % Font Settings END */

	/* +++ Colors & Settings +++ */
	:root {
		color-scheme: light;

		&:has(#theme-toggle:checked) {
			color-scheme: dark;
		}

		--primary: light-dark(var(--black), var(--white));
		--secondary: light-dark(var(--white), var(--black));
		--bg-default: light-dark(hsl(40 0% 90%), hsl(40 0% 10%));
		--bg-accent: light-dark(hsl(40 0% 95%), hsl(40 0% 5%));
		--font-default: var(--primary);
		--font-accent: color-mix(in hsl, var(--font-default), white 10%);
		--black: hsl(40 0% 5%);
		--white: hsl(40 0% 95%);
		--primary-faded-strong: color-mix(in hsl, var(--primary) 20%, transparent);
		--primary-faded-light: color-mix(in hsl, var(--primary) 50%, transparent);
		--success: rgb(42, 123, 111);
		--warning: rgb(212, 119, 44);
		--danger: rgb(150, 74, 80);
		--primary-gradient: linear-gradient(35deg,
			var(--primary) 60%,
			color-mix(in hsl, var(--primary) 80%, transparent));
	}

	body {
		color: var(--font-default);
		background: var(--bg-default);
	}

	* {
		scrollbar-color: var(--primary) transparent;
		accent-color: var(--primary);
	}

	::selection {
		color: var(--bg-default);
		background: var(--font-default);
	}

	/* +++ Color Settings END +++ */

	/* +++ Utility Classes +++ */

	.visually-hidden {
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
		width: 1px;
		height: 1px;
		position: absolute;
		overflow: hidden;
	}

	/* +++ Utility Classes END +++ */

	/* Motion and Animation */
	@media (prefers-reduced-motion: no-preference) {
		html {
			scroll-behavior: smooth;
		}

		:root {
			interpolate-size: allow-keywords;
		}

		@view-transition {
			navigation: auto;
		}
	}

	/* Components */
	/* Popover */
	[popover],
	.popover,
	.brx-popup-content {
		border: var(--border-m);
		border-radius: var(--radius-l);
		background-color: color-mix(in hsl, var(--bg-default) 40%, transparent);
		margin: auto;
		-webkit-backdrop-filter: blur(15px);
		backdrop-filter: blur(15px);
		align-content: center;
		box-shadow: var(--shadow);
		opacity: 0;
		transition: scale 0.5s, opacity 0.5s, display 0.5s allow-discrete;
		pointer-events: none;
		padding: var(--space-l);
		padding-top: var(--space-m);
		scrollbar-width: none;
	}

	[popover] {
		&::backdrop {
			background-color: color-mix(in hsl, var(--bg-default) 20%, transparent);
			-webkit-backdrop-filter: grayscale(0.7);
			backdrop-filter: grayscale(0.7);
			transition: all 0.5s;
			opacity: 0;
		}

		&:popover-open {
			opacity: 1;
			pointer-events: auto;

			@starting-style {
				opacity: 0;
			}

			&::backdrop {
				opacity: 1;

				@starting-style {
					opacity: 0;
				}
			}
		}
	}

	.brx-popup-content {
		opacity: 1;
		pointer-events: unset;
		padding: unset;
	}

	body:has(#mobile-menu:popover-open) {
		overflow: hidden;
	}

	/* Popover END */
	/* Close Toggle */
	.close-toggle {
		width: var(--toggle-size);
		aspect-ratio: 1;
		position: relative;
		align-self: end;
		margin-left: auto;
		transition: all 0.3s;
		border-radius: 50%;
		background: unset;

		&::before,
		&::after {
			content: "";
			height: var(--border-width-s);
			width: 90%;
			background: var(--primary);
			position: absolute;
			top: 50%;
			right: 50%;
			translate: 50% -50%;
			rotate: -45deg;
			transition: all 0.3s;
		}

		&::after {
			rotate: 45deg;
		}

		&:hover,
		&:focus-visible {
			background: var(--primary);

			&::before,
			&::after {
				background: var(--bg-default);
			}
		}
	}

	/* Close Toggle END */
	/* Link */
	.link,
	.legal-texts a {
		letter-spacing: 0.05em;
		background: linear-gradient(var(--primary), var(--primary)) 0 100%/100% var(--border-width-s) no-repeat;
		padding: 0.25em 0.2em;
		transition: all 0.3s;

		&:hover,
		&:focus-visible {
			color: var(--bg-default);
			background-size: 100% 100%;
			outline: unset;
		}
	}

	/* End Link */
	/* SwapHover Link */
	.swaphover {
		overflow-y: clip;
		border-radius: 0.3em;
		padding-block: 0.05em;

		span {
			text-shadow: 0 1.1lh 0 currentColor;
			transition: translate 0.4s;
		}

		&:is(:hover, :focus-visible) span {
			translate: 0 -1.1lh;
		}
	}
	/* SwapHover Link END */
	/* External Links */
	a[href^="http"]:not([href*="mmiri-shop.com"], :has(svg))::after {
	    content: '';
		display: inline-block;
		width: 0.7em;
		aspect-ratio: 1;
		background-color: currentColor;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath fill='%230D0D0D' fill-rule='nonzero' d='M8 0v2H4a2 2 0 0 0-2 2v10c0 1.1.9 2 2 2h10a2 2 0 0 0 2-2v-4h2v4a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4h4Zm10 0v8h-2V3.4L9.5 10 8.1 8.5 14.6 2H10V0h8Z'/%3E%3C/svg%3E") center / contain no-repeat;
		margin-left: .2em;
	}
	/* External Links END */
	/* Ckeckbox */
	[type="checkbox"] {
		appearance: none;
		display: inline-grid;
		place-content: center;
		border: var(--border-m);
		border-radius: var(--radius-s);
		padding: 0;
		width: 1.2em;
		aspect-ratio: 1;
		cursor: pointer;
		transition: all 0.3s;

		label:has(&) {
			cursor: pointer;
		}

		&::before {
			content: "";
			width: 0.7em;
			aspect-ratio: 1;
			background: var(--bg-default);
			clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
			scale: 0;
			transition: all 0.2s;
		}

		&:checked {
			background: currentcolor;

			&:before {
				scale: 1;
			}
		}
	}

	.options-wrapper {

		li {
			display: flex;
			flex-wrap: nowrap;
			align-items: baseline;
			gap: var(--space-2xs);

			[type="checkbox"] {
				flex-shrink: 0;
			}
		}
	}

	/* Ckeckbox END */
	/* Forms */
	/* Layout */
	.brxe-form {
		display: flex;
		flex-direction: column;
		gap: var(--space-l);
		padding-top: var(--space-xs);
	}

	/* Layout END */
	/* Input Styling */
	.brxe-form,
	.bricks-search-form {

		input:not([type="checkbox"]),
		textarea {
			background: unset;
			border: unset;
			border-bottom: var(--border-m);
			border-radius: 0;
			transition: all 0.3s;
			width: 100%;

			&:focus {
				border-bottom-width: calc(var(--border-width-m) * 2);
				margin-bottom: calc(var(--border-width-m) * -1);
				outline: unset;
			}
		}

		/* Input Styling END */
		/* Floating Labels */
		label:not(:has([type="checkbox"]), input[type="checkbox"] + label) {
			position: absolute;
			transition: all 0.3s;
			pointer-events: none;

			:where(&:has(+ :is(input, textarea):is(:focus, :not(:placeholder-shown)))) {
				translate: 0 -1em;
				scale: 0.8;
				transform-origin: top left;
				color: color-mix(in hsl, var(--primary), 20% transparent);
			}
		}

		/* Floating Labels END */
		/* Form Validation */
		[role="group"] {
		  background-position: top .25rem right 0rem;
		  background-size: 1.5rem auto;
		  background-repeat: no-repeat;
			
		  /* Hide auto-fill icon in Safari */	
		  input::-webkit-contacts-auto-fill-button {
		    display: none !important;
			pointer-events: none;
			visibility: hidden;
		  }
	      /* Hide auto-fill icon in Safari END */

		  &:has(> input:not(:placeholder-shown, :focus):invalid) {
			background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(150, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");

			label {
			  color: var(--danger);
			}
		  }

		  &:has(> input:not(:placeholder-shown):focus:invalid) {
			label {
			  color: var(--warning);
			}
		  }

		  &:has(> input:not(:placeholder-shown):valid) {
			background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");

			label {
			  color: var(--success);
			}
		  }
		}

		&:not(.newsletter):has(input:invalid) {
		  button {
			--primary: var(--primary-faded-light);

			&,
			&::before {
			  transition: width 999s, color 999s !important;
			}
		  }
		}
		/* Form Validation END */
	}

	/* Forms END */

	/* Card */
	.card {
		background: var(--bg-accent);
		border-radius: var(--radius-l);
		box-shadow: var(--shadow);
	}

	/* Card END */
	/* Components END */
}

/* Layer Framework END */


/* Element Styling */
/* Slider Pagination */
.splide__pagination {
	gap: 7px;

	.splide__pagination__page {
		border: var(--border-s) !important;
		background: transparent !important;
		border-radius: 0 !important;
		padding: unset !important;

		&.is-active,
		&:hover {
			background: var(--primary) !important;
		}
	}
}

/* Slider Pagination END */

/* Buttons */
/* Buttons General Styling */
button,
.bricks-button,
.sc-button__link {
	min-width: fit-content;
}

/* Buttons General Styling END */
/* Bubble Button General */
.bricks-button.outline,
.sc-button__link,
.bricks-button[type="submit"] {
	position: relative;
	transition: color var(--anim-duration, 0.4s);
	overflow: hidden;
	isolation: isolate;

	&::before {
		content: "";
		width: 0;
		aspect-ratio: 1;
		border-radius: 50%;
		background: var(--bubble-color, var(--primary));
		position: absolute;
		top: var(--mouse-y);
		left: var(--mouse-x);
		transform: translate(-50%, -50%);
		z-index: -5;
		transition: width var(--anim-duration, 0.4s) linear;
	}

	&:hover::before,
	&.sc-button__link--busy::before {
		width: 210%;
	}
}

/* Bubble Button General END */
/* Bubble Button Color Settings */
.bricks-button.bricks-color-primary {
	--bubble-color: var(--bg-default);
}

.bricks-button.bricks-color-secondary {
	--bubble-color: var(--secondary);
}

.bricks-button.bricks-color-light {
	--bubble-color: var(--white);
}

.bricks-button.bricks-color-dark {
	--bubble-color: var(--black);
}

/* Bubble Button Color Settings END */
/* Arrow Button */
.arrow-button {

	&::after {
		content: "→";
		position: relative;
		transition: all 0.3s;
		left: 0.3em;
	}

	:is(&:hover, &:focus-visible)::after {
		left: 0.6em;
	}

	&:focus-visible {
		outline: unset;
		border-bottom: var(--outline) !important;
	}
}

/* Arrow Button END */
/* Notifications */
.form-group-error-message {
	color: var(--danger);
	background-color: color-mix(in hsl, var(--danger) 30%, white);
	border: var(--border-width-s) solid var(--danger) !important;
	border-top: unset !important;
	border-left-width: calc(var(--border-width-s) * 3) !important;
	padding-left: .5em;
}
/* Notifications END*/
/* Surecart */
:root {
	--sc-font-sans: "Basier Circle";
	--sc-drawer-border: var(--border-m);
	--sc-input-label-color: var(--font-default);
	--sc-font-weight-semibold: 600;
}
/* Surecart END*/
/* Element Styling END */