/*
DIZÁJN TOKENEK
Téma: régi horgászcsalis dobozok, kézzel írt árcédulák, mélyvíz.
Szín: mélytengeri navy (szerkezet) + csont/krém (alap) + sárgaréz (akcent) + rozsda (CTA/kiemelés).
Betű: Fraunces (karakteres, kicsit ódivatú display) + Work Sans (tiszta body) + IBM Plex Mono (cédula/SKU adatok).
A betűtöltés a layout.php -jében történik ( + ),
NEM itt @import-tal — az @import render-blockoló lenne és lassítaná az oldalbetöltést.
*/
:root {
--navy: #16323E;
--navy-light: #234456;
--cream: #F1ECDE;
--cream-deep: #E6DFC9;
--brass: #B8892F;
--rust: #A8492E;
--ink: #201C16;
--line: rgba(32, 28, 22, 0.15);
--font-display: 'Fraunces', serif;
--font-body: 'Work Sans', sans-serif;
--font-mono: 'IBM Plex Mono', monospace;
}
* { box-sizing: border-box; }
body {
margin: 0;
background: var(--cream);
color: var(--ink);
font-family: var(--font-body);
line-height: 1.5;
}
a { color: inherit; }
/* --- FEJLÉC --- */
.fejlec {
background: var(--navy);
color: var(--cream);
padding: 1.1rem 1.5rem;
display: flex;
align-items: baseline;
justify-content: space-between;
flex-wrap: wrap;
gap: 0.5rem;
border-bottom: 3px solid var(--brass);
}
.fejlec .bolt-nev {
font-family: var(--font-display);
font-weight: 700;
font-size: 1.5rem;
letter-spacing: 0.01em;
text-decoration: none;
}
.fejlec .slogen {
font-size: 0.8rem;
opacity: 0.75;
font-style: italic;
}
.fejlec nav a {
color: var(--cream);
text-decoration: none;
margin-left: 1.25rem;
font-size: 0.9rem;
border-bottom: 1px solid transparent;
}
.fejlec nav a:hover { border-bottom-color: var(--brass); }
.container {
max-width: 1100px;
margin: 0 auto;
padding: 2rem 1.5rem;
}
h1, h2, h3 {
font-family: var(--font-display);
font-weight: 600;
color: var(--navy);
margin-top: 0;
}
h1 { font-size: 2rem; }
/* --- TERMÉKRÁCS --- */
.termek-racs {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
gap: 1.75rem 1.5rem;
margin-top: 1.5rem;
}
/* Signature elem: a kártya olyan, mint egy fonálra kötött árcédula egy horgászdobozból. */
.termek-kartya {
position: relative;
background: #fff;
border: 1px solid var(--line);
border-radius: 4px;
padding: 1.1rem 1rem 1rem;
text-decoration: none;
color: var(--ink);
display: block;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.termek-kartya:hover {
transform: translateY(-3px);
box-shadow: 0 10px 24px rgba(22, 50, 62, 0.12);
}
.termek-kartya::before {
/* kis "lyuk" a cédula tetején */
content: '';
position: absolute;
top: -7px;
left: 1.2rem;
width: 14px;
height: 14px;
background: var(--cream);
border: 2px solid var(--navy);
border-radius: 50%;
}
.termek-kep {
width: 100%;
aspect-ratio: 4/3;
background: var(--cream-deep);
border-radius: 3px;
display: flex;
align-items: center;
justify-content: center;
color: var(--navy-light);
font-size: 0.75rem;
overflow: hidden;
margin-bottom: 0.75rem;
}
.termek-kep img { width: 100%; height: 100%; object-fit: cover; }
.termek-sku {
font-family: var(--font-mono);
font-size: 0.7rem;
color: var(--navy-light);
letter-spacing: 0.03em;
}
.termek-nev {
font-family: var(--font-display);
font-weight: 600;
font-size: 1.05rem;
margin: 0.2rem 0 0.4rem;
color: var(--navy);
}
.termek-ar {
font-family: var(--font-mono);
font-size: 1.1rem;
font-weight: 500;
color: var(--rust);
}
.allapot-cimke {
display: inline-block;
font-family: var(--font-mono);
font-size: 0.68rem;
padding: 0.15rem 0.5rem;
border-radius: 20px;
margin-top: 0.5rem;
border: 1px solid var(--brass);
color: var(--brass);
}
.allapot-cimke.ujszeru { border-color: #3f7d5c; color: #3f7d5c; }
.allapot-cimke.hasznalt_kopott { border-color: var(--rust); color: var(--rust); }
/* --- KEDVENCEK ("figyelőlista") gomb — kártyákon az árcédula-kép jobb felső sarkában.
A ".kedvenc-form" a ".termek-kartya"-val TESTVÉR elem (nem beágyazva bele), mert egy