/* ══════════════════════════════════════════════════════════════
   GK Hair Beauty — στυλ για τις σελίδες-οδηγούς.
   Ίδια παλέτα και τυπογραφία με την αρχική, αλλά με τυπογραφία
   φτιαγμένη για μεγάλα κείμενα (πιο ήσυχη, χωρίς custom cursor).
   ══════════════════════════════════════════════════════════════ */

:root {
  --bg:    #0d1110;
  --bg-2:  #151b18;
  --panel: #101614;
  --line:  rgba(232,220,202,.13);
  --gold:  #c6a46f;
  --gold-s:#dfc99d;
  --sage:  #a9b8ad;
  --ivory: #f5efe5;
  --muted: #a49d92;
}

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  background:var(--bg); color:var(--ivory);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:16px; line-height:1.75; overflow-x:hidden;
}

/* Κόκκος, ίδιος με την αρχική */
body::before {
  content:""; position:fixed; inset:0; z-index:10; opacity:.3; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.07'/%3E%3C/svg%3E");
}

.shell { width:100%; max-width:820px; margin:0 auto; padding:0 1.6rem; }
.shell-wide { max-width:1080px; }

/* ── NAV ───────────────────────────────────────────────────── */
.g-nav {
  position:sticky; top:0; z-index:50;
  background:rgba(13,17,16,.93); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
/* Μόνο κάθετο padding — το οριζόντιο το δίνει το .shell και δεν πρέπει
   να ακυρωθεί από shorthand (ίδια specificity, μπαίνει αργότερα). */
.g-nav-in { display:flex; align-items:center; justify-content:space-between; gap:1.2rem; padding-top:.95rem; padding-bottom:.95rem; }
.g-logo { display:inline-flex; align-items:baseline; gap:.5rem; text-decoration:none; }
.g-logo em {
  font-family:'Playfair Display',serif; font-style:italic; font-weight:600;
  font-size:1.3rem; line-height:1; letter-spacing:-.02em;
  background:linear-gradient(180deg,#fff8ea 0%,#dcb778 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.g-logo span {
  font-size:.63rem; font-weight:500; letter-spacing:.3em;
  text-transform:uppercase; color:rgba(255,248,234,.8);
}
.g-nav-cta {
  border:1px solid rgba(198,164,111,.55); color:var(--gold-s);
  padding:.55rem 1.15rem; font-size:.7rem; letter-spacing:.12em;
  text-transform:uppercase; text-decoration:none; white-space:nowrap;
  transition:background .35s, color .35s;
}
.g-nav-cta:hover { background:var(--gold); color:var(--bg); }

/* ── Breadcrumb ────────────────────────────────────────────── */
.crumb { padding:1.7rem 0 0; font-size:.76rem; color:var(--muted); letter-spacing:.04em; }
.crumb a { color:var(--sage); text-decoration:none; }
.crumb a:hover { color:var(--gold-s); }
.crumb span { margin:0 .45rem; opacity:.5; }

/* ── Τυπογραφία ────────────────────────────────────────────── */
.g-head { padding-top:2.4rem; padding-bottom:3.2rem; border-bottom:1px solid var(--line); }
.g-kicker { font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--sage); }
h1 {
  font-family:'Playfair Display',serif; font-weight:400;
  font-size:clamp(2rem,4.6vw,3.15rem); line-height:1.12; letter-spacing:-.01em;
  margin:.7rem 0 1.1rem; text-wrap:balance;
}
h1 em { color:var(--gold); font-style:italic; }
.g-lede { font-size:1.06rem; color:#d9d2c6; line-height:1.8; max-width:64ch; }

h2 {
  font-family:'Playfair Display',serif; font-weight:400;
  font-size:clamp(1.5rem,2.9vw,2.05rem); line-height:1.24;
  margin:3.4rem 0 1.1rem; text-wrap:balance;
}
h2 em { color:var(--gold); font-style:italic; }
h3 {
  font-family:'Playfair Display',serif; font-weight:400;
  font-size:1.14rem; line-height:1.4; color:var(--ivory);
  margin:2.1rem 0 .6rem;
}
p { margin:0 0 1.1rem; color:#cdc6ba; max-width:70ch; }
p strong, li strong { color:var(--ivory); font-weight:600; }
a { color:var(--gold-s); text-decoration:none; border-bottom:1px solid rgba(198,164,111,.35); transition:color .25s, border-color .25s; }
a:hover { color:var(--gold); border-color:var(--gold); }

ul, ol { margin:0 0 1.3rem 1.15rem; color:#cdc6ba; max-width:70ch; }
li { margin-bottom:.5rem; padding-left:.2rem; }
li::marker { color:var(--gold); }

/* ── Πίνακες ───────────────────────────────────────────────── */
.t-wrap { overflow-x:auto; margin:1.4rem 0 1.8rem; border:1px solid var(--line); }
table { width:100%; border-collapse:collapse; font-size:.92rem; min-width:420px; }
th, td { padding:.78rem 1rem; text-align:left; border-bottom:1px solid var(--line); }
th { background:var(--panel); color:var(--sage); font-weight:600; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; }
td { color:#cdc6ba; }
td:last-child { color:var(--gold-s); white-space:nowrap; }
tr:last-child td { border-bottom:none; }

/* ── Callout ───────────────────────────────────────────────── */
.note {
  border-left:2px solid var(--gold); background:var(--panel);
  padding:1.15rem 1.35rem; margin:1.8rem 0; font-size:.95rem;
}
.note p:last-child { margin-bottom:0; }

/* ── FAQ (ορατό κείμενο, χωρίς accordion) ──────────────────── */
.faq { margin-top:1.2rem; }
.faq-q {
  font-family:'Playfair Display',serif; font-size:1.1rem; font-weight:400;
  color:var(--gold-s); margin:2rem 0 .5rem; line-height:1.4;
}
.faq-a { color:#cdc6ba; max-width:70ch; }

/* ── CTA ───────────────────────────────────────────────────── */
.cta {
  margin:3.6rem 0 1rem; padding:2.2rem; border:1px solid var(--line);
  background:var(--bg-2); text-align:center;
}
.cta h2 { margin:0 0 .5rem; font-size:1.55rem; }
.cta p { margin:0 auto 1.6rem; color:var(--muted); max-width:52ch; }
.cta-row { display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; }
.btn {
  display:inline-block; padding:.88rem 1.7rem; font-size:.82rem;
  letter-spacing:.1em; text-transform:uppercase; text-decoration:none;
  border:1px solid var(--gold); border-bottom-color:var(--gold);
  transition:background .35s, color .35s;
}
.btn-fill { background:var(--gold); color:var(--bg); font-weight:600; }
.btn-fill:hover { background:var(--gold-s); color:var(--bg); }
.btn-ghost { color:var(--gold-s); }
.btn-ghost:hover { background:var(--gold); color:var(--bg); }

/* ── Footer ────────────────────────────────────────────────── */
.g-foot { margin-top:4.5rem; border-top:1px solid var(--line); background:var(--panel); padding:3rem 0 2.5rem; }
.foot-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:2.2rem; }
.foot-h { font-size:.7rem; letter-spacing:.15em; text-transform:uppercase; color:var(--sage); margin-bottom:.9rem; }
.foot-grid p, .foot-grid li { font-size:.9rem; color:var(--muted); margin-bottom:.4rem; max-width:none; }
.foot-grid ul { list-style:none; margin:0; }
.foot-btm { margin-top:2.4rem; padding-top:1.4rem; border-top:1px solid var(--line); font-size:.8rem; color:var(--muted); }

@media (max-width:640px) {
  body { font-size:15.5px; }
  .g-head { padding-top:1.8rem; padding-bottom:2.4rem; }
  h2 { margin-top:2.6rem; }
  .cta { padding:1.7rem 1.2rem; }
  .btn { width:100%; text-align:center; }
}