/*
Custom design adjustments for Strato webshop
by Arno Richter (2022)
https://arnorichter.de
*/


@font-face {
	font-family: 'HDGN';
	src: url('https://herrdegen.de/fonts/SourceSans3VF-Roman.ttf.woff2') format('woff2-variations');
	font-weight: 200 900;
}

:root {
	--text-light: #fff;
	--text-dark: #111;
	--background: #eee;
	--gray-1: #333;
	--gray-2: #999;
	--gray-3: #ddd;
	--accent-1: rgb(128,4,20); /* 800414 */
	--accent-2: #de8da0;

	--grid-gap: 1rem;
	--nav-gap: 0.5rem;
}

/*
.hdgn *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {
	all: unset;
	display: revert;
}
*/

/* Preferred box-sizing value */
.hdgn .GeneralLayout *,
.hdgn .GeneralLayout *::before,
.hdgn .GeneralLayout *::after {
	box-sizing: border-box;
	content: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	/* font-family: system-ui, Helvetica, Arial, sans-serif; */
	font-family: revert;
	font-size: 100%;
	font-weight: normal;
	font-weight: 500;
	font-style: normal;
	line-height: inherit;
	float: none;
}

/* Reapply the pointer cursor for anchor tags */
.hdgn a,
.hdgn button {
	cursor: revert;
}

.hdgn a {
	color: currentColor;
	text-decoration: underline;
}

.hdgn a:is(:hover, :focus) {
	color: var(--accent-1);
}

/* For images to not be able to exceed their container */
.hdgn img {
	max-width: 100%;
}

/* removes spacing between cells in tables */
.hdgn table {
	border-collapse: collapse;
}

.hdgn :is(h1, h2, h3, h4, h5, h6) {
	font-family: "HDGN", system-ui, Helvetica, Arial, sans-serif !important;
	letter-spacing: 0;
}

/*  fix the feature of 'hidden' attribute.
	display:revert; revert to element instead of attribute */
.hdgn :where([hidden]) {
	display: none;
}

html.hdgn {
	line-height: 1.4;
}

/* new shop styles */

.hdgn2 a:is(:hover, :focus) { font-weight: revert !important; } /* magic number = default font weight */

.hdgn2 {
	font: 125%/1.4 "HDGN", system-ui, Helvetica, Arial, sans-serif !important;
	font-style: normal;
	font-weight: 500;
	background-color: var(--accent-1);
	/* background: var(--background) url(./images/background-pattern-09.jpg); */
	hyphens: auto;
}

.hdgn2 body {
	background: transparent;
}

.hdgn2 body .GeneralLayout {
	margin-inline: auto;
	margin-block: 2vh 8rem;
	width: 95%;
	max-width: 105ch;
	background-color: var(--text-light);
	padding: 1.5rem;

	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: var(--grid-gap);
}

.hdgn2 body .GeneralLayout > * {
	outline: 0px solid black;
}

.hdgn2 body .GeneralLayout .NavBarRoof {
	grid-column: 1 / span 6;
	background: yellow;
	display: none;
}
.hdgn2 body .GeneralLayout .Header {
	grid-column: 1 / span 6;
	background: red;
}
.hdgn2 body .GeneralLayout .NavBarTop {
	grid-column: 1 / span 6;
}
.hdgn2 body .GeneralLayout .Middle {
	grid-column: 1 / span 6;
	display: flex;
	gap: var(--grid-gap);
}
.hdgn2 body .GeneralLayout .Middle .NavBarLeft {
	flex: 1;
	order: 1;
	display: none;
}
.hdgn2 body .GeneralLayout .Middle .NavBarRight {
	flex: 1;
	order: 3;
	display: none;
}
.hdgn2 body .GeneralLayout .Middle .ContentArea {
	flex: 4;
	order: 2;
}
.hdgn2 body .GeneralLayout .FooterContainer {
	grid-column: 1 / span 6;
	border-top: 2px solid var(--accent-1);
	padding-block: 0.5rem;
}

.hdgn2 hr.Separator {
	background: none !important;
	border-top: 2px solid var(--accent-1) !important;
	margin-block: 0.5rem 0.6rem !important;
}
hr::after { content: none !important; }

/* main nav  */
.hdgn2 .SizeContainer { float: none !important; font-size: inherit !important; }
.hdgn2 .NavBarTop .SizeContainer { display: flex; gap: var(--nav-gap) }
/*
.hdgn2 body .GeneralLayout .NavBarTop ul.ep-megamenu {
	display: flex;
	gap: var(--nav-gap);
	width: 100%;
	align-items: center;
}

.hdgn2 body .GeneralLayout .NavBarTop ul.ep-megamenu li {
	flex: 1;
	min-width: 50px;
}
*/

.hdgn2 body .GeneralLayout .NavBarTop .SizeContainer .NavigationElement {
	flex: 1;
	min-width: 50px; /* make overflow ellipsis possible */
}

.hdgn2 body .GeneralLayout .NavBarTop .SizeContainer .NavigationElement a {
	display: block;
	height: auto;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	font-size: 0.75rem;
	line-height: inherit;
	font-weight: bold;
	padding: 0.5em 0.6em;
	background: var(--accent-1);
	color: var(--text-light);
	hyphens: none;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hdgn2 body .GeneralLayout .NavBarTop .SizeContainer .NavigationElement a:is(:hover,:focus,[aria-current]) {
	background: var(--accent-2);
	font-weight: bold !important;
}

/* footer */
.hdgn2 body .GeneralLayout .FooterContainer .SizeContainer {
	text-align: left;
	position: static;
}

.hdgn2 body .GeneralLayout .FooterContainer .SizeContainer a {
	color: #000 !important;
	text-decoration: underline;
	font-size: unset !important;
}

/* content */

.hdgn2 .GeneralLayout table.ProductListImageBox { /* the products table */
	/*
	border-spacing: 0;
	border-collapse: collapse;
	margin-inline: calc(-0.5 * var(--nav-gap));
	*/
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: var(--grid-gap);
	align-content: start;
}

.hdgn2 .GeneralLayout table.ProductListImageBox :is(tbody, tr) {
	display: contents;
}

.hdgn2 .GeneralLayout table.ProductListImageBox tr:has(th) {
	display: none;
}

.hdgn2 .GeneralLayout table.ProductListImageBox td {
	display: block;
	width: 100%;
	outline: 0px solid #f0f;
	/*
	width: auto;
	padding-inline: calc(0.5 * var(--nav-gap));
	padding-block-end: var(--nav-gap);
	*/
	grid-column-start: span 2;
}

.hdgn2 .GeneralLayout table.ProductListImageBox td .InfoArea {
	
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	grid-gap: 0 var(--grid-gap);
	align-content: start;
	align-items: baseline;
	padding: 0;
}

.hdgn2 .GeneralLayout table.ProductListImageBox td .InfoArea .ClearBoth:empty {
	display: none;
}

.hdgn2 .GeneralLayout table.ProductListImageBox td .InfoArea .ImageArea {
	grid-column: 1 / span 6;
	line-height: 1rem;
}

.hdgn2 .GeneralLayout table.ProductListImageBox td .InfoArea .ImageArea a {
	display: block;

}

.hdgn2 .GeneralLayout table.ProductListImageBox td .InfoArea .ImageArea img {
	max-width: none;
	max-height: none;
	width: 100%;
	height: auto;

	&:hover {
		opacity: 0.9;
	}
}

.hdgn2 .GeneralLayout table.ProductListImageBox td .InfoArea h3 {
	grid-column: 1 / span 6;
	margin-block: 0.5em 0.75em;
	font-family: inherit !important;
	line-height: 1.15 !important;
}

.hdgn2 .GeneralLayout table.ProductListImageBox td .InfoArea h3 a {
	color: currentColor;
	line-height: unset !important;
}

.hdgn2 .GeneralLayout table.ProductListImageBox td .InfoArea .Description {
	grid-column: 1 / span 6;
	grid-row-start: 3;
	text-align: left;
	background: orange;
}

.hdgn2 .GeneralLayout table.ProductListImageBox td .InfoArea .Price {
	grid-column: 1 / span 3;
	grid-row-start: 4;
	text-align: left;
	background: transparent;

	.price-value {
		display: inline-block;
		background: red;
		padding: 0.2em 0.6em;
	}
}

.hdgn2 .GeneralLayout table.ProductListImageBox td .InfoArea > .LinkArea { /* 100g = price */
	grid-column: 1 / span 3;
	grid-row-start: 5;
	background: green;
}

.hdgn2 .GeneralLayout table.ProductListImageBox td .InfoArea .Weight {
	grid-column: 1 / span 3;
	grid-row-start: 6;
	background: #ddd;
	font-size: 1rem !important;
	line-height: inherit !important;
}

.hdgn2 .GeneralLayout table.ProductListImageBox td .InfoArea div:nth-of-type(4) {
	display: block;
	/* what is this for? */
}

.hdgn2 .GeneralLayout table.ProductListImageBox td .InfoArea div.ClearBoth:has(form) {
	grid-column: 4 / span 3;
	grid-row: 4 / span 1;
	/* amount form toggle */

	.ShowInlineElement > div { /* price input container */
		/* background: #0fa; */
		display: flex;
		gap: 2px;
	}

	input:not([type="hidden"]),
	input.Quantity {
		background: #fff;
		border: 1px solid var(--text-dark);
		font-size: 1rem !important;
		line-height: 1rem !important;
		font-family: inherit;
		max-width: 100%;
		width: 5ch;
		padding: 0.15em 0.3em;
	}

	.ep-uiSpinner-stepper {
		display: flex;
		gap: 2px;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 3ch;
	}

	.ep-uiSpinner-stepper a {
		flex: 1;
		text-align: center;
		width: 100%;
		text-decoration: none;
		border: 0px solid var(--text-dark);
		line-height: 1 !important;
		font-size: 0.85rem !important;
		font-weight: inherit !important;
		color: inherit !important;
		font-family: inherit !important;
		background: #ccc;

		&:hover {
			background: #aaa;
		}
	}

	button[type="submit"],
	.AddToBasketButton {
		flex: 1;
		border: 0px solid black;
		background: #ccc url(https://cdn.herrdegen.de/shopping-cart.svg) 40% center no-repeat;
		cursor: pointer;
		transition: all 0.3s ease;
	}

	.AddToBasketButton:hover {
		background-color: var(--accent-2);
		background-position-x: 80%;
	}
}