/*
Theme Name: Zsohár Fazekasműhely
Theme URI: https://zsoharfazekas.hu
Author: ShiftCore.hu
Author URI: https://shiftcore.hu
Description: Egyedi WooCommerce téma a Zsohár fazekasműhely webshopjához. Editorial × Organic Luxury arculat – kézműves őrségi kerámia. Készítette: ShiftCore.hu (Palotai Dániel).
Version: 0.1.0
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: zsohar-fazekas
WC requires at least: 7.0
WC tested up to: 9.0
*/

/* ═══════════════════════════════════════════════════════════
   ZSOHÁR FAZEKASMŰHELY — WooCommerce téma
   Aesthetic: Editorial × Organic Luxury
   Forrás: design_v1 mockup (ShiftCore.hu, 2026-05-05)
═══════════════════════════════════════════════════════════ */

:root {
  --bg:           #F2EDE4;   /* warm cream paper */
  --bg-deep:      #E8E1D3;   /* slightly deeper paper */
  --ink:          #1F1B17;   /* deep charcoal, warm */
  --ink-soft:     #3A332C;   /* secondary text */
  --ink-mute:     #7A7066;   /* tertiary text */
  --clay:         #B25435;   /* fired-clay terracotta */
  --clay-deep:    #8C3F26;   /* dark terracotta */
  --olive:        #6B7256;   /* őrségi olíva */
  --pebble:       #D4CABB;   /* kavics */
  --line:         rgba(31, 27, 23, 0.14);
  --line-strong:  rgba(31, 27, 23, 0.32);

  --serif:  'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  --sans:   'Manrope', system-ui, sans-serif;
  --mono:   'JetBrains Mono', 'IBM Plex Mono', monospace;

  --container: 1280px;
  --gutter: clamp(20px, 3vw, 48px);

  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Subtle paper grain across the whole site */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.12  0 0 0 0 0.10  0 0 0 0 0.08  0 0 0 0.07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: multiply;
  opacity: 0.55;
}

::selection { background: var(--clay); color: var(--bg); }

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  position: relative;
  z-index: 2;
}

/* Type scale ─────────────────────────────────────── */

.display {
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  line-height: 0.96;
  letter-spacing: -0.018em;
  color: var(--ink);
}

.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.lead {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(20px, 1.6vw, 24px);
  line-height: 1.4;
  color: var(--ink-soft);
  letter-spacing: 0;
}

.body-text {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 60ch;
}

.label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* Navigation ─────────────────────────────────────── */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 22px var(--gutter);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 32px;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  background: rgba(242, 237, 228, 0.72);
  border-bottom: 1px solid var(--line);
}

.nav__brand {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
  letter-spacing: 0.01em;
  line-height: 1;
}

.nav__brand sup {
  font-family: var(--mono);
  font-style: normal;
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--ink-mute);
  margin-left: 6px;
  vertical-align: super;
}

/* A menüpontok közti rés ALSÓ határa 2026-08-13-án 20-ról 14-re csökkent, hogy az
   elállás-gomb visszaférjen a fejlécbe. 1366 képponton ez hat közön összesen ~48
   képpontot szabadít fel — pont annyit, amennyi hiányzott. */
.nav__menu {
  display: flex;
  justify-content: center;
  gap: clamp(14px, 2.4vw, 44px);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__menu a {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  position: relative;
  padding-bottom: 4px;
  /* 🔴 A menüpont szövege SOHA ne törjön két sorba. Ez a fejléc legdrágább hibája:
     egyetlen tördelő pont (mérve: „A műhely" három sorban) az egész fejlécet
     megemeli. Enélkül a szűkülő hely csendben a szövegen csapódik le, és csak
     akkor derül ki, ha valaki ránéz egy 1366-os monitoron. */
  white-space: nowrap;
  transition: color .35s var(--ease-out);
}

.nav__menu a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--clay);
  transition: width .4s var(--ease-out);
}

/* 2026-08-10 (Dani kérése): a fejléc menüpontjai EGYSÉGESEN egyformák.
   Az aktuális-oldal kiemelés (barna szín + aláhúzás) kikerült, mert a WordPress
   a főoldalra mutató horgony-linkeket (#manifesto, #collection, #contact) a
   főoldalon „current-menu-item"-nek jelöli. Emiatt a menü fele barnán, aláhúzva
   jelent meg, a másik fele nem, ami rendetlennek látszott.
   A hover-visszajelzés MEGMARAD: az a látogató kurzorára reagál, nem az
   oldal-állapotra, tehát nem okoz tarkaságot. */
.nav__menu a:hover { color: var(--clay-deep); }
.nav__menu a:hover::after { width: 100%; }

/* A fejléc Megrendelés gombja. 2026-08-13-ig a hero elállás-gombja (`.hero-cta`)
   is ebből a szabályból élt; az a gomb visszakerült a fejlécbe, ezért a közös
   szabály megszűnt. A `.hero-cta` osztály sehol nem használt, kivezetve. */
.nav__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bg);
  background: #4a0f03;
  padding: 10px 18px;
  border-radius: 999px;
  transition: background .35s var(--ease-out);
}
.nav__cta:hover { background: var(--clay-deep); }
.nav__cta::after {
  content: "→";
  font-family: var(--sans);
  font-size: 14px;
  letter-spacing: 0;
}

/* Elállás-gomb a fejlécben (2026-08-13). Ugyanaz a forma és méret, mint a
   Megrendelésé, de KÖRVONALAS, nem kitöltött: két egyforma tömör gomb egymás
   mellett versengene, és a Megrendelés a fő hívás. A nyíl is elmarad, mert az a
   cselekvésre hívás jele. */
.nav__elallas {
  display: inline-flex;
  align-items: center;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: transparent;
  border: 1px solid var(--line-strong);
  padding: 9px 16px;
  border-radius: 999px;
  white-space: nowrap;
  transition: color .35s var(--ease-out), border-color .35s var(--ease-out);
}
.nav__elallas:hover { color: var(--clay-deep); border-color: var(--clay-deep); }

/* Mobil menü (2026-09-27): a „Menü” gomb és a csak telefonon látszó elállás-sor
   számítógépen nem jelenik meg. */
.nav__toggle,
.nav__mobil-extra { display: none; }

@media (max-width: 760px) {
  .nav__menu { display: none; }
  /* Telefonon a fejléc szűk: a kosár és a Megrendelés marad, az elállás a
     lenyíló menü utolsó sora és a lábléc-menü. */
  .nav__elallas { display: none; }

  /* A gomb a Kosár mintájára: ikon, alatta a szó (az idősebb vásárló a szót keresi). */
  .nav__toggle {
    display: inline-flex; flex-direction: column; align-items: center; gap: 2px;
    background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
    color: var(--ink); font: inherit;
  }
  .nav__toggle-icon { width: 22px; height: 21px; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
  .nav__toggle-icon i { display: block; height: 1.5px; background: currentColor; border-radius: 2px; transition: transform .3s var(--ease-out), opacity .3s var(--ease-out); }
  .nav__toggle-label { font-family: var(--mono); font-size: 10px; line-height: 1; letter-spacing: .06em; text-transform: uppercase; }
  .nav.is-open .nav__toggle-icon i:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
  .nav.is-open .nav__toggle-icon i:nth-child(2) { opacity: 0; }
  .nav.is-open .nav__toggle-icon i:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

  /* A lenyíló panel a fejléc alatt, teljes szélességben. */
  .nav.is-open .nav__menu {
    display: flex; flex-direction: column; gap: 0;
    position: absolute; top: 100%; left: 0; right: 0;
    /* A fejléc magasságát a main.js méri (--nav-h). A „100vh - 100%” itt NEM működne:
       a fejlécnek nincs rögzített magassága, a százalék nullára esne, és alacsony
       képernyőn (fekvő telefon) a panel alja görgethetetlenül lelógna (kódellenőrzés). */
    max-height: calc(100vh - var(--nav-h, 110px));
    max-height: calc(100dvh - var(--nav-h, 110px));
    overflow-y: auto; overscroll-behavior: contain;
    background: var(--bg); border-bottom: 1px solid var(--line-strong);
    box-shadow: 0 18px 30px rgba(30, 20, 10, .12);
    padding: 6px var(--gutter) 18px;
  }
  .nav.is-open .nav__menu li { border-bottom: 1px solid var(--line); }
  .nav.is-open .nav__menu a { display: block; padding: 16px 0; font-size: 13px; }
  .nav.is-open .nav__menu a::after { display: none; }
  .nav.is-open .nav__mobil-extra { display: block; border-bottom: 0; }
  .nav.is-open .nav__mobil-extra a { color: var(--ink-soft); }
}

/* Hero ───────────────────────────────────────────── */

.hero {
  min-height: 100vh;
  padding: 200px var(--gutter) 120px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
}

.hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 38%;
  z-index: -2;
  transform: scale(1.05);
  transition: transform 22s var(--ease-out);
}
.hero.is-loaded .hero__bg { transform: scale(1); }

/* Egységes 60%-os szürke fátyol a hero-kép sötétítéséhez */
.hero__bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(50, 50, 50, 0.3);
  z-index: -1;
}

.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 40% at 78% 18%, rgba(242, 237, 228, 0.16) 0%, transparent 60%),
    linear-gradient(to bottom,
      rgba(31, 27, 23, 0)    0%,
      rgba(31, 27, 23, 0.04) 30%,
      rgba(31, 27, 23, 0.28) 58%,
      rgba(31, 27, 23, 0.55) 84%,
      rgba(31, 27, 23, 0.72) 100%
    );
  z-index: -1;
}

.hero__folio {
  position: absolute;
  top: 132px;
  left: var(--gutter);
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 3;
}
.hero__folio b { font-weight: 500; color: rgba(31, 27, 23, 0.88); }
.hero__folio .eyebrow { color: rgba(31, 27, 23, 0.62); }

.hero__folio-right {
  position: absolute;
  top: 132px;
  right: var(--gutter);
  text-align: right;
  z-index: 3;
}
.hero__folio-right .eyebrow { color: rgba(31, 27, 23, 0.62); }
.hero__folio-right b { color: rgba(31, 27, 23, 0.88); }

/* ⚠️ ITT VOLT a hero jobb felső sarkába kitett elállás-gomb (`.hero-cta`),
   2026-08-10 és 08-13 között. A gomb visszakerült a fejlécbe rövid felirattal
   (`.nav__elallas`), ezért az abszolút pozicionálás és a hozzá számolt
   108/92 képpontos eltolás kivezetve. A visszaút az árnyék-pillanatképben van,
   ha valaha mégis kellene. */

.hero__content {
  max-width: 1280px;
  margin: 0 auto 0 0;            /* left-anchored, asymmetric magazine layout */
  width: 100%;
  position: relative;
  z-index: 3;
}

.hero__title {
  /* magasság-tudatos: alacsony (rövid) képernyőn a 17vh leszorítja, hogy a
     függőlegesen középre igazított cím ne csússzon a bal-felső idézetre.
     A 17vh a ~864px+ magas képernyőket nem érinti (ott a 144px cap / 9.5vw dönt). */
  font-size: clamp(52px, min(9.5vw, 17vh), 144px);
  margin: 0;
  position: relative;
}
/* Lokális, elmosott meleg-krém scrim a cím mögé: a sötétebb bal oldalt
   a világos szintre emeli → a terrakotta felirat végig konzisztensen olvasható */
.hero__title::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -0.28em -0.9em -0.22em -0.6em;
  background: radial-gradient(ellipse 78% 92% at 34% 62%,
    rgba(242, 237, 228, 0.46) 0%,
    rgba(242, 237, 228, 0.28) 46%,
    transparent 76%);
  pointer-events: none;
}
.hero__title .top {
  display: block;
  color: #d4cac5;                 /* "Apáról fiúra" */
  white-space: nowrap;
  letter-spacing: -0.022em;
  text-shadow: 0 1px 2px rgba(31, 27, 23, 0.38), 0 2px 20px rgba(31, 27, 23, 0.22);
}
.hero__title .alt {
  display: block;
  color: #732f21;                  /* "négy generáció óta" */
  font-style: italic;
  margin-left: 0.4em;
  white-space: nowrap;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.18);
}

/* Nagyon alacsony (rövid) képernyőkön a függőlegesen középre igazított cím
   a bal-felső idézetbe csúszna → itt a cím az idézet ALÁ kerül, garantált réssel.
   A ~768px+ magas képernyőket (középre igazított, „Lenovo") NEM érinti. */
@media (max-height: 740px) {
  .hero { justify-content: flex-start; padding-top: 300px; padding-bottom: 64px; }
  .hero__title { font-size: clamp(44px, min(9vw, 15vh), 118px); }
}

.hero__sub {
  position: absolute;
  top: 127px;                       /* fejléc (87px) + 40px */
  left: var(--gutter);              /* 2026-07-07: jobbról balra áthelyezve */
  max-width: 380px;
  text-align: left;
  z-index: 3;
}
.hero__sub p {
  margin: 0 0 18px;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 25px;
  line-height: 1.5;
  color: #ffffff;
  letter-spacing: 0.125px;
  text-shadow: 0 1px 2px rgba(20, 16, 12, 0.55), 0 2px 20px rgba(20, 16, 12, 0.5);
}
.hero__sub .label {
  color: rgba(251, 247, 239, 0.78);
  text-shadow: 0 1px 12px rgba(20, 16, 12, 0.5);
}

@media (max-width: 880px) {
  .hero__sub {
    position: relative;
    top: 0;
    left: 0;
    max-width: 100%;
    margin-top: 32px;
  }
}

.hero__scroll {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.hero__scroll .label { color: rgba(242, 237, 228, 0.7); }
.hero__scroll-line {
  width: 1px;
  height: 48px;
  background: linear-gradient(to bottom, transparent, rgba(242, 237, 228, 0.85) 50%, transparent);
  animation: scrollPulse 2.4s ease-in-out infinite;
}
@keyframes scrollPulse {
  0%,100% { transform: scaleY(0.5); transform-origin: top; opacity: 0.4; }
  50%     { transform: scaleY(1);   transform-origin: top; opacity: 1; }
}

/* Decorative side label — stays on the lighter pottery zone */
.vertical-label {
  position: absolute;
  left: 16px;
  top: 32%;
  transform: translateY(-50%) rotate(-90deg);
  transform-origin: 0 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: rgba(31, 27, 23, 0.45);
  z-index: 4;
  white-space: nowrap;
}

/* Section meta header (used across sections) ─────── */

.section-head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
  gap: 24px;
  padding: 110px 0 56px;
  border-top: 1px solid var(--line);
}
.section-head__num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.section-head__title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.05;
  margin: 0;
  text-align: center;
  color: var(--ink);
}
.section-head__rule {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
  text-align: right;
}

/* Manifesto / "A mi hitvallásunk" ────────────────── */

.manifesto {
  padding-bottom: 120px;
}

.manifesto__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}

.manifesto__plate {
  position: sticky;
  top: 120px;
  aspect-ratio: 4 / 5;
  border-radius: 4px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 35% 30%, rgba(255, 255, 255, 0.18) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 80%, rgba(0, 0, 0, 0.22) 0%, transparent 60%),
    linear-gradient(160deg, #C2693E 0%, #93482A 60%, #5C2E1B 100%);
  margin: 0;
}
.manifesto__plate.has-photo { background: none; }
.manifesto__plate.has-photo::after { display: none; }   /* fotó fölött nincs zaj-overlay */
.manifesto__plate img {
  width: 100%; height: 100%;
  object-fit: cover;
  position: absolute; inset: 0;
}
.manifesto__plate::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n2'><feTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.3  0 0 0 0 0.18  0 0 0 0 0.1  0 0 0 0.4 0'/></filter><rect width='100%' height='100%' filter='url(%23n2)'/></svg>");
  mix-blend-mode: overlay;
  opacity: 0.7;
  pointer-events: none;
}
.manifesto__plate-caption {
  position: absolute;
  left: 18px;
  bottom: 18px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(242, 237, 228, 0.85);
  z-index: 2;
}

.manifesto__lead {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.18;
  color: var(--ink);
  margin: 0 0 40px;
  letter-spacing: -0.012em;
}
.manifesto__lead em {
  font-style: italic;
  color: var(--clay-deep);
}

.manifesto__body {
  columns: 1;
  column-gap: 36px;
  color: var(--ink-soft);
  font-size: 15.5px;
  line-height: 1.75;
}
.manifesto__body p { margin: 0 0 1.1em; }
.manifesto__body p:first-of-type::first-letter {
  font-family: var(--serif);
  font-style: italic;
  font-size: 76px;
  float: left;
  line-height: 0.9;
  margin: 6px 8px 0 0;
  color: var(--clay);
}

/* Balázs saját idézete a Filozófia szekció zárásaként (2026-08-10) */
.manifesto__quote {
  margin: 32px 0 0;
  padding-left: 24px;
  border-left: 2px solid var(--clay);
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-soft);
}

.manifesto__signature {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.manifesto__signature .mark {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 28px;
  color: var(--clay-deep);
  line-height: 1;
}
.manifesto__signature small {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

@media (max-width: 880px) {
  .manifesto__grid { grid-template-columns: 1fr; }
  .manifesto__plate { position: relative; top: 0; max-width: 420px; }
}

/* Collection grid ────────────────────────────────── */

.collection { padding-bottom: 120px; }

.collection__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 56px 40px;
}

.card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  cursor: pointer;
  position: relative;
}

.card__image {
  aspect-ratio: 16 / 9;
  border-radius: 2px;
  overflow: hidden;
  position: relative;
  transition: transform .8s var(--ease-out);
}

.card:hover .card__image { transform: translateY(-4px); }

.card__image img {
  width: 100%; height: 100%;
  object-fit: cover;
  position: absolute; inset: 0;
  z-index: 1;
}

.card__image::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n3'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.18  0 0 0 0 0.13  0 0 0 0 0.08  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n3)'/></svg>");
  mix-blend-mode: multiply;
  opacity: 0.7;
  z-index: 2;
  pointer-events: none;
}
.card__image.has-photo::after { opacity: 0; }

/* Kellékszavatossági tájékoztató (harmonizált értesítés, Fogyasztóbarát, 2026-09-26):
   a Fogyasztóbarát előírása szerint a kép asztali nézetben legalább 800 px széles helyet
   kap. A téma szövegoszlopa 760 px, ezért azon az oldalon, amelyiken a beágyazókód van,
   szélesebb. A képhez és a linkjéhez szándékosan NEM adunk stílust (szintén előírás).
   Az !important azért kell, mert a korlát az index.php-ban inline stílus (max-width:760px). */
article:has(#fbarat_harmonized_notice_script),
article:has(#fbarat_harmonized_notice_script) .body-text { max-width: 1000px !important; }

/* „Tovább vásárolok” a kosárban: a felirat középen, mint a többi gombé
   (mobilon a teljes szélességű gombban jobbra állt; záró ellenőrzés, 2026-09-26) */
.woocommerce-cart-form .zsohar-tovabb-vasarolok { text-align: center; justify-content: center; }

/* A térkép-jelölő állandó felirata (main.js, Balázs kérése, 2026-09-26) */
.leaflet-tooltip.terkep-felirat {
  font-family: var(--serif); font-style: italic; font-size: 15px; font-weight: 500;
  color: var(--ink); background: rgba(242, 237, 228, 0.95);
  border: 1px solid #4a0f03; border-radius: 3px; padding: 4px 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25); white-space: nowrap;
}
.leaflet-tooltip-top.terkep-felirat::before { border-top-color: #4a0f03; }

/* Bolt és kategória-oldalak: négyzetes képdoboz (Balázs kérése, 2026-09-26).
   A termékfotók négyzetesek, a 16:9-es doboz a képmagasság ~44%-át levágta, sok
   edénynek az alját. Csak a WooCommerce-termékkártyákra szól (li.product), a
   kezdőlap kollekció-kártyái maradnak 16:9. */
li.product.card .card__image { aspect-ratio: 1 / 1; }

/* Six different surface treatments to feel hand-mixed, not generated */
.surface-1 { background:
    radial-gradient(circle at 35% 28%, rgba(255,255,255,0.22), transparent 55%),
    linear-gradient(150deg, #C56B41 0%, #88412A 100%); }
.surface-2 { background:
    radial-gradient(circle at 65% 35%, rgba(255,255,255,0.16), transparent 55%),
    linear-gradient(155deg, #2F2C26 0%, #15120F 100%); }
.surface-3 { background:
    radial-gradient(circle at 50% 25%, rgba(255,255,255,0.2), transparent 60%),
    linear-gradient(165deg, #7E8366 0%, #4F543F 100%); }
.surface-4 { background:
    radial-gradient(circle at 25% 30%, rgba(255,255,255,0.28), transparent 50%),
    linear-gradient(150deg, #D9CDB8 0%, #A89B83 100%); }
.surface-5 { background:
    radial-gradient(circle at 60% 30%, rgba(255,255,255,0.2), transparent 55%),
    linear-gradient(155deg, #B8845F 0%, #7A4E2F 100%); }
.surface-6 { background:
    radial-gradient(circle at 40% 25%, rgba(255,255,255,0.18), transparent 55%),
    linear-gradient(155deg, #5F5142 0%, #2A221A 100%); }

.card__index {
  position: absolute;
  top: 14px;
  left: 14px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(242, 237, 228, 0.85);
  z-index: 3;
}

.card__chip {
  position: absolute;
  bottom: 14px;
  right: 14px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 6px 10px;
  background: rgba(242, 237, 228, 0.9);
  color: var(--ink);
  z-index: 3;
  border-radius: 999px;
}

.card__meta {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 16px;
}
.card__title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.1;
  margin: 0;
  color: var(--ink);
}
.card__price {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--ink-mute);
  white-space: nowrap;
}
.card__desc {
  font-size: 15px;
  color: var(--ink-mute);
  line-height: 1.6;
  max-width: 46ch;
}
/* Kártya-fedő link (az egész kártya kattintható a kategória-archívumra) */
.card__link { position: absolute; inset: 0; z-index: 4; }
.card__link:focus-visible { outline: 2px solid var(--clay); outline-offset: 4px; }

@media (max-width: 700px) {
  .collection__grid { grid-template-columns: 1fr; }
}

/* Feature spread ─────────────────────────────────── */

.feature {
  background: var(--ink);
  color: var(--bg);
  padding: 120px 0;
  margin: 80px 0;
  position: relative;
  overflow: hidden;
}
.feature::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='280' height='280'><filter id='n4'><feTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.85  0 0 0 0 0.78  0 0 0 0 0.66  0 0 0 0.06 0'/></filter><rect width='100%' height='100%' filter='url(%23n4)'/></svg>");
  pointer-events: none;
}

.feature__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
  position: relative;
  z-index: 2;
}

.feature__image {
  aspect-ratio: 4 / 5;
  border-radius: 2px;
  overflow: hidden;
  position: relative;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,0.22), transparent 55%),
    radial-gradient(circle at 70% 80%, rgba(0,0,0,0.35), transparent 65%),
    linear-gradient(150deg, #C2693E 0%, #6F2F1A 100%);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.6);
}
.feature__image img {
  width: 100%; height: 100%;
  object-fit: cover;
  position: absolute; inset: 0;
}
.feature__image::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='n5'><feTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.18  0 0 0 0 0.10  0 0 0 0 0.06  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n5)'/></svg>");
  mix-blend-mode: overlay;
  pointer-events: none;
}

.feature__num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(242, 237, 228, 0.55);
  margin-bottom: 28px;
  display: flex;
  gap: 16px;
  align-items: center;
}
.feature__num::before {
  content: "";
  width: 32px;
  height: 1px;
  background: rgba(242, 237, 228, 0.4);
}

.feature__title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(40px, 4.6vw, 68px);
  line-height: 1.05;
  margin: 0 0 32px;
  letter-spacing: -0.012em;
  color: var(--bg);
}
.feature__title em {
  color: var(--clay);
  font-style: italic;
}

.feature__body {
  font-size: 16px;
  line-height: 1.8;
  color: rgba(242, 237, 228, 0.78);
  max-width: 50ch;
  margin: 0 0 36px;
}

.feature__specs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 36px;
  border-top: 1px solid rgba(242, 237, 228, 0.18);
  padding-top: 28px;
  margin-bottom: 36px;
}
.feature__spec dt {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(242, 237, 228, 0.5);
  margin-bottom: 6px;
}
.feature__spec dd {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  color: var(--bg);
  margin: 0;
  line-height: 1.2;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 14px 22px;
  border-radius: 999px;
  transition: all .35s var(--ease-out);
  cursor: pointer;
  border: none;
}
.btn--ghost {
  color: var(--bg);
  border: 1px solid rgba(242, 237, 228, 0.4);
  background: transparent;
}
.btn--ghost:hover {
  background: var(--bg);
  color: var(--ink);
  border-color: var(--bg);
}
.btn--solid {
  color: var(--bg);
  background: var(--ink);
}
.btn--solid:hover { background: var(--clay-deep); }
.btn--outline {
  color: var(--ink);
  border: 1px solid var(--ink);
  background: transparent;
}
.btn--outline:hover { background: var(--ink); color: var(--bg); }

/* Mestermű-szekció gombsora: Megrendelem + Részletek (2026-08-10) */
.feature__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

.btn::after { content: "→"; font-family: var(--sans); font-size: 14px; letter-spacing: 0; }
.btn--no-arrow::after { content: none; }

@media (max-width: 880px) {
  .feature__inner { grid-template-columns: 1fr; }
}

/* Workshop / Őrség ─────────────────────────────── */

.workshop {
  padding-bottom: 120px;
}
.workshop__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
}

.workshop__quote {
  grid-column: 1 / 6;
  align-self: center;
  padding: 0 0 0 8px;
}
.workshop__quote blockquote {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.22;
  color: var(--ink);
  margin: 0 0 24px;
  letter-spacing: -0.01em;
}
.workshop__quote blockquote::before {
  content: "„";
  font-family: var(--serif);
  font-style: italic;
  font-size: 64px;
  line-height: 0;
  color: var(--clay);
  margin-right: 4px;
  vertical-align: -22px;
}
.workshop__quote-attribution {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.workshop__quote-attribution::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--ink-mute);
}

.workshop__image-1 {
  grid-column: 7 / 13;
  aspect-ratio: 4 / 5;
  border-radius: 2px;
  overflow: hidden;
  position: relative;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.18), transparent 55%),
    linear-gradient(160deg, #6B7256 0%, #3D4231 100%);
}
.workshop__image-1.has-photo { background: none; }
.workshop__image-1.has-photo::after { display: none; }   /* fotó fölött nincs zaj-overlay */
.workshop__image-1 img,
.workshop__image-2 img {
  width: 100%; height: 100%;
  object-fit: cover;
  position: absolute; inset: 0;
}
.workshop__image-1::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='n6'><feTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.2  0 0 0 0 0.18  0 0 0 0 0.12  0 0 0 0.5 0'/></filter><rect width='100%' height='100%' filter='url(%23n6)'/></svg>");
  mix-blend-mode: overlay;
  pointer-events: none;
}
.workshop__caption {
  position: absolute;
  bottom: 18px;
  left: 18px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(242, 237, 228, 0.85);
  z-index: 2;
}

.workshop__detail {
  grid-column: 1 / 5;
  margin-top: 64px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.workshop__detail .body-text { margin: 0; }

.workshop__image-2 {
  grid-column: 6 / 11;
  margin-top: 96px;
  aspect-ratio: 5 / 4;
  border-radius: 2px;
  overflow: hidden;
  position: relative;
  background:
    radial-gradient(circle at 60% 30%, rgba(255,255,255,0.2), transparent 60%),
    linear-gradient(150deg, #BFA886 0%, #7A6648 100%);
}
.workshop__image-2::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='n7'><feTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.22  0 0 0 0 0.16  0 0 0 0 0.10  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n7)'/></svg>");
  mix-blend-mode: multiply;
  pointer-events: none;
}

@media (max-width: 880px) {
  .workshop__quote, .workshop__image-1, .workshop__detail, .workshop__image-2 {
    grid-column: 1 / -1;
    margin-top: 0;
  }
  .workshop__grid > * + * { margin-top: 32px; }
}

/* Lineage / family timeline ──────────────────────── */

.lineage {
  padding-bottom: 120px; /* csak alul: a rövidítés a `.container` oldalmargóját is nullázta (2026-09-27) */
}
/* A Történetünk oldalon a dinasztia-blokk az oldal alján áll, a cím középre zárva:
   a .section-head rácsa 1fr auto 1fr, sorszám nélkül a cím a bal oszlopba esne. */
.lineage--story .section-head { grid-template-columns: 1fr; justify-items: center; padding-top: 72px; }
.lineage--story { padding-bottom: 96px; }
/* A dinasztia-fotó (2026-09-10): a lista fölött, teljes szélességben, a kép arányában. */
.lineage__photo { margin: 0 0 40px; }
.lineage__photo img { display: block; width: 100%; height: auto; border-radius: 6px; }
.lineage__photo figcaption { margin-top: 12px; font-size: 0.9rem; color: var(--ink-soft); text-align: center; }

.lineage__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}
.lineage__item {
  padding: 32px 16px 0;
  border-right: 1px solid var(--line);
  position: relative;
}
.lineage__item:last-child { border-right: none; }
.lineage__item::before {
  content: "";
  position: absolute;
  top: -4.5px;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--clay);
}
.lineage__year {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--ink-mute);
  margin-bottom: 12px;
}
.lineage__name {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 28px;
  line-height: 1.05;
  margin: 0 0 8px;
  color: var(--ink);
}
.lineage__role {
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.55;
  margin: 0;
  max-width: 24ch;
}

@media (max-width: 880px) {
  .lineage__list { grid-template-columns: repeat(2, 1fr); }
  .lineage__item:nth-child(2) { border-right: none; }
}
@media (max-width: 480px) {
  .lineage__list { grid-template-columns: 1fr; }
  .lineage__item { border-right: none; border-bottom: 1px solid var(--line); padding-bottom: 24px; }
}

/* Contact CTA ────────────────────────────────────── */

.contact {
  padding-top: 100px; padding-bottom: 140px; /* nem rövidítés: a `.container` oldalmargója marad (2026-09-27) */
  border-top: 1px solid var(--line);
  text-align: center;
}
.contact__eyebrow { margin-bottom: 32px; display: block; }
.contact__title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(42px, 5vw, 72px);
  line-height: 1.05;
  margin: 0 0 32px;
  color: var(--ink);
  letter-spacing: -0.012em;
}
.contact__title em {
  color: var(--clay-deep);
  font-style: italic;
}
.contact__lead {
  max-width: 56ch;
  margin: 0 auto 48px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 20px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.contact__row {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 64px;
}

.contact__details {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  border-top: 1px solid var(--line);
  padding-top: 40px;
  text-align: left;
}
.contact__details dt {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 8px;
}
.contact__details dd {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  color: var(--ink);
  margin: 0;
  line-height: 1.3;
}
@media (max-width: 760px) {
  .contact__details { grid-template-columns: 1fr; }
  .contact__details dt { margin-top: 16px; }
}

/* Footer ────────────────────────────────────────── */

/* A lábléc elrendezése (2026-08-13, Dani kérése: a linksor és a copyright
   vízszintesen középre).

   MI VOLT A BAJ: a rács három oszlopos, a láblécben viszont időközben ÖT elem
   lett (márkanév, linksor, fotó-közlés, süti-beállítások, copyright). A rács
   ezért magától tördelt, és a linksor meg a copyright a KÖZÉPSŐ OSZLOPBA esett,
   ami nem a lábléc közepe: mérve 157 képponttal balra állt 1366-os képernyőn.
   Nem elírás volt, hanem az automatikus elhelyezés következménye.

   A MEGOLDÁS nem plusz margó, hanem kimondott elrendezés: a felső sorban a
   márkanév és a két gomb, alatta két teljes szélességű, középre igazított sor.
   Így új elem hozzáadása sem tudja csendben elcsúsztatni a többit. */
.site-footer {
  padding: 48px var(--gutter);
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "brand  foto  suti"
    "nav    nav   nav"
    "copy   copy  copy";
  align-items: center;
  gap: 24px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  position: relative;
  z-index: 2;
  background: var(--bg-deep);
}
.site-footer .brand-mark {
  grid-area: brand;
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--ink);
}
.site-footer .footer-fotokozles { grid-area: foto; justify-self: center; }
.site-footer .footer-suti { grid-area: suti; justify-self: end; }

.site-footer nav {
  grid-area: nav;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: center;
}
/* A `wp_nav_menu` egy <ul>-t tesz a <nav>-ba, tehát a fenti flex-szabály
   önmagában nem elég: a lista-elemek egymás alá esnének, felsorolásjellel.
   🔴 Mért regresszió (2026-08-25): a lábléc menü bekötésekor a lábléc
   függőleges listává nyúlt, és a megnőtt magasságtól a fotó-közlés gombja a
   rögzített süti-sáv MÖGÉ került, ahol nem lehet rákattintani. A gépi kapu
   fogta meg (`urlap_teszt`), nem a szem. */
.site-footer .footer-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-footer .footer-menu li { margin: 0; }

.site-footer nav a { color: var(--ink-mute); transition: color .3s; }
.site-footer nav a:hover { color: var(--clay-deep); }

.site-footer .copy { grid-area: copy; text-align: center; }

@media (max-width: 760px) {
  .site-footer {
    grid-template-columns: 1fr;
    grid-template-areas: "brand" "foto" "suti" "nav" "copy";
    text-align: center;
  }
  .site-footer .footer-fotokozles,
  .site-footer .footer-suti { justify-self: center; }
  .site-footer .copy, .site-footer nav { justify-content: center; text-align: center; }
}

/* Reveal-on-scroll animation ─────────────────────── */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal[data-delay="1"] { transition-delay: .08s; }
.reveal[data-delay="2"] { transition-delay: .16s; }
.reveal[data-delay="3"] { transition-delay: .24s; }
.reveal[data-delay="4"] { transition-delay: .32s; }
.reveal[data-delay="5"] { transition-delay: .40s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero__scroll-line { animation: none; }
  .hero__bg { transition: none; transform: scale(1); }
}

/* WordPress admin bar offset + base helpers ───────── */
.admin-bar .nav { top: 32px; }
@media (max-width: 782px) { .admin-bar .nav { top: 46px; } }

.screen-reader-text {
  border: 0; clip: rect(1px,1px,1px,1px);
  clip-path: inset(50%);
  height: 1px; width: 1px;
  margin: -1px; overflow: hidden; padding: 0;
  position: absolute !important; word-wrap: normal !important;
}

/* "Történetünk" aloldal (story) ──────────────────── */

/* Csak a függőleges térköz: a rövidített `padding: 160px 0 120px` felülírta a
   `.container` oldalsó margóját, és telefonon a szöveg a képernyő széléig ért
   (2026-09-27, Dani vette észre a mobil képeken). */
.story {
  padding-top: 160px;
  padding-bottom: 120px;
}
.story__head {
  text-align: center;
  max-width: 880px;
  margin: 0 auto;
  padding-bottom: 56px;
  margin-bottom: 56px;
  border-bottom: 1px solid var(--line);
}
.story__head .eyebrow { display: block; margin-bottom: 24px; }
.story__title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(38px, 6vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 0 0 32px;
}
.story__intro {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(19px, 2vw, 25px);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 60ch;
  margin: 0 auto;
}
.story__body {
  max-width: 64ch;
  margin: 0 auto;
}
.story__h2 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.1;
  color: var(--ink);
  margin: 56px 0 24px;
}
.story__body p {
  font-size: 16.5px;
  line-height: 1.8;
  color: var(--ink-soft);
  margin: 0 0 1.3em;
}
.story__body p strong { color: var(--ink); font-weight: 600; }
.story__quote {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(23px, 2.6vw, 31px);
  line-height: 1.4;
  color: var(--clay-deep);
  border-left: 2px solid var(--clay);
  padding: 6px 0 6px 32px;
  margin: 48px 0;
}
.story__quote::before { content: "„"; }
.story__quote::after { content: "”"; }
.story__list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.3em;
}
.story__list li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 14px;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.story__list li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--clay);
}
.story__sign {
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}
.story__sign-place { font-size: 15px; color: var(--ink-soft); margin: 0 0 18px; }
.story__sign-name {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 26px;
  color: var(--ink);
  margin: 0;
}
.story__sign-name span {
  display: block;
  font-family: var(--mono);
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: 8px;
}
.story__cta { margin-top: 48px; }

@media (max-width: 760px) {
  .story { padding-top: 130px; padding-bottom: 80px; }
}


/* ═══ 2026-07-07 kiegészítések (Balázs-szövegek / galéria) ═══ */

/* Mestermű: valós fotó -> gradiens + zaj elrejtése */
.feature__image.has-photo { background: none; }
.feature__image.has-photo::after { display: none; }

/* A műhely szekció -> galéria-átjáró gomb */
.workshop__grid--cta { align-items: center; }
.workshop__cta { margin-top: 28px; }

/* Dinasztia a Történetünk-oldal tetején */
.lineage--story { margin-top: 8px; padding-top: 8px; }

/* A műhely aloldal (galéria) */
.muhely__welcome { margin-top: 30px; font-size: 1.05em; }

/* Full-bleed hero a lap tetején (a fix, áttetsző nav alá fut be) */
.muhely-hero {
  width: 100%;
  height: clamp(260px, 42vw, 580px);
  overflow: hidden;
  position: relative;
  background: var(--bg-deep);
}
.muhely-hero img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* hero jelenlétében kisebb felső levegő az artice-ban (nem kell a 160px nav-hely) */
article.muhely.story { padding-top: 64px; }
@media (max-width: 900px) {
  article.muhely.story { padding-top: 48px; }
}

/* Skálázható mozaik-rács: 4 oszlop, dense pakolás, 6-os ismétlődő span-minta.
   A cellák VÁGJÁK a képet (object-fit: cover); a teljes kép a lightboxban. */
.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px;
  grid-auto-flow: dense;
  gap: 12px;
  margin: 56px 0 8px;
}
.gallery__item {
  padding: 0; margin: 0; border: 0; background: var(--bg-deep);
  cursor: zoom-in;
  overflow: hidden;
  border-radius: 6px;
  position: relative;
}
.gallery__item img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .7s var(--ease-out);
}
.gallery__item::after {              /* finom sötétítő hover-réteg */
  content: ""; position: absolute; inset: 0;
  background: rgba(31, 27, 23, 0);
  transition: background .4s var(--ease-out);
  pointer-events: none;
}
.gallery__item::before {             /* nagyítás-jelző a sarokban */
  content: "+"; position: absolute; right: 12px; bottom: 8px; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(242, 237, 228, 0.9); color: var(--ink);
  font-size: 20px; line-height: 1;
  opacity: 0; transform: translateY(6px);
  transition: opacity .4s var(--ease-out), transform .4s var(--ease-out);
  pointer-events: none;
}
.gallery__item:hover img { transform: scale(1.05); }
.gallery__item:hover::after { background: rgba(31, 27, 23, 0.12); }
.gallery__item:hover::before { opacity: 1; transform: translateY(0); }
.gallery__item:focus-visible { outline: 2px solid var(--clay); outline-offset: 3px; }

/* span-minta (6 képenként ismétlődik → tetszőleges képszámnál kiegyensúlyozott) */
.gallery__item:nth-child(6n+1) { grid-column: span 2; grid-row: span 2; } /* nagy négyzet */
.gallery__item:nth-child(6n+4) { grid-column: span 2; }                   /* széles fekvő */
.gallery__item:nth-child(6n+6) { grid-row: span 2; }                      /* álló portré */

@media (max-width: 820px) {
  .gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; }
  .gallery__item:nth-child(6n+6) { grid-row: span 1; }
}
@media (max-width: 480px) {
  .gallery { grid-auto-rows: 130px; }
}

/* Lightbox (teljes méret) */
.lightbox {
  position: fixed; inset: 0; z-index: 999;
  display: flex; align-items: center; justify-content: center;
  background: rgba(20, 16, 12, 0.92);
  padding: 4vmin;
}
.lightbox[hidden] { display: none; }
.lightbox__img {
  max-width: 96vw; max-height: 92vh;
  object-fit: contain;
  border-radius: 2px;
  box-shadow: 0 40px 120px rgba(0,0,0,0.6);
}
.lightbox__close {
  position: fixed; top: 18px; right: 26px;
  font-size: 40px; line-height: 1;
  color: #f2ede4; background: none; border: 0;
  cursor: pointer; z-index: 1000;
}
.lightbox__nav {
  position: fixed; top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 26px; line-height: 1;
  color: #f2ede4; background: rgba(242, 237, 228, 0.12);
  border: 1px solid rgba(242, 237, 228, 0.25);
  cursor: pointer; z-index: 1000;
  transition: background .25s var(--ease-out);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.lightbox__nav:hover { background: rgba(242, 237, 228, 0.24); }
.lightbox__prev { left: 24px; }
.lightbox__next { right: 24px; }
.lightbox__counter {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  color: rgba(242, 237, 228, 0.75); font-size: 13px; letter-spacing: .12em; z-index: 1000;
}
@media (max-width: 600px) {
  .lightbox__nav { width: 42px; height: 42px; font-size: 22px; }
  .lightbox__prev { left: 10px; }
  .lightbox__next { right: 10px; }
}

/* ═══════════════════════════════════════════════════════════
   WooCommerce – bolt-arculat (S4.3, 2026-07-08)
   ═══════════════════════════════════════════════════════════ */

/* Archívum-fejléc (bolt / kategória cím + leírás) */
.woocommerce-products-header { text-align: center; margin-bottom: 56px; }
.woocommerce-products-header__title,
.wc-wrapper h1.page-title,
.wc-wrapper h1.entry-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(38px, 5vw, 60px);
  line-height: 1.05;
  color: var(--ink);
  margin: 0 0 16px;
}
.term-description,
.woocommerce-products-header .term-description {
  max-width: 640px; margin: 0 auto; color: var(--ink-soft); line-height: 1.7;
}

/* Breadcrumb */
.woocommerce-breadcrumb {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-mute); margin-bottom: 32px;
}
.woocommerce-breadcrumb a { color: var(--ink-mute); }
.woocommerce-breadcrumb a:hover { color: var(--clay); }

/* Result count + rendezés sor */
.woocommerce-result-count {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-mute);
}
.woocommerce-ordering select {
  font-family: var(--sans); font-size: 14px; padding: 8px 12px;
  border: 1px solid var(--line-strong); border-radius: 2px;
  background: var(--bg); color: var(--ink);
}

/* Termékrács */
.woocommerce ul.products,
.woocommerce-page ul.products {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px 40px;
  margin: 0; padding: 0; list-style: none;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none; display: none; }
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  width: auto !important; margin: 0 !important; float: none !important; padding: 0 !important;
}
.woocommerce ul.products li.product.card { cursor: default; }
.woocommerce ul.products li.product.card::before { content: none; }

.card__actions { margin-top: 2px; position: relative; z-index: 5; }

/* Kosár-gomb (loop) az arculatban – a stretched card__link FÖLÖTT kattintható */
.woocommerce ul.products li.product .button,
.card__actions .button {
  position: relative; z-index: 5;
  display: inline-flex; align-items: center;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  padding: 12px 20px; border-radius: 999px; border: none; cursor: pointer;
  background: var(--clay); color: var(--bg);
  transition: background .35s var(--ease-out);
}
.woocommerce ul.products li.product .button:hover,
.card__actions .button:hover { background: var(--clay-deep); color: var(--bg); }
.woocommerce ul.products li.product .added_to_cart {
  position: relative; z-index: 5; margin-left: 12px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--ink-mute);
}

/* Értesítő dobozok (info / message / error) az arculatban */
.woocommerce-info, .woocommerce-message, .woocommerce-error, .woocommerce-noreviews {
  background: var(--bg-deep); border: 1px solid var(--line);
  border-left: 3px solid var(--clay);
  padding: 16px 20px; border-radius: 4px; color: var(--ink-soft); font-size: 15px;
  list-style: none;
}
.woocommerce-info::before, .woocommerce-message::before, .woocommerce-error::before { content: none; }

@media (max-width: 900px) {
  .woocommerce ul.products, .woocommerce-page ul.products {
    grid-template-columns: repeat(2, 1fr); gap: 40px 24px;
  }
}
@media (max-width: 560px) {
  .woocommerce ul.products, .woocommerce-page ul.products { grid-template-columns: 1fr; }
}

/* Fejléc – kosár-ikon + Megrendelés gomb egy blokkban */
.nav__actions { display: flex; align-items: center; gap: 20px; justify-self: end; }
.nav__cart {
  position: relative; display: inline-flex; flex-direction: column; align-items: center; gap: 2px;
  color: var(--ink); transition: color .3s var(--ease-out);
}
/* „Vissza” gomb az oldalak alján (footer.php, Balázs kérése, 2026-09-25) */
.vissza-sav { max-width: 1200px; margin: 0 auto; padding: 32px 24px 40px; text-align: center; }

/* „Kosár” felirat az ikon alatt (Balázs kérése, 2026-09-26) */
.nav__cart-icon { position: relative; display: block; }
.nav__cart-label {
  font-family: var(--mono); font-size: 10px; line-height: 1;
  letter-spacing: .06em; text-transform: uppercase;
}
.nav__cart svg { width: 23px; height: 23px; display: block; }
.nav__cart:hover { color: var(--clay); }
.nav__cart-count {
  position: absolute; top: -7px; right: -9px;
  min-width: 17px; height: 17px; padding: 0 4px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--clay); color: var(--bg);
  font-family: var(--mono); font-size: 10px; line-height: 1;
  border-radius: 999px;
}
.nav__cart-count.is-empty { display: none; }
@media (max-width: 640px) {
  .nav__actions { gap: 14px; }
  .nav__cart svg { width: 21px; height: 21px; }
}

/* ═══════════════════════════════════════════════════════════
   WooCommerce – termékoldal (S4.4, 2026-07-08)
   ═══════════════════════════════════════════════════════════ */
.single-product div.product {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.single-product div.product::before,
.single-product div.product::after { content: none; display: none; }

.woocommerce-product-gallery { float: none !important; width: auto !important; margin: 0 !important; }
.woocommerce-product-gallery__wrapper { border-radius: 3px; overflow: hidden; }
.woocommerce-product-gallery img { border-radius: 3px; }

.single-product .summary.entry-summary { float: none !important; width: auto !important; margin: 0 !important; }
.single-product .product_title {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(30px, 4vw, 48px); line-height: 1.05; color: var(--ink); margin: 0 0 18px;
}
.single-product .summary .price,
.single-product .summary p.price {
  font-family: var(--serif); font-size: 28px; color: var(--clay-deep); margin: 0 0 24px;
}
.single-product .woocommerce-product-details__short-description {
  color: var(--ink-soft); line-height: 1.7; margin-bottom: 28px; max-width: 46ch;
}

.single-product form.cart { display: flex; align-items: stretch; gap: 14px; margin-bottom: 28px; flex-wrap: wrap; }
.single-product .quantity input.qty {
  width: 76px; padding: 12px; text-align: center;
  border: 1px solid var(--line-strong); border-radius: 999px; background: var(--bg);
  font-family: var(--sans); color: var(--ink);
}
/* 🔴 A SZELEKTOR FAJSÚLYA ITT A LÉNYEG (mérve 2026-08-25).
   A WooCommerce saját szabálya `.woocommerce button.button.alt` alakú, ami
   FAJSÚLYOSABB, mint a korábbi `.woocommerce .single_add_to_cart_button`.
   A sorrend ezen nem segít: hiába töltődik a témalap utoljára, a kisebb
   fajsúlyú szabály veszít. Emiatt a termékoldal legfontosabb gombja, a
   „Kosárba teszem", a WooCommerce alapértelmezett LILA színében állt, a
   navy-agyag arculat közepén. Egyetlen közzétett termék volt a boltban, és
   az is teszt, ezért ez eddig nem tűnt fel senkinek.
   Az `.alt` a WooCommerce elsődleges gomb-jelölése, ezért kell külön. */
.woocommerce .single_add_to_cart_button,
.woocommerce button.single_add_to_cart_button.button.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
  padding: 15px 30px; border-radius: 999px; border: none; cursor: pointer;
  background: var(--clay); color: var(--bg);
  transition: background .35s var(--ease-out);
}
.woocommerce .single_add_to_cart_button:hover,
.woocommerce button.single_add_to_cart_button.button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit.alt:hover { background: var(--clay-deep); color: var(--bg); }

/* A másodlagos (nem `.alt`) WooCommerce-gombok: kosár frissítése, kuponbeváltás,
   „Vásárlás folytatása". Ugyanaz a forma, visszafogottabb kitöltéssel. */
.woocommerce a.button:not(.alt):not(.add_to_cart_button),
.woocommerce button.button:not(.alt),
.woocommerce input.button:not(.alt) {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
  padding: 14px 26px; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--ink); border: 1px solid var(--ink);
  transition: all .35s var(--ease-out);
}
.woocommerce a.button:not(.alt):not(.add_to_cart_button):hover,
.woocommerce button.button:not(.alt):hover,
.woocommerce input.button:not(.alt):hover { background: var(--ink); color: var(--bg); }

.single-product .product_meta {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: var(--ink-mute);
  border-top: 1px solid var(--line); padding-top: 20px; line-height: 1.9;
}
.single-product .product_meta a { color: var(--ink-soft); }
.single-product .product_meta a:hover { color: var(--clay); }

.woocommerce-tabs { grid-column: 1 / -1; margin-top: 64px; }
.woocommerce-tabs ul.tabs {
  list-style: none; margin: 0 0 28px; padding: 0 0 4px;
  display: flex; gap: 28px; border-bottom: 1px solid var(--line);
}
.woocommerce-tabs ul.tabs li { margin: 0; }
.woocommerce-tabs ul.tabs li a {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-mute); padding-bottom: 12px; display: inline-block;
}
.woocommerce-tabs ul.tabs li.active a { color: var(--ink); border-bottom: 2px solid var(--clay); }
.woocommerce-tabs .panel h2 { font-family: var(--serif); font-weight: 500; color: var(--ink); }
.woocommerce-tabs .panel { color: var(--ink-soft); line-height: 1.7; }

.related.products { grid-column: 1 / -1; margin-top: 72px; }
.related.products > h2 {
  font-family: var(--serif); font-weight: 500; font-size: clamp(24px, 3vw, 34px);
  color: var(--ink); margin-bottom: 32px;
}

.woocommerce span.onsale {
  background: var(--clay); color: var(--bg); font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 999px; min-height: 0; min-width: 0; line-height: 1; top: 12px; left: 12px;
}

@media (max-width: 820px) {
  .single-product div.product { grid-template-columns: 1fr; gap: 32px; }
}

/* ═══════════════════════════════════════════════════════════
   WooCommerce – kosár + pénztár (S4.5, 2026-07-08)
   ═══════════════════════════════════════════════════════════ */
.woocommerce table.shop_table {
  border: 1px solid var(--line); border-radius: 4px; border-collapse: collapse; width: 100%;
  font-size: 15px; color: var(--ink-soft);
}
.woocommerce table.shop_table th {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-mute); font-weight: 500; padding: 16px; text-align: left;
  border-bottom: 1px solid var(--line); background: var(--bg-deep);
}
.woocommerce table.shop_table td { padding: 16px; border-top: 1px solid var(--line); vertical-align: middle; }
.woocommerce table.shop_table td.product-name a { color: var(--ink); }
.woocommerce table.shop_table td.product-name a:hover { color: var(--clay); }
.woocommerce .product-thumbnail img { width: 64px; height: 64px; object-fit: cover; border-radius: 3px; }
.woocommerce a.remove { color: var(--ink-mute) !important; font-size: 20px; line-height: 1; }
.woocommerce a.remove:hover { color: var(--clay) !important; background: none !important; }

.woocommerce .cart .quantity input.qty {
  width: 66px; padding: 10px; text-align: center;
  border: 1px solid var(--line-strong); border-radius: 999px; background: var(--bg);
}
.woocommerce .cart .actions { padding: 20px 0; }
.woocommerce .cart .actions .coupon input {
  padding: 12px 16px; border: 1px solid var(--line-strong); border-radius: 999px;
  background: var(--bg); font-family: var(--sans); margin-right: 10px;
}

/* Gombok (kosár + pénztár) – terrakotta */
.woocommerce .button.alt,
.woocommerce a.button.checkout-button,
.woocommerce #place_order,
.woocommerce .wc-proceed-to-checkout a.checkout-button {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  padding: 15px 30px; border-radius: 999px; border: none; cursor: pointer;
  background: var(--clay); color: var(--bg);
  transition: background .35s var(--ease-out);
}
.woocommerce .button.alt:hover,
.woocommerce a.button.checkout-button:hover,
.woocommerce #place_order:hover { background: var(--clay-deep); color: var(--bg); }
/* Másodlagos gomb (Kosár frissítése) */
.woocommerce .cart .actions button[name="update_cart"] {
  background: transparent; color: var(--ink); border: 1px solid var(--line-strong);
}
.woocommerce .cart .actions button[name="update_cart"]:hover { background: var(--ink); color: var(--bg); }

/* Összegzés doboz */
.cart_totals, .cart-collaterals .cart_totals {
  background: var(--bg-deep); border: 1px solid var(--line); border-radius: 4px; padding: 8px 24px 20px;
}
/* A WooCommerce a kosár összesítőjét 48%-ra szűkíti és jobbra úsztatja; nálunk olyan
   széles legyen, mint a fölötte lévő terméklista (Dani, Telegram, 2026-09-10). */
.woocommerce .cart-collaterals .cart_totals,
.woocommerce-page .cart-collaterals .cart_totals { width: 100%; float: none; }
.cart_totals h2, #order_review_heading {
  font-family: var(--serif); font-weight: 500; font-size: 24px; color: var(--ink);
}
.wc-proceed-to-checkout a.checkout-button { display: block; text-align: center; }

/* Átvevőpont-mező segítő szövege (2026-09-10): sima bekezdés, nem buborék */
.zs-atvevopont-sugo { display: block; margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink-soft); }
.zs-atvevopont-sugo a { color: var(--clay); text-decoration: underline; }

/* Pénztár űrlap */
.woocommerce-checkout h3 { font-family: var(--serif); font-weight: 500; color: var(--ink); font-size: 22px; }
.woocommerce form .form-row label { font-size: 13px; color: var(--ink-soft); margin-bottom: 6px; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce-checkout select {
  padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: 3px;
  background: var(--bg); font-family: var(--sans); font-size: 15px; color: var(--ink); width: 100%;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus { outline: none; border-color: var(--clay); }

/* Fizetési módok blokk */
.woocommerce-checkout #payment {
  background: var(--bg-deep); border: 1px solid var(--line); border-radius: 4px;
}
.woocommerce-checkout #payment ul.payment_methods { border-bottom: 1px solid var(--line); }
.woocommerce-checkout #payment ul.payment_methods li { font-size: 15px; color: var(--ink); }
.woocommerce-checkout #payment div.payment_box {
  background: var(--bg); border-radius: 3px; color: var(--ink-soft); font-size: 14px;
}
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: var(--bg); }
.woocommerce-checkout #payment #place_order { width: 100%; margin-top: 12px; }

/* ═══════════════════════════════════════════════════════════
   Kapcsolat – helyszín (térkép) + közösség (FB) sor (S5, 2026-07-08)
   ═══════════════════════════════════════════════════════════ */
/* 2026-08-10 (Dani kérése): a két kártya NEM fele-fele.
   A Facebook-doboz tartalma fix, 340 képpont széles (a Meta a beágyazás URL-jében
   kapja meg ezt a méretet), ezért egy fele-fele osztásban jókora üres sáv maradt
   mellette. A térkép viszont annál jobb, minél szélesebb. Ezért a Facebook-oszlop
   pont akkora, amekkorát a doboz kér, és a maradék teljes szélesség a térképé. */
.contact__locale {
  display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 32px;
  margin-top: 72px; text-align: left; align-items: stretch;
}
.locale-card {
  border: 1px solid var(--line); border-radius: 6px; overflow: hidden;
  background: var(--bg-deep); display: flex; flex-direction: column;
}

/* Térkép-kártya */
.locale-card__visual {
  aspect-ratio: 16 / 10;
  background:
    radial-gradient(circle at 40% 35%, rgba(255,255,255,0.14), transparent 55%),
    linear-gradient(160deg, #7E8366 0%, #4F543F 100%);
  background-size: cover; background-position: center;
  display: grid; place-items: center;
}
.locale-card__visual.has-photo { background-color: var(--pebble); }

/* A térkép szélesebb lett, ezért laposabb arány kell hozzá: 16/10-nél a nagyobb
   szélesség aránytalanul magas dobozt adna, és megint üres sáv keletkezne a
   Facebook-doboz mellett, csak most függőlegesen. (2026-08-10) */
.locale-card--map .locale-card__visual { aspect-ratio: 16 / 9; }
.locale-card__pin { width: 48px; height: 48px; color: rgba(242, 237, 228, 0.92); }
.locale-card__body { padding: 24px 26px; }
.locale-card__title { font-family: var(--serif); font-weight: 500; font-size: 24px; color: var(--ink); margin: 0 0 6px; }
.locale-card__addr { color: var(--ink-soft); margin: 0 0 20px; font-size: 15px; }

/* Térkép consent-gate (2026-07-31): a valódi térkép csak kattintásra tölt be.
   A gomb szándékosan világos a sötétzöld felületen – a korábbi tanulság az volt,
   hogy a krém-a-krémen gomb egyszerűen láthatatlan maradt. */
.map-consent {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 26px 24px; text-align: center;
}
.map-consent__note {
  margin: 0; max-width: 32ch; font-size: 13px; line-height: 1.6;
  color: rgba(242, 237, 228, 0.86);
}
.map-consent__load {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 12px 22px; border-radius: 3px; cursor: pointer;
  background: #f2ede4; color: #2c2c2c; border: 1px solid rgba(255, 255, 255, 0.5);
  transition: background 0.2s ease;
}
.map-consent__load:hover { background: #fff; }
.map-consent__load:disabled { opacity: 0.7; cursor: default; }

/* Betöltés után a kártya-felület átadja a helyét a térképnek. A position +
   z-index: 0 szándékos: így a Leaflet magas belső z-indexei nem másznak rá a
   fejlécre. */
.locale-card__visual.is-map-live { display: block; background: var(--pebble); }
.map-live { width: 100%; height: 100%; position: relative; z-index: 0; }
/* ⚠️ A `leaflet-container` osztályt a Leaflet MAGÁRA a .map-live divre teszi, nem
   egy gyerekelemre. Ezért nincs szóköz a két osztály között: a `.map-live
   .leaflet-container` alak némán soha nem érvényesült, és emiatt az attribúció
   meg a popup a Leaflet gyári Helveticájával jelent meg, nem a téma betűjével.
   Javítva 2026-08-01, gépi ellenőrzéssel: dev/terkep_teszt/ellenoriz.js. */
.map-live.leaflet-container { font: inherit; }

/* Facebook consent-gate */
.locale-card--fb { justify-content: center; }
.fb-consent {
  padding: 44px 30px; text-align: center; min-height: 480px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
}
/* Betöltés után a doboz a kártya teljes magasságát kitölti, hogy a térkép
   mellett ne maradjon alatta üres sáv (Dani kérése, 2026-08-10). A tényleges
   képkocka-magasságot a main.js a térkép-kártyából számolja, mert a Meta a
   beágyazás URL-jében kapja meg, CSS-sel nem nyújtható. */
.fb-consent.is-loaded { padding: 0; min-height: 0; height: 100%; }
.fb-consent.is-loaded iframe { height: 100%; display: block; }
.fb-consent__icon { width: 46px; height: 46px; color: #1877f2; }
.fb-consent__note { color: var(--ink-mute); font-size: 13px; line-height: 1.6; max-width: 34ch; margin: 0; }
.fb-consent__direct {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-mute);
}
.fb-consent__direct:hover { color: var(--clay); }
.fb-consent iframe { width: 100%; max-width: 100%; border: none; display: block; }

@media (max-width: 780px) {
  .contact__locale { grid-template-columns: 1fr; }
  .fb-consent { min-height: 420px; }
  /* Telefonon a doboz a térkép ALATT áll, a „height: 100%”-nak nincs mihez igazodnia,
     és az iframe egy keskeny csíkra esett össze (Dani képe, 2026-09-27). Itt fix,
     olvasható magasság kell; a main.js ugyanekkora hírfolyamot kér a Metától. */
  .fb-consent.is-loaded { height: auto; }
  .fb-consent.is-loaded iframe { height: 560px; }
}

/* Kenyérsütő cserépedény aloldal ───────────────── 2026-08-10
   A színvilág szándékosan a főoldali feature-szekcióé: sötét alap, krém szöveg.
   Így a „Részletek" gombról érkező látogató ugyanannak a blokknak a folytatását
   látja, nem egy másik oldalra esik. */

.kenyer {
  background: var(--ink);
  color: var(--bg);
}

/* 2026-09-26 (Balázs kérése): az edény a fedelével együtt teljesen látsszon.
   A képen a fedél teteje a magasság ~16%-ánál, a tál alja ~71%-ánál van; a
   magasabb plafon és a 34%-os függőleges pozíció 1920 px szélességig mindkettőt
   benn tartja, a sötétítés pedig csak a tál alatt kezdődik. */
.kenyer-hero {
  /* A rögzített fejléc (87 px, mobilon 111 px) eddig a kép tetejére lógott,
     és épp a fedelet takarta. A --nav-h-t a main.js méri. */
  margin-top: var(--nav-h, 87px);
  width: 100%;
  height: clamp(260px, 46vw, 680px);
  overflow: hidden;
  position: relative;
}
.kenyer-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 34%;
  display: block;
}
.kenyer-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(31, 27, 23, 0) 72%, var(--ink) 100%);
  pointer-events: none;
}

.kenyer__inner { padding-top: 72px; padding-bottom: 130px; } /* nem rövidítés: a `.container` oldalmargója marad (2026-09-27) */

.kenyer__head {
  text-align: center;
  max-width: 880px;
  margin: 0 auto 56px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(242, 237, 228, 0.18);
}
.kenyer__head .eyebrow {
  display: block;
  margin-bottom: 22px;
  color: rgba(242, 237, 228, 0.55);
}
.kenyer__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(34px, 5.4vw, 64px);
  line-height: 1.08;
  letter-spacing: -0.012em;
  color: var(--bg);
  margin: 0 0 28px;
}
.kenyer__title em {
  font-style: italic;
  color: var(--clay);
  font-size: 0.62em;
  display: inline-block;
  margin-top: 10px;
}
.kenyer__claim {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(19px, 2vw, 26px);
  line-height: 1.5;
  color: rgba(242, 237, 228, 0.85);
  max-width: 56ch;
  margin: 0 auto;
}
.kenyer__claim::before { content: "„"; }
.kenyer__claim::after { content: "”"; }

.kenyer__body { max-width: 68ch; margin: 0 auto; }

.kenyer__lead {
  font-size: 18px;
  line-height: 1.75;
  color: rgba(242, 237, 228, 0.92);
  margin: 0 0 52px;
}

.kenyer__subtitle {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.15;
  color: var(--bg);
  margin: 0 0 30px;
}

.kenyer__list { margin: 0 0 56px; }
.kenyer__list-item {
  padding: 22px 0;
  border-top: 1px solid rgba(242, 237, 228, 0.16);
}
.kenyer__list-item:last-child { border-bottom: 1px solid rgba(242, 237, 228, 0.16); }
.kenyer__list dt {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--clay);
  margin-bottom: 10px;
}
.kenyer__list dd {
  margin: 0;
  font-size: 16px;
  line-height: 1.75;
  color: rgba(242, 237, 228, 0.78);
}

.kenyer__ajanlo {
  background: rgba(242, 237, 228, 0.06);
  border-left: 2px solid var(--clay);
  padding: 32px clamp(22px, 3vw, 40px);
  margin: 0 0 56px;
}
.kenyer__ajanlo h2 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 26px;
  margin: 0 0 18px;
  color: var(--bg);
}
.kenyer__ajanlo p {
  font-size: 16px;
  line-height: 1.75;
  color: rgba(242, 237, 228, 0.82);
  margin: 0 0 1.1em;
}
.kenyer__ajanlo p:last-child { margin-bottom: 0; }
.kenyer__ajanlo strong { color: var(--bg); font-weight: 600; }

.kenyer__specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 22px 28px;
  margin: 0 0 52px;
  padding: 30px 0;
  border-top: 1px solid rgba(242, 237, 228, 0.16);
  border-bottom: 1px solid rgba(242, 237, 228, 0.16);
}
.kenyer__spec dt {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(242, 237, 228, 0.5);
  margin-bottom: 8px;
}
.kenyer__spec dd {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 21px;
  line-height: 1.25;
  color: var(--bg);
}

.kenyer__zaras {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(20px, 2.2vw, 27px);
  line-height: 1.5;
  color: var(--clay);
  margin: 0 0 44px;
}

.kenyer__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 0;
}

@media (max-width: 560px) {
  .kenyer__inner { padding-top: 48px; padding-bottom: 90px; }
  .kenyer__cta .btn { width: 100%; justify-content: center; }
}

/* Felugró ablak (kapcsolatfelvétel, hír) ───────── 2026-08-10 */

.zmodal {
  position: fixed;
  inset: 0;
  /* 🔴 950, NEM 900. A rögzített süti-sáv (`.zsuti`) 900-on ül, és a
     `wp_footer`-ben utána renderelődik, tehát azonos z-indexnél ő nyerte a
     holtversenyt: a felugró ablakok ALSÓ sávját letakarta. Következmény, amíg
     a látogató nem döntött a sütikről: a kapcsolatfelvételi űrlap KÜLDÉS
     gombjára nem lehetett rákattintani. Mérve 2026-08-25-én, a gépi kapu
     fogta meg (`urlap_teszt`), szemmel nem látszott, mert az ablak látszólag
     rendben megnyílt.
     A sorrend szándékos: lightbox (999) > felugró ablak (950) > süti-sáv (900). */
  z-index: 950;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 48px);
}
.zmodal[hidden] { display: none; }
body.zmodal-nyitva { overflow: hidden; }

.zmodal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(31, 27, 23, 0.55);
  backdrop-filter: blur(2px);
}

.zmodal__panel {
  position: relative;
  z-index: 1;
  width: min(560px, 100%);
  max-height: 88vh;
  overflow-y: auto;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: clamp(28px, 4vw, 44px);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.55);
}

.zmodal__close {
  position: absolute;
  top: 12px;
  right: 14px;
  border: none;
  background: transparent;
  font-size: 28px;
  line-height: 1;
  color: var(--ink-mute);
  cursor: pointer;
  padding: 4px 8px;
}
.zmodal__close:hover { color: var(--clay); }

.zmodal__title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(26px, 3vw, 34px);
  line-height: 1.15;
  margin: 0 0 10px;
  color: var(--ink);
}
.zmodal__lead {
  color: var(--ink-mute);
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 26px;
}

/* Űrlap */

.zform__row { margin-bottom: 18px; }
.zform__row label {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 7px;
}
.zform__row label small { text-transform: none; letter-spacing: 0; font-size: 11px; }
.zform__row input[type="text"],
.zform__row input[type="email"],
.zform__row input[type="tel"],
.zform__row textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  padding: 11px 13px;
}
.zform__row textarea { resize: vertical; min-height: 120px; }
.zform__row input:focus,
.zform__row textarea:focus {
  outline: 2px solid var(--clay);
  outline-offset: 1px;
  border-color: var(--clay);
}

/* Levélszemét-csapda: a képernyőn nem látszik, a felolvasó elől is el van rejtve,
   de a robotok kitöltik. Nem display:none, mert azt egyes robotok kiszűrik. */
.zform__csapda {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.zform__row--check label {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.55;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-soft);
}
.zform__row--check input { margin-top: 3px; flex: 0 0 auto; }
.zform__row--check a { color: var(--clay-deep); text-decoration: underline; }

.zform__statusz {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.55;
  min-height: 1em;
}
.zform__statusz.is-ok { color: var(--olive); }
/* Sikeres küldés után: csak a visszajelzés és a Bezárás gomb marad (main.js) */
.zform--kesz .zform__row,
.zform--kesz button[type="submit"] { display: none; }
.zform--kesz .zform__statusz {
  font-size: 20px; line-height: 1.5; font-weight: 600;
  padding: 20px; margin: 8px 0 20px;
  border: 1px solid currentColor; border-radius: 6px; text-align: center;
}
.zform__statusz.is-hiba { color: var(--clay-deep); }

.zform__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

@media (max-width: 560px) {
  .zmodal__panel { padding: 26px 20px; max-height: 92vh; }
  .zform__actions .btn { width: 100%; justify-content: center; }
}

/* Hír-felugró (a legfrissebb hír a kezdőlapon) */

.zmodal--hir .zmodal__panel { width: min(660px, 100%); }
.zmodal--hir .hir__datum { margin-bottom: 10px; }
.zmodal__kep {
  margin: 0 0 22px;
  border-radius: 2px;
  overflow: hidden;
}
.zmodal__kep img { width: 100%; height: auto; display: block; }
.zmodal__szoveg {
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink-soft);
  margin-bottom: 28px;
}
.zmodal__szoveg p { margin: 0 0 1.2em; }
.zmodal__szoveg p:last-child { margin-bottom: 0; }
.zmodal__szoveg img { max-width: 100%; height: auto; border-radius: 2px; }
.zmodal__szoveg a { color: var(--clay-deep); text-decoration: underline; }

/* Lábléc: termékfotó-közlés (2026-08-10)
   Nem apróbetűs jogi link, hanem látható, kattintható felirat: a szöveg
   önmagában is elmondja a lényeget, ha a látogató nem nyitja meg. */
/* 🔴 2026-08-10 (Dani kérése): ez a felirat NAGYOBB és vastagabb lett, és
   kimondja a mesterséges intelligenciát.
   MIÉRT: a kép-jelölés csak akkor tölti be a szerepét, ha a látogató el is
   olvassa. Egy halvány, apró betűs sor a lábléc alján formailag ott van, de
   gyakorlatilag láthatatlan, és pont az átláthatóságot nem szolgálja. */
.footer-fotokozles {
  border: none;
  background: transparent;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.7;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 10px 0;
  text-decoration: underline;
  text-underline-offset: 5px;
  text-align: center;
}
.footer-fotokozles:hover { color: var(--clay); }
.footer-fotokozles:focus-visible { outline: 2px solid var(--clay); outline-offset: 3px; }

/* Hírek aloldal ────────────────────────────────── 2026-08-10 */

.hirek__lista {
  max-width: 68ch;
  margin: 0 auto;
}

.hir {
  padding-bottom: 52px;
  margin-bottom: 52px;
  border-bottom: 1px solid var(--line);
}
.hir:last-child { border-bottom: none; margin-bottom: 24px; }

.hir__datum {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 12px;
}
.hir__cim {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 24px;
}
.hir__kep {
  margin: 0 0 26px;
  border-radius: 2px;
  overflow: hidden;
}
.hir__kep img { width: 100%; height: auto; display: block; }
.hir__szoveg {
  font-size: 16.5px;
  line-height: 1.8;
  color: var(--ink-soft);
}
.hir__szoveg p { margin: 0 0 1.3em; }
.hir__szoveg img { max-width: 100%; height: auto; border-radius: 2px; }
.hir__szoveg a { color: var(--clay-deep); text-decoration: underline; }

.hirek__ures {
  text-align: center;
  color: var(--ink-mute);
  font-size: 17px;
  padding: 40px 0 20px;
}

/* ═══════════════════════════════════════════════════════════════════
   Süti-elfogadó sáv (2026-08-13)

   Alul ül, nem modális: a látogató tud olvasni és görgetni közben.
   Szándékosan NEM sötétíti a hátteret, és nincs benne „X" gomb, mert a
   kérdésre válasz kell, nem elhessegetés. A két gomb vizuálisan
   egyenrangú, az elutasítás nincs szürkére tompítva: a látszólag szabad,
   valójában terelt választás megtévesztő minta.
   ═══════════════════════════════════════════════════════════════════ */
/* 🔴 A rögzített sáv a lap aljára ül, tehát letakarja a lábléc alsó sávját:
   a látogató épp addig nem éri el a termékfotó-közlést és a jogi linkeket, amíg
   nem döntött. A `--zsuti-magassag` értéket a main.js írja, amikor a sávot
   megjeleníti, és nullázza, amikor elrejti. Így pont annyi hely marad alul,
   amennyit a sáv elfoglal, nem egy találomra vett érték. */
body { padding-bottom: var(--zsuti-magassag, 0px); }

.zsuti {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 900;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 28px;
  padding: 20px clamp(20px, 4vw, 48px);
  background: var(--bg-deep);
  border-top: 1px solid var(--line-strong);
  box-shadow: 0 -8px 28px rgba(31, 27, 23, 0.14);
}
.zsuti[hidden] { display: none; }

.zsuti__szoveg { flex: 1 1 460px; min-width: 0; }
.zsuti__szoveg p {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 78ch;
}
.zsuti__cim {
  font-family: var(--sans);
  font-size: 12.5px !important;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 6px !important;
}
.zsuti__apro {
  margin-top: 8px !important;
  font-size: 13px !important;
  color: var(--ink-mute) !important;
}

/* A jelenlegi beállítás. Kiemelve, mert ez a válasz arra a kérdésre, amiért a
   látogató a lábléc gombjára kattintott: „mi van most beállítva?" */
.zsuti__allapot {
  margin-bottom: 10px !important;
  padding: 8px 12px;
  border-left: 3px solid var(--olive);
  background: rgba(107, 114, 86, 0.08);
  font-size: 13.5px !important;
  color: var(--ink) !important;
}
.zsuti__allapot[hidden] { display: none; }
.zsuti__link {
  display: inline-block;
  margin-top: 6px;
  font-size: 13px;
  color: var(--clay-deep);
  text-decoration: underline;
}

.zsuti__gombok {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  flex: 0 0 auto;
}
.zsuti__gombok .btn { white-space: nowrap; }

@media (max-width: 640px) {
  .zsuti { gap: 14px; padding: 16px 20px; }
  .zsuti__szoveg p { font-size: 13px; }
  .zsuti__gombok { width: 100%; }
  .zsuti__gombok .btn { flex: 1 1 auto; text-align: center; }
}

.zsuti__visszajelzes {
  display: inline-block;
  margin-left: 14px;
  font-size: 14px;
  color: var(--olive);
  max-width: 46ch;
  vertical-align: middle;
}

/* Lábléc: „Süti-beállítások". Ugyanaz a visszafogott, gomb-nem-gomb megjelenés,
   mint a termékfotó-közlésé, hogy a láblécsor egységes maradjon. */
.footer-suti {
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-mute);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color 0.25s var(--ease-out);
}
.footer-suti:hover { color: var(--clay-deep); }

/* ── Szöveges és jogi aloldalak (süti-tájékoztató, ÁSZF, termékeink tulajdonságai) ──
   A `.szoveges-oldal` a `page-jogi.php` közös kerete: ott a tartalom a WordPress
   szerkesztőjéből jön, tehát sima h2/h3/ul/ol/a elemekre is kell stílus. */
.jogi-oldal .story__body h2,
.szoveges-oldal .story__body h2 {
  margin: 2.2em 0 0.6em;
  font-family: var(--serif);
  font-size: clamp(24px, 2.4vw, 31px);
  font-weight: 500;
  color: var(--ink);
}

.jogi-tabla {
  width: 100%;
  border-collapse: collapse;
  margin: 1.4em 0 0.6em;
  font-size: 15px;
}
.jogi-tabla th,
.jogi-tabla td {
  text-align: left;
  vertical-align: top;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}
.jogi-tabla thead th {
  font-family: var(--sans);
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  border-bottom-color: var(--line-strong);
}
.jogi-tabla code {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--clay-deep);
  overflow-wrap: anywhere;
}
.jogi-tabla small { color: var(--ink-mute); }

/* A táblázat szűk kijelzőn görgethető marad, nem töri szét az oldalt. */
@media (max-width: 640px) {
  .jogi-tabla { display: block; overflow-x: auto; white-space: nowrap; }
  .jogi-tabla td, .jogi-tabla th { white-space: normal; min-width: 150px; }
}

.jogi-frissites {
  margin-top: 2.6em;
  font-size: 14px;
  color: var(--ink-mute);
}

/* ── A közös szöveges keret tartalma (`page-jogi.php` → `.szoveges-oldal`) ──
   Itt a törzs a WordPress szerkesztőjéből érkezik (ÁSZF, adatkezelési
   tájékoztató, termékeink tulajdonságai), tehát osztály nélküli h3/ul/ol/a/
   table elemek jönnek. Ezek kapnak itt stílust, hogy a beillesztett szöveg
   ugyanúgy nézzen ki, mint a kézzel írt oldalak.
   ⚠️ A `.story__body p` és a h2 fent már definiált, azokat itt nem ismételjük. */

.szoveges-oldal .story__body h3 {
  margin: 1.8em 0 0.5em;
  font-family: var(--serif);
  font-size: clamp(19px, 1.7vw, 23px);
  font-weight: 500;
  color: var(--ink);
}

.szoveges-oldal .story__body ul,
.szoveges-oldal .story__body ol {
  margin: 0 0 1.3em;
  padding-left: 1.4em;
  color: var(--ink-soft);
  font-size: 16.5px;
  line-height: 1.8;
}
.szoveges-oldal .story__body li { margin-bottom: 0.5em; }
.szoveges-oldal .story__body li::marker { color: var(--clay-deep); }

.szoveges-oldal .story__body a {
  color: var(--clay-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.szoveges-oldal .story__body a:hover { color: var(--ink); }

.szoveges-oldal .story__body blockquote {
  margin: 1.6em 0;
  padding: 0.2em 0 0.2em 1.2em;
  border-left: 2px solid var(--line);
  color: var(--ink-soft);
}

.szoveges-oldal .story__body table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.4em 0 0.6em;
  font-size: 15px;
}
.szoveges-oldal .story__body th,
.szoveges-oldal .story__body td {
  border: 1px solid var(--line);
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
  color: var(--ink-soft);
}
.szoveges-oldal .story__body thead th { color: var(--ink); font-weight: 600; }

@media (max-width: 640px) {
  .szoveges-oldal .story__body table { display: block; overflow-x: auto; }
}

/* ── Szekció-fejléc akciógombbal (Kollekció → Termékeink tulajdonságai) ──
   A `.section-head` alap-rácsa `1fr auto 1fr`, jobbra a kis mono felirat áll.
   Itt a jobb oszlop a feliratot ÉS a gombot tartja, egymás alatt, jobbra zárva,
   tehát a gomb a CÍM MELLETT marad, nem csúszik a szekció aljára (Dani kérése,
   2026-08-24). Szűk kijelzőn a fejléc egy oszlopra vált, és a sorrend
   szám → cím → felirat → gomb lesz. */
.section-head--akcio .section-head__jobb {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
}
.section-head--akcio .section-head__jobb .section-head__rule { text-align: right; }

@media (max-width: 760px) {
  .section-head--akcio {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 16px;
    padding-bottom: 44px;
  }
  .section-head--akcio .section-head__jobb { align-items: center; }
  .section-head--akcio .section-head__jobb .section-head__rule { text-align: center; }
}

/* ── Termékfotó-közlés a képek alatt (2026-08-25) ──
   Nem apróbetűs: a kellék-közlésnek olvashatónak kell lennie, különben
   formailag ott van, gyakorlatilag nincs. Ugyanaz az elv, amiért a lábléci
   közlés is 13 px félkövér lett. */
.termek-kep-kozles {
  margin: 14px 0 0;
  padding: 12px 14px;
  border-left: 2px solid var(--line-strong);
  background: var(--bg-deep);
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.termek-kep-kozles a {
  color: var(--clay-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.termek-kep-kozles--archivum { margin: 0 0 28px; }

/* Gyorskereső a Bolt és a kategória-oldalak tetején (2026-09-27, FEJLESZTESEK 8.4). */
.zs-kereso { margin: 0 0 22px; max-width: 640px; }
.zs-kereso__cimke {
  display: block; margin-bottom: 7px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-mute);
}
.zs-kereso__sor { display: flex; gap: 10px; flex-wrap: wrap; }
.zs-kereso input[type="search"] {
  flex: 1 1 160px; min-width: 0;
  font-family: var(--sans); font-size: 15px; color: var(--ink);
  background: #fff; border: 1px solid var(--line-strong); border-radius: 2px; padding: 11px 13px;
}
.zs-kereso input[type="search"]:focus { outline: 2px solid var(--clay); outline-offset: 1px; border-color: var(--clay); }