:root {
    --charcoal: #111111;
    --cream: #F9F6F0;
    --gold: #C5A059;
    --white: #ffffff;
    --gray: #666666;
}

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

body {
    font-family: 'Montserrat', sans-serif;
    background-color: var(--cream);
    color: var(--charcoal);
    line-height: 1.6;
    overflow-x: hidden;
}

h1, h2, h3 {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400;
}

a {
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.heart-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 15px 0 25px 0;
    color: var(--gold);
    font-size: 12px;
}

.heart-divider::before, .heart-divider::after {
    content: "";
    display: block;
    width: 40px;
    height: 1px;
    background-color: var(--gold);
    margin: 0 10px;
}

.btn-gold {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--gold);
    color: var(--white);
    padding: 12px 30px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    border: 1px solid var(--gold);
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-gold:hover {
    background-color: transparent;
    color: var(--gold);
}

/* --- 1. HEADER ALAPÁLLAPOT (FENT) --- */
header {
    background-color: var(--charcoal);
    color: var(--white);
    padding: 24px 0; /* Tágasabb fenti alapállapot */
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid rgba(197, 160, 89, 0.1);
    /* Finom, folyamatos átmenet a magasságnak és a háttérnek */
    transition: padding 0.4s ease, background-color 0.4s ease, backdrop-filter 0.4s ease, border-color 0.4s ease;
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}


/* --- VALÓDI LOGÓ KÉP + ÉLŐ SZÖVEG ALAPÁLLAPOT (FENT) --- */
.logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.logo-image {
    height: 36px; /* A kimentett arany kép magassága fent (ezt tetszés szerint finomíthatod) */
    width: auto;  /* Megtartja a szélességi arányokat, nem torzít */
    display: block;
    margin: 0 auto;
    transition: height 0.4s ease; /* Finom zsugorodás animáció */
}

.logo-text {
    font-size: 26px;  /* Szöveges logóra vonatkozott */
    letter-spacing: 0.3em;
    font-weight: 300;
    text-transform: uppercase;
    transition: font-size 0.4s ease; /* Finom logó zsugorodás */
}

.logo-sub {
    font-size: 8px;
    letter-spacing: 0.4em;
    display: block;
    text-align: center;
    color: var(--gold);
    margin-top: 5px; /* Távolság az arany kép és az élő szöveg között */
    text-transform: uppercase;
    transition: opacity 0.4s ease, transform 0.4s ease, font-size 0.4s ease;
}

/* --- ÚJ: A "VARÁZSLAT" ÁLLAPOT (HA LEFELÉ GÖRGETÜNK) --- */
/* Ezt az osztályt a JavaScript fogja automatikusan rátenni a fejlécre, ha a látogató lejjebb görget */
header.scrolled {
    padding: 12px 0; /* Alacsonyabb fejléc */
    background-color: rgba(17, 17, 17, 0.82); /* Enyhén áttetsző mélyfekete */
    backdrop-filter: blur(12px); /* Prémium üveghatású háttérelmosás (Blur) */
    -webkit-backdrop-filter: blur(12px); /* Safari böngésző támogatás */
    border-bottom: 1px solid rgba(197, 160, 89, 0.25); /* Picit láthatóbb elegáns arany csík */
}

header.scrolled .logo-text {
    font-size: 21px; /* Kisebb, kecsesebb logó méret legörgetve */
}

header.scrolled .logo-sub {
    opacity: 0.7; /* Halványabb alcím, hogy ne legyen zsúfolt */
    transform: scale(0.95);
}


/* Amikor a JavaScript ráteszi a 'scrolled' osztályt a fejlécre, a kép és a szöveg is kisebb lesz */
header.scrolled .logo-image {
    height: 22px; /* Kecsesebb, alacsonyabb kép-logó legörgetve */
}

header.scrolled .logo-sub {
    font-size: 7px; /* A szöveges alcím is picit kisebb lesz legörgetve */
    opacity: 0.8;
}


nav ul {
    display: flex;
    list-style: none;
    gap: 30px;
}

nav ul a {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
}

nav ul a:hover {
    color: var(--gold);
}

.header-icons {
    display: flex;
    gap: 20px;
    font-size: 16px;
}

.header-icons a:hover {
    color: var(--gold);
}

/* --- 2. SZEKCIÓ: HERO STÍLUSOK --- */
.hero-section {
    /* Sima szín helyett beolvassa a képet, középre teszi, és kitölti a teljes szélességet */
    /* --- FRISSÍTVE: A sötétítés értékét 0.65-ről levettük 0.35-re, így sokkal világosabb és élénkebb a kép --- */
    background-image: linear-gradient(rgba(20, 25, 18, 0.35), rgba(20, 25, 18, 0.35)), url('images/hero-jars.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: var(--white);
    padding: 60px 0; /* Megnövelt távolság, hogy jobban érvényesüljön a háttérkép */
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.21fr; /* Csak a szöveges oszlop marad */
}

.hero-content h1 {
    font-size: 46px;
    line-height: 1.2;
    letter-spacing: 0.05em;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.hero-content h1 span {
    color: var(--gold);
}

.hero-description {
    font-size: 15px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 35px;
    max-width: 500px;
}

.placeholder-box {
    width: 100%;
    height: 300px;
    background-color: rgba(255,255,255,0.05);
    border: 1px dashed var(--gold);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.badges-section {
    /* --- FRISSÍTVE: Fehér helyett a teljes oldallal megegyező krém háttér --- */
    background-color: var(--cream);
    padding: 10px 0;
    border-bottom: 1px solid #e5dfd5; /* Finomítottam az alsó elválasztó vonal színét is, hogy ne legyen túl erős */
}

.badges-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    text-align: center;
}

.badge-item h3 {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-top: 10px;
    font-weight: 500;
}

.badge-item p {
    font-size: 11px;
    color: var(--gray);
    font-weight: 300;
}

.badge-icon {
    font-size: 24px;
    color: var(--gold);
}

.categories-section {
    padding: 20px 0;
    text-align: center;
}

.section-title {
    font-size: 28px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.categories-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 25px;
}

.category-card {
    background-color: var(--charcoal);
    border: 1px solid rgba(197, 160, 89, 0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-bottom: 20px;
    overflow: hidden;
    /* --- ÚJ: A teljes kártya sarkainak lekerekítése (minden sarok) --- */
    border-radius: 16px; 
}

.category-bg-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
    margin-bottom: 15px;
    /* --- ÚJ: Csak a kép felső két sarkának lekerekítése, hogy illeszkedjen --- */
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

.category-text {
    color: var(--white);
    padding: 0 10px;
}

.category-text h3 {
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 5px;
}

.category-text span {
    font-size: 11px;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.products-section {
    background-color: var(--white);
    padding: 20px 0;
    text-align: center;
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 25px;
    margin-bottom: 40px;
}

.product-card {
    background-color: var(--cream);
    padding: 30px 20px;
    text-align: center;
    border: 1px solid transparent;
    transition: all 0.3s ease;
}

.product-card:hover {
    border: 1px solid rgba(197, 160, 89, 0.3);
}

.product-card h3 {
    font-size: 18px;
    text-transform: uppercase;
    margin: 15px 0 10px 0;
}

.product-desc {
    font-size: 12px;
    color: var(--gray);
    margin-bottom: 15px;
    font-weight: 300;
}

.product-price {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 20px;
}

.product-actions {
    display: flex;
    gap: 10px;
}

.btn-cart {
    background-color: var(--gold);
    color: var(--white);
    border: 1px solid var(--gold);
    padding: 10px 20px;
    font-size: 11px;
    text-transform: uppercase;
    width: 80%;
    cursor: pointer;
}

.btn-heart {
    background: transparent;
    border: 1px solid #ddd;
    padding: 10px;
    width: 20%;
    cursor: pointer;
}

.btn-outline {
    display: inline-block;
    border: 1px solid var(--gold);
    color: var(--charcoal);
    padding: 12px 35px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin: 20px 0 60px 0;
    transition: all 0.3s ease;
}

.btn-outline:hover {
    background-color: var(--gold);
    color: var(--white);
}

/* --- 6. SZEKCIÓ: A MALIK TÖRTÉNETE STÍLUSOK --- */
.story-section {
    /* Beolvassa a kosaras-gyümölcsös nagy fotót teljes szélességben */
    /* --- FRISSÍTVE: A sötétítés értékét 0.7-ről levettük 0.35-re, így sokkal világosabb és élénkebb a kép --- */
    background-image: linear-gradient(rgba(17, 17, 17, 0.35), rgba(17, 17, 17, 0.35)), url('images/story-photo.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: var(--white);
    padding: 40px 0;
}

.story-grid {
    display: grid;
    grid-template-columns: 1.21fr;
}

.story-content h2 {
    font-size: 36px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.story-content p {
    font-size: 15px;
    font-weight: 300;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 35px;
    text-align: left; /* Megmaradt a szép balra igazítás */
    max-width: 550px;
}

/* --- FRISSÍTETT ÚJ SZEKCIÓ: ALSÓ BIZALMI SÁV --- */
.trust-badges-bottom {
    background-color: var(--cream);
    /* --- FRISSÍTVE: 40px helyett csak 20px, hogy sokkal alacsonyabb és kecsesebb legyen --- */
    padding: 10px 0; 
    border-top: 1px solid #e5dfd5;
    border-bottom: 1px solid #e5dfd5;
}

.trust-grid-bottom {
    display: flex;
    /* --- ÚJ: Ez a varázsszó! Teljesen egyenlő és szimmetrikus közöket tesz az elemek közé --- */
    justify-content: space-between; 
    align-items: center;
    gap: 15px;
    width: 100%;
}

.trust-item-bottom {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--charcoal);
    font-weight: 500;
    /* --- ELTÁVOLÍTVA: Nincs fix szélesség vagy fix nyújtás, így a szövegek hossza határozza meg a helyet --- */
}

.trust-item-bottom img.icon-img {
    width: 32px; /* Picit kisebb ikonok az alacsonyabb sávhoz */
    height: 32px;
    object-fit: contain;
}

.trust-item-bottom img.round-logo-img {
    /* --- FRISSÍTVE: 90px helyett 70px, hogy a kerek logó is szépen beleférjen a vékonyabb sávba --- */
    width: 90px; 
    height: 90px;
    object-fit: contain;
}




footer {
    background-color: var(--charcoal);
    color: var(--white);
    padding: 40px 0 20px 0;
    margin-top: 0;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1.2fr;
    gap: 40px;
    margin-bottom: 40px;
}

.footer-brand h2 {
    font-size: 24px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.footer-brand p {
    font-size: 12px;
    color: rgba(255,255,255,0.6);
}

.footer-col h3 {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: 20px;
    color: var(--gold);
}

.footer-col ul {
    list-style: none;
}

.footer-col ul li {
    margin-bottom: 12px;
    font-size: 13px;
    color: rgba(255,255,255,0.7);
}


/* --- LÁBLEC ARANY LOGÓ STÍLUS --- */
.footer-logo-image {
    height: 22px; /* Kisebb magasság, mint a fejlécben, hogy tökéletesen illeszkedjen a lábléc arányaihoz */
    width: auto;  /* Megtartja az eredeti arányokat */
    display: block;
    margin-bottom: 15px; /* Távolság az arany logó és az alatta lévő szöveg között */
}

/* Kis igazítás, hogy mobilon a lábléc logója is középre kerüljön, ha az oldal átrendeződik */
@media (max-width: 768px) {
    .footer-logo-image {
        margin: 0 auto 15px auto;
    }
}


.newsletter-form {
    display: flex;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding-bottom: 5px;
    margin-top: 15px;
}

.newsletter-form input {
    background: transparent;
    border: none;
    color: var(--white);
    font-size: 12px;
    width: 100%;
}

.newsletter-form input:focus { 
    outline: none; 
}

.newsletter-submit {
    background: transparent;
    border: none;
    color: var(--gold);
    cursor: pointer;
    font-size: 16px;
}

@media (max-width: 992px) {
    .trust-grid-bottom {
        flex-direction: column;
        align-items: center; /* Középre igazítjuk a bizalmi sáv elemeit tableten is */
        text-align: center;
        padding-left: 0;
    }
    .trust-item-bottom {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 768px) {
    /* Biztosítjuk, hogy a fejléc elemei egymás alá kerüljenek mobilon */
    .header-container {
        flex-direction: column;
        gap: 15px;
        padding: 10px 0;
    }

    /* --- VISSZAHOZZUK A MENÜT: Mobilon is látható, elegáns, vízszintes menüsor --- */
    nav {
        display: block !important; 
        width: 100%;
    }

    nav ul {
        justify-content: center; /* Középre igazítja a menüpontokat */
        gap: 20px; /* Kényelmes távolság a telefonos ujjaknak */
        flex-wrap: wrap; /* Ha nem fér ki, szépen tördeli */
    }

    nav ul a {
        font-size: 11px; /* Kicsit finomabb betűméret a mobilra */
        letter-spacing: 0.1em;
    }

    /* Elrejtjük a felesleges kereső/profil ikonokat mobilon, hogy tiszta maradjon a kép */
    .header-icons {
        display: none;
    }

    /* Összes többi szekció középre igazítása mobilon */
    .hero-grid, .badges-grid, .categories-grid, .products-grid, .footer-grid, .story-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .story-content {
        padding: 40px 20px;
    }
    
    .story-image-container {
        min-height: 300px;
    }
}

.badge-img-asset {
    width: 39px;        /* Itt tudod tetszés szerint növelni vagy csökkenteni az ikonok méretét */
    height: 39px;
    object-fit: contain;
    display: block;
    margin: 0 auto 5px auto; /* Középre teszi az ikont és ad egy kis rést alatta */
}

.product-image {
    width: auto;
    height: 180px; /* Fix magasság, hogy az üvegek egy vonalban legyenek */
    object-fit: contain; /* Megőrzi az üvegek eredeti arányait, nem nyújtja el őket */
    display: block;
    margin: 0 auto 15px auto; /* Középre igazítja a képet és ad egy kis rést alatta */
}


.btn-heart {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid #ddd;
    padding: 10px;
    width: 20%;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-heart:hover {
    border-color: var(--gold); /* Egérráhúzáskor az egyedi szív gombjának kerete is aranyszínű lesz */
}

.heart-btn-img {
    width: 18px;   /* Itt tudod milliméter pontosan beállítani a saját szíved méretét a gombon belül */
    height: 18px;
    object-fit: contain;
    display: block;
}

/* --- ÚJ ARANY SZÍV ELVÁLASZTÓ GRAFIKA STÍLUS --- */
.gold-heart-divider {
    display: block;
    width: 60px;      /* Itt lehet beállítani, hogy milyen széles legyen a teljes vonalas grafika a képernyőn */
    height: auto;      /* Megtartja az eredeti arányokat */
    margin: 10px auto 10px auto; /* Középre igazítja a kategóriáknál és termékeknél, és szép rést ad alatta-felette */
    object-fit: contain;
}

/* Balra igazítja az arany szív elválasztót a legfelső Hero részben */
.hero-divider-left {
    margin: 10px 0 10px 0 !important;
}


/* --- A MALIK VILÁGA BEÁGYAZOTT CÍMSOR STÍLUSA --- */
.section-inline-title {
    font-size: 28px; /* A címsor betűmérete (ezt tetszés szerint növelhető, a logó követni fogja) */
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 5px;
    display: block;
}

.section-inline-logo {
    /* --- EZ A VARÁZSLAT: Az '1em' azt jelenti, hogy a kép magassága pontosan megegyezik a körülötte lévő betűk magasságával --- */
    height: 0.85em; 
    width: auto; /* Megtartja az arányokat, nem torzít */
    display: inline-block; /* Engedi, hogy a szöveg körbefussa és egy sorban maradjon vele */
    vertical-align: -5%; /* Milliméter pontosan beállítja a kép és a betűk alapvonalát egy szintre */
    margin: 0 10px; /* Egy kis elegáns üres hely (rés) a logó két oldalán, hogy ne tapadjon a szavakhoz */
}

/* Mobilos igazítás, hogy ha a kijelző összemegy, a teljes mondat szépen középre igazodjon */
@media (max-width: 768px) {
    .section-inline-title {
        text-align: center;
    }
}





/* --- A TÖRTÉNETÜNK BEÁGYAZOTT CÍMSOR STÍLUSA --- */
.story-inline-title {
    font-size: 32px; /* A címsor betűmérete (ezt tetszés szerint növelhető, a logó követni fogja) */
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-bottom: 5px;
    display: block;
}

.story-inline-logo {
    /* --- EZ A VARÁZSLAT: Az '1em' azt jelenti, hogy a kép magassága pontosan megegyezik a körülötte lévő betűk magasságával --- */
    height: 0.85em; 
    width: auto; /* Megtartja az arányokat, nem torzít */
    display: inline-block; /* Engedi, hogy a szöveg körbefussa és egy sorban maradjon vele */
    vertical-align: -5%; /* Milliméter pontosan beállítja a kép és a betűk alapvonalát egy szintre */
    margin: 0 10px; /* Egy kis elegáns üres hely (rés) a logó két oldalán, hogy ne tapadjon a szavakhoz */
}

/* Mobilos igazítás, hogy ha a kijelző összemegy, a teljes mondat szépen középre igazodjon */
@media (max-width: 768px) {
    .story-inline-title {
        text-align: center;
    }
}