/* Layer: project-wide */
/* Scope: Rosner webshop márkázás – Open Sans, szilva/méz paletta, tömör fejléc, badge-ek, ikonok, képhely */
/* Used by: prototypes/webshop/*.html, prototypes/logo-otletek.html */

@font-face {
  font-family: 'Jost';
  src: url('../../assets/fonts/jost-variable-latin.woff2') format('woff2');
  font-weight: 300 600;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jost';
  src: url('../../assets/fonts/jost-variable-latin-ext.woff2') format('woff2');
  font-weight: 300 600;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Open Sans';
  src: url('../../assets/fonts/open-sans-variable-latin.woff2') format('woff2');
  font-weight: 300 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Open Sans';
  src: url('../../assets/fonts/open-sans-variable-latin-ext.woff2') format('woff2');
  font-weight: 300 800;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root,
[data-r-paint~="theme-light"] {
  --c1: #462B34; --on-c1: #F5EFE9;   /* szilva – a régi oldalról */
  --c2: #2B1B21; --on-c2: #F5EFE9;   /* sötét szilva – lábléc, sötét felületek */
  --c3: #9A6B1C; --on-c3: #FFFFFF;   /* mély méz – akció, fehér betűvel (4,67:1) */
  --c3-elo: #D9A227;                  /* élénk méz – csak díszítő vonal, nem szöveg */
  --bg: #FBF8F3; --surface: #FFFFFF; --surface-2: #F1E9DC;
  --text: #33232B; --text-muted: #6E5A62;
  --border: #E2D7C5; --ring: #462B34;
  --font-sans: 'Open Sans', system-ui, sans-serif;
  --font-cim: 'Jost', 'Open Sans', sans-serif;
  --radius: 2px; --radius-lg: 4px; --radius-sm: 2px;
}

/* Címek: elegáns, vékony geometrikus – semmi bumszli */
h1, h2, h3 { font-family: var(--font-cim); font-weight: 400; letter-spacing: 0.01em; }
h1 { font-size: var(--ust3); }
h2 { font-size: var(--ust2); }
h3 { font-size: var(--ust1); }

/* Gombok: éles hierarchia – méz akció, szilva másodlagos */
.btn-primary { background: var(--c3); color: var(--on-c3); border-color: #7F5817; font-weight: 600; }
.btn-primary:hover { background: color-mix(in srgb, var(--c3) 86%, var(--cb)); border-color: color-mix(in srgb, var(--c3) 86%, var(--cb)); }
.btn-secondary { background: var(--c1); color: var(--on-c1); border-color: var(--c1); }
.btn-secondary:hover { background: color-mix(in srgb, var(--c1) 86%, var(--cw)); }

/* Badge-ek: szögletesek, a bolt saját palettájáról (semmi zöld) */
.badge { border-radius: var(--radius-sm); }
.jel-akcio   { background: var(--c3); color: var(--on-c3); border-color: #7F5817; font-weight: 600; }
.jel-raktaron { background: var(--c1); color: var(--on-c1); border-color: var(--c1); }
.jel-minta   { background: var(--surface-2); color: var(--text-muted); border-color: var(--border); }

/* Lapozó: számozott, méz jelöléssel */
.lapozo { display: flex; align-items: center; justify-content: center; gap: var(--uspxs); flex-wrap: wrap; }
.lapozo-szam {
  display: inline-grid; place-items: center; min-inline-size: 2.2em;
  padding: var(--usp2xs) var(--uspxs);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  text-decoration: none; color: var(--text); font-weight: 500;
}
.lapozo-szam:hover { border-color: var(--c3); color: var(--c1); }
.lapozo-szam[aria-current] { background: var(--c3); border-color: var(--c3); color: var(--on-c3); }

/* Lemondás-gomb: világos, de nem kiabál – végleges művelet */
.btn-lemond {
  background: transparent; color: #B3261E;
  border: 1px solid #B3261E; font-weight: 500;
}
.btn-lemond:hover {
  background: #B3261E; color: #FFFFFF; border-color: #B3261E;
  background-size: 0% 100%;
}

/* Megerősítő réteg („popup”) – tiszta CSS, :target technika */
.megerosites-reteg {
  position: fixed; inset: 0; z-index: 30; display: none;
  place-items: center; padding: var(--uspm);
  background: rgb(43 27 33 / 0.55);
}
.megerosites-reteg:target { display: grid; }
.megerosites-doboz {
  background: var(--surface); border-radius: var(--radius-lg);
  border-block-start: 4px solid var(--c3-elo);
  padding: var(--uspl); max-inline-size: 32rem;
  display: flex; flex-direction: column; gap: var(--usps);
}
.megerosites-doboz h2 { margin: 0; }

/* Lista-kereső: teljes szélességű sor, a segédszöveg alatta tör */
.lista-kereso {
  display: flex; flex-direction: column; gap: var(--usp2xs);
  background: var(--surface-2); border-inline-start: 4px solid var(--c3-elo);
  border-radius: var(--radius); padding: var(--usps);
}
.lista-kereso .kereso-mezo { max-inline-size: 40rem; inline-size: 100%; }
.lista-kereso .hint { margin: 0; }

/* Visszajelző sáv (toast) – siker/figyelmeztetés/hiba állapotokra */
.visszajelzes {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--usps);
  padding: var(--usps) var(--uspm);
  border-radius: var(--radius); border-inline-start: 4px solid var(--c1);
  background: var(--surface-2); color: var(--text);
}
.visszajelzes-sikeres { border-inline-start-color: var(--c3); background: var(--surface); }
.visszajelzes-hiba { border-inline-start-color: #B3261E; }
.visszajelzes strong { color: var(--c1); }
.visszajelzes-sikeres strong { color: var(--c3); }

/* Süti-beállító doboz: választható opciók + cookie lista */
.suti-opcio {
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: var(--usps); display: flex; flex-direction: column; gap: var(--usp2xs);
}
.suti-opcio:has(input:checked) { border-color: var(--c3); background: var(--surface-2); }
.suti-opcio .hint { margin: 0; }
.suti-lista { margin: 0; }
.suti-lista dt { display: flex; align-items: center; gap: var(--uspxs); }
.suti-jel { font-size: var(--ust-2); letter-spacing: 0.06em; }
.jel-szukseges { background: var(--c1); color: var(--on-c1); }
.jel-statisztikai { background: var(--surface-3); color: var(--text-muted); }

/* Süti-sáv: alsó sáv első látogatáskor */
.sutik-sav {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 20;
  background: var(--surface); border-block-start: 3px solid var(--c3-elo);
  box-shadow: var(--shadow-lg);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--usps);
  justify-content: space-between;
  padding: var(--usps) var(--uspm);
}
.sutik-sav p { margin: 0; font-size: var(--ust-1); max-inline-size: 52ch; }

/* Ikonok: egységes vonalas stílus */
.ikon { inline-size: 1.15em; block-size: 1.15em; vertical-align: -0.18em; flex: none; }
.ikon path, .ikon circle, .ikon rect { stroke-width: 1.25; }

/* Fejléc: két tömör sor */
.site-fejlec { background: var(--surface); border-block-end: 1px solid var(--border); }
.site-logo { color: var(--c1); text-decoration: none; display: inline-flex; align-items: center; gap: var(--usps); }
.site-logo span { font-family: var(--font-cim); font-weight: 500; font-size: var(--ust2); letter-spacing: 0.22em; line-height: 1; }
.logo-jel { flex: none; }
.site-kereso { flex: 1 1 auto; }
.kereso-mezo { position: relative; flex: 1 1 auto; max-width: 30rem; }
.kereso-mezo .input { padding-inline-end: 2.4rem; }
.kereso-gomb {
  position: absolute; inset-block: 2px; inset-inline-end: 2px;
  inline-size: 2rem; display: grid; place-items: center;
  background: var(--c3); color: var(--on-c3);
  border: 0; border-radius: var(--radius-sm); cursor: pointer;
}
.kereso-gomb:hover { background: var(--c3-elo); color: var(--c2); }
.site-eleres { color: var(--text); text-decoration: none; font-weight: 600; display: inline-flex; align-items: center; gap: var(--usp2xs); white-space: nowrap; }
.site-eleres:hover { color: var(--c1); }
/* Fiókgomb: kosár-jellegű, user ikonnal; hover/fókuszra kibomlik a felirat */
.fiok-gomb { gap: 0; transition: gap 220ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.fiok-szoveg {
  max-inline-size: 0; opacity: 0; overflow: hidden; white-space: nowrap;
  transition: max-inline-size 280ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 180ms linear;
}
.fiok-gomb:hover, .fiok-gomb:focus-visible { gap: var(--uspxs); }
.fiok-gomb:hover .fiok-szoveg, .fiok-gomb:focus-visible .fiok-szoveg { max-inline-size: 14rem; opacity: 1; }

/* Menü alapstílus elé */
/* Menüblokk a tartalomban (pl. fiók): belső térköz + levegő alatta */
main .site-menu-sor { padding-inline: var(--usps); }
main .site-menu { background: var(--surface-2); margin-block-end: var(--uspm); border-radius: var(--radius-sm); }
.site-menu { background: var(--surface-2); }
.site-menu-sor { display: flex; align-items: center; justify-content: space-between; gap: var(--uspm); flex-wrap: wrap; padding-block-end: var(--usp2xs); }
.site-menu a { position: relative; text-decoration: none; color: var(--text); font-family: var(--font-cim); font-weight: 400; padding-block: var(--uspxs) var(--usp2xs); }
.site-menu a::after {
  content: ''; position: absolute; inset-inline: 0; bottom: 0; block-size: 6px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='6'%3E%3Cpath d='M0 5L3 1 6 5 9 1 12 5' fill='none' stroke='%23D9A227' stroke-width='2'/%3E%3C/svg%3E") repeat-x left bottom;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.site-menu a:hover::after, .site-menu a[aria-current]::after { clip-path: inset(0); }
.site-menu a:hover { color: var(--c1); }
.site-menu a[aria-current] { color: var(--c1); }
.site-regi { font-weight: 400; font-size: var(--ust-1); color: var(--text-muted); display: inline-block; transition: transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1), color 160ms linear; }
.site-regi:hover { color: var(--c1); transform: translateX(-4px); }

/* Lábléc */
.site-lablec { background: var(--c2); color: var(--on-c2); border-block-start: 3px solid var(--c3-elo); }
.site-lablec p, .site-lablec li, .site-lablec span, .site-lablec strong { color: var(--on-c2); }
.site-lablec a { color: var(--on-c2); text-decoration: none; }
.site-lablec a:hover { color: var(--c3-elo); text-decoration: underline; }
.site-lablec .halvany { color: #D4C2B8; }
.site-lablec-racs { display: grid; gap: var(--uspl); grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); padding-block: var(--uspl); align-items: start; }
.site-lablec .site-logo { color: var(--c3-elo); margin-block-end: var(--usps); }
.site-lablec .site-logo span { color: var(--on-c2); }
.lablec-cim { font-family: var(--font-cim); font-weight: 500; letter-spacing: 0.08em; font-size: var(--ust1); color: var(--on-c2); padding-block-end: var(--uspxs); border-block-end: 1px solid var(--c3-elo); margin: 0 0 var(--usps); }
.lablec-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; }
.lablec-lista a, .lablec-lista .elony-cim, .lablec-lista .halvany, .lablec-lista .site-regi { line-height: 1.35; }
.lablec-lista li { display: flex; flex-direction: column; gap: var(--usp2xs); margin: 0; }
.site-lablec .elony-cim { color: var(--on-c2); font-size: var(--ust0); }
.site-lablec .lablec-lista .halvany { font-size: var(--ust-1); }
.site-lablec .ikon path, .site-lablec .ikon circle, .site-lablec .ikon rect { stroke: var(--c3-elo); }

/* Képhely (valódi fotók érkezéséig) */
.kephely {
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, #E9DCC6 0%, #D8C4A4 45%, #C9B18C 100%);
  display: grid; place-items: center;
  color: var(--cg700); font-size: var(--ust-1);
  border: 1px solid var(--border);
}
.kephely-szeles { aspect-ratio: 16 / 5; }

/* Mobil fejléc: telefonszám csak ikon, a kereső saját sorban */
@media (max-width: 44rem) {
  .site-fejlec .container { padding-block: var(--usp2xs) !important; }
  .site-menu a { padding-block: var(--usp2xs); }
  .site-menu-sor { flex-wrap: wrap; gap: var(--uspxs) var(--uspm); padding-block-end: var(--usp2xs); }
  .site-menu-sor .cluster { flex-wrap: wrap; gap: var(--uspxs) var(--uspm); }
  .site-regi { display: none; }
  .site-tel-szam { display: none; }
  .site-kereso { flex: 1 1 100%; order: 3; }
  .site-kereso .input { max-width: none; }
}

/* Főcím utáni térköz: minden oldalon feszes (korábban 27–41 px volt) */
h1.szekcio-cim { margin-block-end: var(--uspxs); }
h1.szekcio-cim + * { margin-top: 0; }

/* Fő címek: kis ikon + halszálka-vonal – a fő szekciók jelölése */
.szekcio-cim { display: flex; align-items: center; gap: var(--usps); }
.szekcio-cim .ikon-cim { inline-size: 1.35em; block-size: 1.35em; color: var(--c3); flex: none; }
.szekcio-cim .ikon-cim path, .szekcio-cim .ikon-cim circle, .szekcio-cim .ikon-cim rect { stroke-width: 1.5; }
.szekcio-cim::after {
  content: ''; flex: none; inline-size: 10rem; block-size: 6px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='6'%3E%3Cpath d='M0 5L3 1 6 5 9 1 12 5' fill='none' stroke='%23D9A227' stroke-width='2'/%3E%3C/svg%3E") repeat-x left bottom;
}
@media (max-width: 30rem) {
  .szekcio-cim::after { inline-size: 4rem; }
}

/* Raktáron szalag – feltűnő jelölés a termékképen */
.kephely { position: relative; }
.raktar-szalag {
  position: absolute; inset-block-start: 0; inset-inline-start: 0;
  background: var(--c3-elo); color: var(--c2);
  font-family: var(--font-cim); font-weight: 500; letter-spacing: 0.12em;
  font-size: var(--ust-1); padding: var(--usp2xs) var(--usps);
  border-inline-end: 2px solid var(--c3); border-block-end: 2px solid var(--c3);
}
.raktar-szalag::after {
  content: ''; position: absolute; inset-block-start: 100%; inset-inline-start: 0;
  border-style: solid; border-width: 5px 8px 0 0;
  border-color: var(--c3) transparent transparent transparent;
}

/* Átugrás a tartalomhoz – billentyűzettel érhető el, egyébként rejtett */
.atugras {
  position: absolute; inset-block-start: -100%; inset-inline-start: var(--usps);
  z-index: 10; background: var(--c1); color: var(--on-c1);
  padding: var(--uspxs) var(--usps); border-radius: var(--radius-sm);
}
.atugras:focus { inset-block-start: var(--uspxs); }

/* „Elfogyott” jelölés – készletállapot mintája */
.jel-elfogyott { background: var(--surface-3); color: var(--cg600); border-color: var(--border); }
.jel-szazalek { background: var(--c1); color: var(--on-c1); border-color: var(--c1); font-weight: 600; }

/* Rejtett felirat (pl. kereső) – billentyűzettel és olvasóval elérhető */
.rejtett { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Ígéretsáv – világos sor (a sötét banner-kinézet kivezetve) */
.elony-sav { background: var(--surface); border-block: 1px solid var(--border); color: var(--text); }
.elony-sav .elony-cim { color: var(--c1); font-weight: 600; }
.elony-sav .ikon path, .elony-sav .ikon circle, .elony-sav .ikon rect { stroke: var(--c3); }
.elony-cim { display: flex; align-items: center; gap: var(--uspxs); font-size: var(--ust1); }