/*!
Theme Name: PNG Child
Theme URI: https://lepng.gr/
Template: kadence
Author: Lefteris Panagiotou
Author URI: https://lepng.gr/
Description: A custom-built Child Theme developed by me, based on the parent theme, designed to extend functionality and enhance design while maintaining full compatibility with future updates.
Version: 1.3.6
License: GNU General Public License v3.0 (or later)
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: png-child
*/

/* Global Styles */
:root{
	--png-black: #0B0B0B;
	--png-gold: #C6A46C;
	--png-gold-hover: #A17C3A;
	--png-beige: #F5F2ED;
	--png-white: #FFFFFF;
	--png-muted-text: #B8B8B8;
}
h1,h2{
	position: relative;
}
.png-sections {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 60px 24px;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	margin: auto;
}
.box-width{
	position: relative;
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
}
.box-30{
	position: relative;
	width: 30%;
}
.box-40{
	position: relative;
	width: 40%;
}
.box-45{
	position: relative;
	width: 45%;
}
.box-50{
	position: relative;
	width: 50%;
}
.box-55{
	position: relative;
	width: 55%;
}
.light-title, .light-text{
	position: relative;
	color: var(--png-white);
}
.gold-text{
	position: relative;
	color: var(--png-gold);
}
.muted-text{
	position: relative;
	color: var(--png-muted-text);
}
.cta-btn{
	display: inline-flex;
}

.cta-btn a{
	text-decoration: none;
}
.png-btn{
	background-color: var(--png-gold);
	color: var(--png-black);
	border-radius: 24px;
	font-size: 14px;
	padding: 8px 16px;
	transition: all 0.3s ease-in-out;
	cursor: pointer;
}
.png-btn:hover{
	background-color: var(--png-gold-hover);
	color: var(--png-white);
}
.line-title::after{
	position: absolute;
	content: '';
	bottom: -6px;
	left: 0;
	width: 150px;
	height: 2px;
	background: var(--png-gold);
}
/* Mobile Nav Bar */
.mobile-nav{
	position:fixed;
	left:15px;
	right:15px;
	bottom:15px;
	height:72px;
	display:flex;
	align-items:center;
	justify-content:space-around;
	background:rgba(18,18,18,.95);
	backdrop-filter:blur(12px);
	-webkit-backdrop-filter:blur(12px);
	border-radius:22px;
	border:1px solid rgba(198,164,108,.15);
	box-shadow: 0 10px 40px rgba(0,0,0,.35);
	z-index:9999;
}
.mobile-nav .nav-item{
	flex:1;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:6px;
	color:#CFCFCF;
	text-decoration:none;
	font-size:11px;
	position:relative;
}
.mobile-nav .nav-item i{
	font-size:22px;
	line-height:1;
}
.mobile-nav .nav-item.active{
	color:#C6A46C;
}
.mobile-nav .nav-item.active::after{
	content:'';
	width:6px;
	height:6px;
	border-radius:50%;
	background:#C6A46C;
	position:absolute;
	bottom:-10px;
}
.mobile-nav .nav-logo{
	position:absolute;
	left:50%;
	top:-22px;
	transform:translateX(-50%);
	width:64px;
	height:64px;
	border-radius:50%;
	background:#151515;
	border:1px solid rgba(198,164,108,.25);
	display:flex;
	align-items:center;
	justify-content:center;
	text-decoration:none;
	box-shadow: 0 8px 30px rgba(0,0,0,.4);
}
.mobile-nav .nav-logo img{
    width:28px;
    height:auto;
}
@media (min-width: 992px){
    .mobile-nav{
        display:none;
    }
}
/* Homepage CSS */
#hero-section {
	min-height: 800px;
	padding: 100px 24px 24px 24px;
	background-position: center right;
}
#hero-section::before {
	content: '';
	background: linear-gradient(
		to right,
		rgba(0, 0, 0, 0.75) 0%,
		rgba(0, 0, 0, 0.45) 45%,
		rgba(0, 0, 0, 0.1) 75%,
		rgba(0, 0, 0, 0) 100%
	);
	position: absolute;
	inset: 0;
}
#hero-section .box-width{
	display: flex;
	justify-content: flex-end;
	align-items: center;
}
/* About Us */
#about-us {
	background-image: url('/wp-content/uploads/2026/04/resource-boy-zJBxYP-hIS8-unsplash-scaled.jpg');
	overflow: hidden;
}
#about-us .box-width{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.about-props{
	position: absolute;
}
img.flour-prop{
	width: 100%;
	height: 100%;
	inset: 0;
	opacity: 0.35;
	object-fit: cover;
	object-position: bottom center;
}
img.bread-prop {
	width: 25%;
	bottom: 0;
	left: -120px;
}
img.wheat-prop {
	width: 15%;
	bottom: 0;
	left: 0;
}
/* Categories */
#product-categories{
	position: relative;
	padding: 60px 24px;
	background-image: url('/wp-content/uploads/2026/04/flour-texture.png');
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	margin: auto;
	overflow: hidden;
}
#product-categories::before {
	content: '';
	background: linear-gradient(
		rgba(11,11,11,0.5),
		rgba(11,11,11,0.8)
	);
	position: absolute;
	inset: 0;
}
.png-divider{
	place-self: center;
	width: 100%;
	max-width: 500px;
	opacity: 0.8;
}
#product-categories h2{
	text-align: center;
}
.wc-parent-cat-slide{
	overflow: hidden;
	border-bottom: 1px solid var(--png-gold);
}
a.wc-parent-cat-card,.wc-parent-cat-image {
	position: relative;
}
.wc-parent-cat-image img {
	width: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}
.wc-parent-cat-slide:hover img {
	transform: scale(1.05);
}
.wc-parent-cat-image::after{
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgba(0,0,0,0.8),
		rgba(0,0,0,0.2),
		transparent
	);
}
.wc-parent-cat-content {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 10px;
	text-align: center;
	z-index: 2;
}
.wc-parent-cat-content h3{
	font-size: 20px;
	color: var(--png-white);
}
#product-categories .cta-btn{
	width: 100%;
	justify-content: center;
	align-items: center;
	margin-top: 40px;
}
/* CTA */
#cta-section {
	min-height: 480px;
	background-image: url('/wp-content/uploads/2026/04/freepik_horizontal-scene-cappucci_2751845111.jpeg');
	overflow: hidden;
}
#cta-section::before{
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(
		circle,
		rgba(11,11,11,0.4) 0%,
		rgba(11,11,11,0.8) 100%
	);
}
/* About Page */
#about-hero{
	min-height: 650px;
	padding: 100px 24px 24px 24px;
	background-position: center right;
	background-size: cover;
}
#about-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(rgba(11, 11, 11, 0.55),rgba(11, 11, 11, 0.35));
	mix-blend-mode: overlay;
}
#about-hero .box-50{
	justify-self: right;
}
#our-story{
	flex-direction: column;
	gap: 60px;
}
#our-story .box-width.os-box {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 120px;
}
.os-img img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	border-radius: 8px;
	box-shadow: 0px 0px 10px 4px rgba(0,0,0,0.15);
	-webkit-box-shadow: 0px 0px 10px 4px rgba(0,0,0,0.15);
	-moz-box-shadow: 0px 0px 10px 4px rgba(0,0,0,0.15);
}
.os-content .sub-title{
	text-transform: uppercase;
	color: var(--png-gold);
}
hr.os-divider {
	box-shadow: 0px 1px 10px 5px rgba(0, 0, 0, 0.15);
	-webkit-box-shadow: 0px 1px 10px 5px rgba(0, 0, 0, 0.05);
	-moz-box-shadow: 0px 1px 10px 5px rgba(0,0,0,0.15);
	width: 100%;
	border: unset;
}
.ov-box{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	flex-wrap: wrap;
}
.ov-box h2{
	width: 100%;
	text-transform: uppercase;
	font-size: 28px;
	text-align: center;
}
.ov-box .value-item {
	display: flex;
	width: 25%;
	padding: 24px;
	text-align: center;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	gap: 18px;
}
.ov-box .value-item .value-icon img {
	height: 80px;
	width: 100%;
}
.ov-box .value-item .value-title{
	font-weight: bold;
	font-size: 20px;
}
.value-item:not(:last-child) {
	border-right: 2px solid #66666629;
}
#our-team{
	min-height: 600px;
	padding: 100px 24px;
	background-position: center right;
	background-size: cover;
}
#our-team::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to right,
		rgba(11, 11, 11, 0.85) 0%,
		rgba(11, 11, 11, 0.65) 40%,
		rgba(11, 11, 11, 0.35) 70%,
		rgba(11, 11, 11, 0.1) 100%
	);
}
#our-team h6{
	color: var(--png-gold);
}
/* Product Page */
#our-products{
	min-height: 450px;
	padding: 100px 24px 24px 24px;
	background-position: center right;
	background-size: cover;
}
.cpt-filters {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	overflow-x: scroll;
	margin-bottom: 60px;
}
.cpt-filters::-webkit-scrollbar {
	display: none;
}
.cpt-filters {
	-ms-overflow-style: none;  /* IE and Edge */
	scrollbar-width: none;  /* Firefox */
}
button.filter-btn {
	background-color: rgba(0,0,0,0.01);
	color: var(--png-gold);
	border: 1px solid var(--png-gold);
}
button.filter-btn.active {
	background-color: var(--png-gold);
/* 	color: var(--png-white); */
	color: #000;
}
.cpt-items {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: flex-start;
	gap: 40px;
	flex-wrap: wrap;
}
.cpt-item {
	width: calc(25% - 30px);
}
.cpt-item .cpt-image img{
	width: 100%;
	height: 240px;
	object-fit: cover;
	object-position: center;
}
.cpt-content {
	text-align: center;
	text-align: -webkit-center;
}
.cpt-content h3{
	color: var(--png-white);
}
.cpt-content .cpt-divider {
	width: 100%;
	max-width: 250px;
}
/* Services Page */
#services-hero{
	min-height: 650px;
	padding: 100px 24px 24px 24px;
	background-position: center right;
	background-size: cover;
}
#services-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom,
		rgba(11, 11, 11, 0.7) 0%,
		rgba(11, 11, 11, 0.55) 40%,
		rgba(11, 11, 11, 0.75) 100%
	);
}
.our-services-title{
	position: relative;
	width: 100%;
	text-align: center;
	padding-bottom: 16px;
	margin-bottom: 40px;
}
.our-services-title::after{
	position: absolute;
	content: '';
	width: 60px;
	height: 2px;
	left: 50%;
	bottom: 0;
	background-color: var(--png-gold);
	transform: translateX(-50%);
}
.services-repeater{
	display: flex;
	flex-direction: row;
	align-items: stretch;
	justify-content: center;
	flex-wrap: wrap;
	gap: 20px;
}
.service-item {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: calc(33.33% - 14px);
	border-radius: 8px;
	overflow: hidden;
	background-color: #fffcf7;
	box-shadow: 0px 0px 16px 5px rgba(0,0,0,0.15);
	-webkit-box-shadow: 0px 0px 16px 5px rgba(0,0,0,0.15);
	-moz-box-shadow: 0px 0px 16px 5px rgba(0,0,0,0.15);

}
.service-content {
	padding: 40px;
	text-align: center;
	text-align: -webkit-center;
}
.services-repeater .service-item .service-icon img {
	height: 80px;
	width: auto;
}
.services-repeater .service-item .service-icon img {
	height: 70px;
	width: auto;
	padding: 18px;
	border-radius: 50%;
	overflow: visible;
	border: 1px solid var(--png-gold);
	background: #fff;
}
.services-repeater .service-item .service-title{
	font-weight: bold;
	font-size: 20px;
	line-height: 1.2em;
	margin: 24px 0;
}
.services-repeater .service-item .service-text{
	font-size: 14px;
	margin-bottom: unset;
}
.services-repeater .service-item .service-image img{
	width: 100%;
	height: 260px;
	object-fit: cover;
	object-position: center;
}
/* Stores CSS */
#stores-section{
	position: relative;
	padding: 100px 24px;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	margin: auto;
	overflow: hidden;
}
#stores-section::before {
	content: '';
	background-color: black;
	position: absolute;
	inset: 0;
	opacity: 0.4;
}
#stores-section .intro{
	color: var(--png-white);
	max-width: 950px;
	width: 100%;
}
.stores-list {
	background-image: url('/wp-content/uploads/2026/04/resource-boy-zJBxYP-hIS8-unsplash-scaled.jpg');
	background-position: center left;
	background-size: cover;
}
.store-item {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}
.store-item:nth-child(even) {
	flex-direction: row-reverse;
}
.store-img, .store-info{
	width: 100%;
}
.store-img img {
	width: 100%;
	height: 400px;
	object-fit: cover;
	object-position: center;
}
.store-box{
	padding: 40px;
}
.store-details{
	margin-bottom: 12px;
}
.store-details a{
	text-decoration: unset;
}
/* Contact CSS */
#contact-section {
	flex-direction: column;
	min-height: 800px;
	padding: 100px 24px 60px 24px;
	background-position: top right;
	background-size: cover;
}
.intro {
	text-align: center;
	width: 100%;
	max-width: 1440px;
	padding: 40px 0;
	margin: auto;
}
.contact-box {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: flex-start;
	gap: 24px;
	background: rgba(255, 255, 255, 0.15); /* ημιδιάφανο */
	backdrop-filter: blur(5px); /* glass effect */
	-webkit-backdrop-filter: blur(5px);
	padding: 50px;
	border-radius: 10px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
	border: 1px solid rgba(0, 0, 0, 0.05);
	border-radius: 8px;
	margin: 0 auto;
}
.contact-form-box, .faq-box{
	width: 100%;
}
.faq-item {
	border-bottom: 1px solid #ddd;
}
.faq-title {
	padding: 15px;
	cursor: pointer;
	font-weight: bold;
	position: relative;
	transition: background 0.3s ease;
}
.faq-item.active, .faq-title:hover {
	background: #f5f5f5;
}

/* + icon */
.faq-title::after {
	content: "+";
	position: absolute;
	right: 15px;
	transition: transform 0.3s ease;
}

/* όταν είναι ανοιχτό */
.faq-item.active .faq-title::after {
	transform: rotate(45deg);
}

.faq-content {
	height: 0;
	overflow: hidden;
	padding: 0 15px;
	transition: all 0.3s ease;
}

.faq-item.active .faq-content {
	height: auto;
	padding: 15px;
}
/* =========================
TABLET
========================= */
@media (max-width: 1024px){
	.box-30,
	.box-40,
	.box-45,
	.box-50,
	.box-55{
		width: 100%;
	}
	#hero-section,
	#about-hero,
	#our-products,
	#services-hero,
	#stores-section,
	#contact-section{
		min-height: 650px;
		padding: 100px 24px 60px 24px;
		background-position: center right;
	}

	#hero-section .box-width{
		justify-content: center;
	}

	#about-us .box-width{
		flex-direction: column-reverse;
		gap: 32px;
		text-align: center;
	}
	#about-us .about-img{
		justify-self: center;
		height: 370px;
	}
	#about-hero .box-50,
	#services-hero .box-30{
		text-align: center;
	}
	#our-story .box-width.os-box{
		flex-direction: column-reverse;
		gap: 40px;
	}
	.os-img img{
		height: auto;
	}
	#our-team{
		min-height: 500px
	}
	.service-content {
		padding: 24px;
	}
	.service-item {
		width: calc(50% - 10px);
	}
	.services-repeater .service-item .service-image img{
		height: 240px;
	}
	.contact-box{
		flex-direction: column;
	}
	.store-box{
		padding: 24px;
	}
	.cpt-items .cpt-item{
		width: calc(50% - 20px);
	}
}

/* =========================
MOBILE
========================= */
@media (max-width: 768px){
	#hero-section,
	#about-hero,
	#our-products,
	#services-hero,
	#stores-section,
	#contact-section{
		min-height: auto;
		padding: 120px 24px 60px 24px;
		align-items: flex-end;
		background-position: center;
	}

	#hero-section .box-width{
		justify-content: center;
	}

	#hero-section .box-40,
	#about-hero .box-50,
	#services-hero .box-30{
		text-align: center;
		padding: 24px 24px;
	}

	#about-us,
	#product-categories,
	#cta-section{
		padding: 60px 24px;
	}

	#about-us .box-width{
		flex-direction: column-reverse;
		gap: 28px;
	}

	img.bread-prop {
		width: 55%;
		bottom: 0;
		left: unset;
		right: -100px;
	}
	img.wheat-prop {
		width: 45%;
		bottom: 0;
		left: 0;
	}
	#cta-section{
		min-height: 320px;
	}
	.contact-box{
		padding: 40px 24px;
	}
	.ov-box .value-item {
		width: 50%;
		border: unset;
	}
	#our-team{
		min-height: 400px
	}
	.services-repeater{
		flex-direction: column;
	}
	.service-content {
		padding: 24px 16px;
	}
	.service-item {
		width: 100%;
	}
	.store-img img{
		height: 300px;
	}
	.store-item{
		flex-direction: column;
	}
	.store-item:nth-child(even) {
		flex-direction: column;
	}
	.cpt-items .cpt-item{
		width: 100%;
	}
}

/* =========================
SMALL MOBILE
========================= */
@media (max-width: 480px){

	#hero-section,
	#about-hero,
	#stores-section,
	#contact-section{
		padding: 100px 24px 40px 24px;
	}

	#hero-section .box-40{
		padding: 20px 24px;
	}

	#about-us{
		padding: 48px 24px;
	}
	#about-us .box-width{
		gap: 24px;
	}
	.ov-box .value-item {
		width: 100%;
		padding: 24px 0;
	}
	.value-item:not(:last-child) {
		border-right: unset;
		border-bottom: 2px solid #66666629;
	}
}