/* Visual Sin — téma: Retro · 2026-10-15
   2026-10-17: krém + piros, ahogy a nyomatok — az éjkék alap marad, a sárga hangsúly és a dupla „nyomdai” effekt ki.
   Saját blokkok: papír-ív, szedési levonat, „0” számláló. A papír és a nyomatpiros a minták saját színei.
   Kontraszt mérve (WCAG): krém/éjkék 13,5 · tompa/éjkék 8,1 · szöveg-piros #e0574c/éjkék 4,93, a kártyán 4,58 ·
   krém a gomb-piroson 4,94. A #c92d2d (3,41) csak árnyék, sáv és nagy cím — kis szövegre nem. */
.theme-retro {
  --bg: #0b1520;
  --bg-2: #0e1924;
  --card: #111d28;
  --ink: #e7dcc5;
  --ink-soft: #d8ceb8;
  --muted: #a9adb0;
  --line: rgba(231, 220, 197, .14);
  --line-strong: rgba(231, 220, 197, .32);
  --accent: #e0574c;
  --accent-2: #e7dcc5;
  --on-accent: #0b1520; /* éjkék a szöveg-piroson: 4,93 (a krém csak 2,74 lenne) */
  --eyebrow: #e0574c;
  --print-shadow: #c92d2d;
  --btn-bg: #b02424;
  --btn-ink: #e7dcc5;
  --title-shadow: var(--nyomat);
  /* papír-ív */
  --paper: #e7dcc5;
  --paper-ink: #231c17;
  --paper-ink-soft: #3b322b;
  --print-red: #c92d2d;
  --print-red-ink: #a3221f;
}

/* Hero */
.theme-retro .vs-hero { background: radial-gradient(circle at 75% 45%, rgba(201, 45, 45, .10), transparent 32%), linear-gradient(120deg, var(--bg) 0 58%, #142535); }
.memory-card { margin: 0; position: relative; aspect-ratio: 1 / 1; padding: var(--sp-6); display: grid; place-items: center; }
.memory-card img { position: relative; z-index: 1; width: 100%; display: block; filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .45)); }

/* Kivágott minták a galériában: fekete négyzet nélkül, a nyomat közvetlenül a háttéren (2026-10-17) */
.theme-retro .minta-zoom img { filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .45)); }

/* A régi dupla „nyomdai” effekt 2026-10-17-én kivezetve: a címet a közös nyomat-cím (--nyomat) adja.
   A .nyomdai osztály a HTML-ben marad, itt csak a szedést tartja egyben. */
.nyomdai { display: inline-block; }

/* Galéria: 3 hasáb, mobilon 1 */
.theme-retro { --mintak-cols: 3; }
.theme-retro .minta-szoveg strong { text-shadow: .04em .035em 0 var(--stack); }

/* Papír-ív (Felismerés): krém lap, piros nyomatréteg, perforált szél, raszter, illesztőjelek */
.theme-retro .papir { position: relative; overflow: hidden; isolation: isolate; background: var(--paper); color: var(--paper-ink); }
.theme-retro .papir .eyebrow { color: var(--print-red-ink); }
.vs.theme-retro main .papir h2 { color: var(--paper-ink); text-shadow: .045em .04em 0 var(--print-red); }
.theme-retro .papir .copy { color: var(--paper-ink-soft); }
.theme-retro .papir .copy strong { color: var(--print-red-ink); }
.theme-retro .papir :focus-visible { outline-color: var(--print-red-ink); }
.theme-retro .papir::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(circle, rgba(201, 45, 45, .22) 1.3px, transparent 1.8px) 0 0 / 11px 11px;
  -webkit-mask-image: radial-gradient(120% 90% at 100% 0%, #000 0%, rgba(0, 0, 0, .55) 30%, transparent 62%);
          mask-image: radial-gradient(120% 90% at 100% 0%, #000 0%, rgba(0, 0, 0, .55) 30%, transparent 62%); }
.theme-retro .papir::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 0, var(--bg-2) 7px, transparent 7.5px) top left / 26px 14px repeat-x,
              radial-gradient(circle at 50% 100%, var(--bg-2) 7px, transparent 7.5px) bottom left / 26px 14px repeat-x; }
.theme-retro .papir > .wrap { position: relative; z-index: 1; }
.papir-fej { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: var(--sp-7); align-items: center; }
.papir-nyomat { position: relative; margin: 0; justify-self: end; width: min(100%, 360px); aspect-ratio: 1 / 1.08; padding: 22px; background: #0b0f14; transform: rotate(3deg);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .25), 0 22px 40px -18px rgba(35, 28, 23, .55); }
.papir-nyomat img { display: block; width: 100%; }
.papir-nyomat::after { content: "FEKETE PÓLÓRA"; position: absolute; left: 22px; bottom: 12px; font: 400 11px var(--font-mono); letter-spacing: .14em; color: #8f949a; }
.papir-nyomat .szalag { position: absolute; top: -14px; left: 50%; width: 120px; height: 30px; transform: translateX(-50%) rotate(-4deg); background: rgba(247, 240, 224, .78); box-shadow: 0 1px 2px rgba(35, 28, 23, .18); }
.theme-retro .papir .card-grid { background: none; border: 0; gap: 28px; margin-top: var(--sp-8); }
.theme-retro .papir .card-grid > * { position: relative; background: rgba(255, 250, 240, .38); border: 1px solid rgba(35, 28, 23, .1); transition: background .2s; }
.theme-retro .papir .card-grid > *:hover { background: rgba(255, 250, 240, .7); }
.theme-retro .papir .card-grid > *::before, .theme-retro .papir .card-grid > *::after { content: ""; position: absolute; width: 14px; height: 14px; border: 0 solid var(--print-red-ink); opacity: .75; }
.theme-retro .papir .card-grid > *::before { top: -7px; left: -7px; border-width: 1.5px 0 0 1.5px; }
.theme-retro .papir .card-grid > *::after { bottom: -7px; right: -7px; border-width: 0 1.5px 1.5px 0; }
.theme-retro .papir .card-grid strong { color: var(--paper-ink); text-shadow: .04em .035em 0 var(--print-red); }
.theme-retro .papir .card-grid p { color: #4a4038; }
@media (max-width: 900px) { .papir-fej { grid-template-columns: minmax(0, 1fr); } .papir-nyomat { justify-self: center; width: min(78vw, 320px); } .theme-retro .papir .card-grid { gap: 22px; } }

/* Szedési levonat: a kész minták piros pecséttel */
.statement.kesz { padding-right: 110px; }
.kesz-jel { position: absolute; right: 0; top: 19px; min-height: 24px; padding: 5px 8px 4px; font: 400 11px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: #ff6b5e; border: 1px solid rgba(255, 107, 94, .55); transform: rotate(-2deg); }
.kesz-jel:hover { background: var(--print-red); border-color: var(--print-red); color: #fff; }

/* Készül: a „0” mint őszinte számláló */
.keszul-split { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--sp-8); align-items: center; }
.big-number { font: 400 clamp(8rem, 22vw, 16rem)/.8 var(--font-display); color: var(--accent-2); }
.number-label { margin: var(--sp-4) 0 0; max-width: 24ch; }
.number-label span { color: var(--accent); }
.first-piece { font: 400 22px var(--font-display); text-transform: uppercase; letter-spacing: .08em; color: var(--accent); margin: var(--sp-5) 0 0; }
@media (max-width: 820px) { .keszul-split { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); text-align: left; } }

/* 07 / Amit a vásárló megkérdez — Collabri garancia-kártyák */
#anyag .card-grid { margin-top: var(--sp-8); }
#anyag .card-grid article { position: relative; display: flex; flex-direction: column; gap: 14px; min-height: 220px; padding: 22px 22px 24px; }
#anyag .card-grid article strong { letter-spacing: .01em; }
#anyag .card-grid article p { margin: 0; }
#anyag .card-grid article .garancia-link { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin-top: auto; padding: 9px 14px 7px; font: 400 11px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: #ff6b5e; border: 1px solid rgba(255, 107, 94, .55); border-radius: 999px; background: transparent; transform: rotate(-2deg); transform-origin: left center; text-decoration: none; transition: background .15s, color .15s, transform .15s, border-color .15s; }
#anyag .card-grid article .garancia-link:not(:first-of-type) { margin-top: 0; }
#anyag .card-grid article .garancia-link:hover { background: var(--print-red); border-color: var(--print-red); color: #fff; transform: rotate(0); }

/* 01 / A minták — a minta neve és az „a boltban" a termékoldalra mutat */
.minta-szoveg .minta-link { color: inherit; text-decoration: none; transition: color .15s; }
.minta-szoveg .minta-link:hover { color: var(--print-red); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.minta-szoveg small .minta-link:hover { color: #fff; }

/* 06 / Bolt-link szövegből link */
.dark .bolt-url { color: var(--accent-2); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; font-weight: 600; transition: color .15s; }
.dark .bolt-url:hover { color: #fff; }

@media (max-width: 900px) { #anyag .card-grid article { min-height: 0; padding: 18px 18px 20px; } }