.ag-fal {
    --tinta: #1f3b33;
    --betu: "Segoe UI", Roboto, system-ui, -apple-system, sans-serif;   /* csak rendszerbetű (GDPR) */
    --lyuk: 26px;                                                       /* a lyukak távolsága – a script is ezt használja */
    position: relative; overflow: hidden; isolation: isolate;
    max-width: 1100px; margin: 18px auto 0; padding: 26px 24px 40px;
    font-family: var(--betu); color: var(--tinta); text-align: center;
    /* lyukacsos farostlemez: világos barna alap + szabályos lyukak (26 px-enként) + halvány foltok */
    background:
      radial-gradient(circle, #5a3f24 0 2.4px, rgba(90,63,36,.25) 2.9px, transparent 3.4px) 13px 13px / 26px 26px,
      radial-gradient(ellipse at 20% 15%, rgba(255,255,255,.18), transparent 45%),
      radial-gradient(ellipse at 85% 80%, rgba(120,80,40,.12), transparent 50%),
      #d6b483;
    border: 12px solid #9a6b35; border-radius: 14px;                    /* fakeret – mint az iskolai táblán */
    box-shadow: inset 0 0 0 2px #6e4a22, inset 0 0 36px rgba(80,50,20,.25), 0 10px 28px rgba(0,0,0,.18);
  }

  /* ---------- a szög: a lyukból kiálló fém fej (a sötét gyűrű a lyuk pereme) ---------- */
  .ag-szeg {
    position: absolute; left: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; z-index: 3;
    background: radial-gradient(circle at 35% 30%, #ffffff 0 10%, #cfd4d8 32%, #858c91 70%, #4e555a);
    box-shadow: 0 0 0 2.5px #4a3320, 1px 3px 3px rgba(0,0,0,.45);
  }
  .ag-log { position: relative; transform: translate(var(--dx, 0px), var(--dy, 0px)); }   /* a script itt igazít a lyukhoz */

  /* ---------- felső sor: szerszámok + felirat-deszka ---------- */
  .ag-fal__fej { display: grid; grid-template-columns: 1fr minmax(0, 560px) 1fr; align-items: start; gap: 12px; }
  .ag-fal__eszkozok { display: flex; justify-content: center; align-items: flex-start; gap: 22px; }
  .ag-eszkoz { --h: 180px; height: var(--h); }
  .ag-eszkoz svg { display: block; height: 100%; width: auto; overflow: visible;
    filter: drop-shadow(3px 7px 5px rgba(60,35,10,.40)); }      /* valódi vetett árnyék a falon */
  .ag-eszkoz .ag-szeg { top: calc(var(--h) * .06); }           /* a rajzokon a felakasztó lyuk a magasság 6%-ánál van */
  .ag-fal__deszka {
    position: relative; margin-top: 6px; padding: 18px 26px 20px; border-radius: 6px;
    background:
      repeating-linear-gradient(178deg, rgba(0,0,0,.05) 0 2px, transparent 2px 11px),
      linear-gradient(180deg, #b98649, #9a6b35);
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.12), 0 6px 0 #6e4a22, 0 12px 20px rgba(0,0,0,.25);
  }
  .ag-fal__deszka::before, .ag-fal__deszka::after {          /* két csavar a deszka sarkaiban */
    content: ""; position: absolute; top: 10px; width: 10px; height: 10px; border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #f1f1f1, #8e979d 60%, #5f666b);
  }
  .ag-fal__deszka::before { left: 10px; } .ag-fal__deszka::after { right: 10px; }
  .ag-fal__cim {
    margin: 0; font-family: var(--betu); font-weight: 900; text-transform: uppercase;
    font-size: clamp(1.7rem, 4.6vw, 2.9rem); line-height: 1.05; letter-spacing: .05em; color: #fbf3e0;
    text-shadow: 0 2px 0 rgba(60,35,10,.45);                  /* sablonnal festett felirat érzete */
  }
  .ag-fal__cim span { display: inline-block; }
  .ag-fal__al { margin: 8px 0 0; font-size: clamp(.95rem, 2vw, 1.08rem); font-weight: 600; color: #f6e6c6; }

  /* ---------- a 4 konyharuha: a hurok egy szögön lóg ---------- */
  .ag-fal__ruhak { list-style: none; margin: 26px auto 0; padding: 0; display: grid;
    grid-template-columns: repeat(4, minmax(0, 210px)); justify-content: center; gap: 24px 30px; }   /* a lyukba igazítás max. 13 px-et tol → 30 px köz mellett nem érnek össze */
  .ag-fal__ruhak li { min-width: 0; }
  .ag-ruha {
    display: flex; flex-direction: column; align-items: center; padding-top: 22px;
    color: var(--tinta) !important; text-decoration: none !important; outline: none;
    -webkit-tap-highlight-color: transparent;
  }
  .ag-ruha .ag-szeg { top: 9px; }
  .ag-ruha__vaszon {
    position: relative; width: 100%; box-sizing: border-box; min-height: 190px;
    display: flex; align-items: center; justify-content: center; padding: 22px 12px 20px;
    border-radius: 3px 3px 5px 5px; background-color: #fff;
    box-shadow: inset 0 9px 0 rgba(var(--c), .9), inset 0 -9px 0 rgba(var(--c), .9), 0 10px 16px rgba(60,35,10,.30);
    transform-origin: 50% -13px; transform: rotate(var(--dol, 0deg));                /* a szögnél "lóg" */
    transition: box-shadow .25s;
  }
  .ag-ruha__vaszon::before {                                    /* akasztóhurok – ugyanabból az anyagból, a szögre akasztva */
    content: ""; position: absolute; top: -18px; left: 50%; width: 16px; height: 22px; margin-left: -8px;
    border: 4px solid rgba(var(--c), .95); border-bottom: 0; border-radius: 10px 10px 0 0; box-sizing: border-box;
  }
  .ag-ruha__vaszon::after {                                     /* rojt a ruha alján */
    content: ""; position: absolute; left: 6px; right: 6px; bottom: -7px; height: 7px;
    background: repeating-linear-gradient(90deg, rgba(var(--c), .9) 0 2px, transparent 2px 5px);
  }
  /* minták: kockás (gingham) = két áttetsző csíkréteg egymáson; csíkos = ismétlődő sávok */
  .ag-ruha--kockas .ag-ruha__vaszon {
    background-image:
      linear-gradient(90deg, rgba(var(--c), .42) 50%, transparent 50%),
      linear-gradient(rgba(var(--c), .42) 50%, transparent 50%);
    background-size: 20px 20px;
  }
  .ag-ruha--csikos .ag-ruha__vaszon {
    background-image: repeating-linear-gradient(90deg, transparent 0 16px, rgba(var(--c), .75) 16px 24px, transparent 24px 28px, rgba(var(--c), .75) 28px 30px);
  }
  .ag-fal__ruhak li:nth-child(1) .ag-ruha { --c: 205, 72, 66;  --dol: -2deg; }    /* piros kockás */
  .ag-fal__ruhak li:nth-child(2) .ag-ruha { --c: 63, 134, 198; --dol: 1.5deg; }   /* kék csíkos */
  .ag-fal__ruhak li:nth-child(3) .ag-ruha { --c: 214, 160, 40; --dol: -1deg; }    /* sárga kockás */
  .ag-fal__ruhak li:nth-child(4) .ag-ruha { --c: 74, 138, 96;  --dol: 2deg; }     /* zöld csíkos */

  .ag-ruha__cimke {                                             /* felvarrt vászoncímke, belül öltéssel */
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px;
    width: 100%; max-width: 168px; box-sizing: border-box; padding: 12px 10px 16px;
    background: #fffdf6; border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,.18);
    outline: 2px dashed rgba(var(--c), .9); outline-offset: -6px;
    font-weight: 700; font-size: 1.08rem; line-height: 1.2;
  }
  .ag-ruha__ikon { width: 46px; height: 46px; flex: none; }
  .ag-ruha__felirat { position: relative; display: inline-block; padding: 0 2px; }
  /* hímzett aláhúzás: alapból "nincs megvarrva" (clip-path), kijelöléskor balról jobbra kirajzolódik */
  .ag-oltes { position: absolute; left: -6%; width: 112%; bottom: -9px; height: 8px; overflow: visible; pointer-events: none;
    clip-path: inset(0 100% 0 0); transition: clip-path .45s ease-out; }
  .ag-oltes path { fill: none; stroke: rgb(var(--c)); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 7 5; }
  .ag-ruha:hover .ag-oltes, .ag-ruha:focus-visible .ag-oltes { clip-path: inset(0 0 0 0); }
  .ag-ruha:hover .ag-ruha__vaszon, .ag-ruha:focus-visible .ag-ruha__vaszon {
    animation: ag-lebben .9s ease-out;
    box-shadow: inset 0 9px 0 rgba(var(--c), .9), inset 0 -9px 0 rgba(var(--c), .9), 0 16px 22px rgba(60,35,10,.35);
  }
  .ag-ruha:focus-visible .ag-ruha__cimke { box-shadow: 0 0 0 3px #f2d16b; }
  @keyframes ag-lebben {                                        /* meglibben, majd visszaáll a saját dőlésére */
    0%   { transform: rotate(var(--dol, 0deg)); }
    25%  { transform: rotate(calc(var(--dol, 0deg) + 6deg)); }
    50%  { transform: rotate(calc(var(--dol, 0deg) - 4deg)); }
    75%  { transform: rotate(calc(var(--dol, 0deg) + 2deg)); }
    100% { transform: rotate(var(--dol, 0deg)); }
  }

  /* ---------- kis kartoncímkék a további ugrópontokhoz ---------- */
  .ag-fal__tovabb { list-style: none; margin: 30px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 14px; }
  .ag-fal__tovabb a {
    display: inline-block; padding: 6px 14px 6px 22px; position: relative;
    background: #efe0bf; color: var(--tinta) !important; text-decoration: none !important;
    font-size: .92rem; font-weight: 600; border-radius: 3px 8px 8px 3px; box-shadow: 0 2px 4px rgba(60,35,10,.25);
  }
  .ag-fal__tovabb a::before { content: ""; position: absolute; left: 8px; top: 50%; width: 6px; height: 6px; margin-top: -3px;
    border-radius: 50%; background: #d6b483; box-shadow: inset 0 0 0 1px #9a6b35; }   /* a címke lyuka */
  .ag-fal__tovabb a:hover, .ag-fal__tovabb a:focus-visible { background: #f7ead0; }
  .ag-fal__tovabb a:focus-visible { outline: 3px solid #f2d16b; outline-offset: 2px; }

  @media (max-width: 760px) {
    .ag-fal__ruhak { grid-template-columns: repeat(2, minmax(0, 220px)); gap: 26px 30px; }
  }
  @media (max-width: 640px) {
    .ag-fal { margin-top: 0; border-width: 8px; padding: 18px 12px 30px; }
    .ag-fal__fej { grid-template-columns: 1fr 1fr; }
    .ag-fal__deszka { grid-column: 1 / -1; grid-row: 2; padding: 16px 16px 18px; }
    .ag-fal__eszkozok { grid-row: 1; gap: 16px; }
    .ag-eszkoz { --h: 112px; }
    .ag-fal__ruhak { gap: 22px 30px; margin-top: 20px; }
    .ag-ruha__vaszon { min-height: 124px; padding: 18px 8px 16px; }
    .ag-ruha__cimke { font-size: 1rem; padding: 10px 6px 14px; }
    .ag-ruha__ikon { width: 36px; height: 36px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .ag-ruha:hover .ag-ruha__vaszon, .ag-ruha:focus-visible .ag-ruha__vaszon { animation: none; }
    .ag-oltes { transition: none; }
  }
  /* horgonyra ugráskor a ragadós menü ne takarja ki a szakasz elejét */
  [id="001"], [id="002"], [id="003"], [id="004"], [id="005"], [id="ideiglenes"], [id="vegleges_felveteli"] { scroll-margin-top: var(--ag-fejlec, 150px); }