/**
Theme Name: pixeldekor
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
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: pixeldekor
Template: astra
*/
/*Header styles*/
#header-icon-list ul{
	justify-content: space-between;
}
#header-sticky-part{
	position: sticky;
}
/*Home styles*/
.home .ast-container,
.page .ast-container{
    width: 100%;
    margin: 0;
    padding: 0;
    max-width: 100vw;
}
/*Footer styles*/
.top-left-content{
	display: flex;
	flex-direction: row;
	gap: 30px;
	align-items: center;
	margin-bottom: 25px;
}
.footer-left-col p{
	color: #fcd846;
	font-size: 14px;
}
.top-left-content p{
	color: #fff;
	font-size: 18px;
	font-family: "Crimson Text";
}
.footer-left-content .payment-image{
	margin-top: 80px;
}
/*Products styles*/
.products-container {
    display: grid;
    grid-template-columns: 33% 33% 33%;
    column-gap: 20px;
}
.products-container .product {
    margin-bottom: 35px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
	align-items: center;
	z-index: 1;
}
.product img {
    max-width: 200px;
    min-height: 200px;
    max-height: 200px;
    object-fit: contain;
    margin-bottom: 20px;
}
a.product-button {
    padding: 10px 20px;
    background-color: #FCD846;
    color: #111;
    text-decoration: none!important;
    text-transform: uppercase;
    font-size: 14px;
    font-family: 'PT Sans';
	width: fit-content;
}
.pagination {
    text-align: center;
    margin-top: 30px;
}
a.page-numbers {
    font-size: 20px;
    text-decoration: none!important;
    color: #7d7d7d;
	padding: 5px 7px;
}
a.page-numbers:hover {
    color: #FCD846;
}
span.page-numbers.current {
    background-color: #FCD846;
    color: #111;
    font-size: 20px;
	padding: 5px 7px;
}
.filter-section {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
	margin-bottom: 70px;
}
.filter-section * {
    z-index: 1;
}
input[type="search"]:focus {
    border: 1px solid #FCD846;
}
select.orderby {
    width: 40%;
}
p.product-count {
    font-size: 14px;
    margin-bottom: 0;
}
/*Category tree*/
.collapsible-category {
    list-style-type: none;
    margin-left: 0;
    padding-left: 0!important;
}
.collapsible-category ul {
    display: none; 
	padding-left: 0!important;
    margin-left: 20px;
	list-style-type: none;
}
.collapsible-category li {
    margin: 15px 0;
    position: relative;
    color: #111;
    text-transform: uppercase;
}
.collapsible-category li  a {
	color: #111;
	text-decoration:none!important;
}

.collapsible-category .toggle {
    margin-right: 6px;
    text-decoration: none!important;
    cursor: pointer;
    color: #000;
    font-weight: bold;
}
.collapsible-category li.category-item a:hover{
	text-decoration:underline;
	cursor:pointer;
}
.collapsible-category li.open > .toggle {
    transform: rotate(90deg);
    display: inline-block;
}
/*Category archive*/
.ast-container {
    justify-content:center;
    padding: 0;
}
.breadcrumb-divider svg {
    width: 16px;
    height: 16px;
    fill: #7d7d7d;
    margin: 0 10px;
}

.webshop-category{
    background-image: url("https://teszt.pixeldekor.eu/wp-content/uploads/2019/05/slider-pixeldekor-2.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100vw;
	min-height:635px;
    margin: 0px;
    padding: 120px;
}
.webshop-category-top {
    max-width: var(--wp--custom--ast-content-width-size);
    margin: 0 auto;
}
.webshop-title{
	    font-size: 48px;
    line-height: 1.35em;
    color: #fff;
    text-transform: uppercase;
    margin: 0;
}
.webshop-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
	margin-top: 20px;
}
.callback-button{
	position:relative;
}
.callback-button span.button-text {
    color: #fff;
    text-transform: uppercase;
    font-size: 16px;
}
.callback-button span.button-text:hover {
    color: #fcd846;
}
.callback-button span.button-text:after{
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 25%;
    height: 2px;
    -webkit-transition: width .3s;
    -moz-transition: width .3s;
    -o-transition: width .3s;
    transition: width .3s;
    pointer-events: none;
	background-color: #FCD846;
}
nav.breadcrumb {
    color: #fcd846;
}
.breadcrumb span.current-page{
	    background-color: rgba(17,17,17,0.5);
    padding-right: 10px;
    font-weight: bold;
    color: #fcd846;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
	padding: 7px 20px 7px 10px;
	text-transform: uppercase;
}
.breadcrumb a.main-page, .breadcrumb a.ancestor-page {
    color: #d7d7d7;
    text-transform: uppercase;
}
.breadcrumb a.main-page:hover, .breadcrumb a.ancestor-page:hover{
	color: #fcd846;
}
section.category-content {
    max-width: 1200px;
    margin: -300px auto 70px;
    background-color: #fff;
    padding: 80px;
}
.category-content .container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 30px;
}
.category-sidebar {
    margin-left: 30px;
    width: 270px;
    min-width: 270px;
	z-index:1;
}
.filter-container h3, .category-container h3 {
    margin-bottom: 20px;
}
.filter-container{
	margin-bottom:70px;	
}

/*Termékoldal*/
.termek-container {
    max-width: 1200px;
    margin: -300px auto 70px;
    background-color: #fff;
    padding: 80px;
}
.termek-content{
	 display: flex;
    flex-direction: row;
}
.termek-details {
    display: flex;
    flex-direction: row;
    gap: 50px;
}
.termek-title{
	font-size:30px;
	margin-bottom:20px;
}
.content-section p{
	font-size: 18px;
}
.similar-products {
    margin-top: 70px;
}
.similar-products .product-grid {
    display: grid;
    grid-template-columns: 30% 30% 30%;
	column-gap: 25px;
}
.similar-products .product {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.similar-products .product-grid .product h4{
	margin-bottom: 20px;
}
.similar-products h3 {
    font-size: 30px;
	margin-bottom: 30px;
}
.show-on-desktop{
	display: block;
}
.show-on-mobile{
	display: none;
}
button#wpforms-submit-3593 {
    border-radius: 0px;
	height: 60px;
}
button#wpforms-submit-3593:hover{
	background: #fcd846;
}
a.product-button{
	position:relative;
}

button#wpforms-submit-3593:after,
a.product-button:after{
    content: '';
    position: absolute;
    right: -20px;
    top: 0;
    bottom: 0;
    border-style: solid;
    -webkit-transition: border .1s;
    -moz-transition: border .1s;
    -o-transition: border .1s;
    transition: border .1s;
	border-color: transparent transparent transparent #fcd846;
}
button#wpforms-submit-3593:after{
	border-width: 30px 0 30px 20px;
}

a.product-button:after{
	border-width: 20px 0 20px 20px;
}
.show-on-tablet-mobile{
	display:none;
}
@media (max-width:992px){
	.products-container {
    	grid-template-columns: 50% 50%;
    }
	.hfe-nav-menu__breakpoint-tablet .hfe-nav-menu__layout-horizontal .hfe-nav-menu{
		display: none;
	}
	.hfe-nav-menu__submenu-arrow.hfe-dropdown.menu-is-active .hfe-nav-menu{
		display:block;
	}
	.show-on-tablet-mobile{
		display:block;
	}
	.show-on-desktop{
		display:none;
	}
	.category-sidebar.show-on-tablet-mobile{
		margin-top: 70px;
    	margin-left: 0px;
    	margin-right: auto;
	}
}
@media (max-width:768px){
	.webshop-row {
		flex-wrap: wrap;
		gap: 20px;
	}
	section.webshop-category {
		padding: 30px;
	}
	section.webshop-category h1{
		font-size: 33px;
	}
	.category-content .container {
		flex-direction: column;
	}
	.products-container {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 20px;
		justify-content: center;
	}
	.products-container .product {
		width: min-content;
	}
	section.category-content {
    	padding: 30px;
	}
	.category-sidebar{
		margin-left: 0px;
	}
	.show-on-desktop{
		display: none;
	}
	.show-on-mobile{
		display: block;
	}
	.termek-details {
		flex-direction: column;
	}
	.termek-container {
    	padding: 50px;
	}
	.similar-products{
		margin-bottom: 70px;
	}
	.similar-products .product-grid {
		grid-template-columns: 100%;
		row-gap:50px;
	}
	.similar-products h3 {
		text-align: center;
		margin-bottom:50px
	}
	.category-sidebar.show-on-tablet-mobile{
		margin-top: 70px;
    	margin-left: auto;
    	margin-right: auto;
	}
}

.corner-element {
  position: relative; /* kell a pozicionáláshoz */
}

.corner-element::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  
  /* méret a sarokhoz */
  width: 30px;
  height: 30px;
  
  /* 2px vastag L alak */
  border-top: 2px solid #fcd846;
  border-left: 2px solid #fcd846;
}
.animated-button span::after{
	content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 20%;
    height: 2px;
    -webkit-transition: width .3s;
    -moz-transition: width .3s;
    -o-transition: width .3s;
    transition: width .3s;
    pointer-events: none;
	background-color: #fcd846;
}
.animated-button a:hover span::after, .animated-button:hover span::after{
	width: 100%;
}
.hover-element:hover {
    background-color: #fcd846;
	border-color: #fcd846;
}

.hover-element:hover  .elementor-image-box-description,
.hover-element:hover  .elementor-icon-box-description,
.hover-element:hover .elementor-icon{
	color: #111!important;
	fill: #111!important;
}
.hover-element {
  position: relative; 
}
.hover-element:hover::before {
  content: "";
  position: absolute;
  top: -25px;
  left: 0;
  width: 100%;
  height: 25px; 
  background: #fcd846; 

  clip-path: polygon(0 100%, 50% 0, 100% 100%);
}
:root {
  --corner-size: 80px;             /* kivágás/behajtás mérete */
  --fold-color: #d9d9d9;           /* szürke háromszög színe */
  --fold-shadow: rgba(0,0,0,.20);  /* árnyék erőssége */
}

#folded-corner {
  position: relative;
  z-index: 0; 
  background: transparent !important;
}

span.hfe-breadcrumbs-text {
    text-transform: uppercase;
}
li.hfe-breadcrumbs-item.hfe-breadcrumbs-first a {
    text-decoration: none;
}

/* Fehér lap kivágott sarokkal */
#folded-corner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  clip-path: polygon(
    0 0,
    calc(100% - var(--corner-size)) 0,
    100% var(--corner-size),
    100% 100%,
    0 100%
  );
  z-index: 0;
}

#folded-corner::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: var(--corner-size);
  height: var(--corner-size);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
  background:#e1e1e1;
  border-top: 1px solid rgba(0,0,0,.07);
  border-right: 1px solid rgba(0,0,0,.07);
  z-index: 2;
}
span.e-n-accordion-item-title-icon {
    padding: 20px;
    background-color: #f3f3f3;
}

.e-n-accordion-item[open] .e-n-accordion-item-title-icon {
  background-color: #fcd846; 
  position: relative;      
  transition: background-color 0s ease;
}

.e-n-accordion-item[open] .e-n-accordion-item-title-icon::after {
  content: "";
  position: absolute;
  top: 100%;                  
  left: 50%;                 
  transform: translateX(-50%);

  width: 50px;
  height: 15px;
  
 background-color: #fcd846;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
:root{
  --icon-open-bg: #fcd846; /* ikon nyitott háttérszín */
  --tri-w: 50px;           /* háromszög szélesség */
  --tri-h: 15px;           /* háromszög magasság */
}

/* Ikon alap – legyen relatív, hogy alá tudjuk tenni a háromszöget */
.e-n-accordion .e-n-accordion-item-title-icon{
  position: relative;
  display: inline-block;
  background-color: transparent;
  overflow: visible; /* nehogy levágja a pszeudo-elemet */
}

/* A háromszög ALAP állapotban: el van fordítva és lapos (nem látszik) */
.e-n-accordion .e-n-accordion-item-title-icon::after{
  content: "";
  position: absolute;
  top: 100%;                /* pontosan az ikon alja alá */
  left: 50%;
  width: var(--tri-w);
  height: var(--tri-h);
  transform: translateX(-50%) rotate(-90deg) scaleY(0);
  transform-origin: top center;
  opacity: 0;
  background: var(--icon-open-bg);
  clip-path: polygon(0 0, 100% 0, 50% 100%); /* lefelé mutató háromszög */
  pointer-events: none;
}

/* NYITOTT állapot: ikon háttér + háromszög animáció (fordul -> lenyílik) */
.e-n-accordion-item[open] .e-n-accordion-item-title-icon{
  background-color: var(--icon-open-bg);
}

.e-n-accordion-item[open] .e-n-accordion-item-title-icon::after{
  animation: triangle-in .32s ease-out .05s forwards;
}

/* ZÁRT állapot: háromszög animáltan visszazár és elfordul */
.e-n-accordion .e-n-accordion-item:not([open]) .e-n-accordion-item-title-icon::after{
  animation: triangle-out .22s ease-in forwards;
}

/* Keyframe-ek: előbb fordul, aztán nyílik */
@keyframes triangle-in{
  0%   { transform: translateX(-50%) rotate(-90deg) scaleY(0); opacity: 0; }
  45%  { transform: translateX(-50%) rotate(0deg)    scaleY(0); opacity: 1; }
  100% { transform: translateX(-50%) rotate(0deg)    scaleY(1); opacity: 1; }
}

@keyframes triangle-out{
  0%   { transform: translateX(-50%) rotate(0deg)    scaleY(1); opacity: 1; }
  100% { transform: translateX(-50%) rotate(-90deg)  scaleY(0); opacity: 0; }
}

/* Ha a user csökkentett animációt kér, vegyük le az animokat */
@media (prefers-reduced-motion: reduce){
  .e-n-accordion .e-n-accordion-item-title-icon::after{
    animation: none !important;
    transform: translateX(-50%) scaleY(0);
    opacity: 0;
  }
  .e-n-accordion-item[open] .e-n-accordion-item-title-icon::after{
    transform: translateX(-50%) scaleY(1);
    opacity: 1;
  }
}