/* ================================
ERKADO MODERN TEMPLATE
================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;700&family=Inter:wght@300;400;600&display=swap');

*{
box-sizing:border-box;
margin:0;
padding:0;
}

body{
font-family:'Inter',sans-serif;
background:#ffffff;
color:#1c4c60;
line-height:1.6;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 0.6em 0;
    font-weight: 700;
    line-height: 1.2;
    color:#3e493f;
}

/* ================================
CONTAINER
================================ */

.container{
padding: 0px 20px 5px 20px;
}

.three-columns-grid{
gap:30px;
}

.three-col{
background:#fff;
border-radius:6px;
padding:25px;
box-shadow:0 10px 25px rgba(0,0,0,.08);
}

/* ================================
HEADER
================================ */

body.template-greengrafit header{

    background:#102613;
	background: #1a3f1f;
    z-index:1000;
    /*border-bottom:1px solid #39414b;*/

    /*box-shadow:0 6px 18px rgba(0,0,0,.18);*/

}

header{

    display:flex;

    align-items:center;
    justify-content:space-between;

    gap:20px;

}




.topheader-logo img{
height:60px;
}

body.template-greengrafit .topheader-logo a{

    color:#09ad12;
	color:#69af6d;
    font-weight:700;
    font-size:1.3rem;
    letter-spacing:.5px;
	text-transform:uppercase;
	
	/*legjobb*/
	font-family: "Outfit", sans-serif;
	
	/*2-ik legjobb*/
	font-family: "Sora", sans-serif;
	
	/*ez is elég vékony nem tul jó*/
	font-family: "Plus Jakarta Sans", sans-serif;
	
	font-weight:800;
	letter-spacing:-0.02em;
}

.logo-highlight{
    color:#cae97f;
}

/* MENU */

nav.top-menu{

    justify-self:center;

    display:flex;

    align-items:center;

}

nav.top-menu ul{
gap:35px;
}

nav.top-menu ul{

    display:flex;

    justify-content:center;

    align-items:center;

}

body.template-greengrafit nav.top-menu a{
font-weight:500;
letter-spacing:.5px;
font-size:16px;
color:#92aa67;
}

body.template-greengrafit nav.top-menu li a:hover{
color:#cae97f;
}


/* ==============================
TOPHEADER RIGHT
============================== */

.topheader-right{

    display:flex;

    justify-content:flex-end;

    align-items:center;

}

.topheader{
    flex:0 0 auto;
}


nav.top-menu{
    flex:1;
    justify-content:center;
}


.topheader-right{
    flex:0 0 auto;
}

/* ==============================
SOCIAL
============================== */

.topheader-social{

    display:flex;

    align-items:center;

    gap:18px;

}

.topheader-social a{

    width:28px;

    height:28px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    text-decoration:none;

    transition:.30s;

}

body.template-greengrafit .topheader-social a{

    background:#52731f;

    color:#cae97f;

}

body.template-greengrafit .topheader-social a:hover{

    background:#cae97f;

    color:#1a3f1f;

    transform:translateY(-3px);

}

@media (max-width:768px){

    .topheader-right{
        display:none;
    }

}

/* ================================
  SEARCH
================================ */

.search-form button {
    border: none;
    background: #1a3f1f;
    color: white;
    padding: 0 25px;
    cursor: pointer;
    border-radius: 0 50px 50px 0; /* csak a jobb oldala kerekített */
    transition: background 0.25s ease;
}

.search-form button:hover {
    background: #cae97f;
}

/* ================================
CATEGORY GRID
================================ */

.category-grid{
    display:grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap:40px;
    margin-top:40px;
}

/* ================================
CATEGORY CARD – PREMIUM LOOK
================================ */

body.template-greengrafit .category-card{

    position:relative;

    height:260px;

    overflow:hidden;

    border:1px solid #dfe5e2;

    background:#fff;

    border-radius:10px;

    transition:.35s;

}

body.template-greengrafit .category-card{

    padding:0 !important;

    background:none !important;

}

body.template-greengrafit .category-card:hover{

    transform:translateY(-6px);

    border-color:#57a66a;

    box-shadow:0 20px 45px rgba(0,0,0,.18);

}

/* ================================
KÉP – NEM CROPOLUNK!
================================ */

.category-card .cat-image{

    width:100%;

    height:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#f7f8f8;

}

/* JPG / PNG */
.category-card .cat-image img{

    max-width:100%;

    max-height:100%;

    object-fit:contain;

    transition:.35s;

}

body.template-greengrafit .category-card:hover img{

    transform:scale(1.04);

}

/* SVG */
.category-card .cat-image svg{
    width:90px;
    height:90px;
}


/* ================================
CATEGORY NAME – DESIGN
================================ */



body.template-greengrafit .category-card{
    background:none !important;
    padding:0 !important;
    border-radius:0 !important;
}

body.template-greengrafit .category-card .cat-name{
	/* kék háttér*/
    /*background: rgba(28, 76, 96, 0.55) !important; */
	
	/* 🔴 PIROS, DE ÁTLÁTSZÓ */	
    /*background: rgba(176, 28, 46, 0.65) !important; */
	
	background: rgba(63, 125, 78, 0.65) !important;
	
    border: 1px solid rgba(255,255,255,0.25);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    color: #fff;
    padding: 10px 16px;
    border-radius: 2px;

    text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}

body.template-greengrafit .category-card .cat-overlay{

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    height:42%;

    display:flex;

    justify-content:flex-end;

    align-items:center;

    flex-direction:column;

    padding:22px;

    background:linear-gradient(

        to top,

        rgba(27,31,38,.92),

        rgba(27,31,38,.45),

        transparent

    );

}



/* HOVER */

/* 🔥 HOVER – PIROS HÁTTÉR + FEHÉR SZÖVEG */
.category-card:hover .cat-name{

    background:#57a66a;

    transform:translateY(-2px);

    box-shadow:0 8px 22px rgba(0,0,0,.25);

}


/* ================================
1 darab category-card esetén a jobb oldali blokk
================================ */

.category-single-layout{
    display:flex;
    gap:30px;
    align-items:stretch;
}

.category-single-layout .category-grid{
    flex:1;
}

.shop-usp{
    flex:1;
    display:flex;
    flex-direction:column;    
	gap: 10px;
	margin-top: 30px;
}

.shop-contact-card{
    display:flex;
    align-items:center;

    background:#fff;
    border:1px solid #ececec;
    border-radius:18px;

    padding:12px 24px;

    box-shadow:0 8px 24px rgba(0,0,0,.08);

    transition:.25s;
}

.shop-contact-card:hover{
    transform:translateY(-2px);
    box-shadow:0 12px 30px rgba(0,0,0,.12);
}

.shop-contact-icon{
    width:58px;
    height:58px;

    border-radius:50%;
    background:#f5f5f5;

    display:flex;
    align-items:center;
    justify-content:center;

    flex-shrink:0;

    margin-right:18px;
}

.shop-contact-title{
    font-size:15px;
    color:#8d95a3;
    margin-bottom:6px;
}

.shop-contact-value{
    font-size:15px;
    font-weight:700;
    color:#3e493f;
    text-decoration:none;
    line-height:1.2;
}

.shop-contact-value:hover{
    color:#d3bd95;
}

@media (max-width:900px){

    .category-single-layout{
        display:block;
    }

    .shop-usp{
        margin-top:25px;
        gap:20px;
    }

}


/* ==========================================================
MOBILE menü
========================================================== */
.mobile-category-menu {
    background: #1a3f1f;
    color: #fff;
    padding: 10px 0;
}

.module-scope-left .mobile-category-menu{
    background:transparent;
}

body.template-greengrafit .mobile-category-menu h4 {
	color: #cae97f;
}


/* ================================
PRODUCT GRID – KOMPAKT
================================ */

.product-grid{
display:grid;
grid-template-columns:repeat(auto-fill, minmax(220px,1fr));
gap:25px;
margin-top:25px;
justify-items:center; /* 🔥 középre rakja a cardokat */
}

/* CARD */

.product-card{

    background:#ffffff;

    border:1px solid #dfe5e2;

    border-radius:10px;

    overflow:hidden;

    display:flex;

    flex-direction:column;

    max-width:260px;

    width:100%;

    transition:.35s;

    box-shadow:0 8px 25px rgba(0,0,0,.06);

}

.product-card:hover{

    transform:translateY(-6px);

    border-color:#57a66a;

    box-shadow:0 18px 45px rgba(0,0,0,.16);

}

/* KÉP – KITÖLTI A TERET */

.product-card img{

    width:100%;

    height:210px;

    object-fit:contain;

    padding:15px;

    background:#f7f8f8;

    transition:.35s;

}

.product-card:hover img{

    transform:scale(1.04);

}

/* TITLE */

.product-card h2{

    text-align:center;

    font-size:17px;

    color:#23272f;

    font-weight:600;

    padding:18px 12px 10px;

    margin:0 auto;

    line-height:1.4;

}

/* PRICE */

.product-card .price{

    color:#3f7d4e;

    font-size:24px;

    font-weight:700;

    text-align:center;

}

/* BUTTON */

.product-card .product-details-btn{
margin:6px 10px 10px;
padding:8px;
font-size:13px;

background:#3e8d49;
color:#fff;
border-radius:2px;
text-align:center;
}

.product-card .product-details-btn:hover{
background:#cae97f;
color:#3e8d49;
}

/* ================================
PRODUCT PAGE
================================ */

.product-title{
font-family:'Playfair Display',serif;
font-size:32px;
color:#1c4c60;
}

.product-price{
font-size:28px;
color:#b01c2e;
font-weight:700;
}


/* ================================
 MONEY BACK
================================ */

.money-back {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #1e8299;
    border: 1px solid #4bb6c7;
    padding: 12px;
    border-radius: 6px;
    font-size: 0.9rem;
	color: #fff;
}

.money-back .icon {
    font-size: 1.4rem;
    color:  #fff;
}

/* ================================
SIDEBAR
================================ */

.content-left,
.content-right{
padding:0px;
border-radius:6px;
box-shadow:0 4px 20px rgba(0,0,0,.05);
background:#fff;
}

.category-title{
color:#3e493f;
}

.module-scope-left .mobile-cat-tree .cat-row .cat-link {
	color: #716969;
}


/* ================================
CONTENT
================================ */

.content-center{
background:#ffffff;
padding:20px 15px;
}

.content-center h3{
color:#1c4c60;
}

/* ================================
CART
================================ */

#cart-link{
background:#b01c2e;
color:#fff;
padding:10px 18px;
border-radius:6px;
font-weight:600;
text-decoration:none;
}

#cart-link:hover{
background:#8e1625;
}

/* ================================
CONTACT CARD
================================ */


body.template-greengrafit .contact-card {
	background: #f9fffa;
	border: 1px solid #e4f5e7;
}

body.template-greengrafit  .contact-map-card {
	border: 1px solid #e4f5e7;
}

body.template-greengrafit .contact-map-card .map-title { 
	background: #f9fffa;
	color: #1a3f1f;
}

body.template-greengrafit .contact-list a {
	color: #1a3f1f;
}

body.template-greengrafit .contact-block h3 {
	color: #1a3f1f;
}

body.template-greengrafit .contact-list i {
	color: #1a3f1f;
}

body.template-greengrafit .contact-map-card .map-title i {
	color: #1a3f1f;
}

body.template-greengrafit .contact-card h2 {
	color: #1a3f1f;
}

body.template-greengrafit .contact-divider {
	border-top: 1px solid #e4f5e7;
}

/* ================================
MOBILE MENU
================================ */

.menu-items{
display:none;
position:absolute;
top:70px;
left:0;
width:100%;
background:#1a3f1f;
box-shadow:0 10px 30px rgba(0,0,0,.15);
padding:20px;
}

.menu-items.active{
display:block;
}

/* ================================
FOOTER
================================ */

div#footer{
background:linear-gradient(135deg,#1c4c60,#163c4d);
background: #1a3f1f;
}

body.template-greengrafit div#footer .footer{
background:transparent;
}

body.template-greengrafit div#footer .footer-content h4{
color:#ffffff;
}

body.template-greengrafit div#footer .footer-content li a{
color:#d0e4ea;
}

body.template-greengrafit div#footer .footer-content li a:hover{
color:#ffffff;
}


/* ==========================================================
FOOTER 2
========================================================== */

body.template-greengrafit #footer {
    background:#1a3f1f;
}

div#footer .footer {
    background:#1a3f1f;
}

div#footer .footer li {
    padding: 5px 0;
}


body.template-greengrafit #footer .row {
    max-width:1400px;
    margin:auto;
    padding:1px 30px;
}

.footer{

    background:#1a3f1f;

    color:#cae97f;

    padding:0px 0 30px;

    margin-top:60px;

}

.footer-container{

    width:min(1400px,95%);

    margin:auto;

}


/* ==========================================================
FOOTER 2 TOP
========================================================== */

.footer-top{

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

    margin-bottom:45px;

}

.footer-logo{

    width:95px;

    height:auto;

    margin-bottom:18px;

}

.footer-slogan{

    color:#cae97f;

    font-size:17px;

    line-height:1.6;

    max-width:700px;

}


/* ==========================================================
FOOTER 2 DIVIDER
========================================================== */

.footer-divider{

    width:100%;

    height:1px;

    background:#52731f;

    margin:10px 0 55px;

}


/* ==========================================================
FOOTER 2 GRID
========================================================== */

.footer-grid{

    display:grid;

    grid-template-columns:2fr 1fr 1fr 1fr;

    gap:70px;

    align-items:flex-start;

}


/* ==========================================================
FOOTER 2 COLUMN
========================================================== */

.footer-column{

    display:flex;

    flex-direction:column;

}

.footer-column h3{

    color:#ffffff;

    font-size:22px;

    margin-bottom:22px;

    font-weight:700;

}

.footer-column h4{

    color:#ffffff;

    font-size:24px;

    margin-bottom:25px;

    font-weight:600;

}


/* ==========================================================
FOOTER 2 LISTA
========================================================== */

.footer-column ul{

    list-style:none;

    margin:0;

    padding:20px 0;

}

.footer-column li{

    margin-bottom:14px;

}

.footer-column a{

    color:#cae97f;

    text-decoration:none;

    transition:.25s;

}

.footer-column a:hover{

    color:#ffffff;

    padding-left:6px;

}


/* ==========================================================
FOOTER 2 KAPCSOLAT
========================================================== */

.footer-phone{

    font-size:34px;

    font-weight:700;

    color:#cae97f;

    margin-bottom:18px;

}

.footer-mail,
.footer-address,
.footer-open,
.footer-contact-person{

    color:#d8e8b5;

    margin-bottom:12px;

    line-height:1.7;

}

/* ==========================================================
FOOTER 2 BOTTOM
========================================================== */

.footer-bottom{

    margin-top:60px;

    padding-top:28px;

    border-top:1px solid #52731f;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:30px;

    flex-wrap:wrap;

}

.footer-copy{

    color:#b8d67b;

    font-size:15px;

    line-height:1.7;

}

.footer-copy a{

    color:#cae97f;

    text-decoration:none;

}

.footer-copy a:hover{

    color:#ffffff;

}


/* ==========================================================
FOOTER 2 SOCIAL ICONS
========================================================== */

.footer-social{

    display:flex;

    align-items:center;

    gap:18px;

}

.footer-social a{

    width:46px;

    height:46px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    color:#ffffff;

    font-size:26px;

    text-decoration:none;

    background:#52731f;

    border:1px solid #52731f;

    transition:.30s;

}

.footer-social a:hover{

    transform:translateY(-4px);

    background:#cae97f;

    color:#1a3f1f;

    border-color:#cae97f;

    box-shadow:0 10px 25px rgba(202,233,127,.35);

}


/* ==========================================================
FOOTER 2 ANIMÁCIÓK
========================================================== */

.footer-column a,
.footer-social a,
.footer-phone{

    transition:all .28s ease;

}

.footer-phone:hover{

    color:#ffffff;

}


/* ==========================================================
FOOTER 2 RESPONSIVE
========================================================== */

@media (max-width:1100px){

.footer-grid{

    grid-template-columns:1fr 1fr;

    gap:45px;

}

.footer-column:first-child{

    grid-column:1 / -1;

}

}


@media (max-width:768px){

.footer{

    padding:1px 0 25px;

}

.footer-top{

    margin-bottom:35px;

}

.footer-logo{

    width:80px;

}

.footer-slogan{

    font-size:15px;

}

.footer-grid{

    grid-template-columns:1fr;

    gap:35px;

}

.footer-column{

    text-align:center;

    align-items:center;

}

.footer-column h3{

    font-size:34px;

}

.footer-column h4{

    font-size:22px;

}

.footer-column ul{

    width:100%;

}

.footer-bottom{

    flex-direction:column;

    text-align:center;

}

.footer-social{

    justify-content:center;

}

}


@media (max-width:480px){

.footer{

    padding:5px 0 20px;

}

.footer-column h3{

    font-size:30px;

}

.footer-column h4{

    font-size:20px;

}

.footer-phone{

    font-size:28px;

}

.footer-copy{

    font-size:14px;

}

.footer-social a{

    width:42px;

    height:42px;

    font-size:22px;

}

}

/* ================================
MOBILE
================================ */

@media(max-width:900px){

nav.top-menu{
display:none;
}

.hamburger{
display:block;
}

}

/* ================================
CATEGORY CARD (FINAL POLISH)
================================ */

.category-card .cat-icon{
/*background:#f4f8fa;*/
}

.category-card .cat-icon svg{
fill:#1c4c60;
}

.category-card .cat-icon img{
    width:40px;
    height:40px;
    object-fit:contain;
    display:block;
}

.category-card .cat-icon{
    background:#f4f8fa;
    width:60px;
    height:60px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.category-card:hover .cat-icon{
background:#e6f1f5;
}

.category-card:hover .cat-name{
color:#fff;
}


.category-card .cat-icon svg,
.category-card .cat-icon svg *{
  fill:#a82100 !important;
}

.usp-header h3 {
	color: #3e493f;
}

.usp-title {
	color: #3e493f;
}


/* ================================
NUCLEAR CATEGORY FIX
================================ */

body.template-greengrafit .category-card,
body.template-greengrafit .category-card * {
    background: transparent !important;
    box-shadow: none !important;
}

body.template-greengrafit .category-card{
    border: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

/* link se adjon semmit */
body.template-greengrafit .category-card a{
    background: transparent !important;
}

/* kép container */
body.template-greengrafit .category-card .cat-image{
    background: transparent !important;
}

/* ha img fehér hátteres */
body.template-greengrafit .category-card img{
    background: transparent !important;
}