/*
 Theme Name:   Divi Child - Építési Gipszek
 Theme URI:    https://epitesigipszek.hu
 Description:  Custom Divi Child Theme for Építési Gipszek - Hungarian Construction Plaster E-commerce Store. Optimized for WooCommerce, SpeedyCache, and SiteSEO compatibility.
 Author:       Széria
 Author URI:   https://epitesigipszek.hu
 Template:     Divi
 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:  divi-child-epitesigipszek
 Tags:         divi, woocommerce, e-commerce, construction, hungarian
*/

/* ==========================================================================
   TABLE OF CONTENTS
   ==========================================================================
   1. CSS Variables / Custom Properties
   2. Typography Overrides
   3. Header Customizations
   4. Navigation Styles
   5. WooCommerce Overrides
   6. Divi Builder Enhancements
   7. Footer Customizations
   8. Responsive Adjustments
   9. Utility Classes
   10. SpeedyCache Compatible Animations
   ========================================================================== */

/* ==========================================================================
   1. CSS VARIABLES / CUSTOM PROPERTIES
   ========================================================================== */
:root {
    /* Brand Colors - Customize these for your brand */
    --primary-color: #01a850;
    --primary-dark: #017d3c;
    --primary-light: #02bf5c;
    --secondary-color: #f59e0b;
    --secondary-dark: #d97706;
    
    /* Neutral Colors */
    --text-color: #444444;
    --text-light: #6b7280;
    --text-muted: #9ca3af;
    --background-color: #ffffff;
    --background-alt: #f9fafb;
    --border-color: #e5e7eb;
    
    /* WooCommerce Specific */
    --wc-sale-color: #dc2626;
    --wc-success-color: #16a34a;
    --wc-info-color: #0891b2;
    
    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    
    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 0px;
    --radius-lg: 12px;
    --radius-full: 9999px;
    
    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-normal: 300ms ease;
    --transition-slow: 500ms ease;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

/* ==========================================================================
   2. TYPOGRAPHY OVERRIDES
   ========================================================================== */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}
body {
    font-family: inherit;
    color: var(--text-color);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h2 b,
h2 strong {
    font-weight: 400;
}

/* A page-container flexbox containerré alakítása */
#page-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Az oldal legalább akkora legyen, mint a viewport magassága */
}
/* A page-container flexbox containerré alakítása */
#et-boc {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Az oldal legalább akkora legyen, mint a viewport magassága */
}

/* Az et-main-area kitölti a rendelkezésre álló helyet */
#et-main-area {
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* A main-content kitölti a rendelkezésre álló helyet az et-main-area-n belül */
#main-content {
    flex: 1;
}

#footer-bottom-row > .et_pb_row > .et_pb_column:last-child {
    display: flex;
    justify-content: right;
}


/* ==========================================================================
   3. HEADER CUSTOMIZATIONS
   ========================================================================== */
#main-header {
    transition: all var(--transition-normal);
}

.et-fixed-header#main-header {
    box-shadow: var(--shadow-md);
}

/* ==========================================================================
   4. NAVIGATION STYLES
   ========================================================================== */

/* Main Menu Container - 100% width */
#sx_header_menu {
    width: 100%;
}

#sx_header_menu .et_pb_menu_inner_container,
#sx_header_menu .et_pb_menu__wrap,
#sx_header_menu .et_pb_menu__menu,
#sx_header_menu .et-menu-nav {
    width: 100%;
}

/* Main Menu UL - Flexbox Layout */
#sx_header_menu nav > ul.et-menu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Menu Items - Default left alignment */
#sx_header_menu nav > ul.et-menu > li {
    padding-bottom: 16px !important;
    margin-right: 13px !important;
    margin-bottom: -5px !important;
}

#sx_header_menu nav > ul > li:first-child {
    margin-left: 50px !important;
}

/* Last Menu Item - Push to the right */
#sx_header_menu nav > ul.et-menu > li:last-child {
    margin-left: auto !important;
    margin-right: 0 !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 5px !important;
}

/* Last Menu Item Link */
#sx_header_menu nav > ul.et-menu > li:last-child > a {
    margin-right: 40px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Contact Icon using ::after pseudo-element */
#sx_header_menu nav > ul.et-menu > li:last-child > a::after {
    content: '';
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-left: 5px;
    background-image: url('/wp-content/themes/Divi-child/images/contact-ikon.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    vertical-align: middle;
    flex-shrink: 0;
    transition: background-image var(--transition-fast);
}

/* Hover state for the icon */
#sx_header_menu nav > ul.et-menu > li:last-child > a:hover::after {
    background-image: url('/wp-content/themes/Divi-child/images/contact-ikon-hover.png');
}

#sx_header_menu nav > ul > li > ul > li:hover {
    background-color: #FFFFFF !important;
}

/* Link transitions */
#sx_header_menu li a {
    transition: color var(--transition-fast);
}

#sx_header_menu li a:hover {
    background-color: transparent !important;
    color: var(--primary-color) !important;
    opacity: 1 !important;
}

#sx_header_menu nav.et-menu-nav ul > li > ul > li:hover a {
    color: var(--primary-color) !important;
    transition-delay: unset;
}

/* Submenu styling */
#sx_header_menu nav > ul > li ul.sub-menu {
    border-top-width: 0px !important;
    padding: 20px 0px;
    margin-top: -5px;
    z-index: -1 !important;
}

#sx_header_menu nav li ul li {
    padding: 0 10px !important;
    width: 100%;
}
#sx_header_menu nav li ul li a {
    width: auto !important;
}

/* Products menu */
#sx_header_menu nav.et-menu-nav ul.et-menu {
    position: static !important;
}

/* 1. KIKAPCSOLJUK a szülő elem korlátozását */
#sx_header_menu nav.et-menu-nav ul li.menu_products {
    position: static !important;
}
/* 2. AZ ALMENÜ BEÁLLÍTÁSA */
.et-db #et-boc header #sx_header_menu nav.et-menu-nav ul li.menu_products .sub-menu {
    position: absolute;
    /* Teljes képernyő szélesség */
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;

    /* Pozicionálás: a menü alatt maradjon */
    top: 50px !important;

    /* Tartalom elrendezése */
    display: flex !important;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center; /* Balra zárja a törés után is az elemeket */
    align-items: center;
    gap: 20px;

    /* Megjelenés */
    padding: 10px 50px 20px; /* 10% oldalsó padding, hogy a tartalom ne érjen a kijelző széléig */
    background-color: #FFFFFF !important;
    box-shadow: 0 10px 20px rgba(0,0,0,0.15); /* Finomabb árnyék */
    border-bottom: 1px solid var(--primary-color);
    z-index: 9999;

    /* Hogy a padding ne növelje meg a 100%-ot */
    box-sizing: border-box;

    /* ANIMÁCIÓHOZ SZÜKSÉGES BEÁLLÍTÁSOK */
    visibility: hidden;         /* Ne legyen kattintható, amíg rejtett */
    opacity: 0;                 /* Teljesen átlátszó */
    transform: translateY(-40px); /* 20 pixellel feljebbről indul */

    /* Az 1 másodperces átmenet beállítása */
    transition:
            transform .5s ease,
            opacity .5s ease,
            visibility .5s;
}

/* 2. AZ AKTÍV ÁLLAPOT (AMIKOR RÁVISZED AZ EGERET) */
.et-db #et-boc header #sx_header_menu nav.et-menu-nav ul li.menu_products:hover > .sub-menu {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);   /* Beúszik a helyére */
    pointer-events: auto;       /* Itt már kattinthatóak a linkek */
}

/* 3. EGYEDI ELEMEK (opcionális finomhangolás) */
#sx_header_menu nav.et-menu-nav ul li.menu_products .sub-menu li {
    width: auto; /* Hogy a flex gap érvényesüljön */
    list-style: none;
    border: 1px solid var(--primary-color);
    flex: 0 1 auto; /* Nem nyúlnak meg feleslegesen */
    min-width: 200px; /* Egy minimális szélességet ad nekik a rend kedvéért */
    text-align: center;
    transition-delay: unset;
}
.et-db #et-boc header #sx_header_menu nav.et-menu-nav ul li.menu_products .sub-menu li:hover {
    background-color: var(--primary-color) !important;
}
.et-db #et-boc header #sx_header_menu nav.et-menu-nav ul li.menu_products .sub-menu li a {
    color: var(--primary-color) !important;
    font-size: 1rem !important;
    transition-delay: unset;
    white-space: nowrap;
    width: auto !important;
}
.et-db #et-boc header #sx_header_menu nav.et-menu-nav ul li.menu_products .sub-menu li a:hover {
    color: #FFFFFF !important;
}

/* New products menu element */
.et-db #et-boc header #sx_header_menu nav.et-menu-nav ul li.menu_products .sub-menu li.menu_new_products {
    background-color: var(--primary-color) !important;
}
.et-db #et-boc header #sx_header_menu nav.et-menu-nav ul li.menu_products .sub-menu li.menu_new_products:hover {
    background-color: var(--primary-dark) !important;
}
.et-db #et-boc header #sx_header_menu nav.et-menu-nav ul li.menu_products .sub-menu li.menu_new_products a {
    color: white !important;
    font-weight: 400 !important;
}
.et-db #et-boc header #sx_header_menu nav.et-menu-nav ul li.menu_products .sub-menu li.menu_new_products a:hover {
    /*color: var(--primary-dark) !important;*/
    font-weight: 600 !important;
}

/*
 * MOBILE AND DESKTOP HEADER
*/
#desktop_header_row {}

#mobil_header_row {
    z-index: 110;
    pointer-events: none;
}
#mobil_header_row a {
    pointer-events: auto;
}

#mobil_header_row .wpml-ls-legacy-list-horizontal {
    padding: 0 !important;
}
#mobil_header_row .wpml-ls ul {
    padding: 0 !important;
}

@media screen and (max-width: 980px) {
    #main-header #sx_header_menu {
        margin-top: -53px !important;
    }

    #main-header .et_pb_menu__wrap .mobile_menu_bar {
        transform: translateX(-21px) !important;
    }

    #et-boc #main-header #sx_header_menu .mobile_nav .menu_products ul.sub-menu {
        display: none !important;
    }

    #sx_header_menu .et_mobile_menu {
        padding-top: 10px !important;
    }
}


/* Mobile Menu Enhancements */
#sx_header_menu .et_mobile_menu {
    border-top-color: var(--primary-color) !important;
}

#sx_header_menu .et_mobile_menu li a {
    padding: var(--spacing-md) var(--spacing-lg);
    border-bottom: 1px solid var(--border-color);
}

/* Responsive - Stack menu on smaller screens if needed */
@media (max-width: 980px) {
    #sx_header_menu nav > ul.et-menu > li:last-child {
        margin-left: 0;
    }

    #sx_header_menu #sx_header_menu nav > ul.et-menu > li:last-child > a::after {
        width: 20px;
        height: 20px;
    }
}

@media (max-width: 768px) {
    .et-db #et-boc .et-l #sx_header_menu .et_mobile_nav_menu ul#mobile_menu1 li a {
        font-weight: 400;
        font-size: 18px;
        padding: 8px 5%;
    }
}


/* ==========================================================================
   4A. SEARCH BOX STYLES
   ========================================================================== */
#main-header .header-search-form form.et_pb_searchform>div {
    border: 1px solid var(--primary-color);
    flex-flow: row-reverse;
}

.header-search-formX form.et_pb_searchform .et_pb_searchsubmit {
    font-size: 0; /* Elrejti a szöveget */
    background-color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    position: relative;
    width: 40px;
    height: 40px;
}
.header-search-form form.et_pb_searchform input.et_pb_searchsubmit {
    text-indent: -9999px !important;
    overflow: hidden !important;
    width: 40px !important;
    height: 40px !important;
    background-color: white !important;
    background-image: url('images/search-ikon.png') !important;
    background-size: 80% !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    border: none !important;
    cursor: pointer !important;
    padding: 0 !important;
}


/* ==========================================================================
   4B. LANGUAGE SWITCHER STYLES
   ========================================================================== */
.wpml-ls {
    padding-top: 0 !important;
}
.wpml-ls ul li a {
    padding-top: 0 !important;
    padding-bottom: 8px !important;
}
    /* WPML - Függőleges lista és távolság */
.wpml-ls-item {
    display: block !important; /* Egymás alá kerüljenek */
    margin-bottom: 5px;       /* Kis hely a zászlók között */
    text-align: center;       /* Középre igazítás */
}

/* 1. Alapállapot: Fekete-fehér (Grayscale) */
.wpml-ls-flag {
    filter: grayscale(100%);
    opacity: 0.7; /* Opcionális: kicsit halványabb is legyen */
    transition: all 0.3s ease; /* Szép átmenet */
}

/* 2. Hover állapot: Színes */
.wpml-ls-item:hover .wpml-ls-flag {
    filter: grayscale(0%);
    opacity: 1;
}

/* 3. Aktív nyelv: Mindig színes */
.wpml-ls-current-language .wpml-ls-flag {
    filter: grayscale(0%);
    opacity: 1;
    border: 1px solid #ddd; /* Opcionális: keret az aktívnak */
}

/* ==========================================================================
   5. WOOCOMMERCE OVERRIDES
   ========================================================================== */

/* Product Grid */
.woocommerce ul.products li.product {
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.woocommerce ul.products li.product:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

/* Product Title */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    color: var(--text-color);
    transition: color var(--transition-fast);
}

.woocommerce ul.products li.product:hover .woocommerce-loop-product__title {
    color: var(--primary-color);
}

/* Price Styling */
.woocommerce ul.products li.product .price {
    color: var(--primary-color);
    font-weight: 600;
}

.woocommerce ul.products li.product .price del {
    color: var(--text-muted);
}

.woocommerce ul.products li.product .price ins {
    color: var(--wc-sale-color);
    text-decoration: none;
}

/* Sale Badge */
.woocommerce span.onsale {
    background-color: var(--wc-sale-color);
    border-radius: var(--radius-sm);
    padding: var(--spacing-xs) var(--spacing-sm);
    min-height: auto;
    min-width: auto;
    line-height: 1.5;
}

/* Add to Cart Button */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart {
    background-color: var(--primary-color) !important;
    border-radius: var(--radius-md) !important;
    transition: background-color var(--transition-fast), transform var(--transition-fast) !important;
}

.woocommerce ul.products li.product .button:hover {
    background-color: var(--primary-dark) !important;
    transform: scale(1.02);
}

/* Single Product Page */
.woocommerce div.product .product_title {
    color: var(--text-color);
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
    color: var(--primary-color);
}

/* Cart & Checkout Buttons */
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
    background-color: var(--primary-color);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
    background-color: var(--primary-dark);
}

/* WooCommerce Notices */
.woocommerce-message {
    border-top-color: var(--wc-success-color);
}

.woocommerce-message::before {
    color: var(--wc-success-color);
}

.woocommerce-info {
    border-top-color: var(--wc-info-color);
}

.woocommerce-info::before {
    color: var(--wc-info-color);
}

.woocommerce-error {
    border-top-color: var(--wc-sale-color);
}

/* WooSmart Quick View Compatibility */
.woosq-popup {
    border-radius: var(--radius-lg);
}

.woosq-btn {
    background-color: var(--secondary-color) !important;
    transition: background-color var(--transition-fast) !important;
}

.woosq-btn:hover {
    background-color: var(--secondary-dark) !important;
}

/* ==========================================================================
   6. DIVI BUILDER ENHANCEMENTS
   ========================================================================== */

/* ---------------------------------------------
   Page Title
   --------------------------------------------- */
.top-page-title,
.top-page-title h1 {
    color: var(--primary-color);
    font-size: 2.5rem;
    font-weight: 300 !important;
    margin-bottom: var(--spacing-xs);
}

/* Divi Buttons */
.et_pb_button,
.gomb {
    border-radius: var(--radius-md) !important;
    transition: all var(--transition-fast) !important;
    color: #FFFFFF;
    border-radius: 0px;
    padding-right: 2em;
    padding-left: 0.7em;
    background-color: var(--primary-color);
    border: 1px solid #FFFFFF;
    padding: .3em 2em .3em .7em;
}

.et_pb_button:hover,
.gomb:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    color: var(--primary-color);
    background-image: initial;
    background-color: #FFFFFF;
    border: 1px solid var(--primary-color) !important;
    padding: .3em 2em .3em .7em;
    transform: none;
    box-shadow: none;
}

/* Divi Modules - Card Style */
.et_pb_blurb,
.et_pb_team_member {
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.et_pb_blurb:hover,
.et_pb_team_member:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

/* Contact Form */
.et_pb_contact_form .et_pb_contact_field input,
.et_pb_contact_form .et_pb_contact_field textarea {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.et_pb_contact_form .et_pb_contact_field input:focus,
.et_pb_contact_form .et_pb_contact_field textarea:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
    outline: none;
}

/* ==========================================================================
   7. FOOTER CUSTOMIZATIONS
   ========================================================================== */
/*#main-footer {*/
/*    background-color: var(--text-color);*/
/*}*/

footer .et_pb_column .et_pb_code_inner {
    text-align: center;
}

/* ==========================================================================
   8. RESPONSIVE ADJUSTMENTS
   ========================================================================== */
@media (max-width: 980px) {
    /* Tablet Styles */
    .woocommerce ul.products li.product {
        margin-bottom: var(--spacing-lg);
    }
}

@media (max-width: 767px) {
    /* Mobile Styles */
    :root {
        --spacing-lg: 1rem;
        --spacing-xl: 1.5rem;
        --spacing-2xl: 2rem;
    }
    
    .woocommerce ul.products li.product .button {
        padding: var(--spacing-sm) var(--spacing-md) !important;
    }
}

/* ==========================================================================
   9. UTILITY CLASSES
   ========================================================================== */
.text-primary { color: var(--primary-color) !important; }
.text-secondary { color: var(--secondary-color) !important; }
.bg-primary { background-color: var(--primary-color) !important; }
.bg-secondary { background-color: var(--secondary-color) !important; }

.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.shadow-md { box-shadow: var(--shadow-md) !important; }
.shadow-lg { box-shadow: var(--shadow-lg) !important; }

.rounded-sm { border-radius: var(--radius-sm) !important; }
.rounded-md { border-radius: var(--radius-md) !important; }
.rounded-lg { border-radius: var(--radius-lg) !important; }
.rounded-full { border-radius: var(--radius-full) !important; }

/* Hide on mobile/desktop utility */
@media (max-width: 767px) {
    .hide-mobile { display: none !important; }
}

@media (min-width: 768px) {
    .hide-desktop { display: none !important; }
}


/* ==========================================================================
   10a. GYIK PAGE TOGGLE STYLES
   ========================================================================== */
.gyik-harmonika {
    margin-top: -30px;
}
.gyik-harmonika .et_pb_accordion_item {
    border-width: 0 !important;
}
.gyik-harmonika .et_pb_toggle_open .et_pb_toggle_title {
    color: var(--primary-color) !important;
}
.gyik-harmonika .et_pb_toggle_close .et_pb_toggle_title:hover {
    color: var(--primary-color) !important;
}
.gyik-harmonika .et_pb_toggle_close .et_pb_toggle_title::before {
    color: #999999 !important;
}
.gyik-harmonika .et_pb_toggle_close {
    background-color: transparent !important;
}


/* ==========================================================================
   10b. SPEEDYCACHE COMPATIBLE ANIMATIONS
   ========================================================================== */
/* Using CSS-only animations for better cache compatibility */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.animate-fade-in-up {
    animation: fadeInUp 0.6s ease forwards;
}

.animate-fade-in {
    animation: fadeIn 0.4s ease forwards;
}

/* Staggered animation delays for product grids */
.woocommerce ul.products li.product:nth-child(1) { animation-delay: 0.1s; }
.woocommerce ul.products li.product:nth-child(2) { animation-delay: 0.2s; }
.woocommerce ul.products li.product:nth-child(3) { animation-delay: 0.3s; }
.woocommerce ul.products li.product:nth-child(4) { animation-delay: 0.4s; }

/* ==========================================================================
   11. CATEGORY PAGE STYLES
   ========================================================================== */

/* ---------------------------------------------
   Category Page Layout Container
   --------------------------------------------- */
.et_pb_section_0_tb_body .et_pb_row_1_tb_body {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xl);
}

/* ---------------------------------------------
   Category Sidebar (Left Column - 1/3)
   --------------------------------------------- */
.et_pb_column_1_tb_body {
    position: relative;
}

/* Category List Container */
.et_pb_column_1_tb_body .et_pb_code_inner > .woocommerce {
    padding: 0;
}

/* Category List - Convert to vertical text menu */
.et_pb_column_1_tb_body ul.products {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Category Items - Text only style */
.et_pb_column_1_tb_body ul.products li.product-category-X {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    background: transparent;
    border: none;
    box-shadow: none;
}

/* Hide category images */
.et_pb_column_1_tb_body ul.products li.product-category-X img {
    display: none !important;
}

/* Category Links */
.et_pb_column_1_tb_body ul.products li.product-category-X a {
    display: block;
    padding: 10px 0;
    color: var(--text-color);
    text-decoration: none;
    font-size: 14px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: color var(--transition-fast);
    border: none;
}

.et_pb_column_1_tb_body ul.products li.product-category-X a:hover {
    color: var(--primary-color);
}

/* Category Title in sidebar */
.et_pb_column_1_tb_body ul.products li.product-category-X .woocommerce-loop-category__title {
    font-size: 16px !important;
    font-weight: 400 !important;
    color: inherit;
    margin: 0;
    padding: 0;
    text-transform: uppercase;
}

/* Hide product count in sidebar */
.et_pb_column_1_tb_body ul.products li.product-category-X .woocommerce-loop-category__title mark.count {
    display: none;
}

/* Active/Current Category */
.et_pb_column_1_tb_body ul.products li.product-category-X.current-cat a,
.et_pb_column_1_tb_body ul.products li.product-category-X.current-cat .woocommerce-loop-category__title,
.et_pb_column_1_tb_body ul.products li.product-category-X a:hover .woocommerce-loop-category__title {
    color: var(--primary-color);
}

/* ---------------------------------------------
   Mini Catalog
   --------------------------------------------- */
.mini_catalog_area .et_pb_column {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    gap: var(--spacing-lg);
    justify-content: flex-start; /* Ez kényszeríti a balra zárást minden sorban */
    align-content: flex-start;   /* Több sor esetén a sorok közötti felesleges helyet szünteti meg */
}
.mini_catalog_area .mini_catalog {
    flex-grow: 0;
    width: auto;
    max-width: 43%;
    margin-right: 10px;
}

.mini_catalog_area .mini_catalog img {
    border: 1px solid var(--primary-color);
}

    /* ---------------------------------------------
       Product Search Box
       --------------------------------------------- */
.et_pb_search_0_tb_body,
.product-search-box {
    position: relative;
}

.et_pb_search_0_tb_body input[type="search"],
.product-search-box input[type="search"] {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 12px 45px 12px 15px;
    font-size: 14px;
    width: 100%;
    transition: border-color var(--transition-fast);
}

.et_pb_search_0_tb_body input[type="search"]:focus,
.product-search-box input[type="search"]:focus {
    border-color: var(--primary-color);
    outline: none;
}

.et_pb_search_0_tb_body input[type="search"]::placeholder,
.product-search-box input[type="search"]::placeholder {
    color: var(--primary-color);
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 0.5px;
}

/* Search Icon */
.et_pb_search_0_tb_body .et_pb_searchsubmit,
.product-search-box button {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
}

/* ---------------------------------------------
   Product Grid (Right Column - 2/3)
   --------------------------------------------- */
.et_pb_column_2_tb_body {
    position: relative;
}

/* Product Grid Container */
.et_pb_shop_0_tb_body .woocommerce {
    padding: 0;
}

.et_pb_shop_0_tb_body ul.products {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Product Card */
.et_pb_shop_0_tb_body ul.products li.product {
    width: 100% !important;
    margin: 0 !important;
    padding: var(--spacing-lg);
    float: none !important;
    background: var(--background-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: box-shadow var(--transition-normal);
    position: relative;
}

.et_pb_shop_0_tb_body ul.products li.product:hover {
    box-shadow: var(--shadow-md);
    transform: none;
}

/* Product Title - Green, Italic, Top */
.et_pb_shop_0_tb_body ul.products li.product .woocommerce-loop-product__title {
    order: -1;
    color: var(--primary-color);
    font-size: 16px;
    font-weight: 400;
    font-style: italic;
    margin: 0 0 var(--spacing-md) 0;
    padding: 0;
    line-height: 1.4;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Product Image Container */
.et_pb_shop_0_tb_body ul.products li.product .et_shop_image {
    order: 0;
    margin-bottom: var(--spacing-md);
    position: relative;
}

.et_pb_shop_0_tb_body ul.products li.product .et_shop_image img {
    max-width: 180px;
    height: auto;
    object-fit: contain;
}

/* Hide default overlay */
.et_pb_shop_0_tb_body ul.products li.product .et_overlay {
    display: none;
}

/* Product Link */
.et_pb_shop_0_tb_body ul.products li.product > a.woocommerce-LoopProduct-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    width: 100%;
}

/* Product Description (Short Description) */
.et_pb_shop_0_tb_body ul.products li.product .product-description,
.et_pb_shop_0_tb_body ul.products li.product .woocommerce-product-details__short-description {
    order: 1;
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-color);
    margin-bottom: var(--spacing-lg);
    text-align: left;
    padding: 0 var(--spacing-sm);
}

/* Hide Price on Category Page (if needed) */
.et_pb_shop_0_tb_body ul.products li.product .price {
    display: none;
}

/* New Badge */
.et_pb_shop_0_tb_body ul.products li.product .new-badge {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    background: var(--wc-info-color) !important;
    color: #fff !important;
    padding: 5px 10px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    z-index: 10 !important;
    border-radius: 0 0 0 4px !important;
}


/* ---------------------------------------------
   Category Page Responsive
   --------------------------------------------- */
@media (max-width: 1200px) {
    .et_pb_shop_0_tb_body ul.products {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 980px) {
    /* Stack columns on tablet */
    .et_pb_section_0_tb_body .et_pb_row_1_tb_body {
        flex-direction: column;
    }
    
    .et_pb_column_1_tb_body,
    .et_pb_column_2_tb_body {
        width: 100% !important;
    }
    
    /* Horizontal category menu on tablet */
    .et_pb_column_1_tb_body ul.products {
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--spacing-sm);
        padding-bottom: var(--spacing-lg);
        border-bottom: 1px solid var(--border-color);
        margin-bottom: var(--spacing-lg);
    }
    
    .et_pb_column_1_tb_body ul.products li.product-category-X {
        width: auto !important;
    }
    
    .et_pb_column_1_tb_body ul.products li.product-category-X a {
        padding: 8px 12px;
        border: 1px solid var(--border-color);
        border-radius: var(--radius-sm);
    }
    
    .et_pb_column_1_tb_body ul.products li.product-category-X.current-cat a {
        background-color: var(--primary-color);
        color: #fff;
        border-color: var(--primary-color);
    }
}

@media (max-width: 767px) {
    /* Single column on mobile */
    .et_pb_shop_0_tb_body ul.products {
        grid-template-columns: 1fr;
    }
    
    .et_pb_heading_0_tb_body .et_pb_module_heading {
        font-size: 1.8rem;
    }
    
    .et_pb_shop_0_tb_body ul.products li.product {
        padding: var(--spacing-md);
    }
    
    .et_pb_shop_0_tb_body ul.products li.product .et_shop_image img {
        max-width: 150px;
    }
}

/* ==========================================================================
   CUSTOM STYLES - Add your custom CSS below this line
   ========================================================================== */

#blokk-kerdezz {
    /* 3. A két kép betöltése (vesszővel elválasztva) */
    /* Fontos: Az első kép van legfelül (z-index szerűen) */
    background-image:
            url('images/i-kerdojel.png'),
            url('images/i-felkialtojel.png');

    /* 4. Pozícionálás: Az első balra, a második jobbra */
    background-position:
            left center,  /* 1. kép: bal szél, függőlegesen középen */
            right center; /* 2. kép: jobb szél, függőlegesen középen */

    /* 5. Méretezés: A magasság legyen 100%, a szélesség automatikus (arányos) */
    /* Szintaxis: szélesség magasság */
    background-size:
            auto 100%,
            auto 100%; /* Ha tényleg 1000% a cél a másodiknál, írd át: auto 1000% */

    /* 6. Ismétlődés tiltása */
    background-repeat: no-repeat;
}

/* ==========================================================================
   GREEN CHECK AREA STYLES
   ========================================================================== */
.green-check-area {
    text-align: center;
}

.green-check-area ul {
    list-style: none;
    padding: 0;
    margin: 0 0 0 20%;
    display: inline-block;
    text-align: left;
}

.green-check-area li {
    position: relative;
    padding-left: 45px;
    margin-bottom: 10px;
    list-style: none;
}

.green-check-area li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    background-image: url('images/zold-pipa.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    max-height: 30px;
}

.green-check-area li b,
.green-check-area li strong {
    color: var(--primary-color);   
}

/* Alternating left/right offsets from center */
.green-check-area li:nth-child(1) {
    margin-left: -15%;
}

.green-check-area li:nth-child(2) {
    margin-left: 8%;
}

.green-check-area li:nth-child(3) {
    margin-left: -7%;
}

.green-check-area li:nth-child(4) {
    margin-left: 1%;
}

.green-check-area li:nth-child(5) {
    margin-left: -18%;
}

.green-check-area li:nth-child(6) {
    margin-left: 5%;
}

.green-check-area li:nth-child(7) {
    margin-left: -11%;
}

.green-check-area li:nth-child(8) {
    margin-left: 2%;
}