/**
Theme Name: Hoffmanns
Author: zsiraiandras.com
Author URI: https://zsiraiandras.com
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: Hoffmanns
*/

/* 
  =====================================================
  NORMALIZE
  =====================================================
*/
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
	line-height: 1.15; /* 1 */
	-webkit-text-size-adjust: 100%; /* 2 */
	scroll-behavior: auto;
	font-size: 15px;
}

/**
   * Remove the margin in all browsers.
   */

body {
	margin: 0;
	font-family: "D-DIN Exp", sans-serif;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
	font-family: "D-DIN Exp Bold", sans-serif;
}

/**
  * 1. Correct the inheritance and scaling of font size in all browsers.
  * 2. Correct the odd `em` font sizing in all browsers.
  */

code,
kbd,
samp {
	font-family: monospace, monospace; /* 1 */
	font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
	font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

* {
	box-sizing: border-box;
}

/* 
  =====================================================
  CSS VARIABLES
  =====================================================
*/
:root {
	--color-primary: #9a6a54;
	--color-accent: #2d5941;

	--color-white: #ffffff;
	--color-beige: #fef7ea;
	--color-black: #1f1b20;
	--color-grey: #707070;
	--color-medium-grey: #e4e4e4;
	--color-light-grey: #f5f5f5;

	--transition: all 0.45s cubic-bezier(0.65, 0.05, 0.35, 1);
}

/* 
  =====================================================
  HOFFMANNS FONTS
  =====================================================
*/

@font-face {
	font-family: "D-DIN";
	src: url("/wp-content/themes/hoffmanns/assets/fonts/D-DIN.woff2") format("woff2"), url("/wp-content/themes/hoffmanns/assets/fonts/D-DIN.woff") format("woff");
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "D-DIN Italic";
	src: url("/wp-content/themes/hoffmanns/assets/fonts/D-DIN-Italic.woff2") format("woff2"), url("/wp-content/themes/hoffmanns/assets/fonts/D-DIN-Italic.woff") format("woff");
	font-weight: normal;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "D-DIN Bold";
	src: url("/wp-content/themes/hoffmanns/assets/fonts/D-DIN-Bold.woff2") format("woff2"), url("/wp-content/themes/hoffmanns/assets/fonts/D-DIN-Bold.woff") format("woff");
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "D-DIN Exp";
	src: url("/wp-content/themes/hoffmanns/assets/fonts/D-DINExp.woff2") format("woff2"), url("/wp-content/themes/hoffmanns/assets/fonts/D-DINExp.woff") format("woff");
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "D-DIN Exp Italic";
	src: url("/wp-content/themes/hoffmanns/assets/fonts/D-DINExp-Italic.woff2") format("woff2"), url("/wp-content/themes/hoffmanns/assets/fonts/D-DINExp-Italic.woff") format("woff");
	font-weight: normal;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "D-DIN Exp Bold";
	src: url("/wp-content/themes/hoffmanns/assets/fonts/D-DINExp-Bold.woff2") format("woff2"), url("/wp-content/themes/hoffmanns/assets/fonts/D-DINExp-Bold.woff") format("woff");
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "D-DIN Condensed";
	src: url("/wp-content/themes/hoffmanns/assets/fonts/D-DINCondensed.woff2") format("woff2"), url("/wp-content/themes/hoffmanns/assets/fonts/D-DINCondensed.woff") format("woff");
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "D-DIN Condensed Bold";
	src: url("/wp-content/themes/hoffmanns/assets/fonts/D-DINCondensed-Bold.woff2") format("woff2"), url("/wp-content/themes/hoffmanns/assets/fonts/D-DINCondensed-Bold.woff") format("woff");
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}

/* 
  =====================================================
  ANIMATIONS START
  =====================================================
*/
.reveal {
	opacity: 0;
	transform: translateY(40px);
	transition: none !important;
}

/* 
  =====================================================
  GLOBAL
  =====================================================
*/

/*/
///  TYPOGRAPHY
/*/
p {
	margin: 0 0 20px;
	font-size: 1rem;
	font-family: "D-DIN Exp", sans-serif;
	line-height: 1.8em;
	color: var(--color-black);
}
p:not(.subtitle, .footer-title):last-of-type {
	margin-bottom: 0;
}

.title-xl {
	margin-bottom: 20px;
	font-size: 4.5rem;
	font-size: clamp(3rem, 3vw, 130px);
	line-height: 1em;
	color: var(--color-black);
}

.title-l {
	margin-bottom: 20px;
	font-size: 4.5rem;
	font-size: clamp(1.5rem, 2.2vw, 55px);
	line-height: 1em;
	color: var(--color-black);
}

.title-m {
	margin-bottom: 30px;
	font-size: 1.8rem;
	line-height: 1.2em;
	color: var(--color-black);
}

.title-s {
	margin-bottom: 25px;
	font-size: 1.8rem;
	line-height: 1em;
	color: var(--color-black);
}

.disabled {
	opacity: 0.6 !important;
	pointer-events: none !important;
}

.white {
	color: var(--color-white);
}

.center {
	text-align: center;
}

.uppercase {
	text-transform: uppercase;
}

.lowercase {
	text-transform: lowercase;
}

strong {
	font-family: "D-DIN Exp Bold", sans-serif;
}

a {
	color: var(--color-black);
	font-family: "D-DIN Exp", sans-serif;
	word-wrap: break-word;
	text-decoration: none;
}

a:hover {
	color: var(--color-accent);
	text-decoration: none;
}

a:focus {
	outline: none;
}

h1,
h2,
h3,
h4,
h5,
.font-heading {
	font-family: "D-DIN Exp Bold", sans-serif;
}

h3 {
	margin: 0 0 30px;
	padding: 0;
	font-size: 3rem;
	color: var(--color-primary);
}

h4 {
	margin: 0 0 30px;
	padding: 0;
	font-size: 2rem;
	color: var(--color-primary);
}

h5 {
	margin: 0 0 10px;
	padding: 0;
	font-size: 1.3rem;
	color: var(--color-accent);
}

/*/
///  LAYOUT
/*/
main#page {
	height: 100vh;
	height: 100svh;
	display: grid;
	grid-template-columns: 300px 1fr;
	overflow: hidden;
}

#barba__container {
	height: 100%;
}

.section {
	width: 100%;
	max-width: 100vw;
	padding: 0;
}

.mx-width {
	max-width: 1400px;
	margin: 0 auto;
}

.rounded {
	border-radius: 1.2em;
}

.relative {
	position: relative;
}

.absolute {
	position: absolute;
}

.grid {
	display: grid;
}

.bg-beige {
	background-color: var(--color-beige);
}

/*/
///  IMAGES
/*/
.img-wrapper {
	overflow: hidden;
}

.img-wrapper > img,
.img-wrapper > picture,
.img-wrapper picture img,
picture img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	image-rendering: -webkit-optimize-contrast;
}

picture {
	display: inline-block;
}

/*/
///  LISTS
/*/
ul,
ol {
	margin: 0;
	padding: 0;
	padding-left: 0;
	list-style-type: none;
}

ul li,
ol li {
	margin-bottom: 1em;
	font-family: "D-DIN Exp Bold", sans-serif;
	font-size: 1rem;
	line-height: 1.8em;
	color: var(--color-accent);
	word-wrap: break-word;
}
ul li:last-child,
ol li:last-child {
	margin-bottom: 0;
}

ul.list {
	margin-top: 1em;
}

ul.list li::before {
	content: "";
	display: inline-block;
	margin-right: 10px;
	width: 2em;
	height: 1px;
	vertical-align: middle;
	background-color: var(--color-primary);
}

/*/
///  FORMS
/*/
#form-wrapper {
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr;
	max-width: 580px;
	gap: 1em;
}

#form-wrapper label {
	display: inline-block;
	width: 100%;
	max-width: 100%;
	margin-bottom: 0;
	color: var(--color-accent);
}

.wpcf7-form-control-wrap {
	display: block;
	margin: 5px 0 30px;
}

#form-wrapper select,
#form-wrapper input[type="text"],
#form-wrapper input[type="email"],
#form-wrapper input[type="search"],
#form-wrapper input[type="password"],
#form-wrapper input[type="number"],
#form-wrapper input[type="date"],
#form-wrapper input[type="tel"],
#form-wrapper textarea,
#form-wrapper .form-control {
	width: 100%;
	font-size: 13px;
	color: var(--color-accent);
	background: var(--color-base);
	border: none;
	outline: none !important;
	padding: 1em 2em;
	height: 4em;
	transition: none;
	border-radius: 0.7em;
	vertical-align: top;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

#form-wrapper textarea {
	height: 100px;
	resize: vertical;
}

.required {
	color: #dc3232;
	margin-left: 4px;
}

#form-wrapper a {
	color: #dc3232;
}

.wpcf7-list-item {
	display: inline-block;
	width: 100%;
	margin: 0 0 20px;
}

.wpcf7-not-valid-tip {
	position: absolute;
	top: calc(100% + 5px);
	color: #dc3232;
	font-size: 1em;
	font-weight: normal;
	display: block;
}

.wpcf7-checkbox {
	display: block;
	margin-top: 1.2em;
}

select {
	height: 35px;
	padding: 0.1em 1.5em;
	font-size: 0.9rem;
	border: none;
	background-color: var(--color-grey);
}

input[type="submit"] {
	margin: 0;
	padding: 0.4em 1.5em;
	font-family: "D-DIN Exp Bold", sans-serif;
	font-weight: bold;
	font-style: italic;
	font-size: 1.5rem;
	color: var(--color-primary);
	border: 1px solid var(--color-accent);
	background-color: transparent;
	transition: var(--transition);
}

input[type="submit"]:hover {
	cursor: pointer;
	background-color: var(--color-accent);
}

/*/
///  BUTTON BTN
/*/
.btn-wrapper {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 40px;
}

.btn-wrapper.vertical {
	flex-direction: column;
}

.button,
button:not(.flickity-button, .cky-btn, .lg-icon),
.btn {
	display: inline-block;
	width: fit-content;
	margin: 1.5em 0 0;
	padding: 0.65em 2em;
	font-family: "D-DIN Exp";
	font-weight: normal;
	font-size: 1.2rem;
	color: var(--color-white);
	border: none;
	line-height: 1em;
	text-transform: uppercase;
	background-color: var(--color-accent);
	transition: var(--transition);
}

.button:not(.flickity-button, .add_to_cart_button):hover,
button:not(.flickity-button, .add_to_cart_button):hover {
	background-color: hsl(from var(--color-accent) h s l / 15%);
	cursor: pointer;
	color: var(--color-accent);
}

.btn:focus-visible {
	outline: 1px solid var(--color-accent);
}

.btn:hover {
	color: var(--color-primary);
}

button.btn:focus {
	outline: none;
}

/*/
///  Swiper JS
/*/
.slider {
	height: clamp(0px, 100%, 750px);
}

.slider .slide {
	width: 100%;
	height: 100%;
}

.slider .slide .img-wrapper {
	width: 100%;
	height: 100%;
}

.swiper-button {
	display: block;
	inset: unset;
	margin: 0;
	width: fit-content;
	height: 2em;
}

.swiper-button-next {
	top: 50%;
	right: 0;
	transform: translate(100%, -50%);
}

.swiper-button-prev {
	top: 50%;
	left: 0;
	transform: translate(-100%, -50%);
}

.swiper-button-next::after {
	content: "";
	display: block;
	width: auto;
	height: 30px;
	aspect-ratio: 1 / 2;
	background-repeat: no-repeat;
}
.swiper-button-next.black::after {
	background-image: url(/wp-content/uploads/2024/12/arrow-right-black.svg);
}
.swiper-button-next.white::after {
	background-image: url(/wp-content/uploads/2024/12/arrow-right-white.svg);
}

.swiper-button-prev::after {
	content: "";
	display: block;
	width: auto;
	height: 30px;
	aspect-ratio: 1 / 2;
	background-repeat: no-repeat;
}
.swiper-button-prev.black::after {
	background-image: url(/wp-content/uploads/2024/12/arrow-left-black.svg);
}
.swiper-button-prev::after {
	background-image: url(/wp-content/uploads/2024/12/arrow-left-white.svg);
}

.swiper-pagination.swiper-pagination-bullets {
	bottom: -30px;
}

.swiper-pagination .swiper-pagination-bullet {
	display: inline-block;
	width: 10px;
	height: 10px;
	margin: 0 8px;
	background: var(--color-white);
	border: none;
	border-radius: 50%;
	opacity: 1;
	cursor: pointer;
}
.swiper-pagination .swiper-pagination-bullet-active {
	background: red;
}

/* Magnetic mouse move btn, etc */
.magnetic {
	margin: 0;
	padding: 140px;
	display: inline-block;
	border-radius: 50%;
	transition-duration: 150ms;
	transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);

	&:hover {
		scale: 1.25;
	}
}

/* Parallax images */
.parallax__img {
	background-position: 50% 50%;
	background-repeat: no-repeat;
	position: absolute;
	bottom: 0;
}

/* Loading animation */
.lds-ripple,
.lds-ripple div {
	box-sizing: border-box;
}
.lds-ripple {
	display: inline-block;
	position: relative;
	width: 35px;
	height: 35px;
}
.lds-ripple div {
	position: absolute;
	border: 2px solid var(--color-accent);
	opacity: 1;
	border-radius: 50%;
	animation: lds-ripple 2s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.lds-ripple div:nth-child(2) {
	animation-delay: -1s;
}
@keyframes lds-ripple {
	0% {
		top: 15px;
		left: 15px;
		width: 8px;
		height: 8px;
		opacity: 0;
	}
	4.9% {
		top: 15px;
		left: 15px;
		width: 8px;
		height: 8px;
		opacity: 0;
	}
	5% {
		top: 15px;
		left: 15px;
		width: 8px;
		height: 8px;
		opacity: 1;
	}
	100% {
		top: 0;
		left: 0;
		width: 35px;
		height: 35px;
		opacity: 0;
	}
}

/*/
///  WP BLOCK EDITOR STYLES
/*/
.wp-block-heading {
	margin: 3rem 0 1.5rem;
	padding: 0;
	font-size: 1.65rem;
	color: var(--color-accent);
}

h1.wp-block-heading {
	font-size: 1.85rem;
}

.wp-block-list {
	li {
		font-family: "D-DIN Exp", sans-serif;
		font-size: 1rem;
		color: var(--color-black);
	}
}

/* 
  =====================================================
  HEADER
  =====================================================
*/
aside#desktop-header {
	height: 100%;
	background-color: var(--color-beige);
	background-image: url(/wp-content/uploads/2024/05/desktop-menu-bg.webp);
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: cover;
	z-index: 10;

	.header-inner {
		height: 100%;
		padding: 1.25rem 2rem;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.header-inner > * {
		z-index: 1;
	}

	.header-inner::after {
		content: "";
		position: absolute;
		inset: 0;
		display: block;
		background-color: var(--color-black);
		opacity: 65%;
		pointer-events: none;
	}

	.main-menu {
		max-width: 180px;
	}

	.main-menu li {
		position: relative;
		text-align: right;
		cursor: pointer;
	}

	.main-menu li a {
		display: inline-block;
		width: 100%;
		font-family: "D-DIN Exp Bold", sans-serif;
		font-size: 1.2rem;
		color: var(--color-white);
		text-transform: uppercase;
		white-space: break-spaces;
	}
	.main-menu li.lowercase a {
		text-transform: initial;
	}

	.main-menu li::before,
	.main-menu li::after {
		content: "";
		position: absolute;
		bottom: 50%;
		right: -30px;
		display: inline-block;
		width: 20px;
		height: 1px;
		background-color: var(--color-white);
		transform-origin: center;
		transition: var(--transition);
	}
	.main-menu li.menu-cart::before,
	.main-menu li.menu-account::before {
		content: none;
	}
	.main-menu li.menu-cart::after,
	.main-menu li.menu-account::after {
		content: "";
		position: absolute;
		top: 50%;
		right: -35px;
		display: inline-block;
		width: 23px;
		height: 23px;
		background-color: transparent;
		background-repeat: no-repeat;
		transform-origin: center;
		transform: translate(0, -50%);
		transition: var(--transition);
	}

	.main-menu li.menu-cart::after {
		background-image: url(/wp-content/uploads/2024/12/icon-cart-white.svg);
	}

	.main-menu li.menu-account::after {
		background-image: url(/wp-content/uploads/2025/05/icon-account-white.svg);
	}

	.main-menu li:hover::before {
		transform: scaleX(0.9) rotate(40deg);
	}
	.main-menu li:hover::after {
		transform: scaleX(0.9) rotate(-40deg);
	}
	.main-menu li.menu-cart:hover::after,
	.main-menu li.menu-account:hover::after {
		transform: translate(5px, -50%);
	}

	.main-menu li.kontakt__btn a {
		pointer-events: none;
	}
}

/*/
///  MOBILE HEADER
/*/
@media screen and (min-width: 769px) {
	#mobile-header {
		display: none !important;
	}
}

#mobile-header {
	height: fit-content;
	background-color: var(--color-beige);
	background-image: url(/wp-content/uploads/2025/04/mobile-header-bg.webp);
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: cover;
	isolation: isolate;
	z-index: 99;

	.header-inner {
		height: 100%;
		padding: 1rem 1.5rem;
		display: flex;
	}

	.logo-wrapper {
		z-index: 3;
	}
	.logo {
		width: 140px;
	}

	.social-wrapper {
		margin-left: auto;
		z-index: 2;
	}
	.social-wrapper .social-icon {
		width: 25px;
	}

	.header-inner::after {
		content: "";
		position: absolute;
		inset: 0;
		display: block;
		background-color: var(--color-black);
		opacity: 65%;
		pointer-events: none;
	}
}

/*
 * Quick hamburger
 */
#hamburger {
	position: relative;
	display: grid;
	justify-items: center;
	align-content: center;
	margin: 0 0 0 2rem;
	padding: 0;
	width: 50px;
	aspect-ratio: 1 / 1;
	cursor: pointer;
	z-index: 2;
}
#hamburger .line {
	display: block;
	width: 24px;
	height: 2px;
	margin: 0 auto 6px;
	position: relative;
	background: var(--color-white);
	z-index: 1;
	transform-origin: 4px 0px;
	transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease;
	transition: var(--transition);
}
#hamburger .line:last-of-type {
	margin: 0;
}

#hamburger input {
	display: block;
	margin: 0;
	position: absolute;
	inset: 0;
	cursor: pointer;
	opacity: 0;
	z-index: 2;
	-webkit-touch-callout: none;
	width: 100%;
	height: 100%;
}

#hamburger .line:first-child {
	transform-origin: 0% 0%;
}

#hamburger .line:nth-child(2) {
	transform-origin: 0% 100%;
}

#hamburger input:checked ~ .line {
	opacity: 1;
	transform: rotate(-45deg) translate(3px, 0);
}
#hamburger input:checked ~ .line:nth-child(2) {
	transform: rotate(45deg) translate(1px, -3px);
}
#hamburger input:checked ~ .line:nth-child(3) {
	opacity: 0;
	transform: rotate(0deg) scale(0.2, 0.2);
}

.mobile_menu {
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	height: fit-content;
	max-height: 100svh;
	padding: 0 0 1.5em;
	background-color: var(--color-beige);
	clip-path: circle(0% at 100% 0);
	transition: all 1s cubic-bezier(0.645, 0.045, 0.355, 1);
	overflow: hidden;
	z-index: 1;
}

.mobile_menu__inner {
	margin: 0 auto;
	padding: 30px 2rem;
	height: calc(100svh - 90px);
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	overflow-y: auto;
}

.mobile_menu ul.main-menu-mobile {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: center;
	gap: 1.2em;
}

.main-menu-mobile li {
	width: fit-content;
	margin: 0;
}

.main-menu-mobile li > a {
	display: inline-block;
	font-size: 22px;
	line-height: 1.1em;
	color: var(--color-primary);
	transition: var(--transition);
}

.main-menu-mobile .sub-menu {
	margin-top: 1rem;
	padding-left: 2rem;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	gap: 10px;
}

.main-menu-mobile .sub-menu li {
	font-size: 0.8em;
}

.nav-open {
	transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
	transform: translateY(0);
	clip-path: circle(150% at 100% 0);
}

@media screen and (min-width: 1201px) {
	#hamburger {
		display: none;
	}
}

@media screen and (max-width: 1200px) {
	#header .center {
		display: none;
	}
	#header .header-inner > .right {
		margin-left: auto;
	}
}

/* 
  =====================================================
  COMPONENTS
  =====================================================
*/
/* SOCIAL WRAPPER */
.social-wrapper {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 1.2em;
}

.social-wrapper .social-icon {
	width: 30px;
}

/* KONTAKT WRAPPER */
#kontakt__wrapper {
	position: fixed;
	display: block;
	top: 0;
	right: 0;
	transform: translateX(100%);
	width: 500px;
	height: 100%;
	background-color: var(--color-white);
	transition: var(--transition);
	z-index: 90;

	.relative {
		width: 100%;
		height: 100%;
	}
}

#kontakt__wrapper.is-open {
	transform: translateX(0);
}

#kontakt__wrapper.is-open .kontakt__icon .icon_arrow {
	clip-path: polygon(0 0, 100% 50%, 0 100%);
}

body.home #kontakt__btn {
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateX(-100%);
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	background-color: rgb(0 0 0 / 45%);
	transition: var(--transition);
	cursor: pointer;

	p {
		padding: 1em 2em;
		font-family: "D-DIN Exp Bold";
		letter-spacing: 1px;
		color: var(--color-white);
		text-transform: uppercase;
		-webkit-user-select: none;
		user-select: none;
	}
}

body.home #kontakt__btn:hover {
	background-color: rgb(0 0 0 / 65%);
}

body.home #kontakt__wrapper.is-open #kontakt__btn {
	background-color: rgb(0 0 0 / 85%);
}

#kontakt__btn {
	display: none;
}

#kontakt__wrapper .kontakt__icon {
	height: 50px;
}

.kontakt__icon .icon_arrow {
	position: absolute;
	display: block;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 10px;
	height: 15px;
	background-color: var(--color-black);
	transition: var(--transition);

	clip-path: polygon(100% 0, 0 50%, 100% 100%);
}
.kontakt__icon .icon_arrow.is-open {
	clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.kontakt__icon #icon_bg {
	width: auto;
	height: 100%;
}

#kontakt__content {
	height: 100%;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr max-content;
	overflow: hidden;

	.kontakt__inner {
		display: flex;
		flex-direction: column;
		padding: 4em 4em 2em;
	}

	p {
		font-family: "D-DIN Exp Bold", sans-serif;
	}

	.contact {
		display: flex;
		flex-direction: column;
		gap: 0.8em;
	}

	.map {
		width: 100%;
		height: 50vh;
		max-height: 400px;
	}

	.map iframe {
		width: 100%;
		height: 100%;
	}

	.kontakt-menu {
		margin-top: auto;
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		justify-content: space-between;
		gap: 1rem;

		li {
			margin: 0;
			padding: 0;
		}

		li a {
			margin: 0;
			padding: 0.5em 1em;
			font-size: 0.85rem;
			border: 1px solid var(--color-accent);
			color: var(--color-accent);
		}
	}
}

#kontakt__overlay {
	position: fixed;
	display: block;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	background-color: hsl(288deg 8.5% 11.5% / 65%);
	backdrop-filter: grayscale(1);
	transition: all 0.65s ease-in-out;
	clip-path: circle(0% at 101% 50%);
	cursor: pointer;
	z-index: 89;
}

#kontakt__overlay.is-open {
	clip-path: circle(150% at 101% 50%);
}

/* Lightgallery */
#galeria__wrapper {
	position: fixed;
	top: 0;
	left: 0;
	width: 0px;
	height: 0px;
}

/* 
  =====================================================
  HOME
  =====================================================
*/
#hero {
	width: 100%;
	height: 100%;
	display: grid;
	padding: 3em 3em 4em;
	grid-template-rows: max-content 1fr;
	background-image: url(/wp-content/uploads/2025/03/homepage-hero.webp);
	background-position: 50% 50%;
	background-size: cover;
	align-items: end;
}

#hero::before {
	content: "";
	position: absolute;
	inset: 0;
	display: block;
	background: linear-gradient(45deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.65) 15%, rgba(0, 0, 0, 0) 60%);
	pointer-events: none;
	z-index: 0;
}

#hero .logo-wrapper {
	margin: 30px auto;
	width: 100%;
	max-width: 250px;

	a {
		width: 100%;
		height: 100%;
	}
}

#hero-termek-slider {
	margin-left: 30px;
	margin-bottom: 50px;
	width: clamp(0px, 75%, 600px);
	height: clamp(0px, 55vh, 550px);

	.hero-termek-slider.swiper {
		width: clamp(0px, 75%, 600px);
	}
	
	.slide {
		width: 150px;
		height: auto;
		display: flex;
		align-items: flex-end;
		opacity: 0;
	}

	.product-link {
		display: block;
		width: 100%;
		height: 100%;
		transition: var(--transition);
	}

	.product-img {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}

	.slide .product-link {
		height: 70%;
	}

	.slide:not(.swiper-slide-active) .product-link:hover {
		height: 75%;
	}

	.swiper-slide-active .product-link {
		height: 100%;
	}
	
}

#hero .hero-nav {
	position: absolute;
	bottom: 5px;
	right: 5px;
	margin: 0;
	padding: 10px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	background-color: #2d594100;
    backdrop-filter: blur(10px);

	.kontakt-menu {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;

		li {
			margin: 0;
			padding: 0;
		}

		li a {
			margin: 0;
			padding: 0.8em 1em;
			font-size: 0.85rem;
			border: 1px solid var(--color-beige);
			color: var(--color-beige);
		}
	}

	.img-wrapper {
		width: 100%;
		max-width: 200px;
	}
}

/* 
  =====================================================
  PAGES
  =====================================================
*/

/* GLOBAL */
#barba__overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--color-accent);
	background-image: url(/wp-content/uploads/2024/05/hoffmanns-logo-alt.svg);
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: 200px;
	pointer-events: none;
	clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
	z-index: 999;
}

#page-wrapper {
	width: 100%;
	height: 100%;
	max-height: 100vh;
	max-height: 100svh;
	scrollbar-width: thin;
	scrollbar-color: var(--color-accent) transparent;
	overflow-y: auto;
}

#page-wrapper:has(#vertical-termek-slider) {
	display: grid;
	grid-template-columns: minmax(150px, 14%) 1fr;
	overflow-y: auto;
}

.page-content-default {
	max-width: 1150px;
	margin: 0 auto 3rem;
	padding: 0 50px;

	.section-title {
		margin: 5rem 0 3rem;
		text-align: center;
	}
}

/* ROLUNK + PROGRAMOK */
.rolunk-galeria {
	width: 100%;
	height: 100%;
}

.panels__wrapper {
	width: 100%;
	height: 100%;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr auto;
	align-content: space-between;
}

.panels__content {
	grid-row: 1;
	grid-column: 1 / 3;

	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
	height: 100%;
	overflow: hidden;

	.content {
		padding: 16vh 3em 2em;
		background-color: rgb(31 27 32 / 85%);
		overflow-y: auto;
		opacity: 0;
		transition: var(--transition);

		scrollbar-width: thin;
		scrollbar-color: var(--color-accent) transparent;
		overflow-y: auto;
		z-index: 1;
	}

	.content.active {
		opacity: 1;
	}
}

.panels__btn {
	display: grid;
	grid-template-columns: repeat(3, minmax(100px, 1fr));
	gap: 2px;
	background-color: var(--color-beige);

	.panel__btn {
		padding: 1em;
		font-size: 1.3rem;
		text-align: center;
		color: var(--color-beige);
		background-color: var(--color-black);
		cursor: pointer;
	}

	.panel__btn:hover {
		background-color: var(--color-grey);
	}

	.panel__btn.active {
		background-color: var(--color-accent);
	}
}

/* :HAS active states */
.panels__wrapper:has(.panel__btn_1.active) {
	.panels__content .content-1 {
		opacity: 1;
		z-index: 10;
	}
}
.panels__wrapper:has(.panel__btn_2.active) {
	.panels__content .content-2 {
		opacity: 1;
		z-index: 10;
	}
}
.panels__wrapper:has(.panel__btn_3.active) {
	.panels__content .content-3 {
		opacity: 1;
		z-index: 10;
	}
}
.panels__wrapper:has(.panel__btn_4.active) {
	.panels__content .content-4 {
		opacity: 1;
		z-index: 10;
	}
}
.panels__wrapper:has(.panel__btn_5.active) {
	.panels__content .content-5 {
		opacity: 1;
		z-index: 10;
	}
}
.panels__wrapper:has(.panel__btn_6.active) {
	.panels__content .content-6 {
		opacity: 1;
		z-index: 10;
	}
}

/* PROGRAMOK */
.programok-page-wrapper {
	.image__background {
		position: absolute;
		inset: 0 0 5px;
		z-index: -1;

		img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}

	.panels__btn {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
	}
}

.programok-page-wrapper {
	background-image: url(/wp-content/uploads/2025/10/programok_bg_uj.webp);
	background-position: center;
	background-size: cover;
}

/* VIDEO */
.video__wrapper {
	position: absolute;
	inset: 0;
	z-index: -1;
}

#rolunk-video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.video-js .vjs-tech {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
#rolunk-video .vjs-poster {
	background-size: cover;
}

/* BOROK, BORCSOMAGOK */
#vertical-termek-slider {
	width: 100%;
	height: 100vh;
	padding: 2em 0;
	display: grid;
	grid-template-rows: repeat(3, 33.33333%);
	background-color: var(--color-medium-grey);
	overflow: hidden;
	box-shadow: rgba(50, 50, 93, 0.25) 30px 0px 60px -20px, rgba(0, 0, 0, 0.3) 10px 0 40px -30px;
	z-index: 10;

	.product {
		padding: 1em;
		display: grid;
		gap: 1em;
		transition: var(--transition);
	}

	.product:hover {
		background-color: var(--color-white);
	}

	.product.active {
		background-color: var(--color-white);
	}

	.product-img {
		object-fit: contain;
	}

	.title-m {
		margin-bottom: 0;
		font-size: 0.9rem;
		text-align: center;
		text-wrap: balance;
		line-height: 1.2em;
		color: var(--color-black);
		text-transform: uppercase;
	}

	.swiper-button {
		display: grid;
		width: 100%;
		background-color: var(--color-medium-grey);
	}

	.swiper-button:hover {
		background-color: var(--color-grey);
	}

	.swiper-button-next {
		inset: unset;
		transform: none;
		bottom: 0;
		left: 0;
	}
	.swiper-button-next::after {
		content: "";
		display: block;
		width: 20px;
		aspect-ratio: 2 / 1;
		rotate: 90deg;
	}

	.swiper-button-prev {
		inset: unset;
		transform: none;
		top: 0;
		left: 0;
	}
	.swiper-button-prev::after {
		content: "";
		display: block;
		width: 20px;
		aspect-ratio: 2 / 1;
		rotate: 90deg;
	}
}

/* 
  =====================================================
  PAGE - Bolt
  =====================================================
*/
.split__view {
	height: 100%;
	display: grid;
	grid-template-columns: minmax(150px, 14%) auto;
	overflow: hidden;
}

#vertical-shop-menu {
	padding: 4rem 0;
	display: grid;
	grid-template-rows: repeat(3, 1fr);
	background-color: var(--color-accent);
	justify-items: center;
	align-items: center;

	.category {
		width: 100%;
		height: 100%;
		margin: 0;
		display: grid;
		place-content: center;
	}
	.category:nth-of-type(2) {
		border-top: 2px solid var(--color-white);
		border-bottom: 2px solid var(--color-white);
	}

	.category__icon {
		display: block;
		margin: 0 auto 20px;
		max-width: 60px;
		max-height: 60px;
	}
	.category__title {
		max-width: 180px;
		margin: 0;
		font-family: "D-DIN Exp Bold";
		font-size: 1.2rem;
		letter-spacing: 1px;
	}
}

#shop-wrapper {
	padding: 4rem 0;
	height: 100%;
	max-height: 100svh;
	display: grid;
	grid-template-columns: 4rem 1fr 4rem;
	grid-template-rows: repeat(3, 1fr);
	justify-items: center;
	align-items: center;
}

.shop__slider {
	width: 100%;
	height: 100%;
	/* border: 2px solid #9b0d0d61; */
	outline: 2px solid var(--color-accent);
	outline-offset: -1px;

	.swiper-wrapper {
		padding: 0px;
	}

	.product {
		/* margin: 0 -2px 0 0; */
		padding: 1rem;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 12px;
		border: 1px solid var(--color-accent);
		transition: background 0.2s ease-in-out;
	}

	.swiper-wrapper > .product:last-child::after {
		content: "";
		display: block;
		position: absolute;
		top: 0;
		right: -2px;
		width: 1px;
		height: 100%;
		background-color: var(--color-accent);
	}

	.product:hover {
		background-color: var(--color-medium-grey);
	}

	.img-wrapper {
		width: clamp(0px, 100%, 150px);
		height: 100%;
	}

	.product-img {
		object-fit: contain;
	}

	.product__title {
		max-width: 210px;
		text-align: center;
		text-wrap: balance;
		text-wrap-style: balance;
	}

	.product.outofstock {
		filter: grayscale(1);
		background-color: var(--color-medium-grey);
		pointer-events: none;
	}
}

/* #shop-borok-slider {
	border: 1px solid var(--color-accent);
	border-bottom: none;
}
#shop-gasztro-slider {
	border-left: 1px solid var(--color-accent);
	border-right: 1px solid var(--color-accent);
}
#shop-merchandise-slider {
	border: 1px solid var(--color-accent);
	border-top: none;
} */

#shop-wrapper .swiper-button {
	position: static;
	display: block;
	transform: none;
}

/* 
  =====================================================
  WOOCOMMERCE PRODUCTS
  =====================================================
*/

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	margin: 0;
}

/* Single product page */
#single-product-wrapper {
	margin: 0;
	padding: 0;
	overflow: hidden;

	.product {
		width: 100%;
		height: 100%;
	}
}

.product-summary-inner {
	width: 100%;
	height: 100%;
	display: grid;
	grid-template-columns: 1fr 1.15fr;
	transition: transform 0.4s cubic-bezier(0.65, 0.05, 0.35, 1);

	.featured-img-bg {
		position: absolute;
		top: 0;
		right: 0;
		width: 100%;
		height: 100%;
		background-position: 100% 0%;
		background-repeat: no-repeat;
		background-size: contain;
		z-index: -1;
	}

	.featured-img-bg img {
		margin-left: auto;
		display: block;
		width: auto;
		height: 100%;
		object-fit: contain;
		overflow: visible;
	}

	.featured-img-bottom {
		position: absolute;
		bottom: 0;
		left: 40%;
		transform: translateX(-50%);
		width: fit-content;
		height: auto;
		max-width: 230px;
		z-index: 0;
		overflow: visible;
	}

	.featured-img-bottom img {
		display: block;
		width: auto;
		height: 100%;
		object-fit: contain;
		overflow: visible;
	}
}

.product-summary-inner.food-visible {
	transform: translateX(-50%);
}

/* PRODUCT LEFT COLUMN */
#single-product-wrapper .product-summary-left {
	display: grid;
	align-items: start;
	gap: 2em;
	max-width: 540px;
	margin: 0 auto;
	padding: 4em 2.5em;
	overflow-y: auto;
	background: linear-gradient(90deg, var(--color-beige) 40%, transparent);
	scrollbar-width: thin;
	scrollbar-color: var(--color-accent) transparent;
	z-index: 1;

	.summary-top {
		display: grid;
		gap: 2em;
	}

	.product__title {
		margin: 0;
		font-family: "D-DIN Exp", sans-serif;
		font-size: 2rem;
		font-size: clamp(1.4rem, 1.65vw, 2rem);
		font-weight: normal;
		text-transform: uppercase;
		will-change: transform, opacity;
	}

	.product__desc {
		margin: 0;
		line-height: 1.3em;
		will-change: transform, opacity;
	}

	.product__short_desc {
		margin: 0;
		font-style: italic;
		line-height: 1.5em;
		will-change: transform, opacity;
	}

	.summary-table {
		display: flex;
		flex-wrap: wrap;
		gap: 1px;
		will-change: transform, opacity;
	}

	.table-item {
		outline: 1px solid;
		flex: 1 1 auto;
		overflow: hidden;
	}
	.table-item p {
		flex: 1 1 auto;
		margin: 0 auto;
		padding: 10px;
		font-weight: 600;
		line-height: 1.3em;
		will-change: transform, opacity;
	}
	.table-item span {
		display: block;
		font-weight: 500;
	}

	.table-item.icon {
		display: flex;
	}

	.icon object {
		width: 80px;
		height: 100%;
		max-height: 55px;
		padding: 10px;
	}

	.product__price {
		margin-top: auto;
		margin-bottom: 2rem;
	}

	.price {
		font-family: "D-DIN Exp Bold", sans-serif;
		font-size: 1.2rem;
		color: var(--color-accent);
	}

	.product__price.drs__badge {
		display: flex;
		align-items: center;
		gap: 3rem;
	}

	.product__price.drs__badge::after {
		content: "";
		width: 60px;
		height: 60px;
		background-image: url("/wp-content/uploads/2025/06/icon-visszavaltasi-dij.png");
		background-size: contain;
		background-position: center;
		background-repeat: no-repeat;
		display: inline-block;
	}

	.add-to-cart-wrapper {
		width: fit-content;
		margin-top: auto;
	}

	.add-to-cart-wrapper .single_add_to_cart_button {
		width: fit-content;
		margin: 0;
		padding: 1em 3em;
		letter-spacing: 1px;
	}

	form.cart {
		margin-bottom: 0 !important;
		display: flex;
		flex-wrap: wrap;
		align-items: stretch;
		gap: 1rem;
	}

	.quantity {
		display: flex;
		margin: 0;
		background-color: var(--color-medium-grey);
	}

	.quantity input[type="number"] {
		max-width: 45px;
		margin: 0;
		padding: 0.3em;
		text-align: center;
		border: none;
		background-color: transparent;
	}

	.quantity .quantity__btn {
		margin: 0;
		padding: 15px 0;
		width: 30px;
		font-weight: 400;
		text-align: center;
		color: var(--color-black);
		background-color: transparent;
		transition: var(--transition);
	}
	.quantity .quantity__btn:hover {
		background-color: hsl(from var(--color-accent) h s l / 15%);
	}

	form.cart::after,
	form.cart::before {
		content: none !important;
	}

	.success-message {
		position: absolute;
		display: grid;
		place-content: center;
		width: 100%;
		height: 100%;
		color: var(--color-white);
		background-color: var(--color-accent);
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.3s ease-in-out;
	}
	.success-message.open {
		opacity: 1;
		pointer-events: auto;
	}

	.go-to-cart {
		position: absolute;
		top: -10px;
		left: 0;
		transform: translate(0px, 0%);
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 1rem;
		width: 100%;
		padding: 0.75em 3em;
		border: 1px solid var(--color-accent);
		background-color: var(--color-beige);
		transition: var(--transition);
		opacity: 0;
		pointer-events: none;

		a {
			font-family: "D-DIN Exp";
			font-weight: normal;
			font-size: 1rem;
			line-height: 1em;
			color: var(--color-accent);
		}

		.arrow {
			width: 30px;
			height: auto;
			fill: var(--color-accent);
		}
	}
	.go-to-cart.active {
		opacity: 1;
		transform: translate(0px, -100%);
		pointer-events: auto;
	}
}

/* PRODUCT RIGHT COLUMN */
.product-summary-right {
	padding: 0;
	display: grid;
	justify-content: center;
	z-index: 2;

	.featured-img-wrapper {
		width: fit-content;
		height: 95%;
		align-self: center;
		overflow: visible;
	}

	.featured-img {
		width: fit-content;
		max-width: 650px;
		height: 100%;
		max-height: 100svh;
		object-fit: contain;
		filter: drop-shadow(0 10px 15px rgb(0 0 0 / 50%));
	}
}

/* Single product BORCSOMAG */
#single-product-wrapper.borcsomag-wrapper .product-summary-left {
	display: grid;
	align-content: space-around;
}

/* Single product MERCHANDISE */
#single-product-wrapper.merchandise-wrapper .product-summary-left {
	display: grid;
	align-content: space-around;
}

/* Single product AWARDS */
#awards {
	position: absolute;
	top: 0;
	right: 0;
	width: fit-content;
	min-width: 200px;
	height: 100%;
	background-color: var(--color-white);
	transform: translateX(100%);
	transition: var(--transition);
	z-index: 10;
}

/* Awards open state */
#awards.is-open {
	transform: translateX(0);
}

.awards-content {
	display: grid;
	align-content: center;
	justify-items: center;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 1.2em 2em;

	.title-m {
		margin: 0 0 2em;
		font-size: 1.3rem;
		font-weight: 600;
	}
}

.awards-badges {
	display: grid;
	justify-items: center;
	gap: 2.2em;
	margin: 0;

	.badge {
		max-width: 180px;
		display: grid;
		justify-items: center;
	}

	.img-wrapper {
		width: 80px;

		img {
			object-fit: contain;
		}
	}

	.badge__name {
		margin: 0;
		padding: 0;
		text-align: center;
		line-height: 1.2em;
	}

	.badge__year {
		margin: 0;
		padding: 0;
		text-align: center;
	}
}

.awards__btn {
	position: absolute;
	top: 50%;
	left: 0;
	transform: translate(-100%, -50%);
	width: 40px;
	aspect-ratio: 19 / 33;
	background-image: url(/wp-content/uploads/2024/06/icon-product-star.svg);
	cursor: pointer;
	filter: drop-shadow(0 10px 15px rgb(0 0 0 / 50%));
}

/* Single product FOOD PAIRING */
#food_pairing {
	position: absolute;
	top: 0;
	right: 0;
	display: grid;
	grid-template-rows: 1fr 1fr;
	width: 50%;
	min-width: 200px;
	height: 100%;
	background-color: var(--color-white);
	transform: translateX(100%);
	transition: var(--transition);
	z-index: 10;

	.top {
		align-content: end;
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
	}

	.title-m {
		padding-left: 1em;
		font-size: clamp(20px, 2.8vw, 45px);
		font-weight: 600;
		color: var(--color-white);
	}

	.bottom {
		padding: 3em;
	}
}

#food_pairing.is-open {
	transform: translateX(0);
}

.food_pairing__btn {
	position: absolute;
	top: 8%;
	left: 60%;
	transform: translate(-50%, -50%);
	cursor: pointer;
	filter: drop-shadow(0 10px 15px rgb(0 0 0 / 50%));

	.icon {
		width: 40px;
		aspect-ratio: 1 / 1;
		background-image: url(/wp-content/uploads/2024/06/icon-product-plus.svg);
		background-repeat: no-repeat;
	}
}

/* Single Product overlay */
#product_overlay {
	position: absolute;
	display: block;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	background-color: hsl(288deg 8.5% 11.5% / 65%);
	transition: all 0.65s ease-in-out;
	clip-path: circle(0% at 100% 50%);
	cursor: pointer;
	z-index: 9;
}

#product_overlay.is-open {
	clip-path: circle(150% at 101% 50%);
}

/* 
  =====================================================
  WOOCOMMERCE Cart + Checkout + Account
  =====================================================
*/

/* CART PAGE */
.cart-page-wrapper {
	margin: 0;
	padding: 0 5rem 5rem;

	.section-title {
		margin: 0 0 2rem;
		padding: 2rem 0;
		font-size: 2rem;
		text-align: center;
		text-transform: uppercase;
		color: var(--color-accent);
		border-block-end: 1px solid var(--color-accent);
	}

	.wc-block-components-sidebar .wc-block-cart__submit-button {
		font-family: "D-DIN Exp";
		font-weight: normal;
		font-size: 1.2rem;
		color: var(--color-white);
		border: none;
		line-height: 1em;
		text-transform: uppercase;
		background-color: var(--color-accent);
		transition: var(--transition);
	}

	.wc-block-components-sidebar .wc-block-cart__submit-button:hover {
		background-color: hsl(from var(--color-accent) h s l / 15%);
		cursor: pointer;
		color: var(--color-accent);
	}

	table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image img {
		margin: 0;
		width: auto;
		height: 100%;
		max-height: 200px;
		object-fit: contain;
	}
}

.cart-page-wrapper:has(.wc-block-store-notice.is-error) .wc-block-cart__submit-container {
	opacity: 0.4;
	pointer-events: none;
}

/* CHECKOUT PAGE */
.checkout-page-wrapper {
	margin: 0;
	padding: 0 5rem 5rem;

	.section-title {
		margin: 0 0 2rem;
		padding: 2rem 0;
		font-size: 2rem;
		text-align: center;
		text-transform: uppercase;
		color: var(--color-accent);
		border-block-end: 1px solid var(--color-accent);
	}

	.page-content-default {
		max-width: 100%;
	}

	form.woocommerce-checkout {
		h3 {
			margin: 0 0 1rem;
			font-size: 1.5rem;
			color: var(--color-primary);
		}

		#order_review_heading {
			margin-top: 5rem;
		}

		#payment #place_order {
			float: none;
			margin: 1.5em 0 0;
			padding: 0.65em 2em;
			font-family: "D-DIN Exp";
			font-weight: normal;
			font-size: 1.2rem;
			color: var(--color-white);
			border: none;
			line-height: 1em;
			text-transform: uppercase;
			transition: var(--transition);
			background-color: var(--color-accent);
		}
	}

	.wc-block-checkout__terms a {
		font-family: "D-DIN Exp Bold";
		font-weight: bold;
	}
}

.woocommerce-thankyou-order-received {
	padding: 2rem 0;
	font-size: 2rem;
	text-align: center;
	text-transform: uppercase;
	color: var(--color-accent);
}

/* Fiokom */
.woocommerce-account .woocommerce-MyAccount-navigation {
	float: none;
	width: 100%;
}

.page-fiokom {
	margin: 0;
	padding: 0 5rem 5rem;
	background-color: var(--color-beige);

	.section-title {
		margin: 0 0 2rem;
		padding: 2rem 0;
		font-size: 2rem;
		text-align: center;
		text-transform: uppercase;
		color: var(--color-accent);
		border-block-end: 1px solid var(--color-accent);
	}

	.woocommerce {
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: max-content 1fr;
		grid-gap: var(--space-m);

		.woocommerce-MyAccount-navigation ul {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			align-items: center;
			gap: 1em;
		}

		.woocommerce-MyAccount-navigation-link {
			width: fit-content;
			margin: 0;
			padding: 0.6em 2em;
			border: 1px solid var(--color-medium-grey);
			border-radius: 6px;
		}

		.woocommerce-MyAccount-navigation-link.is-active {
			border: 1px solid var(--color-black);
		}
	}

	.woocommerce-MyAccount-content {
		width: 100%;
		padding: 5rem 0 0;
	}
}

/* 
  =====================================================
  MEDIA QUERIES
  =====================================================
*/

@media screen and (max-width: 1400px) {
	main#page {
		grid-template-columns: 260px 1fr;
	}
}

@media screen and (max-width: 1200px) {
	main#page {
		grid-template-columns: 230px 1fr;
	}

	aside#desktop-header {
		.header-inner {
			padding: 2rem 1.5rem;
		}
		.main-menu {
			padding-right: 1rem;
		}
	}

	.panels__content {
		.content {
			padding: 3rem 2rem;
			grid-column: 1;
			grid-row: 1;
		}
		.content:hover {
			opacity: 0;
		}
	}

	.panels__btn {
		.panel__btn {
			font-size: 1.25rem;
		}
	}

	/* Bolt */
	#vertical-shop-menu {
		.category__icon {
			max-width: 45px;
			max-height: 45px;
		}
		.category__title {
			font-size: 1rem;
		}
	}
}

@media screen and (max-width: 900px) {
	main#page {
		grid-template-columns: 190px 1fr;
	}
	.main-menu {
		padding-right: 1.5rem;
	}
	.main-menu li a {
		font-size: 1rem;
	}

	.panels__btn {
		grid-template-columns: 1fr;

		.panel__btn {
			padding: 1.2em 1em;
			font-size: 1rem;
			border: none;
			border-bottom: 1px solid var(--color-beige);
		}
	}
}

@media screen and (max-width: 768px) {
	body {
		overflow-y: auto;
	}

	body.home #kontakt__btn {
		top: 35%;
	}
	
	.weglot-shortcode {
		display: none;
	}

	#desktop-header {
		display: none;
	}

	main#page {
		height: auto;
		min-height: 100svh;
		grid-template-columns: 1fr;
		grid-template-rows: auto 1fr;
	}

	#page-wrapper {
		height: 100%;
		max-height: none;
	}

	/* Homepage */
	#hero .logo-wrapper {
		margin: 0px auto;
		width: 100%;
		max-width: 200px;
	}

	#hero-termek-slider {
		margin: 0;
		width: clamp(300px, 78%, 600px);
		height: clamp(0px, 50vh, 550px);
	}

	/* Bolt */
	.split__view {
		height: 100%;
		display: grid;
		grid-template-columns: 1fr;
		overflow: hidden;
	}

	#vertical-shop-menu {
		padding: 0;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: auto;
		background-color: var(--color-accent);
		justify-items: center;
		align-items: center;

		.category:nth-of-type(2) {
			padding: 1rem 0;
			border: none;
			border-left: 2px solid var(--color-white);
			border-right: 2px solid var(--color-white);
		}
	}

	/* PRODUCTS */
	#page-wrapper:has(#vertical-termek-slider) {
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: auto 1fr;
		overflow-y: auto;
	}

	#vertical-termek-slider {
		height: 160px;
		padding: 1rem 2.5rem;
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: 1fr;

		.swiper-button-next {
			width: 2rem;
			height: 100%;
			inset: unset;
			transform: none;
			top: 0;
			right: 0;
			z-index: 2;
		}
		.swiper-button-next::after {
			content: "";
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			display: block;
			width: 20px;
			aspect-ratio: unset;
			rotate: 0deg;
		}

		.swiper-button-prev {
			width: 2rem;
			height: 100%;
			inset: unset;
			transform: none;
			top: 0;
			left: 0;
			z-index: 2;
		}
		.swiper-button-prev::after {
			content: "";
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			display: block;
			width: 20px;
			aspect-ratio: unset;
			rotate: 0deg;
		}

		.product {
			height: calc(160px - 2rem);
			padding: 0px;
			display: grid;
			justify-items: center;
			gap: 1em;
			transition: var(--transition);
		}
	}
}

@media screen and (max-width: 500px) {
	#barba__overlay {
		height: calc(100vh - 88px);
		background-size: 150px;
	}

	#mobile-header {
		.social-wrapper {
			display: none;
		}
		.header-inner {
			justify-content: space-between;
		}
	}

	/*  Homepage */
	#hero {
		padding: 3em 1.5em 6em;
		align-items: center;
		
	.hero-nav .img-wrapper {
			width: 100%;
			max-width: 140px;
		}
	}

	#kontakt__wrapper {
		top: 88px;
		width: calc(100% - 9.5rem);

		.kontakt__inner {
			padding: 1em;
		}

		.title-m {
			font-size: 1.2rem;
		}
	}

	body.home #kontakt__btn {
		p {
			padding: 1em 1em;
			font-size: 0.75rem;
		}
	}

	#hero-termek-slider {
			margin: 0;
			width: 190px;
			height: clamp(0px, 35vh, 450px);

		.slide {
			width: 30%;
		}
	}
	
	#hero .hero-nav {
		left: 5px;
	}

	/* Bolt */
	#shop-wrapper {
		padding: 3rem 0;
		grid-template-columns: 2.5rem 1fr 2.5rem;
	}

	#vertical-shop-menu {
		.category__icon {
			margin: 0 auto 10px;
			max-width: 35px;
			max-height: 35px;
		}
		.category__title {
			font-size: 0.75rem;
		}
	}

	/* Products */
	#vertical-termek-slider {
		.title-m {
			width: min-content;
			font-size: 0.75rem;
		}
	}

	.product-summary-inner {
		padding-bottom: 5rem;
		grid-template-columns: 1fr;

		.featured-img {
			width: fit-content;
			max-width: 300px;
			height: fit-content;
			max-height: 550px;
		}

		.featured-img-bg {
			background-size: 100%;
		}
		.featured-img-bottom {
			position: absolute;
			bottom: 0;
			left: 18%;
			transform: translateX(-50%);
			width: fit-content;
			height: auto;
			z-index: 0;
			overflow: visible;
		}
	}

	#single-product-wrapper .product-summary-left {
		padding: 2rem 1.5rem;
		z-index: 3;

		.icon object {
			width: 60px;
			height: 100%;
			max-height: 80px;
			padding: 7px;
		}
	}

	#awards {
		position: absolute;
		top: 100%;
		right: 0;
		width: 100%;
		min-width: 200px;
		height: fit-content;
		background-color: var(--color-white);
		transform: translate(0%, 0%);
		transition: var(--transition);
		z-index: 10;

		.awards__btn {
			position: absolute;
			top: 0%;
			left: 50%;
			transform: translate(-50%, -100%);
			width: 70px;
			aspect-ratio: 30 / 17;
			background-image: url(/wp-content/uploads/2025/05/icon-product-star_mobile.svg);
			background-size: contain;
			background-repeat: no-repeat;
		}

		.awards-badges {
			display: flex;
			justify-items: center;
			gap: 2.2em;
			margin: 0;
			flex-wrap: wrap;
			justify-content: center;
		}
	}
	#awards.is-open {
		transform: translate(0%, -100%);
	}

	.product-summary-inner.food-visible {
		transform: none;
	}

	#food_pairing {
		position: absolute;
		top: 100%;
		left: 0;
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr;
		width: 100%;
		height: fit-content;
		min-height: 280px;
		background-color: var(--color-white);
		transform: translate(0%, 0%);
		transition: var(--transition);
		z-index: 10;

		.bottom {
			padding: 1em;

			p {
				font-size: 0.75rem;
			}
		}
	}
	#food_pairing.is-open {
		transform: translate(0%, -100%);
	}

	/* Cart */
	.cart-page-wrapper,
	.checkout-page-wrapper {
		margin: 0;
		padding: 0 1rem 2rem;
	}

	/* Account */
	.page-fiokom {
		padding: 0 2rem 5rem;

		.woocommerce {
			.woocommerce-MyAccount-navigation-link {
				width: fit-content;
				margin: 0;
				padding: 0.5em 1.5em;
				font-size: 0.8rem;
				border: 1px solid var(--color-medium-grey);
				border-radius: 6px;
			}
		}
	}
}