/*
Theme Name: woogency Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/







:root {

	--primary-color: var(--fs-color-primary);
	--secondary-color: #1e73be;
	--accent-color: var(--fs-color-secondary);

	--neutral-100: #fff;
	--neutral-700: #444;

	/* Font Family */
	--ff-primary: "Doppio One", sans-serif;
	--ff-secondary: "Open Sans", sans-serif;

	--ff-heading: var(--ff-primary);
	--ff-body: var(--ff-secondary);

	/* Font Sizes */
	--fs-900: 3.4rem;
	/*--fs-800: 2.25rem;*/
	--fs-800: 1.75rem;
	--fs-700: 1.5rem;
	--fs-600: 1.3rem;
	--fs-500: 1.2rem;
	--fs-400: 1rem;
	--fs-300: 0.875rem;
	--fs-200: 0.675rem;

	/* Line Heights */
	--lh-900: 1.3;
	--lh-800: 1.35;
	--lh-700: 1.4;
	--lh-600: 1.45;
	--lh-500: 1.5;
	--lh-400: 1.8;

	/* Vertical Margins (Golden Ratio) */
	--spacing-large: 2.618rem;
	--spacing-medium: 1.618rem;
	--spacing-small: 1rem;

	/* Font Weight */
	--fw-700: 700;
	--fw-600: 600;
	--fw-500: 500;
	--fw-400: 400;
	--fw-300: 300;

	/* Border Radius */
	--border-radius: 1rem;
}

body {
	font-family: var(--ff-body);
}

main {
	min-height: 100vh;
}

img,
picture,
svg {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
	font-style: italic;
	background-repeat: no-repeat;
	background-size: cover;
	shape-margin: 0.75rem;
	display: block;
}

/**********************************************************/
/* Web Accessbility                                       */
/**********************************************************/
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Header
***********************************************************/
header {

	* {
		opacity: 1 !important;
	}

	#top-bar {

		.html.custom ul {
			display: flex;
			gap: 0.75rem;

			li {
				margin-block-end: 0;
			}
		}

	}
}

/* Hero
***********************************************************/
.hero {
	overflow: hidden;
}

/* Vinyl Icon
***********************************************************/
.vinyl-icon {
	--width: 700px;
	position: absolute;
	top: 30px;
	left: -200px;
	width: var(--width);
	aspect-ratio: 1;
	/* z-index: 999; */
	animation: vinyl 7s linear infinite;
	/* mix-blend-mode: color; */
	pointer-events: none;

	&.right {
		top: 360px;
		left: auto;
		right: -200px;

		svg {
			fill: var(--primary-color);
		}
	}

	* {
		margin: 0;
		padding: 0;
		display: grid;
		aspect-ratio: 1;
		width: var(--width);
	}

	svg {
		fill: var(--primary-color);
		fill: var(--neutral-100);
		/* fill: var(--neutral-700); */
		opacity: 0.2;
	}
}

@keyframes vinyl {
	from {
		rotate: 0turn;
	}

	to {
		rotate: 1turn;
	}
}

/* Accordion FAQ
***********************************************************/
.accordion {
	display: grid;
	gap: 1rem;
	margin-block-end: 1.5rem;
	/*
	&:hover {
		.accordion-item {
			opacity: 0.8;

			&:hover {
				opacity: 1;
			}
		}
	}
*/

	.accordion-item {
		transition: 0.25s ease;
		background: var(--secondary-color);

		.accordion-title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 1rem;
			padding: 0.25rem 0.5rem 0.25rem 1.5rem;
			border: 0;
			color: var(--neutral-100);

			&.active {
				font-weight: 400;
				background-color: inherit;
			}

			button.toggle {
				position: static;
				height: auto;
				width: auto;
				margin: 0;
				border: 0;
				aspect-ratio: 1;
			}

			span {
				order: -1;
			}
		}

		.accordion-inner {
			padding: 1rem 1.5rem;
			color: var(--neutral-100);

			* {
				margin-block-end: 0;
			}
		}
	}
}

/* Contact Form 7
***********************************************************/
.contact-form {

	display: grid;
	row-gap: 1.5rem;

	.form-row {
		--_grid-type: auto-fit;
		--_col-size: 200px;
		display: grid;
		grid-template-columns: repeat(var(--_grid-type, auto-fit),
				minmax(min(var(--_col-size), 100%), 1fr));
		gap: 1.5rem;

		>p>label {
			position: absolute;
			width: 1px;
			height: 1px;
			padding: 0;
			margin: -1px;
			overflow: hidden;
			clip: rect(0, 0, 0, 0);
			white-space: nowrap;
			border: 0;
		}
	}

	input,
	select,
	textarea {
		margin-block-end: 0;
	}
}

/* Footer
***********************************************************/
.footer {
	z-index: 1;

	.menu {
		margin: 0;
		padding: 0;
		border: 0;

		li {
			margin: 0 !important;
			padding: 0;
			border: 0 !important;
		}

		&#menu-footer-menu {
			display: grid;
			gap: 0.5rem;
		}
	}

	a {
		padding: 0;
		color: var(--neutral-700) !important;
	}
}

.absolute-footer {
	* {
		color: var(--neutral-100) !important;
		opacity: 1 !important;
	}

	.container {
		display: flex;
		flex-direction: row-reverse;

		div {
			flex: 1;
			padding-block: 0;
		}

		@media only screen and (max-width: 850px) {
			flex-direction: column;

			.footer-primary {
				margin-block-start: 1rem;
			}

			#menu-legal-menu {
				justify-content: center;
				flex-wrap: wrap;
			}
		}
	}

	.menu {
		margin: 0;
		padding: 0;
		border: 0;

		li {
			margin: 0 !important;
			padding: 0;
			border: 0 !important;

			a {
				padding: 0;
			}
		}

		&#menu-legal-menu {
			display: flex;
			gap: 0.5rem;

			a:hover,
			a:focus {
				color: var(--accent-color);
			}
		}
	}
}

/* Typographie
***********************************************************/
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
	font-family: var(--ff-heading);
	font-weight: var(--fw-700);
	text-transform: none !important;
	text-wrap: balance;
	margin-block-start: var(--spacing-medium);
	margin-block-end: var(--spacing-small);
}

h1:first-child,
.h1:first-child,
h2:first-child,
.h2:first-child,
h3:first-child,
.h3:first-child,
h4:first-child,
.h4:first-child,
h5:first-child,
.h5:first-child,
h6:first-child,
.h6:first-child {
	margin-block-start: 0;
}

h1,
.h1 {
	font-size: var(--fs-900) !important;
	line-height: var(--lh-900);
	/* color: var(--primary-400); */
	margin-block-start: var(--spacing-large);
	margin-block-end: var(--spacing-medium);
}

h2,
.h2 {
	font-size: var(--fs-800) !important;
	line-height: var(--lh-800);
	/* color: var(--neutral-700) !important; */
	margin-block-start: var(--spacing-large);
	margin-block-end: var(--spacing-medium);
}

h3,
.h3 {
	font-size: var(--fs-700) !important;
	line-height: var(--lh-700);
	font-weight: var(--fw-500);
	/* color: var(--primary-400); */
	margin-block-start: var(--spacing-medium);
	margin-block-end: var(--spacing-small);
}

h4,
.h4 {
	font-size: var(--fs-600) !important;
	line-height: var(--lh-600);
	color: var(--neutral-700);
	margin-block-start: var(--spacing-medium);
	margin-block-end: var(--spacing-small);
}

h5,
.h5 {
	font-size: var(--fs-500) !important;
	line-height: var(--lh-500);
	color: var(--neutral-700) !important;
	margin-block-start: var(--spacing-small);
	margin-block-end: var(--spacing-small);
}

h6,
.h6 {
	font-size: var(--fs-400) !important;
	line-height: var(--lh-400);
	font-weight: var(--fw-600);
	/* color: var(--primary-400); */
	margin-block-start: var(--spacing-small);
	margin-block-end: var(--spacing-small);
}

p {
	font-size: var(--fs-400) !important;
	line-height: var(--lh-400);
	margin-block-end: var(--spacing-small);
}

p>strong {
	font-weight: var(--fw-500);
}

p>em {
	font-style: italic;
}

/* Iconlist */
.header-top,
.footer-wrapper {
	ul {
		list-style: none;
		--checklist-size: 1em;

		li {
			position: relative;
			margin-inline-start: calc(1.5 * var(--checklist-size)) !important;
		}

		&:not([class]),
		&.shipping-methods {

			li {
				&::before {
					content: '';
					position: absolute;
					top: 3px;
					background: var(--primary-color);
					background: currentcolor;

					aspect-ratio: 1;
					width: var(--checklist-size);
					mask-repeat: no-repeat;
					mask-position: center center;
					margin-inline-start: calc(-1.5 * var(--checklist-size));
				}

				&:not([class]) {
					&::before {
						mask-size: 6px;
						mask-image: url(/wp-content/icons/list-icon.svg);
					}
				}

				&.check {
					&::before {
						mask-image: url(/wp-content/icons/check.svg);
						top: 4px;
					}
				}

				&.map {
					&::before {
						mask-image: url(/wp-content/icons/map.svg);
						top: 4px;
					}
				}

				&.phone {
					&::before {
						mask-image: url(/wp-content/icons/phone.svg);
						top: 4px;
					}
				}

				&.mail {
					&::before {
						mask-image: url(/wp-content/icons/mail.svg);
						top: 4px;
					}
				}
			}
		}
	}
}


/* Header
***********************************************************/
@media only screen and (width >=550px) {
	header {
		.logo a {
			position: absolute;
			top: 80px;
			scale: 1.5;
		}

		.stuck {
			.logo a {
				position: static;
				scale: 1;
			}
		}
	}


	.content-area section:first-child,
	.content-area .slider-wrapper section,
	.page-title,
	.product-template-default .shop-container {
		padding-block-start: 8rem !important;
	}
}

/* Startseite
***********************************************************/
.left-parallax {
	.section-bg img {
		object-fit: contain;
		object-position: 0 50%;
	}
}

.slider-wrapper section {
	min-height: 540px;
}

.pre_order_section {
	.primary {
		background-color: white;
		color: var(--fs-color-primary);
	}
}

/* Product Page
***********************************************************/
.single-product {
	.shop-container {

		.product-title {
			font-size: var(--fs-800) !important;
		}

	}

	.product-page-price {
		font-size: var(--fs-600) !important
	}
}

/* Quick View Product Card Container
***********************************************************/
.product-quick-view-container {
	h1 {
		font-size: var(--fs-700) !important;
	}
}

/* Archive Page
***********************************************************/
/* .archive {
	.product {
		.box-image {
			padding-top: 0;
			
			img {
				position: relative;
			}
		}
	}
} */

/* Checkout Anpassungen
***********************************************************/
/* SSL Zertifikat zentrieren */
.ssl-note {
	display: flex;
	justify-content: center;
}

/* add lock icon to submit button in checkout page */
.woocommerce-checkout .woocommerce-checkout .button.alt::before {
	content: "";
	background: url('/wp-content/uploads/kratom-digital-schloss.png') no-repeat;
	background-size: contain;
	width: 14px;
	height: 14px;
	display: inline-block;
	margin-right: 5px;
}

/* Checkout Tabelle Hintergrund Farbe anpassen */
.woocommerce-checkout .woocommerce-checkout .is-well {
	box-shadow: none;
}

.woocommerce-checkout .woocommerce-checkout #place_order {
	margin-bottom: 10px !important;
}

.wc_payment_methods {
	li {
		margin-inline: 0 !important;
	}
}

.dhl-preferred-location-types {
	li {
		margin-inline-start: 0 !important;
	}
}

.shipping__inner {
	padding: 0 !important;

	.woocommerce-shipping-methods {
		li {
			margin-inline: 0 !important;
		}
	}
}

/* Countdown Pre Order
***********************************************************/
#countdown {
	display: flex;
	justify-content: center;
	gap: 1rem;
	margin: 0;
	padding: 0;


	* {
		margin: 0 !important;
		padding: 0;
	}

	li {
		display: grid;
		place-items: center;
		gap: 0rem;
		color: #666;
		background: #fff;
		padding: 0.25rem;
		aspect-ratio: 1;
		min-width: 75px;

		strong {
			font-size: var(--fs-800);
		}

		&::before {
			display: none;
		}
	}
}

/* Navigation Mobile Menu Off Canvas
***********************************************************/
.mfp-content {
	ul.nav {

		li.html.custom {
			padding-inline: 10px;

			.dgwt-wcas-search-form {
				width: 100%;
			}
		}

		li {
			border: none;
			margin: 0 !important;
			padding: 0;

			a {
				padding-inline: 10px !important;
			}
		}
	}
}

/* Product Card shipping & tax info
***********************************************************/
.tax-info,
.shipping-costs-info {
	font-size: var(--fs-200) !important;
	display: inline-block;
	margin: 0;

	a {
		margin: 0;
	}
}

/* Responsive
***********************************************************/
@media only screen and (width < 550px) {

	:root {
		/* Font Sizes */
		--fs-900: 2.5rem;
		/*--fs-800: 2.25rem;*/
		--fs-800: 1.5rem;
		--fs-700: 1.3rem;
		--fs-600: 1.1rem;
		--fs-500: 1rem;
		--fs-400: 0.9rem;
		--fs-300: 0.875rem;
		--fs-200: 0.675rem;
	}
}