/* =============================================================================
   Ü8 — a nyomda saját arculata és saját termékei.
   Publikus rész: a feltöltött logó és termékkép. Admin rész: Beállítások › Arculat
   (színmezők, előnézet-kártya, logó), Katalógus (saját termék jelző, műveletek, űrlap).
   A színeket NEM itt, hanem a nyomdánként kiszolgált /arculat.css állítja (tokenek).
   ============================================================================= */

/* --- Publikus: logó és termékkép ------------------------------------------------------------ */
.pp-logo-kep { display: block; flex: none; height: 38px; width: auto; max-width: 168px; margin-right: 0.65rem; object-fit: contain; }
.pp-termek-kep img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* A másodlagos (sötét) szín a lábléc felső sávjában jelenik meg — csak ha a nyomda megadta (a layout teszi a törzsre az osztályt). */
.pp-arculat-sav .f-footer { border-top: 3px solid var(--f-dark); }

/* Telefonon a logó kisebb, a név mellette törik — így a fejléc egy sorban marad a kosár- és menügombbal (375 px-en mérve). */
@media (max-width: 640px) {
    .pp-logo-kep { height: 26px; max-width: 84px; margin-right: 0.4rem; }
    .f-public .f-logo:has(.pp-logo-kep) { flex: 1 1 0; min-width: 0; flex-wrap: nowrap; }
    .f-public .f-logo:has(.pp-logo-kep) .f-logo__text { white-space: normal; }
}

/* --- Admin: jelzők, műveletek ---------------------------------------------------------------- */
.pp-sajat-jelzo, .pp-hamarosan-jelzo { margin-left: 0.4rem; background: var(--f-light); border-color: var(--f-border); color: var(--f-ink-soft); }
.pp-sor-muveletek { display: flex; flex-wrap: wrap; gap: 0.25rem 0.9rem; margin-top: 0.5rem; font-size: 0.85rem; }
.pp-valasztek-racs { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0 1.25rem; }
.pp-valasztek-racs .f-checkbox-sor span { overflow-wrap: anywhere; }

/* --- Admin: színmezők ------------------------------------------------------------------------- */
.pp-szinek-racs { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem 1.5rem; }
.pp-szin-sor { display: flex; align-items: center; gap: 0.6rem; }
.pp-szin-sor input[type="text"] { flex: 1; min-width: 0; max-width: 9rem; font-family: var(--f-font-mono); text-transform: uppercase; }
.pp-szin-valaszto { flex: none; width: 48px; height: 44px; padding: 3px; border: 1px solid var(--glass-line); border-radius: var(--f-radius-xs); background: var(--f-white); cursor: pointer; }

/* --- Admin: logó és termékkép ----------------------------------------------------------------- */
.pp-kep-sor { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1.5rem; }
.pp-kep-sor > div:last-child { flex: 1 1 18rem; min-width: 0; }
.pp-logo-elonezet {
    display: grid; place-items: center; width: min(100%, 22rem); min-height: 9rem; padding: 1rem;
    border: 1px dashed var(--glass-line); border-radius: var(--f-radius-sm); background: var(--f-white);
}
.pp-logo-elonezet img { display: block; max-width: 100%; max-height: 8rem; object-fit: contain; }
.pp-kep-elonezet { width: min(100%, 22rem); border-radius: var(--f-radius-sm); overflow: hidden; border: 1px solid var(--f-border); }
.pp-kep-torles { margin-top: 0.75rem; }

/* --- Admin: előnézet-kártya (a színeit az /arculat.css?hatokor=elonezet adja, az oldal többi része nem színeződik át) --- */
.pp-arculat-elonezet {
    max-width: 44rem; border: 1px solid var(--f-border); border-radius: var(--f-radius-md); overflow: hidden;
    background: var(--f-ground); color: var(--f-ink); pointer-events: none;
}
.pp-ae-fejlec {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem;
    margin: 0.75rem; padding: 0.4rem 0.6rem 0.4rem 1rem; border: 1px solid var(--glass-line-soft); border-radius: var(--f-radius-btn);
    background: var(--f-white);
}
.pp-ae-marka { display: inline-flex; align-items: center; min-width: 0; }
.pp-ae-marka .f-logo__text { font-weight: 600; color: var(--f-ink); }
.pp-ae-marka .f-logo__tagline { font-size: 0.625rem; letter-spacing: 0.12em; color: var(--f-grey-2); }
.pp-ae-menu { display: inline-flex; align-items: center; gap: 1rem; font-size: 0.9rem; }
.pp-ae-menu a { color: var(--f-ink); }
.pp-ae-menu .pp-ae-aktiv { color: var(--f-primary); font-weight: 600; }
.pp-ae-test { padding: 0.75rem 1.5rem 1.25rem; }
.pp-ae-test h3 { margin: 0 0 0.25rem; }
.pp-ae-test p { margin: 0 0 1rem; color: var(--f-grey-2); }
.pp-ae-gombok { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.pp-ae-forma { display: inline-block; padding: 0.35em 0.9em; border-radius: var(--f-radius-chip); background: var(--f-mustard); color: #1a1a1a; font-family: var(--f-font-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; }
.pp-ae-sav { padding: 0.7rem 1.5rem; background: var(--f-dark); color: var(--f-white); font-size: 0.85rem; }

@media (max-width: 640px) {
    .pp-ae-test { padding-inline: 1rem; }
    .pp-szin-sor input[type="text"] { max-width: none; }
}