/* ============================================================
   RIX FASHION - TELJES, JAVÍTOTT STÍLUSLAP (MOBIL FIX)
   ============================================================ */

   @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;800&display=swap');

   /* --- 1. HARD RESET (MINDEN PÖTTY ÉS VONAL TÖRLÉSE) --- */
   * { box-sizing: border-box; }
   
   body {
       margin: 0; padding: 0;
       font-family: 'Montserrat', sans-serif;
       background-color: #0d0d0d;
       color: white;
       padding-top: 80px; /* Hely a fix menünek */
   }
   
   ul, li, a {
       list-style: none !important;      /* Pöttyök tiltása */
       text-decoration: none !important; /* Aláhúzás tiltása */
       margin: 0; padding: 0;
   }
   
   /* --- 2. A SZÜRKE MENÜSÁV (NAV) --- */
   nav {
       position: fixed;
       top: 0; left: 0; width: 100%;
       height: 80px;
       
       /* A KÉRT KINÉZET: */
       background-color: #333333 !important; /* Szürke háttér */
       box-shadow: 0 4px 15px rgba(0,0,0,0.6); /* Erős árnyék alatta */
       border-bottom: 1px solid #444;
       
       display: flex;
       justify-content: space-between;
       align-items: center;
       padding: 0 40px;
       z-index: 9999;
   }
   
   /* --- 3. LOGÓ (BAL OLDAL) --- */
   .logo {
       font-size: 28px;
       font-weight: 900;
       color: #ffffff !important;
       text-transform: uppercase;
       text-shadow: 2px 2px 4px rgba(0,0,0,0.8); /* Árnyék */
       letter-spacing: 1px;
   }
   
   /* --- 4. MENÜPONTOK (KÖZÉPEN) --- */
   .nav-links {
       display: flex;
       gap: 30px;
       height: 100%;
       align-items: center;
   }
   
   .menu-item {
       position: relative; /* Ez kell a lenyílóhoz */
       height: 100%;
       display: flex;
       align-items: center;
   }
   
   /* A linkek stílusa */
   .nav-links a {
       color: #ffffff !important;
       font-size: 14px;
       font-weight: 700;
       text-transform: uppercase;
       text-shadow: 2px 2px 3px rgba(0,0,0,0.8); /* Árnyék a betűkön */
       transition: color 0.3s;
       padding: 10px 0;
   }
   
   .nav-links a:hover {
       color: #cccccc !important; /* Világosodás */
       text-shadow: 0 0 10px rgba(255,255,255,0.5);
   }
   
   /* --- 5. LEGÖRDÜLŐ MENÜ (DROPDOWN - MENÜPONTOK) --- */
   .dropdown {
       display: none; /* Alapból rejtve */
       position: absolute;
       top: 60px; /* A gomb alatt */
       left: 50%;
       transform: translateX(-50%);
       
       background-color: #1a1a1a; /* Sötét doboz */
       border: 1px solid #444;
       box-shadow: 0 10px 30px rgba(0,0,0,0.9);
       
       min-width: 200px;
       padding: 20px;
       border-radius: 6px;
       flex-direction: column;
       gap: 10px;
       text-align: left;
   }
   
   /* Ha ráviszed az egeret a menüpontra, megjelenik */
   .menu-item:hover .dropdown {
       display: flex;
   }
   
   .menu-category {
       font-size: 11px;
       color: #888;
       text-transform: uppercase;
       font-weight: bold;
       margin-bottom: 5px;
       display: block;
   }
   
   .dropdown hr {
       border: 0; 
       border-top: 1px solid #333; 
       width: 100%; 
       margin: 10px 0;
   }
   
   .dropdown a {
       font-size: 13px;
       text-transform: none; /* Itt ne legyen csupa nagybetű */
       color: #ccc !important;
       text-shadow: none; /* Itt nem kell árnyék */
       padding: 5px 0;
       display: block;
   }
   
   .dropdown a:hover {
       color: white !important;
       padding-left: 5px; /* Kis mozgás jobbra */
   }
   
   /* --- 6. IKONOK (JOBB OLDAL) --- */
   #auth-container i, .cart-icon-container svg {
       color: white;
       filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.8)); /* Árnyék az ikonokon */
       cursor: pointer;
       transition: 0.3s;
   }
   
   #auth-container i:hover, .cart-icon-container:hover svg {
       color: #cc0000; /* Piros ha ráviszed */
   }
   
   .nav-icons {
       display: flex;
       align-items: center;
       gap: 20px;
       flex: 0 0 auto;
   }
   
   /* KOSÁR IKON ÉS SZÁMLÁLÓ */
   .cart-icon-container {
       position: relative;
       cursor: pointer;
       display: flex;
       align-items: center;
       color: white;
       margin-left: 15px;
       padding: 5px;
   }
   
   #cart-count {
       position: absolute;
       top: -5px; right: -5px;
       background-color: #cc0000;
       color: white;
       font-size: 10px; padding: 2px 5px;
       border-radius: 50%; font-weight: bold;
       box-shadow: 1px 1px 2px rgba(0,0,0,0.5);
   }
   
   /* --- 7. ÚJ, SZÉLESEBB LENYÍLÓ KOSÁR --- */
   .cart-dropdown {
       display: none; 
       position: absolute; 
       top: 60px; 
       right: 0;
       
       /* MEGNÖVELT SZÉLESSÉG */
       width: 400px; 
       padding: 30px;
       
       background-color: #1a1a1a;
       border: 1px solid #444; 
       border-radius: 10px;
       box-shadow: 0 20px 60px rgba(0,0,0,0.95);
       z-index: 10000;
       text-align: left;
   }
   
   .cart-dropdown.active { 
       display: block; 
       animation: fadeIn 0.3s ease-out; 
   }
   
   .cart-dropdown h4 {
       margin: 0 0 20px 0; 
       border-bottom: 1px solid #333; 
       padding-bottom: 15px;
       font-size: 18px; 
       color: #fff; 
       text-transform: uppercase; 
       letter-spacing: 1px;
       font-weight: 800;
   }
   
   #cart-items {
       list-style: none; padding: 0; margin: 0;
       max-height: 350px; overflow-y: auto;
   }
   
   #cart-items li {
       display: flex; 
       justify-content: space-between; 
       align-items: center;
       padding: 15px 0;
       border-bottom: 1px solid #2a2a2a;
       font-size: 14px; 
       color: #ddd;
   }
   
   .empty-msg { 
       text-align: center; 
       padding: 30px 0 !important; 
       color: #777 !important; 
       font-style: italic; 
   }
   
   /* --- KUPON RÉSZ (EGYMÁS MELLETT) --- */
   .cart-footer { 
       margin-top: 20px; 
       padding-top: 20px; 
       border-top: 1px solid #333; 
   }
   
   .promo-box { 
       display: flex; 
       gap: 10px; 
       margin-bottom: 20px;
       align-items: center;
   }
   
   .promo-box input { 
       flex: 1; 
       padding: 12px; 
       background: #222; 
       border: 1px solid #444; 
       color: white; 
       margin: 0 !important;
       border-radius: 4px;
   }
   
   /* A kupon gomb méretezése, hogy ne lógjon ki */
   .promo-box button { 
       margin: 0 !important;
       padding: 12px 20px !important;
       min-width: auto !important;
       font-size: 12px !important;
       width: auto !important;
   }
   
   /* ÁRAK ÉS VÉGÖSSZEG */
   .total-row { 
       display: flex; 
       justify-content: space-between; 
       margin-bottom: 10px; 
       font-size: 15px; 
       color: #bbb; 
   }
   
   .final-total { 
       font-weight: 900; 
       color: white; 
       font-size: 20px; 
       margin-top: 15px; 
       border-top: 1px dashed #444; 
       padding-top: 15px; 
   }
   
   /* Fizetés gomb */
   .checkout-btn { 
       display: block; 
       width: 100%; 
       text-align: center; 
       margin-top: 20px;
       /* A prémium stílus a fájl végén lévő kódból jön rá */
   }
   
   .hidden { display: none; }
   .show { display: block; }
   
   /* --- HERO SZEKCIÓ --- */
   .hero {
       width: 100%; height: 100vh; position: relative;
       display: flex; justify-content: center; align-items: center;
       overflow: hidden;
   }
.back-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0 !important;
    filter: none !important;
    opacity: 1 !important;
    mix-blend-mode: normal !important;
}
   .hero-content { text-align: center; z-index: 1; }
   .hero h1 { font-size: 80px; font-weight: 900; letter-spacing: 10px; margin: 0; }
   .hero p { font-size: 18px; letter-spacing: 5px; color: #ccc; margin-top: 10px; }
   
   /* SZEKCIÓK */
   section { padding: 80px 20px; text-align: center; }
   
   /* PRÉMIUM HÁTTÉR FÉNY (Pulcsik/Pólók) */
/* ============================================================
   RIX DARK GRUNGE HÁTTÉR - PÓLÓK / PULCSIK SZEKCIÓ
   ============================================================ */

#pulcsik, 
#polok {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 20% 20%, rgba(204, 0, 0, 0.18) 0%, transparent 28%),
        radial-gradient(circle at 80% 30%, rgba(255, 255, 255, 0.06) 0%, transparent 24%),
        radial-gradient(circle at 50% 100%, rgba(204, 0, 0, 0.12) 0%, transparent 35%),
        linear-gradient(135deg, #050505 0%, #111111 40%, #070707 100%);
    border-top: 1px solid rgba(204, 0, 0, 0.25);
    border-bottom: 1px solid rgba(204, 0, 0, 0.18);
}

/* Füstös / koszos textúra réteg */
#pulcsik::before,
#polok::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.22;
    background-image:
        linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.04) 45%, transparent 60%),
        repeating-linear-gradient(
            90deg,
            rgba(255,255,255,0.025) 0px,
            rgba(255,255,255,0.025) 1px,
            transparent 1px,
            transparent 7px
        ),
        repeating-linear-gradient(
            0deg,
            rgba(255,255,255,0.018) 0px,
            rgba(255,255,255,0.018) 1px,
            transparent 1px,
            transparent 9px
        );
    mix-blend-mode: screen;
}

/* Nagy sötét vignetta, hogy a termékek jobban kiemelkedjenek */
#pulcsik::after,
#polok::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(circle at center, transparent 0%, rgba(0,0,0,0.35) 55%, rgba(0,0,0,0.88) 100%);
}

/* A tartalom mindig a háttérrétegek fölött legyen */
#pulcsik > *,
#polok > * {
    position: relative;
    z-index: 1;
}
   
   #dynamic-product-list, .card-container {
    display: flex !important;
    flex-wrap: wrap !important; 
    justify-content: center !important; 
    gap: 30px !important; 
    padding: 50px 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.card {
    width: 280px !important; 
    min-height: 450px;
    background: #111;
    padding: 20px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

   .card-container { display: flex; justify-content: center; gap: 30px; flex-wrap: wrap; }
   .card {
       background-color: #111; padding: 20px; border: 1px solid #222;
       width: 250px; text-align: center; transition: 0.3s;
       box-shadow: 0 10px 30px rgba(0,0,0,0.5);
   }
   .card:hover { border-color: #cc0000; transform: translateY(-5px); box-shadow: 0 15px 40px rgba(204,0,0,0.2); }
   
   .card img {
       width: 100%;
       height: auto;
       margin-bottom: 15px;
   }
   
   /* Form (Kapcsolat űrlap) */
   form input, form textarea {
       display: block; width: 100%; max-width: 500px; margin: 10px auto;
       padding: 15px; background-color: #222; border: 1px solid #444;
       color: white; font-family: 'Montserrat', sans-serif;
   }
   
   /* Modal */
   .modal { display: none; position: fixed; z-index: 2000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.8); }
   .modal-content {
       background-color: #1a1a1a; margin: 15% auto; padding: 40px;
       border: 1px solid #cc0000; width: 90%; max-width: 400px;
       text-align: center; position: relative;
   }
   .close-btn { position: absolute; top: 10px; right: 20px; font-size: 30px; cursor: pointer; }
   
   /* Animációk (Scroll) */
   .hidden-scroll { opacity: 0; transform: translateY(30px); transition: all 0.8s ease-out; }
   .show-scroll { opacity: 1; transform: translateY(0); }
   
   /* ============================================================
      7. MOBIL NÉZET (JAVÍTOTT, SZÜRKE, KOMPAKT, BUGMENTES)
      ============================================================ */
   
/* ============================================================
   CSAK EZT MÁSOLD BE A RÉGI MOBIL RÉSZ HELYÉRE:
   ============================================================ */

/* Alapból rejtve */
.hamburger { display: none; }

@media (max-width: 900px) {
    /* 1. Hamburger Ikon */
    .hamburger { display: block; cursor: pointer; z-index: 10001; }
    .bar {
        display: block; width: 28px; height: 3px;
        margin: 6px auto; background-color: white;
        transition: 0.3s; border-radius: 2px;
    }
    .hamburger.active .bar:nth-child(2) { opacity: 0; }
    .hamburger.active .bar:nth-child(1) { transform: translateY(9px) rotate(45deg); }
    .hamburger.active .bar:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

    /* 2. Menü Doboz (NAV-LINKS) */
    .nav-links {
        position: absolute; /* GÖRGETHETŐ! */
        top: 80px; left: 0; width: 100%;
        /* A BUG JAVÍTÁSA: Engedjük a magasságot nőni */
        height: auto !important;
        max-height: calc(100vh - 80px); overflow-y: auto;
        
        background-color: #333333;
        border-bottom: 2px solid #cc0000;
        display: none;
        flex-direction: column; align-items: center;
        padding: 0;
        box-shadow: 0 10px 20px rgba(0,0,0,0.5); z-index: 9998;
    }
    .nav-links.active { display: flex; animation: slideDown 0.3s ease-out; }

    /* 3. Menüpontok */
    .nav-links li {
        width: 100%;
        text-align: center;
        border-bottom: 1px solid #444;
        /* A BUG JAVÍTÁSA: Tilos a fix magasság */
        height: auto !important; 
        display: block;
        padding: 0; margin: 0;
    }
    .menu-item {
        /* A BUG JAVÍTÁSA: Engedjük a flexboxot megtörni */
        height: auto !important;
        display: flex; flex-direction: column;
        width: 100%; padding: 0; margin: 0;
    }
    .nav-links a {
        display: block; padding: 15px 0;
        font-size: 16px !important; color: white !important; width: 100%;
    }
    .nav-links a:hover { background-color: #444; }

    /* 4. Dropdown (Lenyíló) */
    .dropdown {
        /* A BUG JAVÍTÁSA: STATIC POZÍCIÓ (Tolja le a tartalmat) */
        position: static !important;
        display: none; width: 100%; transform: none;
        background-color: #252525; box-shadow: inset 0 0 15px rgba(0,0,0,0.8);
        border: none; padding: 10px 0; margin: 0;
    }
    
    /* Hover/Klikk hatására megjelenik és tolja a többit */
    .menu-item:hover .dropdown, 
    .menu-item:active .dropdown, 
    .menu-item:focus-within .dropdown {
        display: block;
    }

    .dropdown a {
        font-size: 14px !important; color: #aaa !important;
        padding: 12px 0; border-bottom: 1px solid #333;
    }
    .dropdown a:last-child { border-bottom: none; }
    .dropdown hr { display: none; }
    .menu-category { color: #cc0000; margin-top: 10px; font-weight: bold; }
    
    /* Ikonok rejtése mobilon (a lenyílóban) */
    .nav-links .nav-icons { display: none; }

    @keyframes slideDown {
        from { opacity: 0; transform: translateY(-20px); }
        to { opacity: 1; transform: translateY(0); }
    }
}
   
   
   /* === IDÉZET SZEKCIÓ === */
   section#idezet.quote-style {
       background-color: #ffffff;
       padding: 100px 20px;
       text-align: center;
       box-shadow: inset 0 0 50px rgba(0,0,0,0.5);
   }
   
   .quote-style h2.hidden-scroll {
       color: #000000;
       font-size: 50px;
       font-weight: 900;
       text-transform: uppercase;
       line-height: 1.3;
       margin: 0;
       text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.4);
   }
   
   .quote-style p.hidden-scroll {
       color: #333333;
       font-size: 24px;
       font-weight: bold;
       margin-top: 30px;
       text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
   }
   
   @media (max-width: 768px) {
       .quote-style h2.hidden-scroll { font-size: 32px; }
       .quote-style p.hidden-scroll { font-size: 18px; }
       section#idezet.quote-style { padding: 60px 20px; }
   }
   
   /* === RIX FOOTER STÍLUS (NIKE STYLE) === */
   .rix-footer {
       background-color: #111;
       color: #fff;
       padding: 60px 40px 20px 40px;
       font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
       border-top: 1px solid #222;
   }
   
   .footer-content {
       display: flex; justify-content: space-between; flex-wrap: wrap;
       max-width: 1200px; margin: 0 auto; padding-bottom: 40px;
   }
   
   .footer-column { flex: 1; min-width: 200px; margin-bottom: 30px; }
   .footer-column h4 {
       font-size: 14px; font-weight: 800; text-transform: uppercase;
       margin-bottom: 20px; color: #fff; letter-spacing: 0.5px;
   }
   .footer-column ul { list-style: none; padding: 0; }
   .footer-column ul li { margin-bottom: 12px; }
   .footer-column ul li a {
       color: #7e7e7e; text-decoration: none; font-size: 12px; font-weight: 500; transition: color 0.3s ease;
   }
   .footer-column ul li a:hover { color: #fff; }
   
   .footer-bottom {
       border-top: 1px solid #222; padding-top: 20px;
       display: flex; justify-content: space-between; align-items: center;
       flex-wrap: wrap; max-width: 1200px; margin: 0 auto;
   }
   .copyright p { color: #7e7e7e; font-size: 11px; margin: 0; }
   .legal-links { display: flex; gap: 20px; }
   .legal-links a { color: #7e7e7e; text-decoration: none; font-size: 11px; transition: color 0.3s; }
   .legal-links a:hover { color: #fff; }
   
   @media (max-width: 768px) {
       .footer-content { flex-direction: column; }
       .footer-bottom { flex-direction: column; align-items: flex-start; gap: 15px; }
       .legal-links { flex-wrap: wrap; }
   }
   
   /* === FIZETÉSI LEHETŐSÉGEK LENYÍLÓ === */
   .rejtett-lista {
       display: none;
       padding-left: 15px !important; margin-top: 5px !important;
   }
   .rejtett-lista.nyitva { display: block !important; }
   .rejtett-lista li {
       font-size: 11px !important; color: #999 !important;
       margin-bottom: 4px !important; list-style: none !important;
   }
   
   /* =========================================
      A RIX-RŐL OLDAL (FELÚJÍTOTT DIZÁJN)
      ========================================= */
   
   body.about-page {
       background: radial-gradient(circle at center, #2a2a2a 0%, #0d0d0d 90%) !important;
       background-attachment: fixed;
       color: #ffffff;
       overflow-x: hidden;
   }
   
   .about-hero {
       height: 60vh; width: 100%;
       display: flex; justify-content: center; align-items: center;
       position: relative; z-index: 1;
       background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%);
       border-bottom: 1px solid #333; margin-bottom: 80px;
   }
   
   .about-hero h1 {
       font-size: 5rem; font-weight: 300; letter-spacing: 15px;
       text-transform: uppercase; margin: 0;
       text-shadow: 0 10px 30px rgba(0,0,0,0.8);
       animation: fadeInText 2s ease-out forwards; opacity: 0; 
   }
   
   .about-content {
       min-height: 80vh; display: flex; justify-content: center;
       align-items: flex-start; padding-bottom: 100px;
   }
   
   .content-container {
       display: flex; width: 100%; max-width: 1600px;
       align-items: center; gap: 50px;
   }
   
   .about-logo {
       flex: 1; display: flex; justify-content: center; align-items: center;
       opacity: 0; transform: translateX(-100px); transition: all 1.5s ease-out;
   }
   .about-logo img {
       width: 90%; max-width: 700px; height: auto;
       filter: drop-shadow(0 0 40px rgba(255,255,255,0.08));
   }
   
   .about-text {
       flex: 1; padding: 40px 60px;
       background-color: rgba(255, 255, 255, 0.03);
       border-left: 4px solid #cc0000; border-radius: 0 10px 10px 0;
       box-shadow: 0 10px 30px rgba(0,0,0,0.3);
   }
   
   .about-text p {
       font-size: 1.3rem; line-height: 2.2; color: #e0e0e0;
       font-weight: 400; text-align: justify; margin: 0;
   }
   
   @keyframes fadeInText {
       0% { opacity: 0; transform: scale(0.9); filter: blur(10px); }
       100% { opacity: 1; transform: scale(1); filter: blur(0); }
   }
   
   .show-element { opacity: 1 !important; transform: translateX(0) !important; }
   
   @media (max-width: 1000px) {
       .content-container { flex-direction: column; gap: 30px; }
       .about-hero { height: 50vh; margin-bottom: 40px; }
       .about-hero h1 { font-size: 2.5rem; letter-spacing: 5px; text-align: center; }
       .about-logo { width: 100%; transform: translateX(0); opacity: 1; }
       .about-logo img { width: 60%; }
       .about-text {
           width: 90%; border-left: none; border-top: 4px solid #cc0000;
           border-radius: 10px; padding: 30px; text-align: center;
       }
       .about-text p { text-align: center; font-size: 1.1rem; }
   }
   
   /* ============================================================
      RIX PRÉMIUM GOMBOK (STÍLUS ÉS ELRENDEZÉS)
      ============================================================ */
   
   /* 1. ELRENDEZÉS: Hogy ne másszanak egymásra a gombok */
   .button-wrapper {
       display: flex;
       justify-content: center;
       align-items: center;
       gap: 30px; /* Távolság a két gomb között */
       flex-wrap: wrap; /* Ha nem fér ki, törje a sort */
       margin-top: 50px;
       margin-bottom: 50px;
       width: 100%;
   }
   
   /* 2. STÍLUS: A piros, izzó Gothic kinézet */
   /* Felsoroljuk az összes gombot az oldalon: */
   .button-wrapper button, /* Az "Értesítést kérek" és "Vissza" gombok */
   .card button,           /* Kosárba gomb */
   .btn-main,              /* Tovább a pólókra */
   .promo-box button,      /* Hírlevél / Kupon */
   form button,            /* Űrlap küldés */
   .checkout-btn           /* Fizetés */
   {
       /* ALAPKINÉZET */
       background: linear-gradient(135deg, #cc0000 0%, #990000 100%) !important;
       color: white !important;
       border: none !important;
       padding: 15px 40px !important; /* Szép nagy gombok */
       
       font-family: 'Montserrat', sans-serif !important;
       font-weight: 900 !important;
       text-transform: uppercase !important;
       font-size: 14px !important;
       letter-spacing: 2px !important;
       text-decoration: none !important;
       
       border-radius: 50px !important; /* Lekerekített */
       cursor: pointer;
       display: inline-block;
       position: relative;
       overflow: hidden;
       transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
       
       box-shadow: 0 5px 15px rgba(0,0,0,0.5);
       min-width: 200px; /* Legyen tartása */
       text-align: center;
       margin: 10px; /* Hogy ne érjenek össze */
   }
   
   /* HOVER (Amikor ráviszed az egeret) - IZZÁS */
   .button-wrapper button:hover,
   .card button:hover,
   .btn-main:hover,
   .promo-box button:hover,
   form button:hover,
   .checkout-btn:hover {
       transform: translateY(-5px) scale(1.05); /* Megemelkedik */
       background: linear-gradient(135deg, #ff1a1a 0%, #cc0000 100%) !important;
       
       /* Vörös fény a gomb körül */
       box-shadow: 
           0 10px 25px rgba(204, 0, 0, 0.6), 
           0 0 0 2px rgba(255, 255, 255, 0.1) inset;
           
       color: white !important;
   }
   
   /* KATTINTÁS (Active) */
   .button-wrapper button:active,
   .card button:active {
       transform: translateY(-2px) scale(0.98);
       box-shadow: 0 5px 10px rgba(204, 0, 0, 0.4);
   }
   
   /* FÉNYCSÍK ANIMÁCIÓ */
   .button-wrapper button::after,
   .card button::after,
   .btn-main::after {
       content: '';
       position: absolute;
       top: -50%; left: -50%; width: 200%; height: 200%;
       background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 100%);
       transform: rotate(45deg); transition: all 0.5s; opacity: 0; pointer-events: none;
   }
   
   .button-wrapper button:hover::after,
   .card button:hover::after,
   .btn-main:hover::after {
       left: 100%; opacity: 1; transition: 0.7s;
   }
   
   /* =========================================
      PRÉMIUM "MODAL" ABLAK (ÉRTESÍTÉS)
      ========================================= */
   
   /* 1. A Sötét háttér (Overlay) */
   .modal-overlay {
       display: none; /* Alapból rejtve */
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background-color: rgba(0, 0, 0, 0.85); /* Sötétített háttér */
       z-index: 10000; /* Minden felett legyen */
       justify-content: center;
       align-items: center;
       backdrop-filter: blur(5px); /* Divatos homályosítás mögötte */
   }
   
   /* Ha a JS ráteszi az 'active' osztályt, megjelenik */
   .modal-overlay.active {
       display: flex;
       animation: fadeIn 0.3s ease-out;
   }
   
   /* 2. Maga az ablak (A doboz) */
   .modal-box {
       background-color: #0d0d0d; /* RIX Fekete */
       padding: 40px;
       border: 1px solid #cc0000; /* Piros keret */
       border-radius: 15px;
       width: 90%;
       max-width: 450px;
       text-align: center;
       box-shadow: 0 0 50px rgba(204, 0, 0, 0.2); /* Vörös köd */
       position: relative;
   }
   
   /* Szövegek */
   .modal-box h3 {
       color: white;
       font-size: 24px;
       text-transform: uppercase;
       margin-top: 0;
       font-weight: 800;
   }
   
   .modal-box p {
       color: #bbb;
       font-size: 14px;
       margin-bottom: 25px;
   }
   
   /* Az X bezáró gomb */
   .close-modal {
       position: absolute;
       top: 15px;
       right: 20px;
       color: #666;
       font-size: 28px;
       font-weight: bold;
       cursor: pointer;
       transition: 0.3s;
   }
   .close-modal:hover { color: #cc0000; }
   
   /* 3. Az Input mező (Dizájnos) */
   .modal-box input {
       width: 100%;
       padding: 15px;
       background-color: #1a1a1a;
       border: 1px solid #333;
       color: white;
       font-family: 'Montserrat', sans-serif;
       border-radius: 8px;
       margin-bottom: 20px;
       outline: none;
       transition: 0.3s;
   }
   
   .modal-box input:focus {
       border-color: #cc0000; /* Ha belekattintasz, piros lesz a széle */
       background-color: #222;
   }
   
   /* 4. A Gomb (már örökli a prémium stílust, de itt fixáljuk a szélességet) */
   #modal-submit-btn {
       width: 100%; /* Teljes szélességben */
       margin-top: 10px;
   }
   
   /* Megjelenés animáció */
   @keyframes fadeIn {
       from { opacity: 0; transform: scale(0.9); }
       to { opacity: 1; transform: scale(1); }
   }

   /* ============================================================
   PRÉMIUM MODAL "KÜLDÉS" GOMB JAVÍTÁS
   ============================================================ */

#modal-submit-btn {
    /* Elhelyezés és méret */
    width: 100%;
    padding: 15px 0;
    margin-top: 20px;
    display: block;

    /* A RIX Vörös Gradiens */
    background: linear-gradient(135deg, #cc0000 0%, #990000 100%);
    color: white;
    border: none;
    
    /* Tipográfia */
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 2px;
    
    /* Dizájn elemek */
    border-radius: 50px; /* Lekerekített, mint a többi */
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    
    /* Alap árnyék (enyhe piros köd) */
    box-shadow: 0 5px 15px rgba(204, 0, 0, 0.4);
}

/* Amikor ráviszed az egeret (Hover) */
#modal-submit-btn:hover {
    transform: translateY(-3px) scale(1.02); /* Kicsit megemelkedik */
    background: linear-gradient(135deg, #ff1a1a 0%, #cc0000 100%); /* Világosodik */
    
    /* Erős, izzó vörös fény */
    box-shadow: 
        0 10px 25px rgba(204, 0, 0, 0.6), 
        0 0 0 2px rgba(255, 255, 255, 0.1) inset;
}

/* Amikor rákattintasz (Klikk) */
#modal-submit-btn:active {
    transform: scale(0.95);
    box-shadow: 0 2px 10px rgba(204, 0, 0, 0.3);
}

/* ============================================================
   ÚJ FUNKCIÓK (PRELOADER, COUNTDOWN, SIZE GUIDE)
   ============================================================ */

/* --- 1. PRELOADER (TÖLTŐKÉPERNYŐ) --- */
#preloader {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: #000000;
    z-index: 99999; /* Minden felett legyen */
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.8s ease-out, visibility 0.8s;
}

.preloader-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none; /* Hogy át lehessen kattintani rajta ha eltűnt */
}

.loader-content { text-align: center; }

.pulsing-logo {
    font-size: 80px;
    font-weight: 900;
    color: white;
    letter-spacing: 10px;
    animation: pulseRed 1.5s infinite alternate;
    margin: 0 0 20px 0;
}

.loading-bar {
    width: 200px; height: 4px;
    background: #222;
    margin: 0 auto;
    border-radius: 2px;
    overflow: hidden;
}

.progress {
    width: 0%; height: 100%;
    background: #cc0000;
    animation: loadBar 2s ease-in-out forwards;
}

@keyframes pulseRed {
    0% { text-shadow: 0 0 10px rgba(204, 0, 0, 0.2); transform: scale(1); }
    100% { text-shadow: 0 0 30px rgba(204, 0, 0, 0.8), 0 0 60px rgba(204, 0, 0, 0.4); transform: scale(1.05); }
}

@keyframes loadBar {
    0% { width: 0%; }
    50% { width: 60%; }
    100% { width: 100%; }
}

/* --- 2. DROP VISSZASZÁMLÁLÓ --- */
.countdown-container {
    margin-top: 40px;
    padding: 20px;
    background: rgba(0, 0, 0, 0.6); /* Félig átlátszó fekete */
    border: 1px solid #333;
    border-radius: 10px;
    backdrop-filter: blur(5px);
    display: inline-block;
}

.drop-title {
    color: #cc0000;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 3px;
    margin-bottom: 15px !important;
    text-transform: uppercase;
}

#countdown {
    display: flex;
    gap: 15px;
    justify-content: center;
}

.time-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 60px;
}

.time-box span {
    font-size: 32px;
    font-weight: 800;
    color: white;
    font-variant-numeric: tabular-nums; /* Hogy ne ugráljanak a számok */
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

.time-box small {
    font-size: 10px;
    color: #888;
    margin-top: 5px;
}

/* Mobilra igazítás */
@media (max-width: 600px) {
    .time-box span { font-size: 24px; }
    .time-box { min-width: 40px; }
    .countdown-container { width: 90%; margin-left: auto; margin-right: auto; }
}

/* --- JAVÍTOTT MÉRETTÁBLÁZAT GOMB --- */
.size-guide-btn {
    display: block !important;       /* Új sorba kényszerítjük */
    margin: 15px auto 5px auto !important; /* Középre igazítás + kis hely */
    
    background: transparent !important;
    border: 1px solid #333 !important; /* Halvány keret */
    color: #999 !important;
    
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    
    padding: 8px 15px !important;
    width: fit-content !important;   /* Csak akkora legyen, amekkora a szöveg */
    min-width: unset !important;     /* Töröljük a fix szélességet */
    
    border-radius: 4px !important;   /* Kicsit szögletesebb, elegánsabb */
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: none !important;
}

.size-guide-btn:hover {
    border-color: #cc0000 !important; /* Piros keret ha ráviszed */
    color: white !important;
    background-color: rgba(204, 0, 0, 0.1) !important;
}

/* Gördíthető táblázat mobilon (hogy ne lógjon ki az ablakból) */
.size-modal-content {
    overflow-x: auto; 
    max-width: 90% !important; /* Mobilon se legyen túl széles */
}

/* ============================================================
   KÁRTYÁN BELÜLI GOMBOK JAVÍTÁSA (HOGY NE LÓGJANAK KI)
   ============================================================ */

/* Ez a szabály kifejezetten a kártyákon lévő gombokra (Mérettáblázat, Kosárba)
   vonatkozik, és felülírja az általános gombstílust, hogy jobban elférjenek.
*/
.card button {
    padding: 12px 20px !important; /* Kisebb padding, hogy ne legyenek olyan ducik */
    min-width: auto !important;    /* Töröljük a nagy fix szélességet (a fő bűnöst) */
    width: 85% !important;         /* A kártya szélességének 85%-át töltsék ki, így marad kis hely a szélén */
    margin: 8px auto !important;   /* Középre igazítás és kis hely közöttük */
    display: block !important;     /* Hogy biztosan egymás alá kerüljenek */
    font-size: 13px !important;    /* Picit kisebb betűméret, hogy biztosan kiférjen a szöveg */
}

/* Külön a mérettáblázat gombnak egy kis finomhangolás */
.size-guide-btn {
    margin-top: 15px !important; /* Kicsit nagyobb hely az ár és a gomb között */
}

/* ============================================================
   MOBIL OPTIMALIZÁCIÓ (BIZTONSÁGI CSOMAG)
   Csak telefonon érvényesül (max 768px szélességig)
   ============================================================ */

@media (max-width: 768px) {

    /* 1. HERO SZEKCIÓ */
    .hero h1 {
        font-size: 40px !important; /* Kisebb cím, hogy kiférjen */
        letter-spacing: 5px !important;
    }
    .hero p {
        font-size: 14px !important;
        padding: 0 20px; /* Hogy ne érjen a széléhez a szöveg */
    }

    /* 2. VISSZASZÁMLÁLÓ (COUNTDOWN) */
    .countdown-container {
        width: 90% !important; /* Majdnem teljes szélesség */
        padding: 15px 5px !important;
    }
    .time-box span {
        font-size: 24px !important; /* Kisebb számok */
    }
    .time-box {
        min-width: 45px !important; /* Közelebb egymáshoz */
    }

    /* 3. KÁRTYÁK ÉS GOMBOK */
    .card-container {
        gap: 20px !important; /* Kisebb hézag a kártyák között */
    }
    .card {
        width: 100% !important; /* Teljes szélesség mobilon */
        max-width: 320px !important; /* De ne legyen óriási */
        margin: 0 auto; /* Középre */
    }
    
    /* Ez a rész biztosítja, hogy a gombok ne lógjanak ki (Screenshot javítás) */
    .card button {
        width: 90% !important;
        font-size: 12px !important;
        padding: 12px 10px !important;
    }

    /* 4. MODAL ABLAKOK (Értesítés & Mérettáblázat) */
    .modal-content {
        width: 90% !important;
        margin: 20% auto !important; /* Kicsit lejjebb */
        padding: 20px !important;
    }
    
    /* Mérettáblázat görgethető legyen, ha nem fér ki */
    .size-modal-content {
        overflow-x: auto;
    }
    .size-table {
        font-size: 12px !important; /* Kisebb betűk a táblázatban */
    }
    .size-table th, .size-table td {
        padding: 8px 4px !important; /* Kisebb hely a cellákban */
    }
}
/* ============================================================
   UI POLÍROZÁS (GÖRGETŐSÁV ÉS KIJELÖLÉS)
   ============================================================ */

/* 1. EGYEDI GÖRGETŐSÁV (SCROLLBAR) - Csak Webkit böngészőkön (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: 10px; /* A csík szélessége */
}

/* A "pálya", amin fut a csík */
::-webkit-scrollbar-track {
    background: #0d0d0d; /* RIX Fekete */
    border-left: 1px solid #222;
}

/* Maga a mozgó csík (A "hüvelykujj") */
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #cc0000 0%, #660000 100%); /* Piros átmenet */
    border-radius: 5px; /* Lekerekítés */
    border: 2px solid #0d0d0d; /* Kis keret, hogy "lebegjen" */
}

/* Ha ráviszed az egeret a csíkra */
::-webkit-scrollbar-thumb:hover {
    background: #ff1a1a; /* Világosabb piros */
}

/* 2. SZÖVEG KIJELÖLÉS SZÍNE (SELECTION) */
/* Ha az egérrel kijelölöd a szöveget, ne kék legyen, hanem RIX stílusú */
::selection {
    background-color: #cc0000; /* Piros háttér */
    color: white; /* Fehér betű */
    text-shadow: none;
}

/* Firefoxra külön (mert ő különcködik) */
::-moz-selection {
    background-color: #cc0000;
    color: white;
}

/* ============================================================
   MARQUEE (VÉGTELEN FUTÓ CSÍK) STÍLUS
   ============================================================ */

   .marquee-wrapper {
    width: 100%;
    background-color: #cc0000; /* RIX PIROS HÁTTÉR */
    color: white;
    overflow: hidden; /* Ami kilóg, azt levágjuk */
    white-space: nowrap; /* Tilos a sortörés */
    position: relative;
    z-index: 900; /* A videó fölött legyen, de a menü alatt */
    border-top: 1px solid #ff1a1a;
    border-bottom: 1px solid #990000;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    
    /* Magasság beállítás */
    height: 40px; 
    display: flex;
    align-items: center;
}

.marquee-content {
    display: inline-block;
    animation: marqueeScroll 20s linear infinite; /* 20 másodperc alatt ér körbe */
    padding-left: 100%; /* Kezdő pozíció */
}

.marquee-content span {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-right: 40px; /* Távolság a szövegek között */
    display: inline-block;
}

/* Kiemelt szövegrészek (pl. dőlttel vagy más színnel) */
.marquee-content .highlight {
    color: #000000; /* Fekete szöveg a piros alapon */
    background-color: white; /* Kis fehér háttér a szövegnek? Vagy csak simán fekete betű */
    padding: 2px 5px;
    background: transparent; /* Inkább csak szín legyen */
    color: #0d0d0d; /* Sötét fekete a piroson nagyon ütős */
}

/* ANIMÁCIÓ (Balra úszás) */
@keyframes marqueeScroll {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(-50%, 0, 0); /* Ha duplázva van a szöveg, akkor -50% elég */
    }
}

/* MOBIL NÉZET (Kicsit kisebb betűk) */
@media (max-width: 768px) {
    .marquee-wrapper { height: 30px; }
    .marquee-content span { font-size: 12px; letter-spacing: 1px; margin-right: 20px; }
}

/* ============================================================
   FUNKCIONÁLIS ELEMEK STÍLUSA (GDPR & TOAST)
   ============================================================ */

/* --- 1. GDPR COOKIE SÁV (MOBIL FIX) --- */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #0d0d0d;
    border-top: 2px solid #cc0000;
    padding: 20px;
    z-index: 10002;
    box-shadow: 0 -5px 20px rgba(0,0,0,0.8);
    
    /* A JAVÍTÁS: */
    /* Nem bottom: -100px, hanem lecsúsztatjuk a saját magasságával */
    transform: translateY(100%); 
    transition: transform 0.5s ease-out;
}

.cookie-banner.show-cookie {
    /* Visszahúzzuk a helyére */
    transform: translateY(0);
}

.cookie-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.cookie-content p {
    margin: 0;
    font-size: 13px;
    color: #ccc;
}

#accept-cookie-btn {
    background: white;
    color: black;
    border: none;
    padding: 10px 20px;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 12px;
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
    transition: 0.3s;
}

#accept-cookie-btn:hover {
    background: #cc0000;
    color: white;
}

/* Mobilra igazítás */
@media (max-width: 768px) {
    .cookie-content { flex-direction: column; text-align: center; }
    #accept-cookie-btn { width: 100%; }
}

/* --- 2. TOAST ÉRTESÍTÉSEK (Jobb felül) --- */
#toast-container {
    position: fixed;
    top: 100px; /* A menü alatt */
    right: 20px;
    z-index: 10003;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.toast {
    background-color: rgba(13, 13, 13, 0.95);
    border-left: 4px solid #cc0000; /* RIX Piros csík */
    color: white;
    padding: 15px 20px;
    border-radius: 4px;
    min-width: 250px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 600;
    
    /* Animáció */
    opacity: 0;
    transform: translateX(50px);
    animation: slideInToast 0.3s forwards, fadeOutToast 0.5s 3s forwards;
}

.toast i { color: #cc0000; font-size: 16px; }

@keyframes slideInToast {
    to { opacity: 1; transform: translateX(0); }
}

@keyframes fadeOutToast {
    to { opacity: 0; transform: translateY(-20px); }
}

/* ============================================================
   VIBE CHECK (VÉLEMÉNYEK) STÍLUS
   ============================================================ */

   #reviews {
    background-color: #0d0d0d;
    border-top: 1px solid #222;
    border-bottom: 1px solid #222;
    padding: 80px 20px;
}

.reviews-container {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 0 auto;
}

.review-card {
    background: #151515;
    border: 1px solid #333;
    border-radius: 12px;
    padding: 30px;
    width: 350px;
    text-align: left;
    transition: 0.3s;
    position: relative;
    overflow: hidden;
}

.review-card:hover {
    transform: translateY(-5px);
    border-color: #cc0000;
    box-shadow: 0 10px 30px rgba(204, 0, 0, 0.1);
}

/* Kis piros csík a kártya tetején */
.review-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 3px;
    background: #cc0000;
    transform: scaleX(0);
    transition: 0.4s;
    transform-origin: left;
}

.review-card:hover::before {
    transform: scaleX(1);
}

.review-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.reviewer-pic {
    width: 50px; height: 50px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    border: 2px solid #444;
}

.review-header h4 {
    margin: 0;
    color: white;
    font-size: 16px;
    font-weight: 700;
}

.stars {
    color: #cc0000; /* Piros csillagok */
    font-size: 14px;
    letter-spacing: 2px;
    margin-top: 5px;
}

.review-text {
    color: #bbb;
    font-size: 14px;
    line-height: 1.6;
    font-style: italic;
    margin-bottom: 20px !important;
}

.verified-badge {
    font-size: 11px;
    color: #555;
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: 600;
    text-transform: uppercase;
}

.verified-badge i {
    color: #00cc00; /* Zöld pipa */
}

/* Mobil nézet */
@media (max-width: 768px) {
    .review-card { width: 100%; margin-bottom: 20px; }
}

/* ============================================================
   DINAMIKUS VIBE CHECK (ŰRLAP ÉS CSILLAGOK)
   ============================================================ */

/* A "Írd meg a véleményed" gomb */
#write-review-btn {
    background: transparent;
    border: 1px solid #cc0000;
    color: #cc0000;
    padding: 10px 25px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 50px;
    transition: 0.3s;
    margin-bottom: 30px;
}

#write-review-btn:hover {
    background: #cc0000;
    color: white;
    box-shadow: 0 0 15px rgba(204, 0, 0, 0.4);
}

/* Az űrlap doboz (Rejtve kezd) */
.review-form-box {
    display: none; /* JS nyitja meg */
    background: #151515;
    border: 1px solid #333;
    padding: 30px;
    max-width: 500px;
    margin: 0 auto 40px auto;
    border-radius: 10px;
    text-align: center;
    animation: fadeIn 0.5s;
}

.review-form-box h3 {
    margin-top: 0;
    color: white;
    text-transform: uppercase;
}

/* Input mezők */
.review-form-box input, 
.review-form-box textarea {
    width: 100%;
    background: #222;
    border: 1px solid #444;
    color: white;
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 5px;
    font-family: 'Montserrat', sans-serif;
}

/* Csillag választó */
.star-rating-input {
    font-size: 24px;
    color: #444; /* Alapból szürke */
    margin-bottom: 20px;
    cursor: pointer;
}

.star-rating-input i {
    transition: 0.2s;
    padding: 0 5px;
}

.star-rating-input i.active,
.star-rating-input i:hover,
.star-rating-input i:hover ~ i {
    color: #cc0000; /* Piros ha aktív */
}

/* Küldés gomb */
.submit-review-btn {
    background: white;
    color: black;
    border: none;
    padding: 10px 30px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 4px;
}

.submit-review-btn:hover {
    background: #cc0000;
    color: white;
}

/* A generált kártyák stílusa */
.user-review-card {
    background: #111;
    border: 1px solid #222;
    padding: 20px;
    margin: 10px;
    border-radius: 8px;
    width: 300px;
    text-align: left;
    display: inline-block;
    vertical-align: top;
    position: relative;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.user-review-card h4 { margin: 0 0 5px 0; color: white; }
.user-review-card .stars { color: #cc0000; font-size: 12px; margin-bottom: 10px; }
.user-review-card p { color: #aaa; font-size: 13px; font-style: italic; }
.review-date { position: absolute; top: 15px; right: 15px; font-size: 10px; color: #555; }

/* --- VÉLEMÉNY TÖRLÉS GOMB --- */
.delete-review-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background: transparent;
    border: none;
    color: #444;
    cursor: pointer;
    font-size: 14px;
    transition: 0.3s;
    z-index: 10;
}

.delete-review-btn:hover {
    color: #cc0000; /* Piros lesz, ha ráviszed */
    transform: scale(1.1);
}

/* Hogy a dátum ne csússzon rá a törlés gombra, kicsit arrébb toljuk */
.user-review-card .review-date {
    right: 40px !important; /* Arrébb toljuk a dátumot */
}

/* ============================================================
   "ÖSSZES MEGTEKINTÉSE" FUNKCIÓ
   ============================================================ */

/* 1. Alapállapot (CSUKVA) - Csak az első sor látszik */
.reviews-container.collapsed {
    max-height: 450px; /* Kb. egy kártya magassága + margó */
    overflow: hidden; /* Ami kilóg, azt levágjuk */
    
    /* Ez a menő "Fade Out" effekt (Fekete köd az alján) */
    mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
}

/* 2. Kinyitott állapot (Nincs korlát) */
.reviews-container.expanded {
    max-height: none; /* Bármennyi lehet */
    mask-image: none;
    -webkit-mask-image: none;
}

/* 3. A Gomb Stílusa (Kicsit visszafogottabb, mint a fő gombok) */
.view-more-btn {
    background: transparent !important;
    border: 1px solid #333 !important;
    color: #888 !important;
    font-size: 12px !important;
    padding: 10px 20px !important;
    width: auto !important;
    min-width: unset !important;
    cursor: pointer;
    transition: 0.3s;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 4px !important;
}

.view-more-btn:hover {
    border-color: #cc0000 !important;
    color: white !important;
    background: rgba(204, 0, 0, 0.1) !important;
}

/* ============================================================
   GLITCH EFFEKT (CSAK MÁSOLNI KELL)
   ============================================================ */

/* A célpont: A hero szekcióban lévő H1 cím */
.hero-content h1 {
    position: relative;
    /* Fontos: inline-block, hogy a glitch rétegek pontosan akkorák legyenek, mint a szöveg */
    display: inline-block; 
}

/* Létrehozzuk a két "szellem" réteget a szöveg fölött és alatt */
.hero-content h1::before,
.hero-content h1::after {
    /* Ez a varázslat: a JS által beállított szöveget olvassa ki */
    content: attr(data-text); 
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Átlátszó háttér, hogy látszódjon mögötte a videó */
    background: transparent; 
    overflow: hidden;
}

/* --- 1. réteg: RIX PIROS elcsúszás --- */
.hero-content h1::before {
    left: 3px; /* Kicsit jobbra tolva */
    text-shadow: -2px 0 #cc0000; /* Piros árnyék balra */
    /* A modern "vágó" effekt */
    clip-path: inset(0 0 0 0); 
    /* Az animáció, ami rángatja */
    animation: glitch-anim-red 3s infinite linear alternate-reverse;
    opacity: 0.8;
    z-index: -1; /* A fő szöveg mögött */
}

/* --- 2. réteg: CIÁN/KÉK elcsúszás (kontrasztnak) --- */
.hero-content h1::after {
    left: -3px; /* Kicsit balra tolva */
    text-shadow: 2px 0 #00ffff; /* Kék árnyék jobbra */
    clip-path: inset(0 0 0 0);
    animation: glitch-anim-blue 2.5s infinite linear alternate-reverse;
    opacity: 0.8;
    z-index: -2; /* Még hátrébb */
}

/* --- ANIMÁCIÓK (A rángatózás matematikája) --- */

/* Piros réteg mozgása */
@keyframes glitch-anim-red {
    0% { clip-path: inset(80% 0 5% 0); transform: translate(-4px, 3px); }
    20% { clip-path: inset(10% 0 60% 0); transform: translate(2px, -3px); }
    40% { clip-path: inset(50% 0 30% 0); transform: translate(-3px, 2px); }
    60% { clip-path: inset(15% 0 75% 0); transform: translate(3px, -2px); }
    80% { clip-path: inset(0% 0 0% 0); transform: translate(0, 0); } /* Néha megnyugszik */
    100% { clip-path: inset(40% 0 20% 0); transform: translate(-2px, 4px); }
}

/* Kék réteg mozgása (más ritmusban) */
@keyframes glitch-anim-blue {
    0% { clip-path: inset(25% 0 70% 0); transform: translate(3px, -2px); }
    25% { clip-path: inset(65% 0 15% 0); transform: translate(-2px, 4px); }
    50% { clip-path: inset(5% 0 85% 0); transform: translate(4px, -3px); }
    75% { clip-path: inset(0% 0 0% 0); transform: translate(0, 0); } /* Néha megnyugszik */
    100% { clip-path: inset(35% 0 55% 0); transform: translate(-3px, 1px); }
}

/* ============================================================
   COMING SOON JELÖLÉS (PÓLÓKHOZ)
   ============================================================ */

   .coming-soon-badge {
    display: block;
    width: 85%;           /* Ugyanakkora szélesség, mint a gomboké */
    margin: 15px auto;    /* Középre igazítás */
    padding: 12px 0;      
    
    background-color: #1a1a1a; /* Sötét háttér */
    border: 1px dashed #444;   /* Szaggatott keret = "még nincs kész" érzés */
    color: #cc0000;            /* RIX Piros szöveg */
    
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;          /* Nagyon vastag betű */
    text-transform: uppercase;
    letter-spacing: 3px;       /* Széthúzott betűk */
    font-size: 14px;
    text-align: center;
    
    cursor: not-allowed;       /* Tiltott kurzor (áthúzott kör), ha ráviszed az egeret */
    opacity: 0.8;
    transition: 0.3s;
}

/* Ha ráviszed az egeret, kicsit kivilágosodik, de nem kattintható */
.coming-soon-badge:hover {
    border-color: #cc0000;
    opacity: 1;
    background-color: rgba(204, 0, 0, 0.05); /* Halvány piros háttér */
}

/* ============================================================
   FILM GRAIN (SZEMCSÉS) EFFEKT
   ============================================================ */

/* Létrehozunk egy fix réteget az oldal tetején */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Át lehessen kattintani rajta! */
    z-index: 99998; /* A preloader alatt, de minden más felett */
    opacity: 0.02; /* ÁTLÁTSZÓSÁG: Ha túl sok a zaj, vedd lejjebb (pl. 0.03) */
    
    /* Ez egy base64 kódolt zaj textúra (nem kell külső képfájl) */
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

/* =========================================
   KÍVÁNSÁGLISTA GOMB (SZÍGORÚAN KICSIRE VÉVE)
   ========================================= */
   .card button.wishlist-btn {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    background: rgba(0,0,0,0.7) !important;
    border: 1px solid #444 !important;
    border-radius: 50% !important;
    
    /* EZ IRÁNYÍTJA A MÉRETET: */
    width: 35px !important; 
    height: 35px !important;
    min-width: unset !important;
    margin: 0 !important;
    padding: 0 !important;
    
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    z-index: 10 !important;
}

.card button.wishlist-btn i {
    font-size: 15px !important; /* Kisebb szív ikon */
    color: white !important;
    margin: 0 !important;
    padding: 0 !important;
}

.card button.wishlist-btn:hover {
    border-color: #cc0000 !important;
    background: #111 !important;
}

.card button.wishlist-btn.active i {
    color: #cc0000 !important;
    font-weight: 900 !important;
}

#dynamic-product-list {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 30px !important;
    padding: 20px !important;
    width: 100% !important;
}

.btn-container {
    clear: both; /* Megállítja az elcsúszást */
    width: 100%;
    display: flex;
    justify-content: center;
}

/* DINAMIKUS LISTA JAVÍTÁSA */
#dynamic-product-list {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 20px !important;
    width: 100% !important;
    padding: 20px 10px !important;
    box-sizing: border-box !important;
}

/* ============================================================
   RIX FASHION - VÉGLEGES MOBIL FIX (768px alatt)
   ============================================================ */

   @media (max-width: 768px) {
    /* 1. KÁRTYA TÁROLÓ JAVÍTÁSA */
    #dynamic-product-list {
        gap: 15px !important;
        padding: 10px !important;
        justify-content: center !important;
    }

    /* 2. TERMÉK KÁRTYÁK */
    .card {
        width: 160px !important; /* Két kártya is elférjen egymás mellett */
        min-height: auto !important;
        padding: 10px !important;
        margin: 0 !important;
    }

    .card img {
        height: 150px !important; /* Fix magasság a képeknek, hogy ne ugráljanak */
        object-fit: cover;
    }

    .card h3 {
        font-size: 14px !important;
        margin: 5px 0 !important;
    }

    /* 3. GOMBOK A KÁRTYÁN */
    .card button {
        width: 100% !important;
        padding: 8px 5px !important;
        font-size: 10px !important;
        min-width: unset !important;
    }

    /* 4. KOSÁR DROPDOWN FIX (Hogy ne lógjon ki a képernyőből) */
    .cart-dropdown {
        width: 90vw !important; /* A kijelző 90%-át foglalja el */
        right: 5vw !important;
        left: 5vw !important;
        padding: 15px !important;
        position: fixed !important;
        top: 80px !important;
    }

    /* 5. A SECTION ALATTI GOMBOK (Pólókra tovább) */
    .btn-container {
        flex-direction: column !important; /* Egymás alá kerüljenek */
        align-items: center !important;
        gap: 15px !important;
    }

    .btn-main {
        width: 80% !important;
        margin: 5px 0 !important;
    }
}


.stock-info {
    font-size: 11px;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ============================================================
   TERMÉKKÉP HOVER FIX - ELŐLAP / HÁTLAP VÁLTÁS
   ============================================================ */

.product-image-wrapper {
    position: relative !important;
    width: 100% !important;
    height: 250px !important;
    overflow: hidden !important;
    border-radius: 8px !important;
    margin-bottom: 15px !important;
    background: #0d0d0d !important;
}

.product-image-wrapper img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    margin: 0 !important;
    display: block !important;
    transition: opacity 0.45s ease, transform 0.45s ease !important;
}

.product-image-wrapper .img-main {
    opacity: 1 !important;
    z-index: 1 !important;
    transform: scale(1) !important;
}

.product-image-wrapper .img-hover {
    opacity: 0 !important;
    z-index: 2 !important;
    transform: scale(1) !important;
}

.product-image-wrapper:hover .img-main {
    opacity: 0 !important;
    transform: scale(1.05) !important;
}

.product-image-wrapper:hover .img-hover {
    opacity: 1 !important;
    transform: scale(1.05) !important;
}

/* Mobilon kisebb képmagasság */
@media (max-width: 768px) {
    .product-image-wrapper {
        height: 150px !important;
    }

    .product-image-wrapper img {
        height: 100% !important;
    }
}

/* ============================================================
   TERMÉK KÁRTYA DARK GLASS EFFEKT
   ============================================================ */

.card {
    background: rgba(10, 10, 10, 0.78) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(10px);
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.65),
        inset 0 0 0 1px rgba(255, 255, 255, 0.03) !important;
}

.card:hover {
    border-color: rgba(204, 0, 0, 0.75) !important;
    box-shadow:
        0 25px 60px rgba(0, 0, 0, 0.8),
        0 0 35px rgba(204, 0, 0, 0.22),
        inset 0 0 0 1px rgba(255, 255, 255, 0.04) !important;
}

/* ============================================================
   FUTÓ SZÖVEG / WORLDWIDE SHIPPING CSÍK ELTÜNTETÉSE
   ============================================================ */

.marquee-wrapper {
    display: none !important;
}

/* ============================================================
   EGYSÉGES RIX DARK BACKGROUND - HERO UTÁNI TELJES OLDAL
   ============================================================ */

/* Az egész oldal alaphangulata */
body {
    background:
        radial-gradient(circle at 20% 18%, rgba(204, 0, 0, 0.16) 0%, transparent 28%),
        radial-gradient(circle at 82% 32%, rgba(255, 255, 255, 0.045) 0%, transparent 25%),
        radial-gradient(circle at 50% 85%, rgba(204, 0, 0, 0.10) 0%, transparent 35%),
        linear-gradient(135deg, #050505 0%, #0d0d0d 45%, #030303 100%) !important;
    background-attachment: fixed !important;
}

/* A hero alatti szekciók egységesen átlátszó/sötét háttérrel */
section:not(.hero),
#pulcsik,
#polok,
#reviews,
#idezet,
.quote-style {
    position: relative !important;
    background: transparent !important;
    border-top: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

/* Finom átmenet a szekciók között, hogy ne blokkoknak tűnjön */
section:not(.hero)::before,
#pulcsik::before,
#polok::before,
#reviews::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(circle at 50% 0%, rgba(204, 0, 0, 0.08) 0%, transparent 38%),
        linear-gradient(to bottom, rgba(255,255,255,0.025), transparent 18%, transparent 82%, rgba(0,0,0,0.22));
    opacity: 0.7;
}

/* A tartalom mindig a háttérréteg fölött legyen */
section:not(.hero) > *,
#pulcsik > *,
#polok > *,
#reviews > * {
    position: relative;
    z-index: 1;
}

/* A pulcsik / pólók közti erős csík eltüntetése */
#pulcsik,
#polok {
    border: none !important;
}

/* A blokkok közti vizuális elválasztók puhítása */
section {
    border: none !important;
}

/* Ha valahol még marad vékony vonal */
hr {
    border: none !important;
    background: transparent !important;
}

/* Idézet szekció fehér hátterének felülírása, hogy illeszkedjen */
section#idezet.quote-style {
    background: transparent !important;
    box-shadow: none !important;
}

/* Az idézet szövege sötét háttéren is jól látszódjon */
.quote-style h2.hidden-scroll {
    color: #ffffff !important;
    text-shadow: 0 0 20px rgba(204, 0, 0, 0.35), 3px 3px 8px rgba(0,0,0,0.9) !important;
}

.quote-style p.hidden-scroll {
    color: #bbbbbb !important;
    text-shadow: 2px 2px 6px rgba(0,0,0,0.9) !important;
}

/* Footer is jobban simuljon bele az oldalba */
.rix-footer {
    background: rgba(5, 5, 5, 0.92) !important;
    border-top: 1px solid rgba(204, 0, 0, 0.18) !important;
}
/* ============================================================
   RIX EGYSÉGES HÁTTÉR FIX - BLOKKOK KÖZTI CSÍKOK ELTÜNTETÉSE
   ============================================================ */

/* Az egész oldal egységes sötét-vörös háttéren fusson */
body {
    background:
        radial-gradient(circle at 18% 20%, rgba(204, 0, 0, 0.16) 0%, transparent 28%),
        radial-gradient(circle at 85% 35%, rgba(120, 0, 0, 0.12) 0%, transparent 32%),
        radial-gradient(circle at 50% 90%, rgba(204, 0, 0, 0.10) 0%, transparent 38%),
        linear-gradient(135deg, #050505 0%, #0b0b0b 45%, #030303 100%) !important;
    background-attachment: fixed !important;
}

/* Hero után minden szekció legyen átlátszó, ne saját háttérrel menjen */
section,
#pulcsik,
#polok,
#reviews,
#idezet,
.quote-style,
.reviews-container,
.about-content,
.content-container {
    background: transparent !important;
    border-top: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

/* A szekciók ne hozzanak külön sávokat */
section {
    position: relative !important;
    margin: 0 !important;
    padding-top: 80px;
    padding-bottom: 80px;
}

/* Régi overlay rétegek kikapcsolása, ezek okozhatnak vízszintes töréseket */
#pulcsik::before,
#pulcsik::after,
#polok::before,
#polok::after,
#reviews::before,
#reviews::after,
section::before,
section::after {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* Kivéve a hero glitch / egyedi elemek ne sérüljenek */
.hero::before,
.hero::after,
.hero-content h1::before,
.hero-content h1::after {
    background: transparent;
}

/* Vibe Check rész külön háttér törlése */
#reviews {
    background: transparent !important;
    border: none !important;
}

/* Idézet rész fehér/szürke hátterének teljes kiütése */
section#idezet.quote-style {
    background: transparent !important;
    box-shadow: none !important;
}

/* Footer finoman olvadjon bele, ne legyen kemény csík */
.rix-footer {
    background: rgba(5, 5, 5, 0.72) !important;
    border-top: none !important;
    box-shadow: none !important;
}

/* Ha bármelyik elem még vízszintes vonalat rajzol */
hr,
.marquee-wrapper,
.marquee-content {
    display: none !important;
}

/* A termékszekciók és vélemények között ne legyen sávos eltérés */
#pulcsik + section,
#polok + section,
#reviews + section {
    margin-top: 0 !important;
    border-top: none !important;
}

/* Kártyák maradjanak szépen elkülönítve, de a háttér ne törjön meg */
.card,
.review-card,
.user-review-card {
    background: rgba(10, 10, 10, 0.78) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(8px);
}

/* ============================================================
   RIX VÉGLEGES HÁTTÉR + HERO VIDEÓ FIX
   ============================================================ */

/* Alap oldal háttér: sötét, vörös, egységes */
body {
    background:
        radial-gradient(circle at 18% 20%, rgba(204, 0, 0, 0.16) 0%, transparent 28%),
        radial-gradient(circle at 85% 35%, rgba(120, 0, 0, 0.12) 0%, transparent 32%),
        radial-gradient(circle at 50% 90%, rgba(204, 0, 0, 0.10) 0%, transparent 38%),
        linear-gradient(135deg, #050505 0%, #0b0b0b 45%, #030303 100%) !important;
    background-attachment: fixed !important;
    position: relative;
    overflow-x: hidden;
}

/* ============================================================
   HERO VIDEÓ - TISZTA, NINCS RAJTA HÁTTÉR ANIMÁCIÓ
   ============================================================ */

.hero {
    width: 100%;
    height: 100vh;
    position: relative !important;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background: transparent !important;
    isolation: isolate;
}

/* A videó ne legyen sötétítve semmilyen régi szabálytól */
.hero .back-video,
.back-video,
.hero video {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    z-index: 0 !important;

    filter: none !important;
    opacity: 1 !important;
    mix-blend-mode: normal !important;
}

/* Hero overlay teljes kikapcsolás */
.hero::before,
.hero::after {
    content: none !important;
    display: none !important;
    background: none !important;
    opacity: 0 !important;
}

/* Hero szöveg a videó fölött */
.hero-content {
    position: relative !important;
    z-index: 5 !important;
    text-align: center;
}

/* A glitch rétegek maradhatnak, de ne tegyenek sötét hátteret */
.hero-content h1::before,
.hero-content h1::after {
    background: transparent !important;
}

/* ============================================================
   HERO UTÁNI SZEKCIÓK - EGYSÉGES HÁTTÉR, NINCS CSÍK
   ============================================================ */

section,
#pulcsik,
#polok,
#reviews,
#idezet,
.quote-style,
.reviews-container,
.about-content,
.content-container {
    background: transparent !important;
    border-top: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

/* Szekciók közti sávok eltüntetése */
section {
    position: relative !important;
    margin: 0 !important;
    padding-top: 80px;
    padding-bottom: 80px;
    border: none !important;
}

/* Régi pulcsi/póló overlayek kiütése, mert ezek okozhatnak sávokat */
#pulcsik::before,
#pulcsik::after,
#polok::before,
#polok::after,
#reviews::before,
#reviews::after {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* Marquee / worldwide shipping csík eltüntetése */
.marquee-wrapper,
.marquee-content {
    display: none !important;
}

/* HR csíkok eltüntetése */
hr {
    display: none !important;
    border: none !important;
    background: transparent !important;
}

/* Idézet rész sötét háttérhez igazítva */
section#idezet.quote-style {
    background: transparent !important;
    box-shadow: none !important;
}

.quote-style h2.hidden-scroll {
    color: #ffffff !important;
    text-shadow: 0 0 20px rgba(204, 0, 0, 0.35), 3px 3px 8px rgba(0,0,0,0.9) !important;
}

.quote-style p.hidden-scroll {
    color: #bbbbbb !important;
    text-shadow: 2px 2px 6px rgba(0,0,0,0.9) !important;
}

/* Footer is olvadjon bele */
.rix-footer {
    background: rgba(5, 5, 5, 0.72) !important;
    border-top: none !important;
    box-shadow: none !important;
}

/* ============================================================
   ANIMÁLT HÁTTÉR CSAK A HERO ALATTI RÉSZEKRE
   ============================================================ */

/* Az egész oldalra tett body glow kikapcsolása */
body::after {
    content: none !important;
    display: none !important;
}

/* Csak a hero utáni szekciók kapnak mozgó glow-t */
section:not(.hero) {
    position: relative !important;
    overflow: hidden !important;
    background: transparent !important;
    z-index: 1;
}

/* Mozgó vörös-fekete glow */
section:not(.hero)::after {
    content: "";
    position: absolute;
    inset: -25%;
    pointer-events: none;
    z-index: 0;

    background:
        radial-gradient(circle at 15% 20%, rgba(204, 0, 0, 0.16) 0%, transparent 22%),
        radial-gradient(circle at 85% 30%, rgba(120, 0, 0, 0.12) 0%, transparent 26%),
        radial-gradient(circle at 50% 75%, rgba(204, 0, 0, 0.10) 0%, transparent 28%),
        radial-gradient(circle at 70% 85%, rgba(255, 255, 255, 0.025) 0%, transparent 18%);

    filter: blur(85px);
    opacity: 0.65;
    animation: rixSectionBackgroundFlow 22s ease-in-out infinite alternate;
}

/* Tartalom mindig az animált háttér fölött */
section:not(.hero) > * {
    position: relative;
    z-index: 2;
}

/* Kártyák is biztosan fölötte maradjanak */
.card,
.review-card,
.user-review-card {
    position: relative;
    z-index: 3;
    background: rgba(10, 10, 10, 0.78) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(8px);
}

/* Animáció mozgása */
@keyframes rixSectionBackgroundFlow {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    25% {
        transform: translate3d(-20px, 15px, 0) scale(1.05);
    }

    50% {
        transform: translate3d(15px, -15px, 0) scale(1.08);
    }

    75% {
        transform: translate3d(-10px, 20px, 0) scale(1.04);
    }

    100% {
        transform: translate3d(10px, -10px, 0) scale(1.07);
    }
}

/* ============================================================
   TERMÉKKÉP HOVER FIX - ELŐLAP / HÁTLAP VÁLTÁS
   ============================================================ */

.product-image-wrapper {
    position: relative !important;
    width: 100% !important;
    height: 250px !important;
    overflow: hidden !important;
    border-radius: 8px !important;
    margin-bottom: 15px !important;
    background: #0d0d0d !important;
}

.product-image-wrapper img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    margin: 0 !important;
    display: block !important;
    transition: opacity 0.45s ease, transform 0.45s ease !important;
}

.product-image-wrapper .img-main {
    opacity: 1 !important;
    z-index: 1 !important;
    transform: scale(1) !important;
}

.product-image-wrapper .img-hover {
    opacity: 0 !important;
    z-index: 2 !important;
    transform: scale(1) !important;
}

.product-image-wrapper:hover .img-main {
    opacity: 0 !important;
    transform: scale(1.05) !important;
}

.product-image-wrapper:hover .img-hover {
    opacity: 1 !important;
    transform: scale(1.05) !important;
}

/* Mobilon kisebb képmagasság */
@media (max-width: 768px) {
    .product-image-wrapper {
        height: 150px !important;
    }

    .product-image-wrapper img {
        height: 100% !important;
    }
}

/* ============================================================
   RIX PREMIUM SIZE GUIDE MODAL
   ============================================================ */

.size-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 20000;
    background: rgba(0, 0, 0, 0.82);
    backdrop-filter: blur(8px);
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.size-modal-overlay.active {
    display: flex;
    animation: sizeFadeIn 0.25s ease;
}

.size-modal-box {
    width: 100%;
    max-width: 950px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    border-radius: 22px;
    padding: 30px;
    background:
        radial-gradient(circle at top left, rgba(204, 0, 0, 0.16), transparent 30%),
        radial-gradient(circle at bottom right, rgba(204, 0, 0, 0.10), transparent 30%),
        linear-gradient(145deg, rgba(10,10,10,0.96), rgba(20,20,20,0.94));
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow:
        0 25px 80px rgba(0,0,0,0.7),
        0 0 45px rgba(204,0,0,0.12),
        inset 0 0 0 1px rgba(255,255,255,0.03);
}

.size-modal-close {
    position: absolute;
    top: 16px;
    right: 18px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.04);
    color: #fff;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    transition: 0.25s ease;
}

.size-modal-close:hover {
    background: rgba(204, 0, 0, 0.18);
    border-color: rgba(204, 0, 0, 0.5);
    transform: rotate(90deg) scale(1.05);
}

.size-modal-top {
    text-align: center;
    margin-bottom: 25px;
}

.size-modal-mini {
    color: #cc0000;
    font-size: 12px;
    letter-spacing: 4px;
    font-weight: 800;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.size-modal-top h2 {
    margin: 0;
    font-size: 38px;
    font-weight: 900;
    letter-spacing: 2px;
    color: #fff;
    text-transform: uppercase;
    text-shadow: 0 0 18px rgba(204, 0, 0, 0.18);
}

.size-modal-sub {
    max-width: 680px;
    margin: 14px auto 0 auto;
    color: #a9a9a9;
    font-size: 14px;
    line-height: 1.6;
}

.size-switcher {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 25px;
    flex-wrap: wrap;
}

.size-tab {
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.04);
    color: #bbb;
    padding: 12px 26px;
    border-radius: 999px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: 0.25s ease;
    min-width: 150px;
}

.size-tab:hover {
    color: #fff;
    border-color: rgba(204, 0, 0, 0.4);
    background: rgba(204, 0, 0, 0.10);
}

.size-tab.active {
    color: #fff;
    background: linear-gradient(135deg, #cc0000 0%, #8a0000 100%);
    border-color: rgba(204, 0, 0, 0.9);
    box-shadow: 0 10px 30px rgba(204, 0, 0, 0.25);
}

.size-tab-content {
    display: none;
}

.size-tab-content.active {
    display: block;
    animation: sizeContentFade 0.25s ease;
}

.size-table-wrap {
    width: 100%;
    overflow-x: auto;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.06);
    background: rgba(255,255,255,0.02);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);
}

.premium-size-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 700px;
}

.premium-size-table thead tr {
    background: linear-gradient(90deg, rgba(204, 0, 0, 0.25), rgba(255,255,255,0.04));
}

.premium-size-table th {
    padding: 18px 14px;
    text-align: center;
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.premium-size-table td {
    padding: 16px 14px;
    text-align: center;
    color: #d7d7d7;
    font-size: 14px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.premium-size-table tbody tr {
    transition: 0.25s ease;
}

.premium-size-table tbody tr:nth-child(even) {
    background: rgba(255,255,255,0.02);
}

.premium-size-table tbody tr:hover {
    background: rgba(204, 0, 0, 0.08);
    box-shadow: inset 0 0 0 999px rgba(204, 0, 0, 0.04);
}

.premium-size-table tbody tr td:first-child {
    color: #fff;
    font-weight: 800;
    letter-spacing: 1px;
}

.size-modal-note {
    margin-top: 18px;
    padding: 14px 16px;
    border-radius: 12px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    color: #9e9e9e;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.size-modal-note span {
    color: #cc0000;
    font-size: 18px;
    font-weight: 900;
}

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

@keyframes sizeContentFade {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mobil optimalizálás */
@media (max-width: 768px) {
    .size-modal-box {
        padding: 22px 14px 16px 14px;
        border-radius: 16px;
    }

    .size-modal-top h2 {
        font-size: 26px;
    }

    .size-modal-sub {
        font-size: 13px;
    }

    .size-tab {
        width: 100%;
        min-width: unset;
    }

    .premium-size-table th,
    .premium-size-table td {
        padding: 12px 10px;
        font-size: 12px;
    }

    .size-modal-note {
        font-size: 12px;
        align-items: flex-start;
    }
}

/* ============================================================
   RIX MÉRETTÁBLÁZAT DESIGN - CSAK KINÉZET
   ============================================================ */

#sizeModal {
    background: rgba(0, 0, 0, 0.88) !important;
    backdrop-filter: blur(8px);
    z-index: 30000 !important;
}

#sizeModal .modal-content {
    background:
        radial-gradient(circle at top left, rgba(204, 0, 0, 0.22), transparent 34%),
        radial-gradient(circle at bottom right, rgba(204, 0, 0, 0.12), transparent 35%),
        linear-gradient(145deg, #080808 0%, #171717 100%) !important;
    border: 1px solid rgba(204, 0, 0, 0.45) !important;
    border-radius: 22px !important;
    box-shadow:
        0 30px 90px rgba(0,0,0,0.85),
        0 0 45px rgba(204,0,0,0.18),
        inset 0 0 0 1px rgba(255,255,255,0.04) !important;
    max-width: 760px !important;
    padding: 38px !important;
    color: white !important;
}

#sizeModal h3 {
    font-size: 34px !important;
    font-weight: 900 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    color: white !important;
    margin-bottom: 12px !important;
    text-shadow: 0 0 20px rgba(204,0,0,0.35);
}

#sizeModal p {
    color: #aaa !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    margin-bottom: 25px !important;
}

#sizeModal .close-btn {
    color: #888 !important;
    transition: 0.25s ease !important;
}

#sizeModal .close-btn:hover {
    color: #cc0000 !important;
    transform: rotate(90deg) scale(1.1);
}

/* Kalkulátor doboz */
.size-calculator {
    background: rgba(255,255,255,0.035) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 18px !important;
    padding: 24px !important;
    margin-bottom: 25px !important;
    box-shadow: inset 0 0 25px rgba(0,0,0,0.45);
}

.size-calculator label {
    display: flex !important;
    justify-content: space-between !important;
    color: #aaa !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    margin-bottom: 8px !important;
    text-transform: uppercase;
    letter-spacing: 1px;
}

#height-val,
#weight-val {
    color: #cc0000 !important;
    font-weight: 900 !important;
}

.size-calculator input[type="range"] {
    width: 100% !important;
    accent-color: #cc0000 !important;
    margin-bottom: 18px !important;
}

#recommended-size {
    margin-top: 16px !important;
    color: white !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    letter-spacing: 1px !important;
}

#recommended-size span {
    color: #cc0000 !important;
    font-size: 30px !important;
    text-shadow: 0 0 18px rgba(204,0,0,0.55);
}

/* Táblázat */
.size-table {
    width: 100% !important;
    border-collapse: collapse !important;
    overflow: hidden !important;
    border-radius: 16px !important;
    background: rgba(255,255,255,0.025) !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
}

.size-table thead {
    background: linear-gradient(90deg, rgba(204,0,0,0.45), rgba(255,255,255,0.04)) !important;
}

.size-table th {
    padding: 16px 12px !important;
    color: white !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

.size-table td {
    padding: 15px 12px !important;
    color: #d6d6d6 !important;
    font-size: 14px !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}

.size-table tbody tr:nth-child(even) {
    background: rgba(255,255,255,0.025) !important;
}

.size-table tbody tr:hover {
    background: rgba(204,0,0,0.10) !important;
}

.size-table td:first-child {
    color: white !important;
    font-weight: 900 !important;
}

/* Mobil */
@media (max-width: 768px) {
    #sizeModal .modal-content {
        width: 92% !important;
        padding: 24px 16px !important;
        margin: 20% auto !important;
    }

    #sizeModal h3 {
        font-size: 24px !important;
    }

    .size-table th,
    .size-table td {
        padding: 10px 6px !important;
        font-size: 11px !important;
    }
}

/* ============================================================
   MÉRETTÁBLÁZAT POZÍCIÓ FIX - FELJEBB HOZÁS
   ============================================================ */

#sizeModal {
    padding-top: 20px !important;
    align-items: flex-start !important;
}

#sizeModal .modal-content {
    margin: 30px auto 20px auto !important;
    max-height: calc(100vh - 60px) !important;
    overflow-y: auto !important;
    padding: 28px !important;
}

/* Kevesebb hely a szövegek között */
#sizeModal h3 {
    margin-top: 0 !important;
    margin-bottom: 8px !important;
}

#sizeModal p {
    margin-bottom: 16px !important;
}

/* Kalkulátor doboz kisebb legyen */
.size-calculator {
    padding: 18px !important;
    margin-bottom: 18px !important;
}

.size-calculator input[type="range"] {
    margin-bottom: 10px !important;
}

#recommended-size {
    margin-top: 8px !important;
}

/* Táblázat kicsit kompaktabb */
.size-table th {
    padding: 12px 10px !important;
}

.size-table td {
    padding: 11px 10px !important;
}

/* Mobilon még feljebb */
@media (max-width: 768px) {
    #sizeModal .modal-content {
        margin: 15px auto 15px auto !important;
        max-height: calc(100vh - 30px) !important;
        padding: 20px 14px !important;
    }

    #sizeModal h3 {
        font-size: 22px !important;
    }

    #sizeModal p {
        font-size: 12px !important;
        margin-bottom: 12px !important;
    }

    .size-calculator {
        padding: 14px !important;
        margin-bottom: 14px !important;
    }
}