body {
    margin: 0;
    padding-top: 150px; /* MÓDOSÍTVA: Nagyobb hely a menünek, hogy ne takarjon ki semmit */
    font-family: 'Montserrat', sans-serif;
    background: #ffffff;
    color: #222;
}

header {
    background: linear-gradient(135deg, #e6002d, #ff3b5c);
    color: white;
    text-align: center;
    padding: 70px 20px;
}

nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;

    display: flex;
    align-items: center;

    background: rgba(255,255,255,.95);
    backdrop-filter: blur(10px);

    padding: 10px 30px;

    border-bottom: 3px solid #e6002d;

    box-shadow: 0 5px 15px rgba(0,0,0,.08);

    z-index: 1000;
}

nav a{
    color:#e6002d;
    text-decoration:none;
    font-weight:bold;
    transition:.2s;
}

nav a:hover{
    color:#ff5a6b;
    transform:translateY(-2px);
}

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

.card {
    background: white;
    margin: 15px 0;
    padding: 22px;
    border-radius: 14px;
    border-left: 6px solid #e6002d;
    box-shadow: 0 4px 12px rgba(0,0,0,.06);
}

.wb-stl-custom1 {
    font-family: 'Playfair Display', serif;
    font-size: 40px;
    font-style: italic;
    color: #e6002d;
    text-align: center;
}

.button{
    display:inline-block;
    background:#e6002d;
    color:white;
    padding:12px 24px;
    border-radius:10px;
    text-decoration:none;
    font-weight:bold;
}

.button:hover{
    background:#c50025;
}

footer{
    text-align:center;
    padding:30px;
    color:#888;
}

.logo{
    display:flex;
    align-items:center;
}

/* 120x120px méretű kör alakú logó */
.logo img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
}


/* ======== Termékek ======== */

.products{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:25px;
    margin-top:40px;
}

.product{
    background:white;
    border-radius:15px;
    overflow:hidden;
    box-shadow:0 6px 18px rgba(0,0,0,.08);
    transition:.25s;
}

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

/* Lekicsinyíti a képet levágás helyett */
.product img{
    width:100%;
    height:260px;
    object-fit: contain;
    background-color: #fcfcfc;
    display:block;
}

.product h3{
    padding:15px;
    font-size:17px;
    text-align:center;
    color:#b3002d;
}

.info-box{
    margin-top:50px;
    background:#fff0f3;
    padding:30px;
    border-radius:15px;
    text-align:center;
    border:2px solid #ffd5dd;
}

.info-box h2{
    color:#b3002d;
    margin-top:0;
}

.menu{
    display:flex;
    gap:35px;
    margin:0 auto;
}

/* ÚJ SZABÁLY: Megnövelt betűméret és függőleges igazítás a szöveges menüpontoknak */
.menu a {
    font-size: 24px; 
    display: flex;
    align-items: center;
}

/* ======== Játékok ======== */
.games-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:30px;
    margin:40px 0;
}

.game-card{
    background:#fff;
    border-radius:15px;
    overflow:hidden;
    box-shadow:0 5px 15px rgba(0,0,0,.1);
    transition:.3s;
}

.game-card:hover{
    transform:translateY(-6px);
    box-shadow:0 12px 30px rgba(0,0,0,.15);
}

.game-card img {
    width: 100%;
    height: 300px;
    object-fit: contain;        /* Kivágás helyett belekicsinyíti a keretbe */
    background-color: #fcfcfc;  /* Halvány háttér az üresen maradó oldalsó részeknek */
    display: block;
}

.game-content{
    padding:25px;
}

.game-content h2{
    color:#e91e63;
    margin-bottom:15px;
}

.game-content p{
    line-height:1.7;
}

/* ======== Galéria elrendezése ======== */
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
    margin-top: 20px;
}

.gallery img {
    width: 100%;
    height: 150px;
    object-fit: cover;         /* A kis képek egységes méretűek lesznek, nem torzulnak */
    border-radius: 8px;
    cursor: pointer;           /* Mutatja a kurzorral, hogy rákattintható */
    transition: transform 0.2s, box-shadow 0.2s;
}

.gallery img:hover {
    transform: scale(1.03);    /* Rámutatáskor picit megmozdul */
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

/* ======== Mobil Nézet (768px alatti kijelzők) ======== */
@media (max-width: 768px) {
    nav {
        flex-direction: column; /* Egymás alá rakja a logót és a menüt */
        padding: 15px 10px;     /* Kevesebb belső helyet hagy a széleken */
    }

    .logo img {
        width: 80px;            /* Mobilon elég a kisebb, 80px-es logó */
        height: 80px;
        margin-bottom: 10px;    /* Távolság a logó és a menüpontok között */
    }

    .menu {
        width: 100%;
        justify-content: center; /* Középre igazítja a menüpontokat */
        gap: 20px;              /* Kicsit közelebb hozza a gombokat egymáshoz */
    }

    .menu a {
        font-size: 16px;        /* Mobilon az olvasható, de kompakt méret */
    }

    body {
        padding-top: 170px;     /* Megnövelt hely az egymás alá került elemeknek */
    }
}

/* ======== LIGHTBOX NYILAK KÉNYELMES JAVÍTÁSA (ÚJ) ======== */

/* Balra nyíl generálása */
.lb-nav a.lb-prev {
    background-image: none !important;
    opacity: 1 !important;
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    padding-left: 20px;
}
.lb-nav a.lb-prev::before {
    content: "❮";
    font-size: 34px;
    color: white;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
    visibility: visible;
}

/* Jobbra nyíl generálása */
.lb-nav a.lb-next {
    background-image: none !important;
    opacity: 1 !important;
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    padding-right: 20px;
}
.lb-nav a.lb-next::before {
    content: "❯";
    font-size: 34px;
    color: white;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
    visibility: visible;
}

/* Halványítás effekt az egérmutatóhoz */
.lb-nav a.lb-prev::before, .lb-nav a.lb-next::before {
    opacity: 0.5;
    transition: opacity 0.2s;
}
.lb-nav a.lb-prev:hover::before, .lb-nav a.lb-next:hover::before {
    opacity: 1;
}

.goverlay{
    backdrop-filter: blur(8px);
    background: rgba(0,0,0,.8);
}

.gclose,
.gnext,
.gprev{
    color:#fff;
}

.gslide-image img{
    border-radius:15px;
}