/* ================================
BUSINESS 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;
}

/* ================================
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);
}

/* ======================================
TOP INFO
====================================== */

body.template-business .topinfo-bar{

    background:#1e293b;

    color:#b3bdcd;

}

body.template-business .topinfo-item i {

    color:#ffffff;

}

body.template-business .topinfo-item a {

    color:#f8fafc;

}

body.template-business .topinfo-item a:hover{

    color:#d5dfe9;

}


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

body.template-business header {
   background:#ffffff;
z-index:1000;
border-bottom:1px solid #eee;

}

header{

    display:flex;

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

    gap:20px;

}


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


body.template-business .topheader-logo a{

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

.logo-highlight{
    color:#9d0e0e;
}





/* 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-business nav.top-menu a{
font-weight:500;
letter-spacing:.5px;
font-size:16px;
color:#1c4c60;
}

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


/* ==============================
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-business .topheader-social a{

    background:#617391;

    color:#dde6f4;

}

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

    background:#8894a7;

    color:#fff;

    transform:translateY(-3px);

}

@media (max-width:768px){

    .topheader-right{
        display:none;
    }

}

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

.search-form button {
    border: none;
    background: #a70429;
    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: #bd1b1b;
}

/* ================================
  PRODUCT FILTER
================================ */

.product-filter-module .category-filter-submit {
    background: #bb1e03;
}

.category-filter-reset {
    margin: 10px 5px 0 0;
    padding: 8px 12px;
    background: #dddada;
    color: #616161;
}

.category-filter-reset:hover {
    margin: 10px 5px 0 0;
    padding: 8px 12px;
    background: #fff;
    color: #000000;
}
   
   .product-filter-module .product-filter-main-toggle {
	   background: #f1f1f1 !important;
   }

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

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

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

body.template-business .category-card{
    position:relative;
    height:260px; /* 🔥 nagyobb blokk */
    overflow:hidden;
    border:1px solid #e5e5e5; /* finom keret */
    background:#fff;
    transition:.35s;
}

body.template-business .category-card:hover{
    transform:translateY(-4px);
    box-shadow:0 15px 40px rgba(0,0,0,.12);
}

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

.category-card .cat-image{
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    /*background:#fff;*/
	background:none;
}

/* JPG / PNG */
.category-card .cat-image img{
    max-width:100%;
    max-height:100%;
    object-fit:contain; /* 🔥 NEM vág */
}

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


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



body.template-business .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(138, 17, 31, 0.65) !important; /* 🔴 PIROS, DE ÁTLÁTSZÓ */
	
    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-business .category-card{
    background:none !important;
    padding:0 !important;
    border-radius:0 !important;
}

body.template-business .category-card .cat-overlay{
    position:absolute;
    left:0;
    right:0;
    bottom:0;

    height:45%;

    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    align-items:center; /* 🔥 EZ A LÉNYEG */

    padding:22px;

    background:linear-gradient(
        to top,
        rgba(0,0,0,0.75),
        rgba(0,0,0,0.35),
        transparent
    );

    pointer-events:none;
}

body.template-business .category-card .cat-name{
    transition: all 0.25s ease;
}

/* HOVER */

/* 🔥 HOVER – PIROS HÁTTÉR + FEHÉR SZÖVEG */
body.template-business .category-card:hover .cat-name{
    background: rgba(28, 76, 96, 0.65) !important; /* 🔵 EZ VOLT AZ ALAP */
    color: #fff !important;
    border-color: rgba(255,255,255,0.25);
}


/* =====================================================
   FULLWIDTH PRODUCT LIST
   ===================================================== */

/* ---------- FULLWIDTH KOSÁR ---------- */

.product-list-cart {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    border-radius: 3px;
	background: #af0e0e;
	color: #fff;
	padding: 5px 15px;
}


.product-list-cart:hover {
	
	background: #1e293b;
	color: #fff;
	
}



/* ================================
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:#222;
    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: #173f50;
    color: #fff;
    padding: 10px 0;
}

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

body.template-business .mobile-category-menu h4 {
	color: #88b5c8;
}


/* ================================
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:#fff;
border-radius:3px;
overflow:hidden;
box-shadow:0 4px 12px rgba(0,0,0,.06);
transition:.25s;
display:flex;
flex-direction:column;
max-width:260px; /* 🔥 ne legyen túl széles */
width:100%;
}

.product-card:hover{
transform:translateY(-3px);
box-shadow:0 10px 25px rgba(0,0,0,.12);
}

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

.product-card img{
width:100%;
height:200px;          /* 🔥 fix magasság */
object-fit:contain;    /* 🔥 teljes kép látszik */
padding:0;             /* 🔥 nincs keret */
background:none;
display:block;
}

/* TITLE */

.product-card h2{
text-align:center;     /* 🔥 középre */
font-size:16px;        /* 🔥 kicsit nagyobb */
color:#1c4c60;         /* 🔥 kékes szín (maradhat ez vagy állítjuk) */
padding:15px 0;  /* 🔥 szimmetrikus padding */
margin:0 auto;
line-height:1.3;
}

/* PRICE */

.product-card .price{
font-size:16px;
font-weight:700;
color:#b01c2e;
padding:0 10px 6px;
margin:0;
}

/* BUTTON */

.product-card .product-details-btn{
margin:6px 10px 10px;
padding:8px;
font-size:13px;
background:#b01c2e;
color:#fff;
border-radius:2px;
text-align:center;
}

.product-card .product-details-btn:hover{
background:#1c4c60;
}

/* ================================
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:#1c4c60;
}

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

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

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

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

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

#cart-link:visited {
	color:#425776;
}

#cart-link:hover{
background:none;
color: #7c99c1;
}

.cart-icon{
fill:#425776;

}

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

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

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

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

body.template-business div#footer{
background: linear-gradient(135deg, #1e293b, #0d1427);
}

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

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

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

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


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

body.template-business #footer {
    background:#4c4679;
}

div#footer .footer {
    background:#4c4679;
}

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

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

.footer{

    background:#4c4679;

    color:#d6dde9;

    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:#d6dde9;

    font-size:17px;

    line-height:1.6;

    max-width:700px;

}


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

.footer-divider{

    width:100%;

    height:1px;

    background:#617391;

    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:#d6dde9;

    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:#eb2424;

    margin-bottom:18px;

}

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

    color:#d6dde9;

    margin-bottom:12px;

    line-height:1.7;

}

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

.footer-bottom{

    margin-top:60px;

    padding-top:28px;

    border-top:1px solid #617391;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:30px;

    flex-wrap:wrap;

}

.footer-copy{

    color:#a3aec1;

    font-size:15px;

    line-height:1.7;

}

.footer-copy a{

    color:#8894a7;

    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:#617391;

    border:1px solid #617391;

    transition:.30s;

}

.footer-social a:hover{

    transform:translateY(-4px);

    background:#8894a7;

    color:#4c4679;

    border-color:#8894a7;

    box-shadow:0 10px 25px rgba(136,148,167,.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:#b01c2e;
}


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

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

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

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

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

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

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