/**
 * ship-foooldal.css — a DB-vezérelt főoldal blokkjainak finomításai.
 *
 * A shop-demo (Gadget Store) meglévő osztályaira épül (banner-box, product-box,
 * category-box, light-bg-color, theme-bg-color). Csak az olyan elemekhez ad
 * stílust, amelyekhez a demóban nincs kész minta (hero-overlay, USP sáv, akciós
 * badge a kezdőoldali kártyán). Nincs új színrendszer; a demo CSS-változóit
 * használja, ahol van.
 */

/* Akciós badge a kezdőoldali termékkártyán (a kategórialista badge mintájára). */
.product-box.productMain .product-image {
    position: relative;
}
.ship-akcio-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    background: var(--theme-color, #ff4f4f);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    padding: 5px 8px;
    border-radius: 6px;
}
.product-box.productMain .price .ship-normal-ar {
    color: #9aa0a6;
    font-weight: 400;
    font-size: 0.85em;
    margin-left: 6px;
}

/* Hero banner overlay (cím + alcím + gomb a banner képén). */
.ship-hero-banner {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
}
.ship-hero-banner + .ship-hero-banner {
    margin-top: 16px;
}
.ship-hero-overlay,
.ship-cta-overlay {
    position: absolute;
    top: 50%;
    left: 6%;
    transform: translateY(-50%);
    max-width: 60%;
    color: #fff;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}
.ship-hero-overlay h2 {
    font-size: clamp(20px, 3vw, 38px);
    font-weight: 700;
    margin-bottom: 8px;
}
.ship-hero-overlay p,
.ship-cta-overlay p {
    font-size: clamp(13px, 1.4vw, 17px);
    margin-bottom: 14px;
}
.ship-hero-btn,
.ship-cta-overlay .btn {
    border-radius: 6px;
}
.ship-cta {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    display: block;
}
.ship-cta-overlay h3 {
    font-size: clamp(18px, 2.4vw, 30px);
    font-weight: 700;
    margin-bottom: 8px;
}

/* Bizalom (USP) sáv. */
.ship-usp {
    padding: 22px;
    border-radius: 8px;
}
.ship-usp-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 4px;
}
.ship-usp-ikon {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.05);
    font-size: 22px;
    color: var(--theme-color, #0d6efd);
}
.ship-usp-szoveg h5 {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 2px;
}
.ship-usp-szoveg p {
    font-size: 13px;
    color: #6b7177;
    margin: 0;
}

/* Mobilon a hero overlay kisebb, hogy ne takarja ki a képet. */
@media (max-width: 575px) {
    .ship-hero-overlay,
    .ship-cta-overlay {
        max-width: 80%;
        left: 5%;
    }
    .ship-usp-item {
        gap: 10px;
    }
}

/* ===================================================================
   141 — Képes rács / marketing doboz blokk
   =================================================================== */
.ship-kepes-racs .row > [class*="col-"] {
    display: flex;
}
.ship-kepes-doboz {
    position: relative;
    display: block;
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.04);
}
.ship-kepes-doboz img,
.ship-kepes-doboz picture {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    min-height: 200px;
}
/* A nagy-bal elrendezések bal dobozának kicsit magasabb minimum. */
.ship-kepes-racs .col-lg-7 > .ship-kepes-doboz img,
.ship-kepes-racs .col-lg-8 > .ship-kepes-doboz img {
    min-height: 260px;
}
.ship-kepes-overlay {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    padding: 18px 20px;
    color: #fff;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.12) 70%, rgba(0, 0, 0, 0) 100%);
}
.ship-kepes-overlay h3 {
    font-size: clamp(16px, 1.9vw, 24px);
    font-weight: 700;
    margin: 0 0 4px;
}
.ship-kepes-overlay p {
    font-size: clamp(12px, 1.2vw, 15px);
    margin: 0 0 10px;
}
.ship-kepes-cta {
    border-radius: 6px;
    font-size: 14px;
    padding: 6px 14px;
}
.ship-kepes-nyil {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    color: #111;
    font-size: 18px;
}
.ship-kepes-doboz:hover img {
    transform: scale(1.03);
    transition: transform 0.3s ease;
}
.ship-kepes-doboz img {
    transition: transform 0.3s ease;
}
/* Promó-elrendezés: kártyás keret. */
.ship-kepes-promo .ship-kepes-doboz {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

/* ===================================================================
   141 — Szöveges (Summernote) blokk
   =================================================================== */
.ship-szoveges {
    padding-top: 6px;
}
.ship-szoveges .ship-szoveges-tartalom {
    line-height: 1.7;
}
.ship-szoveges .ship-szoveges-tartalom img {
    max-width: 100%;
    height: auto;
}
.ship-szoveges .ship-szoveges-tartalom table {
    width: 100%;
    max-width: 100%;
    display: block;
    overflow-x: auto;
    border-collapse: collapse;
}
.ship-szoveges .ship-szoveges-tartalom td,
.ship-szoveges .ship-szoveges-tartalom th {
    border: 1px solid rgba(0, 0, 0, 0.12);
    padding: 8px 10px;
}
.ship-szoveges--szeles {
    max-width: 1320px;
}
/* Háttér-variációk (világos / sötét-kék). A „nincs" nem ad külön hátteret. */
.ship-szoveges.ship-szoveges--vilagos {
    background: #f5f7fa;
}
.ship-szoveges.ship-szoveges--vilagos .ship-szoveges-tartalom {
    padding: 26px 0;
}
.ship-szoveges.ship-szoveges--sotet {
    background: #0f2740;
    color: #eaf1f8;
}
.ship-szoveges.ship-szoveges--sotet .ship-szoveges-tartalom {
    padding: 26px 0;
}
.ship-szoveges.ship-szoveges--sotet a {
    color: #8ec5ff;
}
.ship-szoveges.ship-szoveges--sotet .ship-szoveges-tartalom td,
.ship-szoveges.ship-szoveges--sotet .ship-szoveges-tartalom th {
    border-color: rgba(255, 255, 255, 0.2);
}

/* A főoldali termékkártya „Kosárba" gombja (a közös kártyán). */
.ship-kartya-kosar .cart-button {
    width: 100%;
}

/* ===================================================================
   206 — Kezdőoldal: a bal kategória-oszlop magassága igazodjon a jobb
   oldali banner/hero oszlophoz (NEM fix px, tisztán CSS layout).

   Probléma: a kategória-panel görgethető fája (.ship-kat-scroll) fix
   max-height: 560px-et kapott (ship-theme.css), ezért a bal doboz a
   jobb oldali képoszlophoz képest rövid maradt és feleslegesen belül
   görgött. Itt desktopon a panelt abszolút pozícionáljuk a bal
   oszlopban: így a (potenciálisan hosszú) kategórialista NEM nyújtja
   meg a sort — a jobb oldali banner-oszlop lesz a magasság-referencia,
   a panel pedig flexben kitölti az oszlop teljes magasságát. A
   görgethető fa csak akkor görget, ha tényleg nem fér el.

   Hatókör: csak >=1400px. 1400px alatt a .category-full-box fixed
   offcanvas (a fejléc „Kategóriák" gombja nyitja), ezért ott érintetlen
   marad a természetes, egymás alatti (mobil/tablet) elrendezés. A jobb
   oldali képeket (méret/arány/vágás) ez a blokk nem érinti.
   =================================================================== */
@media (min-width: 1400px) {
    /* A sor azonos magasságra húzza az oszlopokat (Bootstrap-alapérték,
       explicit a biztos viselkedésért). */
    .home-section .custom-home-row {
        align-items: stretch;
    }
    /* A bal oszlop legyen pozícionálási kontextus az abszolút panelhez. */
    .home-section .custom-home-row .custom-xxl-3 {
        position: relative;
    }
    /* A kategória-panel abszolút kitölti a bal oszlopot (= a jobb
       oszlop magassága), tartalma nem növeli a sor magasságát. */
    .home-section .custom-xxl-3 .category-full-box.offcanvas {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        flex-direction: column;
        min-height: 0;
    }
    /* A menülista töltse ki a panel magasságát és ossza el a helyet
       (akciós sáv természetes magasság + alatta a görgethető fa). */
    .home-section .category-full-box .category-menu-list {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }
    /* A görgethető kategóriafa kapja a maradék helyet; a fix 560px
       feloldva → csak valódi túlcsordulásnál jelenik meg belső scroll. */
    .home-section .category-full-box .ship-kat-scroll {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
    }
}