:root{ --gap:50px; --swatch-gap:20px; }
    /* HTML "border" = 60px (testreszabható) */
    body{ height:100%; 
      margin:0; 
      padding-left:60px; 
      padding-right:40px;
      padding-top:60px;
      padding-bottom:60px; 
      box-sizing:border-box; background:#ffffff; font-family:system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }

    /* A tervezett tablet szélessége: 1280px */
    .logotext {
      display: block;
    }
    .viewport{ width:100%; 
      max-width:100%; 
      margin:0 auto; 
      position:relative; }

    /* Logo (a body belső margóján belül) */
    .logo{ position:absolute; left:60px; top:20px; width:80px; height:auto; display:block; z-index:10; }

    /* Konténer: két blokk, köztük 60px gap */
    .container {
  display: flex;
  gap: var(--gap);
  align-items: stretch;
  min-height: 0; /* lehetővé teszi, hogy a gyerekek zsugorodjanak */
}

    /* Baloldal: 80vw, teljes kitöltésű képként használva (background-size:cover) */
    .hero{
      position:relative; /* fontos a lebegő gombokhoz */
      width:80vw; /* fix 80vw kérés szerint */
      min-height:calc(100vh - 120px); /* látszó magasság a html padding miatt */
      background:transparent; /* kezdeti szín */
      /*background:#dfded8; /* kezdeti szín */
      border-radius:10px;
      background-image: url(''); /* ide később jön a kép */
      background-size: cover;
      background-position: center center;
      background-repeat: no-repeat;
    }

    /* Wrapper: cím + 2x2 perspektíva gombok a hero jobb felső sarkában */
    .persp-wrap{
      position:absolute;
      bottom:0px;
      right:5px;
      display:flex;
      flex-direction:column;
      gap:8px;
      align-items:flex-end; /* jobb szélhez igazítjuk a gombrácsot */
      z-index:20;
    }

    .persp-label{
      margin-left:auto;
      margin-right: auto;
      font-size:12px;
      font-weight: 900;
      color:#102020;
      padding-top: 0px;
      text-align: center;
      
      white-space:nowrap;
      position: relative;
    }

    .persp-grid{
      display:grid;
      grid-template-columns: repeat(1, 50px);
      grid-template-rows: repeat(4, 50px);
      gap:10px;
    }

    .persp-btn{
      width:50px;
      height:50px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      background:rgba(223,222,216,0.5);
      border:0px solid rgba(0,0,0,0.08);
      border-radius:10px;
      cursor:pointer;
      
      font-size:12px;
      color:#102020;
      -webkit-tap-highlight-color: transparent;
      
    }

    /* Kiválasztott vagy lenyomott állapot: 3px "stroke" szerű piros körvonal, border-radius megőrzése */
    .persp-btn:active,
    .persp-btn.selected{
      
      transform: none; /* nincs eltolás */
    }

    /* Oldalsó sáv: 20vw fix */
    .sidebar{
      width:20vw; /* fix 20vw */
      min-height:calc(100vh - 120px);
      background:transparent;
      padding:0px;
      box-sizing:border-box;
      overflow:hiden;
    }

    /* Színválasztó modul a jobboldalon */
    .palette h3 {
      margin: 0 0 10px 0;
      padding-top: 20px !important;
      font-size: 14px;
      color: #102020;
      font-weight: 600;
    }

    /* CSAK az első .palette h3-ja legyen 0px */
    .palette:first-of-type h3 {
      padding-top: 20px !important;
    }

    /* Swatch grid: flex, balra rendezve, gap segítségével */
    .swatch-grid{
      padding-left: 10px;
      display:flex;
      flex-wrap:wrap;
      gap:var(--swatch-gap);
      justify-content:flex-start; /* teljesen balra rendezve */
      align-items:flex-start;
    }

    /* Állítható extra — oldalanként mennyivel legyen nagyobb a külső keret */
:root {
  --swatch-border-extra: 5px; /* <- IDE módosíthatod: 5px, 10px, 15px... */
  --swatch-border-width: 3px;  /* a stroke vastagsága */
}

/* alap swatch (megtartjuk a méretet) */
.swatch {
  position: relative;
  overflow: visible;           /* fontos: ha hidden, a ::after levágódik */
  width: 50px;
  height: 50px;
  border-radius: 10px;
  background-size: cover;
  background-position: center;
  cursor: pointer;
  box-sizing: border-box;
  z-index: 2;                  /* hogy a pseudo elem viselkedése kiszámítható legyen */
  /* ha van régi box-shadow stroke, töröld vagy felülírod: */
  
}

/* a "túlméretezett" külső keret */
.swatch::after{
  content: "";
  position: absolute;
  left: calc(-1 * var(--swatch-border-extra));
  top: calc(-1 * var(--swatch-border-extra));
  width: calc(100% + calc(var(--swatch-border-extra) * 2));
  height: calc(100% + calc(var(--swatch-border-extra) * 2));
  border-radius: calc(10px + var(--swatch-border-extra));
  box-sizing: border-box;
  pointer-events: none;
  border: var(--swatch-border-width) solid transparent; /* alapban láthatatlan */
  z-index: 3; /* legyen a swatch tartalma fölött — így jól elkülönül */
  
}

/* aktív / kiválasztott állapot — itt válik láthatóvá a keret */
.swatch:active::after,
.swatch.selected::after{
  border-color: #aa9c83; /*stroke / border color*/
  
}

/* ha volt korábbi szabály, ami árnyékkal rajzolta a stroke-ot, töröld/kommenteld ki,
   pl.: .swatch.selected { box-shadow: 0 0 0 3px #b7b5b0; } */

    .viewport-size {
      font-size: 12.5px;

      position: fixed;
      right: 0;
      color: gray;
      padding-right: 4px;
      top:4px;
    }
    /* Cím + kártya sor (ha szükséges) */
    .color-item{ display:flex; align-items:center; gap:12px; margin-bottom:18px; }

    @media (max-width:1024px){



  
     .viewport{ 
      width:100%; 
    } 
        .sidebar{
      width:27vw; /* fix 20vw */
    }

    .swatch {
    position: relative;
    overflow: visible;           /* fontos: ha hidden, a ::after levágódik */
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background-size: cover;
    background-position: center;
    cursor: pointer;
    box-sizing: border-box;
    z-index: 2;                  /* hogy a pseudo elem viselkedése kiszámítható legyen */
    /* ha van régi box-shadow stroke, töröld vagy felülírod: */
    }
    :root{ --gap:50px; --swatch-gap:15px; }
   }

   /* --- Mobil (tablet/phone) layout: sidebar lekerül alulra --- */
@media (max-width: 768px) {

  /* a konténer legyen oszlop (hero fent, sidebar lent) */
  .container {
    flex-direction: column;
    gap: 16px;               /* kisebb gap mobilon */
    align-items: stretch;
  }

  /* mindkét fő blokk 100% szélességű */
  .hero, .sidebar {
    width: 100%;
    max-width: 100%;
  }

  /* biztosítjuk, hogy a hero legyen elöl (fentről látszódjon) és sidebar lent */
  .hero { order: 1; }
  .sidebar { order: 2; }

  /* ne legyen nagy, fix min-height, mobilon rugalmas magasság */
  .hero {
    min-height: 50vh;       /* vagy: min-height: auto;   ha teljes rugalmasságot akarsz */
  }

  /* sidebar mobilon full-width, görgetés helyett illeszkedés */
  .sidebar {
    padding: 12px 16px;
    box-sizing: border-box;
    overflow: visible;      /* ne vágjuk le a belső elemeket */
  }

  /* persp-wrap (gombok) áthelyezése, hogy ne lógjon ki */
  .persp-wrap {
    top: 12px;
    right: 12px;
  }

  /* perspektíva gombok kisebbek mobilon */
  .persp-grid {
    gap: 8px;
    grid-template-columns: repeat(4, 40px); /* esetleg 2x2 helyett 4 egy sorban */
  }

  .persp-btn {
    width: 40px;
    height: 40px;
    border-radius: 8px;
  }

  /* kisebb betűk/méretek mobilon ahol szükséges */
  .viewport-size { 
   } /* ha zavaró mobilon, elrejthető */
}

    h3 {
      padding-left:10px;
      margin:0;
    }

    /* pretty span stilizálása — kért szín #fafafa, könnyen felülírható külső css-ből */
    .palette h3 .pretty {
      color: #aa9c83;
      overflow: hidden;
      text-transform: capitalize;
    }
    .palette h3 .pretty:empty { display:none; }

    /* ---- ÚJ: persp-btn preview + kiválasztott állapot a swatch-szerű körvonallal ---- */
    .persp-btn {
      background-repeat: no-repeat;
      background-position: center;
      border-radius: 10px;

    }
    /* ugyanaz a "stroke" mint a swatch kiválasztottnál */
    .persp-btn:active,
    .persp-btn.selected {
      box-shadow: 0 0 0 3px #aa9c83, 0 2px 6px rgba(0,0,0,0.14);
      transform: none;
    }
    /* ----- vége új CSS ----- */

    /* Csak a layer-ekhez adunk inline stílust (nem a külső css-t módosítjuk) */
    .swatch { display:inline-block; background-repeat: no-repeat; background-size: contain;
      background-position: center; cursor:pointer; background-color: #dfded8;}
    
    /* A hero rétegeinek egy konténer (helyigény: a .hero belsejében) */
    .layers { position:absolute; inset:0; pointer-events:none; }
    .layer { position:absolute; inset:0; background-repeat:no-repeat; background-position:center; background-size:contain; pointer-events:none; }
    .layer-img {
      /* létező szabályok... */
      opacity:0;
      transition: opacity 200ms ease;
      will-change: opacity, background-image;
    }

    /* amikor tranzíció van, ideiglenesen szorozzuk (multiply) a képeket */
    .layer.layer-fading .layer-img {
      mix-blend-mode: multiply;
    }
    /* Biztosítsuk, hogy a .hero position relative legyen — ha külső css ezt már adja, nem kell, de inline-ban beállítjuk */
    .hero { position:relative; min-height:260px; border-radius:6px; overflow:hidden; }