/* ==========================================================================
   MARKETPLACC MASTER STYLESHEET (TELJES FÁJL)
   ========================================================================== */

:root {
  --mp-primary: #0284c7;
  --mp-primary-hover: #0369a1;
  --mp-bg-light: #f8fafc;
  --mp-border: #cbd5e1;
  --mp-text: #0f172a;
  --mp-radius: 8px;
  --mp-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  --mp-shadow-hover: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* --- Keresőmező modernizálása --- */
.search-form, 
#search, 
.header-search {
  position: relative;
  display: flex;
  align-items: center;
}

.search-form input[type="search"],
.search-form input[type="text"],
#search input[name="search"] {
  background-color: var(--mp-bg-light) !important;
  border: 1px solid var(--mp-border) !important;
  border-radius: var(--mp-radius) !important;
  padding: 10px 16px 10px 42px !important;
  font-size: 14px !important;
  color: var(--mp-text) !important;
  box-shadow: var(--mp-shadow) !important;
  transition: all 0.25s ease-in-out !important;
  width: 100% !important;
}

.search-form input[type="search"]:focus,
.search-form input[type="text"]:focus,
#search input[name="search"]:focus {
  background-color: #ffffff !important;
  border-color: var(--mp-primary) !important;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15), var(--mp-shadow-hover) !important;
  outline: none !important;
}

.search-form::before,
#search::before {
  content: "";
  position: absolute;
  left: 14px;
  width: 18px;
  height: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
  z-index: 2;
}

/* Nagyító ikon a gombban a kék nyíl helyett */
.search-form button[type="submit"],
#search button,
.search-form .submit {
  background-color: var(--mp-primary) !important;
  border: none !important;
  border-radius: 0 var(--mp-radius) var(--mp-radius) 0 !important;
  color: transparent !important;
  position: relative !important;
  padding: 0 18px !important;
  transition: background-color 0.2s ease !important;
  cursor: pointer !important;
}

.search-form button[type="submit"]::after,
#search button::after,
.search-form .submit::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 18px;
  height: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ffffff'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2.2' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
}

.search-form button[type="submit"]:hover,
#search button:hover {
  background-color: var(--mp-primary-hover) !important;
}

/* --- Kosár mező modernizálása (Lekerekített szélű, árnyékolt box) --- */
.box-cart, 
#cart, 
.header-cart,
#custom-styled-sidebar-cart {
  background-color: var(--mp-bg-light) !important;
  border: 1px solid var(--mp-border) !important;
  border-radius: var(--mp-radius) !important;
  box-shadow: var(--mp-shadow) !important;
  transition: all 0.25s ease-in-out !important;
}

.box-cart:hover, 
#cart:hover,
.header-cart:hover,
#custom-styled-sidebar-cart:hover {
  background-color: #ffffff !important;
  border-color: var(--mp-primary) !important;
  box-shadow: var(--mp-shadow-hover) !important;
}

.box-cart .icon, 
#cart .cart-icon {
  fill: var(--mp-primary) !important;
}

.box-cart .price, 
#cart .price {
  font-weight: 600 !important;
  color: var(--mp-text) !important;
}

/* ==========================================================================
   Kapcsolódó termékek végtelenített automatikus görgetője
   ========================================================================== */

/* A teljes kapcsolódó termékek konténer beállítása */
#productsRelated {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    margin-bottom: 35px;
    clear: both;
}

/* Egyedi címsor felirat a kapcsolódó termékek felett */
.mp-related-title {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin-bottom: 15px !important;
    display: block !important;
}

/* A termékkártyák hordozójának átalakítása saját, nem görgethető track-konténerré */
#productsRelated .products-block,
#productsRelated .row,
#productsRelated .product-widgets-wrapper {
    display: block !important;
    overflow: hidden !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    position: relative !important;
    padding-bottom: 15px;
    margin-left: 0 !important;
    margin-right: 0 !important;
    scroll-behavior: auto !important;
    -webkit-overflow-scrolling: auto !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

/* A saját végtelenített belső pálya */
#productsRelated .mp-infinite-track {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 15px !important;
    width: max-content !important;
    align-items: stretch !important;
    will-change: transform !important;
}

/* Manuális görgetősáv elrejtése minden böngészőben */
#productsRelated .products-block::-webkit-scrollbar,
#productsRelated .row::-webkit-scrollbar,
#productsRelated .product-widgets-wrapper::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* Egyes termékkártyák fix szélessége a sorban */
#productsRelated .product,
#productsRelated .p-element,
#productsRelated [class*="col-"] {
    flex: 0 0 240px !important;
    max-width: 240px !important;
    width: 240px !important;
    min-width: 240px !important;
    float: none !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Rövid leírás és felesleges elemek teljes elrejtése a kosár gomb alól */
#productsRelated .p-desc,
#productsRelated .p-short-description,
#productsRelated .description,
#productsRelated .product-description,
#productsRelated [data-testid="productCardShortDescr"],
#productsAlternative .p-desc,
#productsAlternative .p-short-description,
#productsAlternative .description,
#productsAlternative .product-description,
#productsAlternative [data-testid="productCardShortDescr"] {
    display: none !important;
}
/* A gomb alatti tartalmak elrejtése, hogy a kosárba/bővebben gomb legyen a kártya alja */
#productsRelated .p-tools > *:nth-child(n+2),
#productsRelated .p-bottom > *:nth-child(n+2),
#productsRelated .p-bottom-no-buttons > *:nth-child(n+2) {
    display: none !important;
}

/* Mobil-specifikus finomhangolás */
@media (max-width: 767px) {
    #productsRelated .product,
    #productsRelated .p-element,
    #productsRelated [class*="col-"] {
        flex: 0 0 180px !important;
        max-width: 180px !important;
        width: 180px !important;
        min-width: 180px !important;
    }
}

/* Kapcsolódó és Alternatív termékblokkok, valamint az ÖSSZES kártya láthatóságának kényszerítése */
#productsRelated, 
#productsAlternative {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Minden létező kártya osztály kijelölése a Shoptet gyári elrejtésének kijátszására */
#productsRelated .product,
#productsAlternative .product,
#productsRelated .product-item,
#productsAlternative .product-item,
#productsRelated .related-sm-screen-hide,
#productsAlternative .related-sm-screen-hide,
#productsRelated [class*="col-"],
#productsAlternative [class*="col-"] {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}
/* "Összes kapcsolódó termék megjelenítése" sáv elrejtése mobilon */
@media (max-width: 767px) {
    #productsRelated .browse-p {
        display: none !important;
    }
}
/* ==========================================================================
   CHECKOUT – MODERN ADATMEZŐK
   Csak a 2. rendelési lépés
   ========================================================================== */

form#order-form[action*="Step2Validate"] .form-group.smart-label-wrapper .form-control {
    border: 1px solid #d6dce5 !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06) !important;
    padding: 10px 12px !important;
    min-height: 42px !important;
    font-size: 14px !important;
    color: #1f2937 !important;
    outline: none !important;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease !important;
    box-sizing: border-box !important;
}

form#order-form[action*="Step2Validate"] .form-group.smart-label-wrapper .form-control:focus {
    border-color: #94a3b8 !important;
    box-shadow:
        0 0 0 3px rgba(148, 163, 184, 0.16),
        0 3px 8px rgba(15, 23, 42, 0.08) !important;
    background: #ffffff !important;
}

form#order-form[action*="Step2Validate"] .form-group.smart-label-wrapper .form-control::placeholder {
    color: #94a3b8 !important;
}

form#order-form[action*="Step2Validate"] .form-group.smart-label-wrapper select.form-control {
    min-height: 42px !important;
    border-radius: 8px !important;
    padding-left: 12px !important;
    padding-right: 36px !important;
    cursor: pointer !important;
}

form#order-form[action*="Step2Validate"] .form-group.smart-label-wrapper .form-control.short {
    box-sizing: border-box !important;
}

form#order-form[action*="Step2Validate"] .phone-form-group .form-control {
    border-radius: 8px !important;
}

form#order-form[action*="Step2Validate"] .form-group.smart-label-wrapper .form-control:disabled {
    background: #f8fafc !important;
    color: #64748b !important;
    cursor: default !important;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04) !important;
}

@media (max-width: 768px) {
    form#order-form[action*="Step2Validate"] .form-group.smart-label-wrapper .form-control {
        border-radius: 8px !important;
        min-height: 44px !important;
        font-size: 15px !important;
        padding: 10px 12px !important;
    }
}
/* ==========================================================================
   DESKTOP POPUP KOSÁR – FEJLÉC ALÁ IGAZÍTÁS
   Mobilon nincs módosítás.
   ========================================================================== */

@media (min-width: 769px) {
    #cart-wrapper {
        padding-top: 43px !important;
    }
}
/* ==========================================================================
   CHECKOUT STEPPER – MODERN FOLYAMATJELZŐ
   Kosár / Fizetés & Szállítás / Személyes adatok

   Működik:
   - /kosar/
   - /rendeles/lepes-1/
   - /rendeles/lepes-2/
   - termékoldali felugró kosár

   Az állapotot a Shoptet natív .active / .completed classai adják.
   ========================================================================== */


/* --------------------------------------------------------------------------
   SHOPTET GYÁRI SZÁMOZÁS ÉS BELSŐ FORMÁZÁS KIKAPCSOLÁSA
   -------------------------------------------------------------------------- */

ol.cart-header > li.step > strong > span::before,
ol.cart-header > li.step > a > span::before {
    content: none !important;
}

ol.cart-header > li.step > strong > span,
ol.cart-header > li.step > a > span {
    display: inline !important;

    width: auto !important;
    height: auto !important;

    padding: 0 !important;
    margin: 0 !important;

    background: transparent !important;

    border: 0 !important;
    border-radius: 0 !important;

    box-shadow: none !important;

    color: inherit !important;

    line-height: 1.4 !important;
}


/* --------------------------------------------------------------------------
   TELJES STEPPER
   -------------------------------------------------------------------------- */

ol.cart-header {
    display: flex !important;

    align-items: stretch !important;

    gap: 10px !important;

    margin: 0 !important;
    padding: 0 !important;

    list-style: none !important;
}


/* --------------------------------------------------------------------------
   EGYES LÉPÉSEK
   -------------------------------------------------------------------------- */

ol.cart-header > li.step {
    flex: 1 1 0 !important;

    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;

    background: transparent !important;
}


/* --------------------------------------------------------------------------
   LÉPÉS KÁRTYA
   -------------------------------------------------------------------------- */

ol.cart-header > li.step > strong,
ol.cart-header > li.step > a {
    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    width: 100% !important;

    min-height: 56px !important;

    box-sizing: border-box !important;

    padding: 12px 18px !important;

    border: 1px solid #d7dee8 !important;

    border-radius: 10px !important;

    background: #f3f5f8 !important;

    color: #64748b !important;

    text-align: center !important;

    text-decoration: none !important;

    font-size: 15px !important;

    font-weight: 600 !important;

    line-height: 1.4 !important;

    box-shadow:
        0 2px 6px rgba(15, 23, 42, 0.05) !important;

    margin: 0 !important;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        box-shadow 0.2s ease !important;
}


/* --------------------------------------------------------------------------
   SAJÁT LÉPÉSSZÁM
   A Shoptet eredeti counterét már kikapcsoltuk.
   -------------------------------------------------------------------------- */

ol.cart-header > li.step-1 > strong::before,
ol.cart-header > li.step-1 > a::before {
    content: "1." !important;
}

ol.cart-header > li.step-2 > strong::before,
ol.cart-header > li.step-2 > a::before {
    content: "2." !important;
}

ol.cart-header > li.step-3 > strong::before,
ol.cart-header > li.step-3 > a::before {
    content: "3." !important;
}

ol.cart-header > li.step-1 > strong::before,
ol.cart-header > li.step-1 > a::before,
ol.cart-header > li.step-2 > strong::before,
ol.cart-header > li.step-2 > a::before,
ol.cart-header > li.step-3 > strong::before,
ol.cart-header > li.step-3 > a::before {
    display: inline-block !important;

    margin-right: 8px !important;

    color: inherit !important;

    font-weight: 700 !important;

    flex: 0 0 auto !important;
}


/* --------------------------------------------------------------------------
   AKTUÁLIS LÉPÉS
   -------------------------------------------------------------------------- */

ol.cart-header > li.step.active > strong,
ol.cart-header > li.step.active > a {
    background: #16a34a !important;

    border-color: #16a34a !important;

    color: #ffffff !important;

    box-shadow:
        0 5px 14px rgba(22, 163, 74, 0.20) !important;
}


/* --------------------------------------------------------------------------
   ELKÉSZÜLT LÉPÉS
   -------------------------------------------------------------------------- */

ol.cart-header > li.step.completed > strong,
ol.cart-header > li.step.completed > a {
    background: #eaf7ef !important;

    border-color: #22a552 !important;

    color: #187a3d !important;

    box-shadow:
        0 3px 9px rgba(34, 165, 82, 0.10) !important;
}


/* --------------------------------------------------------------------------
   ELKÉSZÜLT LÉPÉS – PIPA
   -------------------------------------------------------------------------- */

ol.cart-header > li.step.completed > strong::after,
ol.cart-header > li.step.completed > a::after {
    content: "✓" !important;

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    width: 22px !important;

    height: 22px !important;

    margin-left: 8px !important;

    border-radius: 50% !important;

    background: #22a552 !important;

    color: #ffffff !important;

    font-size: 13px !important;

    font-weight: 800 !important;

    line-height: 1 !important;

    flex: 0 0 22px !important;
}


/* --------------------------------------------------------------------------
   MÉG HÁTRALÉVŐ LÉPÉS
   -------------------------------------------------------------------------- */

ol.cart-header > li.step:not(.active):not(.completed) > strong,
ol.cart-header > li.step:not(.active):not(.completed) > a {
    background: #f3f5f8 !important;

    border-color: #e1e6ed !important;

    color: #94a3b8 !important;

    box-shadow:
        0 1px 3px rgba(15, 23, 42, 0.03) !important;
}


/* --------------------------------------------------------------------------
   MOBIL
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {

    ol.cart-header {
        flex-direction: column !important;

        gap: 8px !important;
    }

    ol.cart-header > li.step {
        width: 100% !important;

        flex: 0 0 auto !important;
    }

    ol.cart-header > li.step > strong,
    ol.cart-header > li.step > a {
        min-height: 54px !important;

        padding: 13px 15px !important;

        font-size: 14px !important;

        border-radius: 9px !important;
    }

}

/* ==========================================================================
   KUPON – VÉGLEGES MEGJELENÉS
   Normál kosár + felugró kosár
   ========================================================================== */

/* KUPON SOR */

.discount-coupon form[data-testid="formDiscountCoupon"] {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 14px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    height: 50px !important;
}


/* KUPONMEZŐ */

.discount-coupon #discountCouponCode {
    flex: 0 0 268px !important;

    width: 268px !important;
    min-width: 268px !important;
    max-width: 268px !important;

    height: 50px !important;

    box-sizing: border-box !important;

    padding: 0 18px !important;

    background: #ffffff !important;

    border: 1px solid #b7dfc6 !important;
    border-radius: 15px !important;

    color: #20252b !important;

    font-family: inherit !important;
    font-size: 16px !important;
    font-weight: 400 !important;

    outline: none !important;

    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.03) !important;
}

.discount-coupon #discountCouponCode::placeholder {
    color: #8993a0 !important;
    opacity: 1 !important;
}

.discount-coupon #discountCouponCode:focus {
    border-color: #16a34a !important;

    box-shadow:
        0 0 0 3px rgba(22, 163, 74, 0.10) !important;
}


/* ==========================================================================
   KUPON GOMB
   ========================================================================== */

.discount-coupon button[data-testid="buttonSubmitDiscountCoupon"] {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    flex: 0 0 auto !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

    height: 50px !important;
    min-height: 50px !important;

    box-sizing: border-box !important;

    padding: 4px 16px 4px 6px !important;
    margin: 0 !important;

    border: none !important;
    border-radius: 15px !important;

    background: #16a34a !important;

    color: #ffffff !important;

    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 700 !important;

    line-height: 1 !important;
    white-space: nowrap !important;

    position: relative !important;

    overflow: visible !important;

    box-shadow:
        0 8px 18px rgba(22, 163, 74, 0.20) !important;
}


/* ==========================================================================
   FEHÉR KÖR A GOMB BAL OLDALÁN
   ========================================================================== */

.discount-coupon button[data-testid="buttonSubmitDiscountCoupon"]::before {
    content: "" !important;

    display: block !important;

    flex: 0 0 42px !important;

    width: 42px !important;
    height: 42px !important;

    margin: 0 12px 0 0 !important;

    border-radius: 50% !important;

    background: #ffffff !important;

    box-sizing: border-box !important;
}


/* ==========================================================================
   NYÍL – SVG
   ========================================================================== */

.discount-coupon button[data-testid="buttonSubmitDiscountCoupon"]::after {
    content: "" !important;

    position: absolute !important;

    left: 14px !important;
    top: 12px !important;

    width: 26px !important;
    height: 26px !important;

    margin: 0 !important;

    background-color: transparent !important;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'%3E%3Cpath d='M3 13h17M14 7l6 6-6 6' fill='none' stroke='%2320252b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;

    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 26px 26px !important;

    box-shadow: none !important;

    transform: none !important;
}


/* ==========================================================================
   FELUGRÓ KOSÁR
   ========================================================================== */

#cart-wrapper .discount-coupon form[data-testid="formDiscountCoupon"] {
    width: max-content !important;
    max-width: 100% !important;

    margin-left: auto !important;
    margin-right: auto !important;
}

#cart-wrapper .discount-coupon #discountCouponCode {
    flex: 0 0 268px !important;

    width: 268px !important;
    min-width: 268px !important;
    max-width: 268px !important;
}

#cart-wrapper .discount-coupon button[data-testid="buttonSubmitDiscountCoupon"] {
    flex: 0 0 auto !important;
}


/* ==========================================================================
   MOBIL
   ========================================================================== */

@media (max-width: 768px) {

    .discount-coupon form[data-testid="formDiscountCoupon"] {
        width: 100% !important;
        max-width: 100% !important;

        gap: 10px !important;
    }

        .discount-coupon #discountCouponCode {
        flex: 0 0 auto !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        height: 50px !important;
        min-height: 50px !important;
        max-height: 50px !important;

        box-sizing: border-box !important;

        padding: 0 18px !important;

        background: #ffffff !important;

        border: 1px solid #b7dfc6 !important;
        border-radius: 15px !important;

        color: #20252b !important;

        font-family: inherit !important;
        font-size: 16px !important;
        font-weight: 400 !important;

        line-height: 50px !important;

        outline: none !important;

        box-shadow:
            0 8px 18px rgba(0, 0, 0, 0.04) !important;
    }

    .discount-coupon #discountCouponCode::placeholder {
        color: #8993a0 !important;
        opacity: 1 !important;
    }

    .discount-coupon button[data-testid="buttonSubmitDiscountCoupon"] {
        flex: 0 0 auto !important;
    }

    #cart-wrapper .discount-coupon form[data-testid="formDiscountCoupon"] {
        width: 100% !important;
        max-width: 100% !important;
    }

}
/* ==========================================================================
   KUPON – MOBIL NÉZET
   A kuponmező és a gomb egymás alatt jelenjen meg
   ========================================================================== */

@media (max-width: 768px) {

    .discount-coupon form[data-testid="formDiscountCoupon"] {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: center !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        gap: 10px !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    .discount-coupon #discountCouponCode {
        flex: 0 0 auto !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: 50px !important;
        box-sizing: border-box !important;
    }

    .discount-coupon button[data-testid="buttonSubmitDiscountCoupon"] {
        flex: 0 0 auto !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: 50px !important;
        box-sizing: border-box !important;
    }

    #cart-wrapper .discount-coupon form[data-testid="formDiscountCoupon"] {
        width: 100% !important;
        max-width: 100% !important;
        flex-direction: column !important;
    }

}

/* ==========================================================================
   MARKETPLACC – KATEGÓRIA MEGA MENU
   VÉGLEGES DESKTOP MEGJELENÉS

   Fontos:
   - A master CSS többi része változatlan marad.
   - Csak a saját mega menü elemeit formázza.
   - Mobilon nincs hatása.
   - A kép és az alkategóriák egymás alatt jelennek meg.
   ========================================================================== */

@media (min-width: 769px) {

    /* ----------------------------------------------------------------------
       MEGA MENÜ – TELJES TARTALOM
       ---------------------------------------------------------------------- */

    .mp-mega-category-grid,
    .mp-mega-side {
        box-sizing: border-box !important;
    }


    /* ----------------------------------------------------------------------
       JOBB OLDALI PREVIEW PANEL
       ---------------------------------------------------------------------- */

    .mp-mega-side {
        position: relative !important;

        width: 250px !important;
        min-width: 250px !important;
        max-width: 250px !important;

        background: #ffffff !important;

        border-left: 1px solid #e2e8f0 !important;

        box-shadow:
            -6px 0 18px rgba(15, 23, 42, 0.05) !important;

        overflow: hidden !important;
    }


    /* ----------------------------------------------------------------------
       PREVIEW PANEL
       ---------------------------------------------------------------------- */

    .mp-category-preview {
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;

        box-sizing: border-box !important;

        background: #ffffff !important;

        overflow: hidden !important;
    }


    /* ----------------------------------------------------------------------
       PREVIEW TARTALOM

       A sorrend:
       1. kategórianév
       2. kategóriakép
       3. alkategóriák
       ---------------------------------------------------------------------- */

    .mp-category-preview-content {
        display: flex !important;

        flex-direction: column !important;

        align-items: stretch !important;

        justify-content: flex-start !important;

        width: 100% !important;
        height: 100% !important;

        min-height: 0 !important;

        box-sizing: border-box !important;

        padding: 0 14px 14px 14px !important;

        gap: 0 !important;

        overflow: hidden !important;
    }


    /* ----------------------------------------------------------------------
       PREVIEW CÍM
       ---------------------------------------------------------------------- */

    .mp-category-preview h2,
    .mp-category-preview h3 {
        order: 0 !important;

        box-sizing: border-box !important;

        width: 100% !important;

        margin: 0 !important;

        padding: 14px 14px 10px 14px !important;

        color: #0f172a !important;

        font-size: 17px !important;

        font-weight: 700 !important;

        line-height: 1.25 !important;

        text-align: center !important;
    }


    /* ----------------------------------------------------------------------
       KATEGÓRIAKÉP

       A kép mindig a kategórianév ALATT,
       az alkategóriák FÖLÖTT marad.
       ---------------------------------------------------------------------- */

    .mp-category-preview-image-wrap {
        order: 1 !important;

        flex: 0 0 auto !important;

        width: 100% !important;

        min-width: 0 !important;

        height: auto !important;

        min-height: 0 !important;

        box-sizing: border-box !important;

        display: flex !important;

        align-items: flex-start !important;

        justify-content: center !important;

        padding: 4px 0 10px 0 !important;

        margin: 0 !important;

        overflow: hidden !important;
    }


    .mp-category-preview-image {
        display: block !important;

        width: auto !important;

        max-width: 100% !important;

        height: auto !important;

        max-height: 220px !important;

        min-width: 0 !important;

        min-height: 0 !important;

        object-fit: contain !important;

        object-position: center center !important;

        margin: 0 auto !important;

        border: 0 !important;

        border-radius: 10px !important;

        box-shadow:
            0 4px 14px rgba(15, 23, 42, 0.08) !important;

        background: #ffffff !important;
    }


    /* ----------------------------------------------------------------------
       KÉP MÉRETE AZ ALKATEGÓRIÁK SZÁMA ALAPJÁN

       1–2 alkategória  → nagy kép
       3–4 alkategória  → közepes/nagy kép
       5–6 alkategória  → közepes kép
       7+ alkategória   → kisebb kép

       A :has() itt már a VALÓDI linkstruktúrát figyeli,
       nem egy nem létező .mp-mega-subcategory elemet.
       ---------------------------------------------------------------------- */

    /* 1–2 alkategória */

    .mp-category-preview-links:has(a:nth-child(1)):not(:has(a:nth-child(3)))
    ~ .mp-category-preview-image-wrap .mp-category-preview-image,

    .mp-category-preview-content:has(
        .mp-category-preview-links a:nth-child(1)
    ):not(:has(
        .mp-category-preview-links a:nth-child(3)
    )) .mp-category-preview-image {
        max-height: 300px !important;
    }


    /* 3–4 alkategória */

    .mp-category-preview-content:has(
        .mp-category-preview-links a:nth-child(3)
    ):not(:has(
        .mp-category-preview-links a:nth-child(5)
    )) .mp-category-preview-image {
        max-height: 250px !important;
    }


    /* 5–6 alkategória */

    .mp-category-preview-content:has(
        .mp-category-preview-links a:nth-child(5)
    ):not(:has(
        .mp-category-preview-links a:nth-child(7)
    )) .mp-category-preview-image {
        max-height: 215px !important;
    }


    /* 7 vagy több alkategória */

    .mp-category-preview-content:has(
        .mp-category-preview-links a:nth-child(7)
    ) .mp-category-preview-image {
        max-height: 170px !important;
    }


    /* ----------------------------------------------------------------------
       ALKATEGÓRIA BLOKK

       A kép UTÁN következik.
       A kép és az első alkategória közötti távolság egységes.
       ---------------------------------------------------------------------- */

    .mp-category-preview-links {
        order: 2 !important;

        display: flex !important;

        flex-direction: column !important;

        align-items: stretch !important;

        justify-content: flex-start !important;

        width: 100% !important;

        height: auto !important;

        min-height: 0 !important;

        flex: 0 0 auto !important;

        box-sizing: border-box !important;

        margin: 0 !important;

        padding: 0 !important;

        gap: 5px !important;

        overflow: hidden !important;
    }


    /* ----------------------------------------------------------------------
       ALKATEGÓRIA LINK

       A tényleges preview-linkekre vonatkozik,
       nem feltételez nem létező DOM-elemeket.
       ---------------------------------------------------------------------- */

    .mp-category-preview-links a {
        display: flex !important;

        align-items: center !important;

        width: 100% !important;

        min-width: 0 !important;

        min-height: 42px !important;

        box-sizing: border-box !important;

        margin: 0 !important;

        padding: 9px 10px !important;

        border-radius: 8px !important;

        background: #f8fafc !important;

        border: 1px solid transparent !important;

        color: #334155 !important;

        font-size: 13px !important;

        font-weight: 500 !important;

        line-height: 1.3 !important;

        text-decoration: none !important;

        transition:
            background-color 0.18s ease,
            border-color 0.18s ease,
            color 0.18s ease,
            transform 0.18s ease,
            box-shadow 0.18s ease !important;

        overflow: hidden !important;
    }


    /* ----------------------------------------------------------------------
       ALKATEGÓRIA HOVER
       ---------------------------------------------------------------------- */

    .mp-category-preview-links a:hover {
        background: #eff6ff !important;

        border-color: #bae6fd !important;

        color: #0369a1 !important;

        transform: translateX(2px) !important;

        box-shadow:
            0 3px 9px rgba(2, 132, 199, 0.08) !important;
    }


    /* ----------------------------------------------------------------------
       NYÍL / EGYÉB EREDETI TARTALOM
       ---------------------------------------------------------------------- */

    .mp-category-preview-links a::first-letter {
        color: #0284c7 !important;
    }


    /* ----------------------------------------------------------------------
       KATEGÓRIA GRID
       ---------------------------------------------------------------------- */

    .mp-mega-category-grid {
        box-sizing: border-box !important;

        min-width: 0 !important;

        overflow: hidden !important;
    }


    /* ----------------------------------------------------------------------
       FŐ KATEGÓRIÁK HOVER
       ---------------------------------------------------------------------- */

    .mp-mega-category-grid > a {
        transition:
            background-color 0.18s ease,
            color 0.18s ease,
            transform 0.18s ease,
            box-shadow 0.18s ease !important;
    }


    .mp-mega-category-grid > a:hover {
        background: #f0f9ff !important;

        color: #0369a1 !important;

        box-shadow:
            inset 3px 0 0 #0284c7 !important;
    }


    /* ----------------------------------------------------------------------
       KÉP HIBÁS / ÜRES ESET
       ---------------------------------------------------------------------- */

    .mp-category-preview-image[src=""] {
        display: none !important;
    }

}

/* ============================================================
   MARKETPLACC – ÚJ DESKTOP FEJLÉC
   MASTER INTEGRÁCIÓ
   ============================================================ */

@media (min-width: 769px) {

    #mp-new-header {

        position: relative !important;

        width: calc(100% - 8px) !important;

        margin: 0 4px !important;

        min-height: 70px !important;

        background: #ffffff !important;

        border-radius: 0 0 20px 20px !important;

        border-top: 3px solid #1468d8 !important;

        box-shadow:
            0 8px 24px rgba(0,0,0,.10) !important;

        z-index: 100001 !important;

        box-sizing: border-box !important;

    }


    #mp-new-header .mp-header-inner {

        min-height: 67px !important;

        height: 67px !important;

        display: flex !important;

        align-items: center !important;

        gap: 0 !important;

        padding: 0 16px !important;

        box-sizing: border-box !important;

    }


    /* ========================================================
       LOGÓ
       ======================================================== */

    #mp-new-header .mp-logo-area {

        flex: 0 0 150px !important;

        display: flex !important;

        align-items: center !important;

        gap: 10px !important;

        min-width: 0 !important;

        text-decoration: none !important;

        color: #111 !important;

    }


    #mp-new-header .mp-logo-image {

        width: 48px !important;

        height: 48px !important;

        flex: 0 0 48px !important;

        object-fit: contain !important;

        display: block !important;

    }


    #mp-new-header .mp-logo-text {

        min-width: 0 !important;

        flex: 0 0 auto !important;

    }


    #mp-new-header .mp-logo-main {

        font-size: 22px !important;

        line-height: 23px !important;

        font-weight: 700 !important;

        letter-spacing: -.6px !important;

        white-space: nowrap !important;

    }


    #mp-new-header .mp-logo-main span {

        color: #1468d8 !important;

    }


    #mp-new-header .mp-logo-motto {

        font-size: 9px !important;

        line-height: 12px !important;

        color: #222 !important;

        white-space: nowrap !important;

    }


    /* ========================================================
       KATEGÓRIÁK
       ======================================================== */

    #mp-new-header .mp-category-area {

        flex: 0 0 125px !important;

        display: flex !important;

        justify-content: center !important;

    }


    #mp-new-header .mp-real-category-button {

        width: 118px !important;

        height: 42px !important;

        border: 0 !important;

        border-radius: 11px !important;

        background: #1468d8 !important;

        color: #ffffff !important;

        font-size: 14px !important;

        font-weight: 700 !important;

        cursor: pointer !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        gap: 8px !important;

        transition:
            transform .15s ease,
            box-shadow .15s ease !important;

    }


    #mp-new-header .mp-real-category-button:hover {

        box-shadow:
            0 7px 18px rgba(20,104,216,.25) !important;

        transform:
            translateY(-1px) !important;

    }


    #mp-new-header .mp-category-hamburger {

        width: 18px !important;

        display: flex !important;

        flex-direction: column !important;

        gap: 4px !important;

    }


    #mp-new-header .mp-category-hamburger i {

        display: block !important;

        width: 18px !important;

        height: 2px !important;

        background: #ffffff !important;

        border-radius: 3px !important;

    }


    /* ========================================================
       KERESŐ
       ======================================================== */

    #mp-new-header .mp-search-area {

        flex: 1 1 auto !important;

        min-width: 0 !important;

        height: 40px !important;

        display: flex !important;

        align-items: center !important;

        border: 1px solid #d6dce5 !important;

        border-radius: 10px !important;

        overflow: hidden !important;

        background: #ffffff !important;

        margin: 0 !important;

    }


    #mp-new-header .mp-search-input-wrap {

        flex: 1 1 auto !important;

        min-width: 0 !important;

        height: 100% !important;

    }


    #mp-new-header .mp-search-input {

        width: 100% !important;

        height: 100% !important;

        box-sizing: border-box !important;

        border: 0 !important;

        outline: 0 !important;

        padding: 0 12px !important;

        background: #ffffff !important;

        color: #222 !important;

        font-size: 13px !important;

        font-family:
            Arial,
            Helvetica,
            sans-serif !important;

    }


    #mp-new-header .mp-search-input::placeholder {

        color: #777 !important;

        opacity: 1 !important;

    }


    #mp-new-header .mp-search-button {

        flex: 0 0 40px !important;

        width: 40px !important;

        height: 40px !important;

        border: 0 !important;

        background: #1468d8 !important;

        cursor: pointer !important;

        position: relative !important;

        padding: 0 !important;

    }


    #mp-new-header .mp-search-button span {

        position: absolute !important;

        width: 16px !important;

        height: 16px !important;

        border: 2px solid #ffffff !important;

        border-radius: 50% !important;

        left: 12px !important;

        top: 11px !important;

        box-sizing: border-box !important;

    }


    #mp-new-header .mp-search-button span::after {

        content: "" !important;

        position: absolute !important;

        width: 7px !important;

        height: 2px !important;

        background: #ffffff !important;

        border-radius: 3px !important;

        transform: rotate(45deg) !important;

        right: -6px !important;

        bottom: -3px !important;

    }


    /* ========================================================
       FIÓK
       ======================================================== */

    #mp-new-header .mp-account-area {

        flex: 0 0 88px !important;

        height: 50px !important;

        display: flex !important;

        align-items: center !important;

        gap: 7px !important;

        padding-left: 12px !important;

        text-decoration: none !important;

        color: #111 !important;

        box-sizing: border-box !important;

    }


    #mp-new-header .mp-account-icon {

        width: 22px !important;

        height: 18px !important;

        border:
            1.5px solid #111 !important;

        border-bottom: 0 !important;

        border-radius:
            18px 18px 0 0 !important;

        position: relative !important;

        margin-top: 13px !important;

        flex: 0 0 auto !important;

    }


    #mp-new-header .mp-account-icon::before {

        content: "" !important;

        position: absolute !important;

        width: 12px !important;

        height: 12px !important;

        left: 3px !important;

        top: -18px !important;

        border:
            1.5px solid #111 !important;

        border-radius: 50% !important;

        background: #ffffff !important;

    }


    /* ========================================================
       FIÓK / KEDVENC / KOSÁR SZÖVEGEK
       ======================================================== */

    #mp-new-header .mp-account-text,
    #mp-new-header .mp-favorites-text,
    #mp-new-header .mp-cart-text {

        display: flex !important;

        flex-direction: column !important;

        justify-content: center !important;

        min-width: 0 !important;

    }


    #mp-new-header .mp-account-text strong,
    #mp-new-header .mp-favorites-text strong,
    #mp-new-header .mp-cart-text strong {

        font-size: 14px !important;

        line-height: 18px !important;

        white-space: nowrap !important;

    }


    #mp-new-header .mp-account-text small,
    #mp-new-header .mp-favorites-text small,
    #mp-new-header .mp-cart-text small {

        font-size: 10px !important;

        line-height: 14px !important;

        color: #444 !important;

        white-space: nowrap !important;

    }


    /* ========================================================
       KEDVENCEK
       ======================================================== */

    #mp-new-header .mp-favorites-area {

        flex: 0 0 95px !important;

        height: 50px !important;

        display: flex !important;

        align-items: center !important;

        gap: 7px !important;

        text-decoration: none !important;

        color: #111 !important;

        box-sizing: border-box !important;

    }


    #mp-new-header .mp-favorites-icon {

        font-size: 32px !important;

        line-height: 32px !important;

        font-family:
            Arial,
            sans-serif !important;

        flex: 0 0 auto !important;

    }


    /* ========================================================
       KOSÁR
       ======================================================== */

    #mp-new-header .mp-cart-area {

        flex: 0 0 112px !important;

        height: 40px !important;

        border-radius: 10px !important;

        background: #edf4fc !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        gap: 7px !important;

        text-decoration: none !important;

        color: #111 !important;

        box-sizing: border-box !important;

    }


    #mp-new-header .mp-cart-icon {

        font-size: 24px !important;

        line-height: 24px !important;

        flex: 0 0 auto !important;

    }

}


/* ============================================================
   MOBIL
   ============================================================ */

@media (max-width: 768px) {

    #mp-new-header {

        display: none !important;

    }

}
/* ============================================================
   MARKETPLACC – VÉGLEGES MEGA MENÜ + FEJLÉC FINOMHANGOLÁS
   ============================================================ */

@media (min-width: 769px) {

    /* ---------------------------------------------------------
       LOGÓ / KATEGÓRIA GOMB – NE ÉRJENEK ÖSSZE
       --------------------------------------------------------- */

    #mp-new-header .mp-logo-area {

        flex: 0 0 205px !important;

        width: 205px !important;

        max-width: 205px !important;

        gap: 10px !important;

    }


    #mp-new-header .mp-category-area {

        flex: 0 0 150px !important;

        width: 150px !important;

        max-width: 150px !important;

        justify-content: center !important;

    }


    #mp-new-header .mp-real-category-button {

        width: 138px !important;

        min-width: 138px !important;

        height: 44px !important;

        flex: 0 0 138px !important;

    }


    /* ---------------------------------------------------------
       SAJÁT MEGA MENÜ
       --------------------------------------------------------- */

    #mp-mega-category-test {

        position: absolute !important;

        left: 0 !important;

        right: 0 !important;

        top: 100% !important;

        z-index: 1000000 !important;

        display: block !important;

        background: rgba(255,255,255,.98) !important;

        border-top:
            1px solid #dce5f0 !important;

        border-bottom:
            1px solid #dce5f0 !important;

        box-shadow:
            0 18px 45px rgba(20,55,100,.16) !important;

        border-radius:
            0 0 18px 18px !important;

        overflow: hidden !important;

        opacity: 0 !important;

        visibility: hidden !important;

        pointer-events: none !important;

        transform:
            translateY(-10px) !important;

        transition:
            opacity .20s ease,
            transform .20s ease,
            visibility .20s ease !important;

    }


    #mp-mega-category-test.mp-open {

        opacity: 1 !important;

        visibility: visible !important;

        pointer-events: auto !important;

        transform:
            translateY(0) !important;

    }


    /* ---------------------------------------------------------
       BELSŐ ELRENDEZÉS
       --------------------------------------------------------- */

    #mp-mega-category-test .mp-mega-inner {

        width: 100% !important;

        max-width: 1500px !important;

        margin: 0 auto !important;

        padding:
            22px 28px 24px !important;

        box-sizing: border-box !important;

        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr)
            250px !important;

        gap: 24px !important;

        background: #ffffff !important;

    }


    /* ---------------------------------------------------------
       FŐ KATEGÓRIA GRID
       --------------------------------------------------------- */

    #mp-mega-category-test
    .mp-mega-category-grid {

        display: grid !important;

        grid-template-columns:
            repeat(5, minmax(0, 1fr)) !important;

        gap:
            8px 10px !important;

        align-content: start !important;

        min-width: 0 !important;

        overflow: visible !important;

    }


    #mp-mega-category-test
    .mp-mega-category {

        min-width: 0 !important;

        min-height: 52px !important;

        display: flex !important;

        align-items: center !important;

        gap: 9px !important;

        padding:
            10px 12px !important;

        box-sizing: border-box !important;

        border-radius: 10px !important;

        background: transparent !important;

        border:
            1px solid transparent !important;

        color: #20252d !important;

        text-decoration: none !important;

        cursor: pointer !important;

        transition:
            background .16s ease,
            border-color .16s ease,
            color .16s ease,
            transform .16s ease,
            box-shadow .16s ease !important;

    }


    #mp-mega-category-test
    .mp-mega-category:hover {

        background:
            #f0f9ff !important;

        border-color:
            #d8eefe !important;

        color:
            #0369a1 !important;

        transform:
            translateX(2px) !important;

        box-shadow:
            0 3px 9px rgba(2,132,199,.08) !important;

    }


    #mp-mega-category-test
    .mp-mega-category-icon {

        flex:
            0 0 28px !important;

        width:
            28px !important;

        height:
            28px !important;

        display:
            flex !important;

        align-items:
            center !important;

        justify-content:
            center !important;

        font-size:
            19px !important;

        line-height:
            1 !important;

    }


    #mp-mega-category-test
    .mp-mega-category-name {

        min-width:
            0 !important;

        flex:
            1 1 auto !important;

        font-size:
            14px !important;

        line-height:
            1.25 !important;

        font-weight:
            650 !important;

        white-space:
            normal !important;

    }


    #mp-mega-category-test
    .mp-mega-arrow {

        flex:
            0 0 auto !important;

        color:
            #8d99a8 !important;

        font-size:
            20px !important;

        line-height:
            1 !important;

    }


    /* ---------------------------------------------------------
       JOBB OLDALI PREVIEW
       --------------------------------------------------------- */

    #mp-mega-category-test .mp-mega-side {

        width:
            250px !important;

        min-width:
            250px !important;

        max-width:
            250px !important;

        min-height:
            250px !important;

        background:
            #ffffff !important;

        border-left:
            1px solid #e2e8f0 !important;

        box-shadow:
            -6px 0 18px rgba(15,23,42,.05) !important;

        overflow:
            hidden !important;

    }


    #mp-mega-category-test
    .mp-category-preview {

        width:
            100% !important;

        min-height:
            250px !important;

        height:
            100% !important;

        background:
            #ffffff !important;

    }


    #mp-mega-category-test
    .mp-category-preview-title {

        margin:
            0 !important;

        padding:
            14px 14px 10px !important;

        font-size:
            17px !important;

        font-weight:
            700 !important;

        line-height:
            1.25 !important;

        color:
            #20252d !important;

    }


    #mp-mega-category-test
    .mp-category-preview-title a {

        color:
            inherit !important;

        text-decoration:
            none !important;

    }


    #mp-mega-category-test
    .mp-category-preview-content {

        display:
            flex !important;

        flex-direction:
            column !important;

        width:
            100% !important;

        height:
            auto !important;

        padding:
            0 14px 14px !important;

        box-sizing:
            border-box !important;

    }


    #mp-mega-category-test
    .mp-category-preview-image-wrap {

        order:
            1 !important;

        width:
            100% !important;

        display:
            flex !important;

        align-items:
            center !important;

        justify-content:
            center !important;

        padding:
            4px 0 10px !important;

        overflow:
            hidden !important;

    }


    #mp-mega-category-test
    .mp-category-preview-image {

        display:
            block !important;

        width:
            auto !important;

        max-width:
            100% !important;

        height:
            auto !important;

        max-height:
            220px !important;

        object-fit:
            contain !important;

        object-position:
            center !important;

        margin:
            0 auto !important;

        border-radius:
            10px !important;

    }


    #mp-mega-category-test
    .mp-category-preview-links {

        order:
            2 !important;

        width:
            100% !important;

        margin:
            0 !important;

        padding:
            0 !important;

    }


    #mp-mega-category-test
    .mp-category-preview-no-image {

        padding:
            14px 4px !important;

        color:
            #8994a3 !important;

        font-size:
            12px !important;

        line-height:
            1.4 !important;

        text-align:
            center !important;

    }


    /* ---------------------------------------------------------
       INFORMÁCIÓS SÁV
       --------------------------------------------------------- */

    #mp-utility-bar-test {

        width:
            100% !important;

        min-height:
            44px !important;

        height:
            44px !important;

        display:
            grid !important;

        grid-template-columns:
            repeat(7, minmax(0,1fr)) !important;

        align-items:
            stretch !important;

        background:
            #f4f8fd !important;

        border-top:
            1px solid #dce4ee !important;

        border-bottom:
            1px solid #dce4ee !important;

        box-sizing:
            border-box !important;

        overflow:
            hidden !important;

    }


    #mp-utility-bar-test
    .mp-utility-item {

        min-width:
            0 !important;

        display:
            flex !important;

        align-items:
            center !important;

        justify-content:
            center !important;

        gap:
            7px !important;

        padding:
            0 7px !important;

        border-right:
            1px solid #d9e1ec !important;

        box-sizing:
            border-box !important;

        color:
            #252a30 !important;

        text-decoration:
            none !important;

        transition:
            background .18s ease,
            color .18s ease !important;

    }


    #mp-utility-bar-test
    .mp-utility-item:last-child {

        border-right:
            none !important;

    }


    #mp-utility-bar-test
    .mp-utility-item:hover {

        background:
            #e8f1ff !important;

        color:
            #1261c9 !important;

    }


    #mp-utility-bar-test
    .mp-utility-icon {

        flex:
            0 0 auto !important;

        font-size:
            17px !important;

        line-height:
            1 !important;

    }


    #mp-utility-bar-test
    .mp-utility-label {

        min-width:
            0 !important;

        font-size:
            12px !important;

        line-height:
            15px !important;

        font-weight:
            600 !important;

        white-space:
            nowrap !important;

        overflow:
            hidden !important;

        text-overflow:
            ellipsis !important;

    }

}


/* ============================================================
   MOBIL – AZ ÚJ DESKTOP ELEMEK NEM ZAVARNAK BE
   ============================================================ */

@media (max-width: 768px) {

    #mp-mega-category-test,
    #mp-utility-bar-test {

        display:
            none !important;

    }

}
/* ============================================================
   MARKETPLACC – INFORMÁCIÓS SÁV + MEGA MENU JAVÍTÁS
   ============================================================ */

@media (min-width: 769px) {

    /* --------------------------------------------------------
       INFORMÁCIÓS SÁV
       A hosszú szöveg törjön új sorba,
       ne legyen levágva.
       -------------------------------------------------------- */

    #mp-utility-bar-test {
        height: auto !important;
        min-height: 44px !important;
        overflow: visible !important;
        align-items: stretch !important;
    }

    #mp-utility-bar-test .mp-utility-item {
        min-width: 0 !important;
        min-height: 44px !important;
        height: auto !important;
        box-sizing: border-box !important;
        padding: 7px 8px !important;
        align-items: center !important;
    }

    #mp-utility-bar-test .mp-utility-label {
        min-width: 0 !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        text-align: center !important;
        line-height: 17px !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
    }


    /* --------------------------------------------------------
       MEGA MENU – ALKATEGÓRIA BETÖLTÉS
       -------------------------------------------------------- */

    .mp-category-preview-loading,
    .mp-category-preview-empty {
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 12px 8px !important;
        text-align: center !important;
        color: #94a3b8 !important;
        font-size: 13px !important;
        line-height: 1.4 !important;
    }

    .mp-mega-subcategories {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 5px !important;
    }

    .mp-mega-subcategories a {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        min-height: 40px !important;
        box-sizing: border-box !important;
        padding: 8px 10px !important;
        border-radius: 8px !important;
        background: #f8fafc !important;
        color: #334155 !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        line-height: 1.3 !important;
        text-decoration: none !important;
        transition:
            background-color .18s ease,
            color .18s ease,
            transform .18s ease,
            box-shadow .18s ease !important;
    }

    .mp-mega-subcategories a:hover {
        background: #eff6ff !important;
        color: #0369a1 !important;
        transform: translateX(2px) !important;
        box-shadow:
            0 3px 9px rgba(2,132,199,.08) !important;
    }
}
/* ============================================================
   MARKETPLACC – FEJLÉC VÉGLEGES CSS v2
   ============================================================ */

@media (min-width: 769px) {


    /* ==========================================================
       INFORMÁCIÓS SÁV
       ========================================================== */

    #mp-utility-bar-test {

        display: flex !important;

        width: 100% !important;

        min-height: 44px !important;

        height: auto !important;

        overflow: visible !important;

        align-items: stretch !important;

        justify-content: space-between !important;

        box-sizing: border-box !important;
    }


    #mp-utility-bar-test
    .mp-utility-item {

        /*
         * Nem egyenlő 1/7 szélesség.
         * A tartalom határozza meg az alapméretet.
         */

        flex:
            0 1 auto !important;

        width:
            auto !important;

        min-width:
            max-content !important;

        min-height:
            44px !important;

        height:
            auto !important;

        box-sizing:
            border-box !important;

        padding:
            6px 18px !important;

        display:
            flex !important;

        align-items:
            center !important;

        justify-content:
            center !important;

        gap:
            8px !important;

        position:
            relative !important;

        overflow:
            visible !important;

        transition:
            background-color .18s ease,
            color .18s ease,
            box-shadow .18s ease !important;
    }


    /*
     * A hosszabb elemek szükség esetén törhetnek.
     */

    #mp-utility-bar-test
    .mp-utility-label {

        min-width:
            0 !important;

        max-width:
            none !important;

        white-space:
            normal !important;

        overflow:
            visible !important;

        text-overflow:
            clip !important;

        word-break:
            normal !important;

        overflow-wrap:
            normal !important;

        text-align:
            center !important;

        line-height:
            17px !important;

        font-size:
            13px !important;

        font-weight:
            600 !important;
    }


    /*
     * Erősebb hover.
     */

    #mp-utility-bar-test
    .mp-utility-item:hover {

        background:
            #e5efff !important;

        color:
            #1261c9 !important;

        box-shadow:
            inset 0 -3px 0 #1468d8 !important;

        z-index:
            2 !important;
    }


    /*
     * A kért kék "aláhúzás".
     */

    #mp-utility-bar-test
    .mp-utility-item::after {

        content:
            "" !important;

        position:
            absolute !important;

        left:
            14px !important;

        right:
            14px !important;

        bottom:
            0 !important;

        height:
            3px !important;

        background:
            #1468d8 !important;

        transform:
            scaleX(0) !important;

        transform-origin:
            center !important;

        transition:
            transform .18s ease !important;
    }


    #mp-utility-bar-test
    .mp-utility-item:hover::after {

        transform:
            scaleX(1) !important;
    }


    /* ==========================================================
       MEGA MENÜ – ALKATEGÓRIÁK
       ========================================================== */

    .mp-mega-subcategories {

        display:
            flex !important;

        flex-direction:
            column !important;

        width:
            100% !important;

        gap:
            5px !important;
    }


    .mp-mega-subcategories a {

        display:
            flex !important;

        align-items:
            center !important;

        width:
            100% !important;

        min-height:
            42px !important;

        box-sizing:
            border-box !important;

        padding:
            9px 10px !important;

        border-radius:
            8px !important;

        background:
            #f8fafc !important;

        color:
            #334155 !important;

        font-size:
            13px !important;

        font-weight:
            500 !important;

        line-height:
            1.3 !important;

        text-decoration:
            none !important;

        transition:
            background-color .18s ease,
            color .18s ease,
            transform .18s ease,
            box-shadow .18s ease !important;
    }


    .mp-mega-subcategories a:hover {

        background:
            #eff6ff !important;

        border-color:
            #bae6fd !important;

        color:
            #0369a1 !important;

        transform:
            translateX(2px) !important;

        box-shadow:
            0 3px 9px
            rgba(2,132,199,.10) !important;
    }


    .mp-category-preview-empty {

        width:
            100% !important;

        box-sizing:
            border-box !important;

        padding:
            12px 8px !important;

        text-align:
            center !important;

        color:
            #94a3b8 !important;

        font-size:
            13px !important;

        line-height:
            1.4 !important;
    }


    /* ==========================================================
       FŐ KATEGÓRIA HOVER
       ========================================================== */

    .mp-mega-category-grid
    > a {

        position:
            relative !important;

        overflow:
            hidden !important;
    }


    .mp-mega-category-grid
    > a:hover {

        background:
            #f0f9ff !important;

        color:
            #0369a1 !important;

        box-shadow:
            none !important;
    }


    /*
     * A kért kék alsó vonal a kategóriánál is.
     */

    .mp-mega-category-grid
    > a::after {

        content:
            "" !important;

        position:
            absolute !important;

        left:
            10px !important;

        right:
            10px !important;

        bottom:
            0 !important;

        height:
            3px !important;

        background:
            #1468d8 !important;

        transform:
            scaleX(0) !important;

        transform-origin:
            center !important;

        transition:
            transform .18s ease !important;
    }


    .mp-mega-category-grid
    > a:hover::after {

        transform:
            scaleX(1) !important;
    }

}

/* =========================================================
   TERMÉKOLDAL – ÁR / MENNYISÉG / KOSÁR / KEDVENCEK
   ========================================================= */

/* A vásárlási blokk legyen a pozicionálás alapja */
body.type-product .p-to-cart-block {
    position: relative !important;
}


/* ---------------------------------------------------------
   MENNYISÉGVÁLASZTÓ
   Ár mellé, jobb oldalra
   --------------------------------------------------------- */

body.type-product .p-to-cart-block .quantity {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;

    margin: 0 !important;
    z-index: 5 !important;
}


/* ---------------------------------------------------------
   KOSÁRBA RAKOM
   Középre, a mennyiségválasztó alá
   --------------------------------------------------------- */

body.type-product .p-to-cart-block .add-to-cart-button {
    display: flex !important;
    width: fit-content !important;

    margin-left: auto !important;
    margin-right: auto !important;
}


/* ---------------------------------------------------------
   KEDVENCEK
   Középre, a kosárgomb alá
   --------------------------------------------------------- */

body.type-product #mp-product-favorite-button {
    width: fit-content !important;
    min-width: 290px !important;

    margin-left: auto !important;
    margin-right: auto !important;
}


/* ---------------------------------------------------------
   MOBIL
   --------------------------------------------------------- */

@media (max-width: 767px) {

    body.type-product .p-to-cart-block .quantity {
        top: 0 !important;
        right: 0 !important;
    }

    body.type-product .p-to-cart-block .add-to-cart-button {
        width: fit-content !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    body.type-product #mp-product-favorite-button {
        width: fit-content !important;
        min-width: 290px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* =========================================================
   FEKVŐ MOBIL – VÁSÁRLÁSI BLOKK
   ========================================================= */

@media (orientation: landscape) and (pointer: coarse) {

    /* Vásárlási blokk */
    body.type-product .p-to-cart-block {
        display: grid !important;
        grid-template-columns: 1fr auto !important;
        grid-template-rows: auto auto auto auto !important;
        column-gap: 20px !important;
        row-gap: 10px !important;

        position: relative !important;
        align-items: start !important;
    }

    /* Ár */
    body.type-product .p-to-cart-block .p-final-price-wrapper {
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: auto !important;
        margin: 0 !important;
    }

    /* Egységár */
    body.type-product .p-to-cart-block .price-measure {
        grid-column: 1 !important;
        grid-row: 2 !important;
        width: auto !important;
        margin: 0 !important;
    }

    /* Mennyiségválasztó
       közelebb az árhoz */
    body.type-product .p-to-cart-block .quantity {
        position: absolute !important;
        top: 0 !important;
        right: 42% !important;

        margin: 0 !important;
        z-index: 5 !important;
    }

    /* Kosár + Kedvencek – egymás alatt */
body.type-product .p-to-cart-block .p-add-to-cart-wrapper {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;

    width: 100% !important;
    max-width: 100% !important;
    margin: 10px 0 0 0 !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

/* A kosár űrlap teljes sort kapjon */
body.type-product .p-to-cart-block .p-add-to-cart-wrapper form {
    width: 100% !important;
    max-width: 100% !important;
}

    /* Kosárgomb középen */
    body.type-product .p-to-cart-block .add-to-cart-button {
        display: flex !important;
        width: fit-content !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Kedvencek – kosárgomb alá */
body.type-product #mp-product-favorite-button {
    display: flex !important;
    width: 290px !important;
    min-width: 290px !important;
    max-width: 290px !important;

    margin: 10px auto 0 auto !important;

    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
}
}

/* =========================================================
   FEKVŐ MOBIL – KEDVENCEK A KOSÁR ALÁ
   ========================================================= */

@media (orientation: landscape) and (pointer: coarse) {

    body.type-product #mp-product-favorite-button {
        display: flex !important;
        width: 290px !important;
        min-width: 290px !important;
        max-width: 290px !important;

        margin-top: 10px !important;
        margin-left: auto !important;
        margin-right: auto !important;

        clear: both !important;
    }
}

/* =========================================
   MARKETPLACC – EGYSÉGÁR ELREJTÉSE
   ========================================= */

.products .price-measure {
    display: none !important;
}


/* =========================================
   MARKETPLACC – TERMÉKÁR MEGJELENÍTÉSE
   Minimalista kék ponttal
   ========================================= */

.products .prices {
    margin-bottom: 6px;
}

.products .prices .price-final {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 6px 11px;
    background: #f1f5ff;
    border-radius: 10px;
    color: #1e4daf;
    font-weight: 700;
    font-size: 16px;
    line-height: 1;
    transition: all 0.2s ease;
}


/* =========================================
   KÉK KÖR AZ ÁR ELŐTT
   ========================================= */

.products .prices .price-final::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    background: #1e4daf;
    border-radius: 50%;
    margin-right: 1px;
}


/* =========================================
   FT
   ========================================= */

.products .prices .price-final .price-currency {
    font-size: 16px;
    font-weight: 700;
    margin-right: 1px;
}


/* =========================================
   / DB
   ========================================= */

.products .prices .price-final .price-unit {
    font-size: 12px;
    color: #64748b;
    font-weight: 500;
}


/* =========================================
   FINOM HOVER EFFEKT
   ========================================= */

.products .prices .price-final:hover {
    background: #e8efff;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(30, 77, 175, 0.08);
}

/* MarketPlacc – Turul 2025 banner */

.footer-banners {
    display: flex !important;
    justify-content: center !important;
}

.footer-banners .footer-banner {
    width: 500px !important;
    max-width: 90% !important;
    flex: 0 0 500px !important;
}

.footer-banners .footer-banner img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
}

/* =========================================
   HASZNÁLATI ÚTMUTATÓ – FÁJLOK VÍZSZINTES GÖRGETÉSE
   ========================================= */

#relatedFiles {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: thin !important;
}

#relatedFiles > li {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 220px !important;
  max-width: 320px !important;
  box-sizing: border-box !important;
}

#relatedFiles > li > a {
  white-space: normal !important;
}