/*
	Theme Name: Hozjan-Theme
	Theme URI: https://www.hozjan.net/
	Description: Willkommen zum Hozjan-Theme – die perfekte Grundlage für dein Webprojekt! Entwickelt und bereitgestellt von Hozjan Artwork, bietet dieses Theme eine Auswahl an durchdachten Features, die deine Arbeit mit Wordpress noch effizienter und kreativer machen.
	Author: Benny Hozjan
	Author URI: https://www.hozjan.net/
	Template: Divi
	Version: 1.0.0
	Tag: Child Theme, Hozjan Artwork 
	License: GNU General Public License v2 or later
	License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/* ==========================================================================
	Standard CSS
	========================================================================== */
* {
	margin:0;
	padding:0;
	box-sizing: border-box;
	}
	
html { font-size: 62.5%; }
	
#page-container {overflow:hidden}
	
a[href^="#"] {cursor:pointer!important}	

:root {
	/* Global Colors */
	--purple:     	#885cdb;
	--green:		#629584;
	--beige:		#d6bd98;
	--orange:		#ff885b;
	--dark:			#1a1a1d;
	--light:		#fffbf5;
	--sand:			#f7efe5;
	--white:		#ffffff;
	--black:		#000000;
	
	/* Transition */
	--tra-3s:	all .3s ease-in-out
	}
	
.mce-panel .mce-stack-layout-item.mce-first {
	position: sticky!important;
	top: -60px;
	}
	
.bh-align-center-section,
.bh-align-center-row .et_pb_column,
.bh-align-center-module {
	display: flex;
	flex-direction: column;
	justify-content: center;
	}
	

/* ==========================================================================
	Mobile Menu CSS
	========================================================================== */
.et_pb_module .et_mobile_menu {
    width: calc(100% + 10rem);
    left: -5rem;
    margin-top: 1rem;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: 2rem;
    border-bottom-right-radius: 2rem;
    box-shadow: 0 20px 30px -6px rgba(112,111,111,.15)
}

.et_pb_menu .et_mobile_menu li a {
    font-size: 1.6rem!important;
    font-weight: 600!important;
    line-height: 4rem;
    text-align: left;
}

.mobile_nav.opened .mobile_menu_bar:before {
    content: '\4d';
}

.mobile_menu_bar:before {
	transition: all .4s ease;
	transform: rotate(0deg);
	display: block;
}
/*rotate the Divi Menu icon on click*/
.mobile_nav.opened .mobile_menu_bar::before {
	transition: all .4s ease;
	transform: rotate(90deg);
	display: block;
}

/* ==========================================================================
	Sortiment CSS
	========================================================================== */
.sortiment-hover .et_pb_column.hund,
.sortiment-hover .et_pb_column.katze, 
.sortiment-hover .et_pb_column.shop { 
	border:1px solid var(--white);
	padding-top: 3rem;
	padding-right: 3rem;
	padding-bottom: 3rem;
	padding-left: 3rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	background-size: contain;
	background-position: bottom right;
	transition: var(--tra-3s);
	}

.sortiment-hover .et_pb_column.hund {
  background-image: url(https://vierbeiner.shop/wp-content/uploads/2025/04/acc-dog.png),radial-gradient(circle at left,white 0%,var(--sand) 100%);
  box-shadow: 0px 20px 20px -5px rgba(164, 133, 87, 0.3)
}

.sortiment-hover .et_pb_column.katze {
  background-image: url(https://vierbeiner.shop/wp-content/uploads/2025/04/acc-cat.png),radial-gradient(circle at left,white 0%,var(--sand) 100%);
  box-shadow: 0px 20px 20px -5px rgba(164, 133, 87, 0.3)
}

.sortiment-hover .et_pb_column.shop {
  background-image: url(https://vierbeiner.shop/wp-content/uploads/2025/04/acc-tasche.png),radial-gradient(circle at left,white 0%,var(--sand) 100%);
  box-shadow: 0px 20px 20px -5px rgba(164, 133, 87, 0.3)
}

.sortiment-hover .et_pb_column.hund::before {
  content:"Hündeler";
  background:var(--green);
}
.sortiment-hover .et_pb_column.katze::before {
  content:"Chätzler"; 
  background:var(--green);
}
.sortiment-hover .et_pb_column.shop::before {
  content:"Gwungrigi";
  background:var(--green);
}

.sortiment-hover .et_pb_column::before {
   position:absolute;
  top:-15px;
  left:10px;
  border-radius:3px;
  padding:.3rem .75rem;
  color:white;
  font-size:1.2rem;
}

/* ==========================================================================
	Buttons CSS
	========================================================================== */
/* Grid-Layout */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
}

/* Produktkarte */
.product-card {
  text-align: center;
  position: relative;
  transition: box-shadow 0.3s ease;
}
.product-card.selected {
  box-shadow: 0 0 0 1px var(--green);
  padding-bottom:2rem
}

/* Bild */
.image-wrapper {
	position:relative
}
.image-wrapper img {
  width: 100%;
  height: auto;
}

/* Label */
.product-card .inhalt {
  position: absolute;
  top: 10px;
  right: 10px;
  background: var(--dark);
  color: white;
  padding: 0 1rem;
  border-radius: 5px;
  font-size: 12px;
  font-weight: bold;
}

/* Titel & Preis */
.product-card h3 {
  color: var(--green);
  margin-top: 1rem;
}

.product-card .preis {
  color: white;
  font-weight: bold;
  margin-bottom: 1rem;
  font-size: 16px
}

/* Bestellzeile */
.bestellzeile {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.bestellzeile label {
	color:white;
	opacity:.6;
}
.bestellzeile input[type="number"] {
  width: 60px;
  padding: 0.4rem;
  border-radius: 5px;
  border: 1px solid;
  border-color:var(--green)!important;
  text-align: center;
  font-size: 16px;
  background:var(--dark);
  color:white;
}

/* Globaler Bestellbutton */
.mail-btn {
  background: var(--green);
  color: white;
  padding: 0.8rem 1.5rem;
  border-radius: 6px;
  outline:1px solid var(--green);
  text-decoration: none;
  font-weight: bold;
  display: inline-block;
  transition: background 0.3s ease;
  margin-top: 3rem;
}

.mail-btn:hover {
  outline:1px solid var(--green);
  background:#262629;
  color:white
}

/* Responsive für zentrale Bestellzeile */
@media (max-width: 500px) {
  .bestellzeile {
    flex-direction: column;
  }
}

/* ==========================================================================
	Buttons CSS
	========================================================================== */
.et_pb_button.submit,
.et_pb_button {
	font-size:1.4rem;
	text-transform:uppercase;
	padding: 2rem 2rem!important;
	transition:var(--tra-3s)
	}
	
.et_pb_button.submit:hover,
.et_pb_button:hover {
	font-size:1.4rem!important;
	text-transform:uppercase;
	padding: 2rem 2rem!important;
	}

.et_pb_button.purple {
  background:var(--purple);
  color:var(--white);
  border:10px solid var(--purple)!important;
}
.et_pb_button.green {
  background:var(--green);
  color:var(--white);
  border:10px solid var(--green)!important;
}

.et_pb_button.purple:hover,
.et_pb_button.green:hover {
  background:var(--dark);
  color:var(--white);
  border:10px solid var(--dark)!important
}

		
/* ==========================================================================
	AKKORDEON CSS Styling
	========================================================================== */
.et_pb_accordion .et_pb_toggle_close .et_pb_toggle_title::before {
	content:"\33"!important;
	font-size:20px;
	}

.et_pb_accordion .et_pb_toggle_open .et_pb_toggle_title::before {
	display:block;
	content:"\32"!important;
	font-size:20px;
	}
	

/* ==========================================================================
Gallery CSS
========================================================================== */  
.et_pb_gallery .et_pb_gallery_item {
	border:3px solid white
	}
	
.et_pb_gallery .et_overlay {
	background: #121416;
	}
	
.et_pb_gallery_image:before,
.et_pb_gallery_image:after {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all 0.4s ease;
	transition: all 0.4s ease;
	}
	
.et_pb_gallery_image:before,
.et_pb_gallery_image:after {
	content: '';
	background-color: var(--dark);
	position: absolute;
	z-index: 1;
	top: 50%;
	left: 50%;
	opacity: 0;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	z-index:99;
	}
	
.et_pb_gallery_image:before {
	width: 60px;
	height: 1px;
	left: 100%;
	}
	
.et_pb_gallery_image:after {
	height: 60px;
	width: 1px;
	top: 0%;
	}
	
.et_pb_gallery_item:hover .et_overlay {
	zoom: 1;
	filter: alpha(opacity=80);
	-webkit-opacity: 0.8;
	opacity: 0.8;
	}
	
.et_pb_gallery_image:hover:before,
.et_pb_gallery_image:hover:after{
	opacity: 1;
	top: 50%;
	left: 50%;
	}
	
.et_pb_inline_icon:before, 
.et_overlay.et_pb_inline_icon:before {
	content:'';
	}


/* ==========================================================================
	Slick Slider CSS
	========================================================================== */
.slide-stuff .et_pb_module {
    padding:20px !important;
    margin:0px 10px !important;
}

.slide-stuff .slick-prev:before {
	font-family: "ETmodules"!important;
    color: var(--blue)!important;
    font-size: 55px!important;
    content: "\34"!important;
}
.slide-stuff .slick-next:before {
	font-family: "ETmodules"!important;
    color: var(--blue)!important;
    font-size: 55px!important;
    content: "\35"!important;
}

.slide-stuff .slick-track {
    position: relative;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
}

.slide-stuff .slick-slide img {
	-webkit-filter: grayscale(1); /* Old WebKit */
      filter: grayscale(1);
      mix-blend-mode: multiply;
}

/* ==========================================================================
	Font CSS
	========================================================================== */
.et_pb_module.et_pb_text h1,
.et_pb_module.et_pb_text h1 span {
	font-size : clamp(3.5rem, 5vw, 5rem);
	line-height : clamp(3.5rem, 5vw, 5rem);
	}
	
.et_pb_module.et_pb_text h2 {
	font-size : clamp(2.6rem, 5vw, 3.5rem);
	line-height : clamp(3rem, 5vw, 4rem);
	font-weight: 500
	}
	
.et_pb_module.et_pb_text h3 {
	font-size : clamp(2.3rem, 5vw, 3rem);
	line-height : clamp(2.4rem, 5vw, 3rem);
	font-weight: 500
	}
	
.et_pb_module.et_pb_text h4,
h3.et_pb_toggle_title {
	font-size : clamp(2rem, 5vw, 2.2rem);
	line-height : clamp(2.2rem, 5vw, 2.5rem);
	font-weight: 500;
	}

.et_pb_module.et_pb_text h5 {
	font-size : clamp(1.6rem, 5vw, 2rem);
	line-height : clamp(2.2rem, 5vw, 2.5rem);
	}

.et_pb_module.et_pb_text,	
.et_pb_module.et_pb_text p,
.et_pb_module.et_pb_text span,
.et_pb_blurb .et_pb_blurb_description p,
.et_pb_module .et_pb_toggle_content p {
	font-size : clamp(1.6rem, 5vw, 1.8rem);
	line-height : clamp(2rem, 5vw, 2.2rem);
	}

.et_pb_module.et_pb_text ol li, 
.et_pb_module.et_pb_text ul li	{
	font-size : clamp(1.6rem, 5vw, 1.8rem);
	line-height : clamp(2rem, 5vw, 2.2rem);
	padding-bottom: 15px
}

.et_pb_module.et_pb_text.subtext p {
	font-size : clamp(1.6rem, 5vw, 2rem);
	line-height : clamp(2.2rem, 5vw, 2.5rem)
}

/* ==========================================================================
	Footer CSS
   ========================================================================== */

.bh_footer .et_pb_column {
	display: flex;
  flex-direction:row;
	justify-content:space-between;
	}

@media only screen and ( max-width: 640px ) {
		.bh_footer .et_pb_column {
     flex-direction: column;
		 flex-direction: column-reverse !important;
     align-items:center
		}
		
		.bh_footer .bh_footer_list ul {
		align-items: center;
		justify-content: center;
		width:100%
		}
	
	}



.bh_footer .bh_credits .swissmade {
	width:13px;
	height:13px;
	margin: 0 2px
	}
	
.bh_footer .bh_credits p, 
.bh_footer .bh_credits span {
	font-size:12px;
	text-transform:uppercase!important;
	display:flex;
	align-items:center;
	flex-wrap: wrap;
	}



.bh_footer .bh_footer_list ul  {
	list-style:none; 
  display:flex;
	}

.bh_footer .bh_footer_list ul li {
	font-size: 12px;
	-webkit-font-smoothing: antialiased;
	text-transform: uppercase;
  margin:0 10px;
	}

.bh_footer .bh_footer_list ul li a {
  color:white;
	transition: var(--tra-3s);
	}

.bh_footer .bh_footer_list ul li a:hover {
	color:var(--green)
	}
	
.whatsapp-float {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 999;
  width: 50px;
  height: 50px;
  background-color: var(--green);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
  transition: transform 0.2s ease;
}

.whatsapp-float:hover {
  transform: scale(1.1);
}

.whatsapp-float img {
  width: 24px;
  height: 24px;
  filter: brightness(0) invert(1);
}