/* Marketing homepage — scoped under .shp-page to avoid theme conflicts */
.shp-page{
  --bg:#F8F4EF; --panel:#EFE7D8; --ink:#2C2824; --ink-soft:#6b6258; --ink-mute:#948a7d;
  --coral:#C9A35E; --coral-deep:#A8804A; --navy:#151a2b; --card-dark:#5c2a22; --card-peach:#FFFDF9; --card:#FFFDF9;
  --line: rgba(44,40,36,0.12);
  --display:'Space Grotesk', sans-serif; --body:'Inter', sans-serif;
  background:var(--bg); color:var(--ink); font-family:var(--body); line-height:1.6; overflow-x:hidden;
}
.shp-page *{ box-sizing:border-box; }
.shp-page img, .shp-page svg{ display:block; max-width:100%; }
.shp-page a{ color:inherit; text-decoration:none; }
.shp-page button{ font-family:inherit; cursor:pointer; }
.shp-page .wrap{ max-width:1160px; margin:0 auto; padding:0 28px; }
.shp-page .reveal{ opacity:0; transform:translateY(20px); transition:opacity .7s ease, transform .7s ease; }
.shp-page .reveal.in{ opacity:1; transform:translateY(0); }

.shp-page nav{ position:fixed; top:0; left:0; right:0; z-index:100; background:rgba(255,255,255,0.85); backdrop-filter:blur(10px); border-bottom:1px solid transparent; transition:box-shadow .25s ease, border-color .25s ease; }
.shp-page nav.is-scrolled{ border-bottom-color:var(--line); box-shadow:0 4px 20px rgba(20,22,26,0.06); }
.shp-page .nav-inner{ display:flex; align-items:center; justify-content:space-between; padding-top:26px; padding-bottom:26px; }
.shp-page .logo{ font-family:var(--display); font-size:27px; font-weight:700; display:flex; align-items:center; gap:13px; color:var(--ink); text-decoration:none; }
.shp-page .logo-icon-wrap{ position:relative; height:84px; width:84px; display:block; flex-shrink:0; }
.shp-page .logo-icon-img{ height:100%; width:100%; object-fit:contain; display:block; }
.shp-page .logo-pulse{ position:absolute; left:38%; top:75%; width:16%; aspect-ratio:1; border-radius:50%; background:var(--coral); transform:translate(-50%,-50%); pointer-events:none; }
.shp-page .nav-links{ display:flex; gap:32px; align-items:center; }
.shp-page .nav-links a{ font-size:14px; color:var(--ink); font-weight:500; }
.shp-page .nav-links a:hover{ color:var(--ink); }

/* Dropdown "Υπηρεσίες" — ενεργοποιείται με JS class .is-open (βλ.
   <script> στο τέλος του template), όχι αμιγές CSS :hover. Καθαρό
   :hover δοκιμάστηκε πρώτα, αλλά το μενού είναι πιο φαρδύ από το ίδιο
   το "Υπηρεσίες" (κεντραρισμένο, προεξέχει αριστερά/δεξιά) — διαγώνια
   κίνηση ποντικιού προς άκρη του μενού περνούσε από ζώνη εκτός ορίων
   και έχανε το hover πριν προλάβεις να κάνεις κλικ. Το JS με μικρή
   καθυστέρηση κλεισίματος (150ms) το λύνει αξιόπιστα. Το
   :focus-within παραμένει για πληκτρολόγιο/προσβασιμότητα. */
.shp-page .nav-dropdown{ position:relative; }
.shp-page .nav-dropdown-trigger{ display:inline-flex; align-items:center; gap:5px; }
.shp-page .nav-dropdown-trigger svg{ transition:transform .2s ease; }
.shp-page .nav-dropdown.is-open .nav-dropdown-trigger svg,
.shp-page .nav-dropdown:focus-within .nav-dropdown-trigger svg{ transform:rotate(180deg); }
.shp-page .nav-dropdown-menu{
  position:absolute; top:100%; left:50%; transform:translateX(-50%);
  background:#fff; border:1px solid var(--line); border-radius:14px;
  box-shadow:0 16px 40px rgba(20,22,26,0.14);
  padding:8px; margin-top:14px; min-width:250px;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .2s ease, visibility .2s ease;
  z-index:10;
}
.shp-page .nav-dropdown.is-open .nav-dropdown-menu,
.shp-page .nav-dropdown:focus-within .nav-dropdown-menu{
  opacity:1; visibility:visible; pointer-events:auto;
}
.shp-page .nav-dropdown-menu a{
  display:block; padding:11px 14px; border-radius:9px; font-size:13.5px; font-weight:500;
  color:var(--ink); white-space:nowrap;
}
.shp-page .nav-dropdown-menu a:hover,
.shp-page .nav-dropdown-menu a:focus-visible{ background:var(--panel); color:var(--coral-deep); }

.shp-page .nav-cta{ background:var(--coral); color:#000; padding:10px 20px; border-radius:8px; font-weight:600; font-size:13.5px; }
.shp-page .nav-cta:hover{ background:var(--coral-deep); }
.shp-page .nav-links .nav-social{ display:flex; gap:8px; margin-left:4px; }
.shp-page .nav-links .nav-social a{ display:flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%; color:var(--ink-soft); transition:color .2s ease, background .2s ease; }
.shp-page .nav-links .nav-social a:hover{ color:var(--coral-deep); background:rgba(201,163,94,0.08); }

.shp-page .logo-text{ display:flex; flex-direction:column; line-height:1.15; }
.shp-page .logo-name{ font-family:var(--display); font-size:20px; font-weight:700; letter-spacing:.02em; color:var(--ink); }
.shp-page .logo-tag{ font-family:var(--body); font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-mute); margin-top:2px; }

.shp-page .hero{ min-height:100vh; display:flex; align-items:center; padding:150px 0 90px; }
.shp-page .hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:60px; align-items:center; }
.shp-page .hero-eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--coral-deep); background:rgba(201,163,94,0.08); padding:8px 16px; border-radius:999px; margin-bottom:24px; }
.shp-page .hero h1{ font-family:var(--display); font-size:clamp(38px,4.6vw,56px); font-weight:700; line-height:1.08; letter-spacing:-.02em; margin-bottom:22px; color:var(--ink); }
.shp-page .hero h1 .accent{ color:var(--coral); }
.shp-page .hero p.lead{ font-size:17px; color:var(--ink-soft); max-width:440px; margin-bottom:34px; }
.shp-page .hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; }
.shp-page .btn{ display:inline-flex; align-items:center; gap:8px; padding:14px 26px; border-radius:10px; font-weight:600; font-size:14.5px; white-space:nowrap; transition:transform .2s ease, background .2s ease; }
.shp-page .btn-solid{ background:var(--ink); color:#fff; }
.shp-page .btn-solid:hover{ background:var(--coral); transform:translateY(-2px); color:#000; }
.shp-page .btn-ghost{ border:1px solid var(--line); color:var(--ink); }
.shp-page .btn-ghost:hover{ border-color:var(--ink); transform:translateY(-2px); }
.shp-page .hero-meta{ display:flex; gap:28px; margin-top:36px; }
.shp-page .hero-meta div{ font-size:13px; color:var(--ink-mute); }
.shp-page .hero-meta strong{ display:block; font-family:var(--display); font-size:22px; color:var(--ink); font-weight:700; }

/* ---- Luxury hero variant (πρώτο section μόνο — δεν αγγίζει τα υπόλοιπα sections,
   ούτε το event-invitations plugin, που είναι εντελώς ξεχωριστό) ---- */
.shp-page .hero--luxury{
  --lux-bg:#F8F4EF; --lux-bg-alt:#EFE7D8; --lux-paper:#FFFDF9;
  --lux-gold:#C9A35E; --lux-bronze:#8C6A3D; --lux-black:#2C2824; --lux-muted:#7B6E62;
  --lux-serif:'Cormorant Garamond',serif;
  background:var(--lux-bg); position:relative; overflow:hidden;
}
/* λεπτή υφή χαρτιού + απαλό φως (bloom) + vignette — CSS/SVG μόνο, δεν είναι φωτογραφία */
.shp-page .hero--luxury::before{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.17  0 0 0 0 0.16  0 0 0 0 0.14  0 0 0 0.035 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px;
  mix-blend-mode:multiply;
}
.shp-page .hero--luxury::after{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(ellipse 620px 460px at 82% 18%, rgba(201,163,94,.16), transparent 68%),
    radial-gradient(ellipse 700px 520px at 12% 88%, rgba(140,106,61,.1), transparent 70%),
    radial-gradient(ellipse 1400px 900px at 50% 50%, transparent 55%, rgba(44,40,36,.05) 100%);
}
.shp-page .hero--luxury .wrap{ position:relative; z-index:1; }
.shp-page .hero--luxury .lux-dust{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.shp-page .hero--luxury .lux-dust i{
  position:absolute; width:3px; height:3px; border-radius:50%; background:var(--lux-gold); opacity:0;
  animation:luxDustFloat 9s ease-in-out infinite;
}
.shp-page .hero--luxury .lux-dust i:nth-child(1){ top:18%; left:58%; animation-delay:0s; }
.shp-page .hero--luxury .lux-dust i:nth-child(2){ top:34%; left:72%; animation-delay:-2s; }
.shp-page .hero--luxury .lux-dust i:nth-child(3){ top:60%; left:52%; animation-delay:-4.5s; }
.shp-page .hero--luxury .lux-dust i:nth-child(4){ top:74%; left:80%; animation-delay:-6.5s; }
.shp-page .hero--luxury .lux-dust i:nth-child(5){ top:46%; left:88%; animation-delay:-1s; }
.shp-page .hero--luxury .lux-dust i:nth-child(6){ top:14%; left:38%; animation-delay:-3.5s; }
@keyframes luxDustFloat{
  0%{ opacity:0; transform:translateY(20px) scale(.6); }
  15%{ opacity:.7; }
  50%{ opacity:.9; transform:translateY(-30px) scale(1); }
  85%{ opacity:.3; }
  100%{ opacity:0; transform:translateY(-60px) scale(.6); }
}

.shp-page .hero--luxury .hero-serif{
  font-family:var(--lux-serif); font-weight:500; font-size:clamp(40px,4.8vw,60px); line-height:1.14;
  letter-spacing:-.008em; color:var(--lux-black); margin-bottom:24px;
}
.shp-page .hero--luxury .hero-serif em{ font-style:italic; color:var(--lux-gold); font-weight:500; }
.shp-page .hero--luxury p.lead{ color:var(--lux-muted); }
.shp-page .hero--luxury .btn{ border-radius:999px; }
.shp-page .hero--luxury .btn-ghost{ border-color:rgba(44,40,36,.25); color:var(--lux-black); }
.shp-page .hero--luxury .btn-ghost:hover{ border-color:var(--lux-black); }

/* Global .btn-gold — χρησιμοποιείται πλέον και εκτός .hero--luxury (π.χ. στα
   Final CTA / cross-sell sections των Landing Pages Υπηρεσιών). Πριν ήταν
   scoped μόνο μέσα στο .hero--luxury, οπότε δεν εφάρμοζε πουθενά αλλού. */
.shp-page .btn-gold{
  background:linear-gradient(135deg,var(--coral),var(--coral-deep));
  color:#111;
  box-shadow:0 14px 28px rgba(140,106,61,.28);
  transition:transform .3s ease, box-shadow .3s ease;
}
.shp-page .btn-gold:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 34px rgba(140,106,61,.38);
}

.shp-page .hero--luxury .btn-gold{
  background:linear-gradient(135deg, var(--lux-gold), var(--lux-bronze)); color:#000;
  box-shadow:0 16px 30px -12px rgba(140,106,61,.55); transition:transform .35s ease, box-shadow .35s ease;
}
.shp-page .hero--luxury .btn-gold:hover{
  background:linear-gradient(135deg, var(--lux-gold), var(--lux-bronze)); transform:translateY(-2px);
  box-shadow:0 20px 38px -12px rgba(140,106,61,.65);
}
.shp-page .hero--luxury .hero-meta--icons{ gap:34px; }
.shp-page .hero--luxury .hero-meta--icons > div{ display:flex; flex-direction:column; gap:6px; }
.shp-page .hero--luxury .hero-meta--icons svg{ width:20px; height:20px; color:var(--lux-gold); margin-bottom:2px; }
.shp-page .hero--luxury .hero-meta--icons strong{ font-family:var(--lux-serif); font-style:italic; font-size:21px; color:var(--lux-black); font-weight:500; }
.shp-page .hero--luxury .hero-meta--icons span{ font-size:11px; letter-spacing:.03em; color:var(--lux-muted); }

/* απαλό, αργό floating στο κινητό — "cinematic" όχι μηχανικό */
.shp-page .hero--luxury .s-phone{ animation-duration:6.5s; }
.shp-page .hero--luxury .signature{ z-index:1; }
.shp-page .hero-phone-photo{
  max-width:480px; width:100%; height:auto; position:relative; z-index:1;
  animation:shpHeroPhoneFloat 6.5s ease-in-out infinite;
  filter:drop-shadow(0 40px 50px rgba(44,40,36,.28));
}
@keyframes shpHeroPhoneFloat{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  50%{ transform:translateY(-16px) rotate(-.6deg); }
}
.shp-page .hero--luxury .candle-glow{
  position:absolute; left:50%; top:50%; width:340px; height:340px; transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(201,163,94,.32), transparent 70%);
  filter:blur(10px); z-index:0; animation:shpCandleFlicker 3.2s ease-in-out infinite;
  pointer-events:none;
}
@keyframes shpCandleFlicker{
  0%,100%{ opacity:.75; transform:translate(-50%,-50%) scale(1); }
  35%{ opacity:.95; transform:translate(-50%,-50%) scale(1.06); }
  60%{ opacity:.65; transform:translate(-50%,-50%) scale(.97); }
  80%{ opacity:.9; transform:translate(-50%,-50%) scale(1.03); }
}
@media (prefers-reduced-motion: reduce){ .shp-page .hero-phone-photo{ animation:none; } .shp-page .hero--luxury .candle-glow{ animation:none; } }
.shp-page .hero--luxury .lux-laurel{
  position:absolute; left:50%; top:50%; width:150%; height:150%; transform:translate(-50%,-50%);
  z-index:0; opacity:.55; pointer-events:none;
}
.shp-page .hero--luxury .lux-laurel path{ fill:none; stroke:var(--lux-gold); stroke-width:1; }
.shp-page .hero--luxury .lux-laurel ellipse{ fill:var(--lux-gold); }

.shp-page .tap-hint{
  position:absolute; bottom:-40px; left:50%; transform:translateX(-50%); z-index:4;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-family:'Cormorant Garamond',serif; font-style:italic; font-size:13px; color:var(--ink-mute); white-space:nowrap;
}
.shp-page .tap-hint svg{ width:14px; height:14px; opacity:.6; animation:tapHintBounce 1.8s ease-in-out infinite; }
@keyframes tapHintBounce{ 0%,100%{ transform:translateY(0); opacity:.4; } 50%{ transform:translateY(4px); opacity:.9; } }

.shp-page .signature{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; padding:20px 0; }
.shp-page .signature-caption{ position:relative; text-align:center; font-size:11px; letter-spacing:.05em; color:var(--ink-mute); }
.shp-page .book-stage{ position:relative; width:210px; height:310px; perspective:1600px; }
.shp-page .book-shadow{
  position:absolute; bottom:-20px; left:8%; width:84%; height:18px; border-radius:50%;
  background:radial-gradient(ellipse, rgba(20,22,26,0.24), transparent 72%);
  animation:shp-shadowpulse 4.5s ease-in-out infinite;
}
@keyframes shp-shadowpulse{ 0%,20%{ transform:scale(1); opacity:1; } 50%,75%{ transform:scale(0.82) translateX(10%); opacity:.55; } 100%{ transform:scale(1); opacity:1; } }
.shp-page .book{ position:relative; width:100%; height:100%; transform-style:preserve-3d; }
.shp-page .book-spine{ position:absolute; left:0; top:4%; width:5px; height:92%; background:linear-gradient(to bottom, #d4432f, #ef5b4e); border-radius:3px; z-index:3; box-shadow:2px 0 6px rgba(0,0,0,0.15); }
.shp-page .book-inside{
  position:absolute; inset:0; border:1px solid var(--line); border-radius:16px;
  background-image:radial-gradient(rgba(201,163,94,0.12) 1px, transparent 1px), linear-gradient(160deg, #fffaf6, #fdf0e6);
  background-size:14px 14px, 100% 100%; background-position:-4px -4px, 0 0;
  box-shadow:inset 8px 0 20px -12px rgba(20,22,26,0.2); padding:26px 24px 24px 32px; display:flex; flex-direction:column;
  align-items:center; gap:9px; overflow:hidden;
}
.shp-page .inside-eyebrow{ font-family:var(--display); font-size:13px; font-weight:700; color:var(--coral-deep); margin-bottom:4px; line-height:1.3; align-self:flex-start; }
.shp-page .inside-row{ display:flex; align-items:center; gap:9px; font-size:11px; color:var(--ink-soft); font-weight:600; align-self:flex-start; }
.shp-page .row-icn{ width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.shp-page .row-icn svg{ width:11px; height:11px; }
.shp-page .row-icn.icn-coral{ background:rgba(201,163,94,0.16); color:var(--coral-deep); }
.shp-page .row-icn.icn-gold{ background:rgba(212,163,58,0.18); color:#a87c1e; }
.shp-page .row-icn.icn-sage{ background:rgba(122,158,120,0.2); color:#4c6b49; }
.shp-page .mini-divider{ display:flex; align-items:center; gap:8px; width:100%; margin-top:6px; }
.shp-page .mini-divider span{ flex:1; height:1px; background:var(--line); }
.shp-page .mini-divider svg{ width:10px; height:10px; color:var(--coral); flex-shrink:0; }
.shp-page .mini-qr{ margin-top:auto; flex-shrink:0; padding-top:6px; }
.shp-page .mini-qr svg{ width:56px; height:56px; display:block; }
.shp-page .book-cover{
  position:absolute; inset:0; background:linear-gradient(155deg, #fff6ee, var(--card-peach)); border-radius:16px;
  padding:26px 24px; display:flex; flex-direction:column; justify-content:space-between;
  transform-origin:left center; transform-style:preserve-3d;
  animation:shp-coveropen3d 4.5s cubic-bezier(.6,.05,.35,1) infinite;
  box-shadow:0 24px 48px rgba(20,22,26,0.18), inset -24px 0 32px -18px rgba(20,22,26,0.12);
}
@keyframes shp-coveropen3d{
  0%, 18%{ transform:translateZ(0) rotateY(0deg); box-shadow:0 24px 48px rgba(20,22,26,0.18), inset -24px 0 32px -18px rgba(20,22,26,0.12); }
  45%{ transform:translateZ(32px) rotateY(-95deg); box-shadow:16px 16px 40px rgba(20,22,26,0.2), inset -8px 0 16px -12px rgba(20,22,26,0.1); }
  55%,78%{ transform:translateZ(32px) rotateY(-165deg); box-shadow:0 8px 24px rgba(20,22,26,0.1); }
  100%{ transform:translateZ(0) rotateY(0deg); box-shadow:0 24px 48px rgba(20,22,26,0.18), inset -24px 0 32px -18px rgba(20,22,26,0.12); }
}
.shp-page .book-cover .stamp{ width:28px; height:28px; border-radius:50%; background:rgba(201,163,94,0.14); color:var(--coral-deep); display:flex; align-items:center; justify-content:center; font-size:13px; align-self:flex-end; backface-visibility:hidden; position:relative; z-index:2; }
.shp-page .book-cover .wreath{ position:absolute; top:18px; left:50%; transform:translateX(-50%); width:106px; opacity:.6; z-index:1; }
.shp-page .cover-names{ font-family:var(--display); font-size:21px; font-weight:700; color:#3a2e22; line-height:1.25; backface-visibility:hidden; position:relative; z-index:2; }
.shp-page .cover-date{ font-size:10px; letter-spacing:.1em; color:var(--coral-deep); font-weight:600; margin-top:7px; backface-visibility:hidden; position:relative; z-index:2; }
.shp-page .s-phone{
  position:relative; width:136px; height:280px; background:#1a1712; border:5px solid #f0ded4;
  border-radius:34px; box-shadow:0 22px 48px rgba(20,22,26,0.18); z-index:2;
  animation:shpPhoneFloat 5s ease-in-out infinite;
}
@keyframes shpPhoneFloat{
  0%,100%{ transform:rotate(4deg) translateY(0); }
  50%{ transform:rotate(2.2deg) translateY(-12px); }
}
.shp-page .s-phone::before{
  content:''; position:absolute; left:50%; bottom:-24px; width:70%; height:14px;
  background:radial-gradient(ellipse, rgba(46,42,38,0.3), transparent 72%); border-radius:50%; z-index:-1;
  animation:shpPhoneShadow 5s ease-in-out infinite;
}
@keyframes shpPhoneShadow{
  0%,100%{ transform:translateX(-50%) scale(1); opacity:.75; }
  50%{ transform:translateX(-50%) scale(.76); opacity:.32; }
}
.shp-page .s-phone .dynamic-island{ position:absolute; top:11px; left:50%; transform:translateX(-50%); width:36px; height:10px; background:rgba(58,46,34,0.7); border-radius:6px; z-index:3; }
.shp-page .s-phone .side-btn{ position:absolute; background:#f0ded4; border-radius:2px; }
.shp-page .s-phone .side-btn.power{ right:-7px; top:76px; width:3px; height:36px; }
.shp-page .s-phone .side-btn.vol1{ left:-7px; top:60px; width:3px; height:20px; }
.shp-page .s-phone .side-btn.vol2{ left:-7px; top:86px; width:3px; height:20px; }

/* clipped "οθόνη" — ό,τι είναι μέσα εδώ κόβεται στα όρια του κινητού.
   Σκόπιμα πιο σκούρο/ζεστό από το ίδιο το χαρτί του φακέλου (#FAF6F1/#FFFDF9),
   αλλιώς ο φάκελος "χάνεται" μέσα στο ίδιο του το φόντο */
.shp-page .s-phone-screen{
  position:absolute; inset:0; border-radius:29px; overflow:hidden;
  background:linear-gradient(160deg, #F7F0E4, #FCF7EE);
}
/* σταθερός "καμβάς" (μέγεθος υπολογισμένο στο desktop μέγεθος του κινητού) —
   ολόκληρος σμικραίνεται με ένα scale ανάλογα με το πόσο μικρό είναι το
   πραγματικό κινητό σε κάθε breakpoint, ώστε ΟΛΟ το εσωτερικό animation
   (φάκελος + mini demo) να παραμένει σωστά αναλογικό, χωρίς να χρειάζεται
   να ξαναγράφουμε τα εσωτερικά pixel values ανά breakpoint */
.shp-page .phone-content{ position:absolute; top:0; left:0; width:126px; height:270px; transform-origin:top left; }

/* -------- Παλέτα brief: ivory/champagne/gold/wax -------- */
.shp-page .mini-env-wrap{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  opacity:1; /* GSAP αναλαμβάνει το animation — βλ. script στο template */
}
.shp-page .mini-env-stage{ position:relative; width:260px; height:380px; transform:scale(1.55) translateY(-64px); flex-shrink:0; }
.shp-page .mini-env-shadow{
  position:absolute; bottom:14px; left:8%; width:84%; height:20px; border-radius:50%;
  background:radial-gradient(ellipse, rgba(46,42,38,0.18), transparent 72%);
}
.shp-page .mini-env-body{
  position:absolute; bottom:40px; left:0; width:100%; height:150px;
  background:linear-gradient(160deg, #E9D8B6, #DEC99C);
  border:1px solid rgba(46,42,38,.3); border-radius:8px; box-shadow:0 20px 50px rgba(46,42,38,.38); z-index:3;
}
.shp-page .mini-env-flap{
  position:absolute; bottom:94px; left:0; width:100%; height:96px;
  background:linear-gradient(178deg, #EFE0BF 0%, #E2CE9F 88%, #D6BE87 100%);
  clip-path:polygon(0 0, 100% 0, 50% 100%);
  transform-origin:top center; z-index:4; transform:rotateX(0deg);
  box-shadow:inset 0 -14px 18px -10px rgba(46,42,38,.4);
  filter:drop-shadow(0 6px 10px rgba(46,42,38,.3));
}
.shp-page .mini-env-seal{
  position:absolute; bottom:64px; left:50%; width:68px; height:68px;
  border-radius:52% 48% 55% 45% / 48% 55% 45% 52%;
  background:radial-gradient(circle at 32% 26%, #e8c1bb, #D6A19B 55%, #a8746e 100%);
  display:flex; align-items:center; justify-content:center; z-index:5;
  box-shadow:0 10px 20px rgba(46,42,38,.3), inset 0 3px 5px rgba(255,255,255,.4), inset 0 -4px 8px rgba(0,0,0,.25);
  font-family:'Cormorant Garamond',serif; font-style:italic; font-size:20px; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.3);
  opacity:1; transform:translate(-50%,0) scale(1);
}
.shp-page .mini-env-card{
  position:absolute; bottom:40px; left:50%; width:76%; height:200px;
  transform:translate(-50%, 46px) scale(.5); opacity:.25; z-index:1;
}
.shp-page .mini-env-inside{
  position:absolute; inset:0; background:#FFFDF9; border:1px solid rgba(46,42,38,.12); border-radius:6px;
  box-shadow:inset 10px 0 24px -14px rgba(46,42,38,.18); padding:26px 22px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:10px; text-align:center;
}
.shp-page .mini-env-inside .msg{ font-family:'Cormorant Garamond',serif; font-style:italic; font-size:17px; color:#a8746e; line-height:1.4; }
.shp-page .mini-env-inside .sub{ font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:#2E2A26; opacity:.6; }
.shp-page .mini-env-cover{
  position:absolute; inset:0; background:#FAF6F1; border:1px solid rgba(46,42,38,.12); border-radius:6px;
  padding:26px 22px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
  transform-origin:left center; backface-visibility:hidden;
  box-shadow:0 20px 44px rgba(46,42,38,.16); transform:rotateY(0deg);
}
.shp-page .mini-env-cover .cseal{
  width:40px; height:40px; border-radius:50%; border:1px solid #C8A96A; display:flex; align-items:center; justify-content:center;
  font-family:'Cormorant Garamond',serif; font-size:15px; color:#C8A96A; backface-visibility:hidden;
}
.shp-page .mini-env-cover .names{ font-family:'Cormorant Garamond',serif; font-size:21px; color:#2E2A26; line-height:1.25; backface-visibility:hidden; }

/* -------- Φάση 2: mini demo πρόσκλησης, auto-scroll δείχνοντας τα features -------- */
.shp-page .mini-tour-wrap{
  position:absolute; inset:0; overflow:hidden; opacity:0; /* GSAP */
}
.shp-page .mini-tour-scroll{
  display:flex; flex-direction:column; transform:translateY(0);
}
.shp-page .mt-screen{
  width:100%; min-height:280px; padding:34px 16px 18px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:7px; text-align:center; flex-shrink:0;
  background:linear-gradient(160deg, #FAF6F1, #FFFDF9);
}
.shp-page .mt-eyebrow{ font-size:8.5px; letter-spacing:.16em; text-transform:uppercase; color:#C8A96A; font-weight:600; }
.shp-page .mt-names{ font-family:'Cormorant Garamond',serif; font-size:20px; color:#2E2A26; font-weight:500; line-height:1.15; }
.shp-page .mt-date{ font-size:8px; letter-spacing:.1em; text-transform:uppercase; color:#2E2A26; opacity:.65; }
.shp-page .mt-num{ font-family:'Cormorant Garamond',serif; font-size:32px; color:#2E2A26; font-weight:500; }
.shp-page .mt-label{ font-size:8px; letter-spacing:.1em; text-transform:uppercase; color:#C8A96A; }
.shp-page .mt-cards{ display:flex; gap:8px; width:100%; margin-top:4px; }
.shp-page .mt-card{ flex:1; background:#FFFDF9; border:1px solid rgba(46,42,38,.1); border-radius:6px; padding:10px 7px; }
.shp-page .mt-card .t{ font-family:'Cormorant Garamond',serif; font-size:12px; color:#2E2A26; margin-bottom:2px; }
.shp-page .mt-card .a{ font-size:6.5px; color:#2E2A26; opacity:.7; line-height:1.3; }
.shp-page .mt-gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:5px; width:100%; margin-top:4px; }
.shp-page .mt-gallery span{ display:block; aspect-ratio:1; border-radius:4px; background:linear-gradient(160deg, #e9dfcd, #FAF6F1); }
.shp-page .mt-btn{ margin-top:6px; background:#C8A96A; color:#fff; font-size:8px; font-weight:600; letter-spacing:.03em; text-transform:uppercase; padding:8px 16px; border-radius:20px; }

@media (prefers-reduced-motion: reduce){
  .shp-page .mini-env-wrap{ opacity:1; }
  .shp-page .mini-tour-wrap{ opacity:0; }
}

.shp-page .how{ background:var(--panel); padding:120px 0; }
.shp-page .section-head{ max-width:560px; margin-bottom:60px; }
.shp-page .eyebrow{ font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--coral-deep); font-weight:700; margin-bottom:14px; display:block; }
.shp-page .section-head h2{ font-family:var(--display); font-size:clamp(28px,3.2vw,38px); font-weight:700; line-height:1.2; color:var(--ink); }
.shp-page .steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.shp-page .step{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:30px 26px; }
.shp-page .step .num{ width:34px; height:34px; border-radius:9px; background:var(--coral); color:#000; font-family:var(--display); font-size:13px; font-weight:700; display:flex; align-items:center; justify-content:center; margin-bottom:20px; }
.shp-page .step h3{ font-family:var(--display); font-size:19px; font-weight:700; margin-bottom:10px; color:var(--ink); }
.shp-page .step p{ font-size:14px; color:var(--ink-soft); line-height:1.7; }

.shp-page .showcase{ background:var(--bg); padding:120px 0; }
.shp-page .showcase .section-head{ text-align:center; max-width:560px; margin-left:auto; margin-right:auto; }
.shp-page .showcase-lede{ font-size:15.5px; color:var(--ink-soft); margin-top:14px; }

/* Tab toggle (24/9) — ίδιο μοτίβο/CSS classes με το .demo-tabs του /demo/
   (βλ. demo-gallery-template.php), ίδια χρωματική ταυτότητα (coral/gold —
   ο George ζήτησε ρητά να μείνει στα δικά μας χρώματα, όχι πράσινο). */
.shp-page .showcase .demo-tabs-wrap{ padding-top:0; padding-bottom:48px; }

.shp-page .design-panel{ display:none; }
.shp-page .design-panel.active{ display:block; animation:demoFadeIn .45s ease; }

.shp-page .design-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px 22px; }
.shp-page .design-card{
  border-radius:18px; overflow:hidden; background:var(--card);
  box-shadow:0 1px 2px rgba(44,40,36,.06);
  transition:transform .3s ease, box-shadow .3s ease;
}
.shp-page .design-card:hover{ transform:translateY(-5px); box-shadow:0 20px 36px -16px rgba(44,40,36,.22); }
.shp-page .design-card .dimg{ position:relative; display:block; aspect-ratio:3/4; overflow:hidden; }
.shp-page .design-card .dimg img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s ease; }
.shp-page .design-card:hover .dimg img{ transform:scale(1.05); }
.shp-page .design-card .dbody{ padding:16px 4px 4px; }
.shp-page .design-card .dname{ font-family:var(--display); font-size:17px; font-weight:700; color:var(--ink); }
.shp-page .design-card .dsub{ font-size:12.5px; color:var(--ink-soft); margin-top:5px; line-height:1.5; }
.shp-page .design-card .dlink{
  display:inline-flex; align-items:center; gap:5px; margin-top:11px;
  font-size:12.5px; font-weight:600; color:var(--coral-deep);
  border-bottom:1px solid transparent; transition:border-color .2s ease, gap .2s ease;
}
.shp-page .design-card .dlink svg{ width:13px; height:13px; }
.shp-page .design-card .dlink:hover{ border-color:var(--coral-deep); gap:8px; }

.shp-page .services{ background:var(--panel); padding:120px 0; }
.shp-page .service-grid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:20px; }
.shp-page .service-card{ background:#fff; border:1px solid var(--line); border-radius:18px; padding:34px 28px; display:flex; flex-direction:column; }
.shp-page .service-card .btn{ align-self:center; }
.shp-page .service-card.featured{ border-color:var(--coral); box-shadow:0 20px 40px rgba(201,163,94,0.1); }
.shp-page .service-card .badge{ align-self:flex-start; font-size:11px; font-weight:700; color:var(--coral-deep); background:rgba(201,163,94,0.08); padding:6px 14px; border-radius:999px; margin-bottom:18px; }
.shp-page .service-card h3{ font-family:var(--display); font-size:24px; font-weight:700; margin-bottom:10px; color:var(--ink); }
.shp-page .service-card p.desc{ font-size:14px; color:var(--ink-soft); margin-bottom:22px; }

/* Basic/Full σύγκριση σε 2 στήλες μέσα στην κάρτα, με bullets τι
   περιλαμβάνει το καθένα (και "x" στα όσα ΔΕΝ έχει το Basic). Ο τίτλος
   κάθε στήλης ("Basic"/"Full") είναι link προς την αντίστοιχη LP. */
.shp-page .tier-columns{ display:flex; gap:18px; margin:20px 0 4px; }
.shp-page .tier-col{ flex:1; padding-top:2px; }
.shp-page .tier-col + .tier-col{ border-left:1px solid var(--line); padding-left:18px; }
.shp-page .tier-col-title{
  display:inline-block; font-family:var(--display); font-size:14px; font-weight:700;
  color:var(--ink); margin-bottom:10px; padding-bottom:3px; border-bottom:1.5px solid var(--coral);
}
.shp-page .tier-col-title:hover{ color:var(--coral-deep); }
.shp-page .feature-list-mini{ list-style:none; padding:0; margin:0; }
.shp-page .feature-list-mini li{
  display:flex; align-items:flex-start; gap:6px; font-size:12.5px; color:var(--ink-soft);
  margin-bottom:9px; line-height:1.4;
}
.shp-page .feature-list-mini li svg{ width:14px; height:14px; flex-shrink:0; margin-top:2px; color:var(--coral-deep); }
.shp-page .feature-list-mini li.no{ color:var(--ink-mute); }
.shp-page .feature-list-mini li.no svg{ color:var(--ink-mute); }
.shp-page .service-card .btn{ align-self:center; margin-top:auto; }
.shp-page .feature-list{ list-style:none; margin-bottom:28px; flex:1; padding:0; }
.shp-page .feature-list li{ display:flex; gap:10px; font-size:13.5px; padding:8px 0; }
.shp-page .feature-list li svg{ width:14px; height:14px; color:var(--coral); flex-shrink:0; margin-top:3px; }

.shp-page .why{ background:var(--bg); padding:120px 0; }
.shp-page .why .section-head{ text-align:center; margin:0 auto 56px; }
.shp-page .why-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.shp-page .why-item{ background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:28px 22px; }
.shp-page .why-item .icn{ width:26px; height:26px; color:var(--coral); margin-bottom:14px; }
.shp-page .why-item h4{ font-family:var(--display); font-size:16px; font-weight:700; margin-bottom:8px; color:var(--ink); }
.shp-page .why-item h3{ font-family:var(--display); font-size:16px; font-weight:700; margin-bottom:8px; color:var(--ink); }
.shp-page .why-item p{ font-size:13px; color:var(--ink-soft); line-height:1.6; }

.shp-page .cta{ background:var(--panel); padding:120px 0; }
.shp-page .cta-box{
  background-image:radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size:18px 18px; background-position:-4px -4px;
  background-color:var(--navy); border-radius:24px; padding:60px; display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center;
}
.shp-page .cta-left h2{ font-family:var(--display); font-size:clamp(26px,3vw,32px); color:#fff; font-weight:700; margin-bottom:16px; }
.shp-page .cta-left p{ font-size:14.5px; color:rgba(255,255,255,.55); margin-bottom:8px; }
.shp-page .cta-left .contact-line{ display:flex; align-items:center; gap:10px; font-size:14px; color:#fff; margin-top:18px; }
.shp-page .cta-left .contact-line svg{ width:16px; height:16px; color:var(--coral); }
.shp-page form.inquiry{ display:flex; flex-direction:column; gap:13px; }
.shp-page form.inquiry .btn{ align-self:center; margin-top:4px; background:var(--coral); color:#000; }
.shp-page form.inquiry .btn:hover{ background:var(--coral-deep); }
.shp-page form.inquiry input, .shp-page form.inquiry select, .shp-page form.inquiry textarea{ background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.14); border-radius:10px; padding:13px 16px; color:#fff; font-family:var(--body); font-size:14px; width:100%; }
.shp-page form.inquiry select option{ color:#14161a; background:#fff; }
.shp-page form.inquiry textarea{ resize:vertical; min-height:76px; }
.shp-page .inquiry-notice{ padding:13px 16px; border-radius:10px; font-size:13.5px; margin-bottom:13px; border:1px solid transparent; }
.shp-page .inquiry-notice--success{ background:rgba(76,175,80,0.12); border-color:rgba(76,175,80,0.35); color:#8fe0a0; }
.shp-page .inquiry-notice--error{ background:rgba(230,90,90,0.12); border-color:rgba(230,90,90,0.35); color:#f0a0a0; }

.shp-page footer{ background:var(--bg); padding:56px 0 32px; border-top:1px solid var(--line); }
.shp-page .footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; margin-bottom:44px; }
.shp-page .footer-brand p{ font-size:13.5px; color:var(--ink-soft); margin-top:14px; max-width:260px; }
.shp-page .footer-social{ display:flex; gap:10px; margin-top:20px; }
.shp-page .footer-social a{ display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; border:1px solid var(--line); color:var(--ink-soft); transition:color .2s ease, border-color .2s ease, background .2s ease; }
.shp-page .footer-social a:hover{ color:var(--coral-deep); border-color:var(--coral); background:rgba(201,163,94,0.08); }
.shp-page .footer-col h5{ font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--coral-deep); margin-bottom:16px; font-weight:700; }
.shp-page .footer-col a{ display:block; font-size:13.5px; color:var(--ink-soft); margin-bottom:10px; }
.shp-page .footer-bottom{ display:flex; justify-content:space-between; padding-top:26px; border-top:1px solid var(--line); font-size:12.5px; color:var(--ink-mute); flex-wrap:wrap; gap:12px; }

@media (max-width:900px){
  .shp-page .nav-links{ display:none; } .shp-page .hero-grid{ grid-template-columns:1fr; }
  .shp-page .hero{ padding:110px 0 60px; min-height:auto; }
  .shp-page .hero-phone-photo{ max-width:360px; animation:none; }
  .shp-page .hero--luxury .candle-glow{ animation:none; opacity:.85; }
  .shp-page .hero--luxury .lux-dust i{ animation:none; opacity:0; }
  .shp-page .book-shadow{ animation:none; }
  .shp-page .book-cover{ animation:none; }
  .shp-page .s-phone{ animation:none; }
  .shp-page .s-phone::before{ animation:none; }
  .shp-page .tap-hint svg{ animation:none; }
  .shp-page nav{ backdrop-filter:none; background:rgba(255,255,255,0.97); }
  .shp-page .hero--luxury::before{ display:none; }
  .shp-page .steps, .shp-page .design-grid, .shp-page .why-grid{ grid-template-columns:1fr 1fr; }
  .shp-page .service-grid{ grid-template-columns:1fr; }
  .shp-page .cta-box{ grid-template-columns:1fr; padding:34px 24px; }
  .shp-page .footer-grid{ grid-template-columns:1fr 1fr; }
  .shp-page .logo{ font-size:17px; }
  .shp-page .logo-icon-wrap{ height:70px; width:70px; }
}

/* Μενού κινητού — κουμπί hamburger + πλαϊνό συρόμενο μενού.
   Το .nav-links κρύβεται εντελώς κάτω από 900px (κανόνας πιο πάνω),
   οπότε χωρίς αυτό ΔΕΝ υπήρχε καθόλου τρόπος πλοήγησης σε κινητό —
   βρέθηκε 22/8, προϋπάρχον κενό. */
.shp-page .mobile-menu-btn{
  display:none; background:none; border:none; padding:8px; margin:0;
  width:40px; height:40px; align-items:center; justify-content:center;
  color:var(--ink); flex-shrink:0;
}
@media (max-width:900px){
  .shp-page .mobile-menu-btn{ display:flex; }
}
.shp-page .mobile-menu-overlay{
  position:fixed; inset:0; z-index:200;
  background:rgba(20,18,15,0.4); backdrop-filter:blur(2px);
  opacity:0; visibility:hidden; transition:opacity .25s ease, visibility .25s ease;
}
.shp-page .mobile-menu-overlay.is-open{ opacity:1; visibility:visible; }
.shp-page .mobile-menu-panel{
  position:absolute; top:0; right:0; bottom:0; width:min(320px, 84vw);
  background:var(--bg); box-shadow:-12px 0 40px rgba(20,18,15,0.18);
  padding:24px 26px; display:flex; flex-direction:column; gap:4px;
  transform:translateX(100%); transition:transform .3s ease;
  overflow-y:auto;
}
.shp-page .mobile-menu-overlay.is-open .mobile-menu-panel{ transform:translateX(0); }
.shp-page .mobile-menu-close{
  align-self:flex-end; background:none; border:none; padding:8px; margin-bottom:12px;
  color:var(--ink); width:40px; height:40px; display:flex; align-items:center; justify-content:center;
}
.shp-page .mobile-menu-panel a{
  display:block; padding:14px 4px; font-size:16.5px; font-weight:500; color:var(--ink);
  border-bottom:1px solid var(--line);
}
.shp-page .mobile-menu-panel .mobile-sub-label{
  padding:14px 4px 4px; font-size:12px; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--ink-mute);
}
.shp-page .mobile-menu-panel .mobile-sub-link{
  padding:11px 4px 11px 16px; font-size:14.5px; color:var(--ink-soft); border-bottom:none;
}
.shp-page .mobile-menu-panel .nav-cta{
  margin-top:16px; text-align:center; background:var(--coral); color:#000;
  padding:14px; border-radius:10px; font-weight:600; border-bottom:none;
}
.shp-page .mobile-menu-panel .nav-social{
  display:flex; justify-content:center; gap:14px; margin-top:20px;
}
.shp-page .mobile-menu-panel .nav-social a{
  display:flex; align-items:center; justify-content:center; width:38px; height:38px;
  border-radius:50%; border:1px solid var(--line); color:var(--ink-soft); padding:0;
}
.shp-page .mobile-menu-panel .nav-social a:hover{ color:var(--coral-deep); border-color:var(--coral); }
@media (max-width:480px){
  .shp-page .logo{ font-size:15px; gap:6px; }
  .shp-page .logo-icon-wrap{ height:60px; width:60px; }
  .shp-page .hero-phone-photo{ max-width:280px; }
  .shp-page .signature-caption{ font-size:10px; }
}
@media (max-width:560px){ .shp-page .steps, .shp-page .design-grid, .shp-page .why-grid{ grid-template-columns:1fr; } .shp-page .footer-grid{ grid-template-columns:1fr; } }
@media (prefers-reduced-motion: reduce){ .shp-page *{ animation:none !important; transition:none !important; } }
.shp-page :focus-visible{ outline:2px solid var(--coral); outline-offset:3px; }

.shp-page .article-section{ padding:160px 0 100px; }
.shp-page .article-wrap{ max-width:760px; }
.shp-page .article-title{ font-family:var(--display); font-size:clamp(30px,4vw,44px); font-weight:700; color:var(--ink); margin-bottom:40px; }
.shp-page .article-body{ font-size:16px; line-height:1.8; color:var(--ink-soft); }
.shp-page .article-body h2{ font-family:var(--display); font-size:24px; font-weight:700; color:var(--ink); margin:44px 0 16px; }
.shp-page .article-body h3{ font-family:var(--display); font-size:19px; font-weight:600; color:var(--ink); margin:32px 0 12px; }
.shp-page .article-body p{ margin-bottom:18px; }
.shp-page .article-body ul, .shp-page .article-body ol{ margin:0 0 18px 22px; }
.shp-page .article-body li{ margin-bottom:8px; }
.shp-page .article-body a{ color:var(--coral-deep); text-decoration:underline; text-underline-offset:2px; }
.shp-page .article-body strong{ color:var(--ink); font-weight:600; }
.shp-page .article-body hr{ border:none; border-top:1px solid var(--line); margin:36px 0; }
@media (max-width:720px){ .shp-page .article-section{ padding:130px 0 70px; } }

/* ---------------------------------------------------------------------
   Demo Gallery — σελίδα "Demo / Ζωντανά Παραδείγματα" (templates/
   demo-gallery-template.php). Scoped tokens ίδιο pattern με .hero--luxury:
   δεν αγγίζει τίποτα άλλο στη σελίδα.
   --------------------------------------------------------------------- */
.shp-page .nav-links a.current{ color:var(--coral-deep); border-bottom:2px solid var(--coral); padding-bottom:4px; }

.shp-page .demo-gallery{
  --lux-serif:'Cormorant Garamond',serif;
  padding:150px 0 60px;
}
.shp-page .demo-hero{ text-align:center; padding-bottom:44px; }
.shp-page .demo-hero .eyebrow{ font-family:var(--display); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--coral-deep); margin-bottom:18px; display:block; }
.shp-page .demo-hero h1{ font-family:var(--lux-serif); font-weight:500; font-size:clamp(34px,5vw,54px); line-height:1.15; letter-spacing:-.01em; margin-bottom:18px; color:var(--ink); }
.shp-page .demo-hero h1 em{ font-style:italic; color:var(--coral); }
.shp-page .demo-hero p{ font-family:var(--body); font-size:16.5px; color:var(--ink-soft); max-width:520px; margin:0 auto; }
.shp-page .demo-hero-rule{ width:46px; height:2px; background:var(--coral); margin:26px auto 0; }

.shp-page .demo-tabs-wrap{ display:flex; justify-content:center; padding:8px 0 52px; }
.shp-page .demo-tabs{ position:relative; display:inline-flex; gap:4px; background:#fff; border:1px solid var(--line); border-radius:999px; padding:6px; }
.shp-page .demo-tab{ position:relative; z-index:2; font-family:var(--display); font-size:13.5px; font-weight:700; letter-spacing:.02em; text-transform:uppercase; color:var(--ink-soft); background:transparent; border:none; padding:12px 26px; border-radius:999px; cursor:pointer; transition:color .3s ease; }
.shp-page .demo-tab.active{ color:#1a1512; }
.shp-page .demo-tab-seal{ position:absolute; top:6px; left:6px; height:calc(100% - 12px); border-radius:999px; background:linear-gradient(135deg,var(--coral),var(--coral-deep)); box-shadow:0 10px 22px -8px rgba(140,106,61,.55); transition:transform .38s cubic-bezier(.65,0,.35,1), width .38s cubic-bezier(.65,0,.35,1); z-index:1; }

.shp-page .demo-panel{ display:none; }
.shp-page .demo-panel.active{ display:block; animation:demoFadeIn .45s ease; }
@keyframes demoFadeIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:translateY(0); } }
.shp-page .demo-panel-note{ text-align:center; font-family:var(--lux-serif); font-style:italic; font-size:14.5px; color:var(--ink-soft); margin-bottom:34px; }

.shp-page .demo-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); gap:26px; }

.shp-page .demo-card{ background:#fff; border:1px solid var(--line); border-radius:18px; overflow:hidden; transition:transform .3s ease, box-shadow .3s ease; display:flex; flex-direction:column; }
.shp-page .demo-card:hover{ transform:translateY(-5px); box-shadow:0 22px 40px -20px rgba(44,40,36,.28); }

.shp-page .demo-card-media{ aspect-ratio:3/4; background:var(--panel); position:relative; overflow:hidden; cursor:pointer; }
.shp-page .demo-card-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transition:opacity .5s ease, transform .5s ease; }
.shp-page .demo-card-media .demo-env-img{ opacity:1; transform:scale(1); }
.shp-page .demo-card-media .demo-inv-img{ opacity:0; transform:scale(1.03); }
.shp-page .demo-card-media.flipped .demo-env-img{ opacity:0; }
.shp-page .demo-card-media.flipped .demo-inv-img{ opacity:1; transform:scale(1); }
.shp-page .demo-qr-media img{ object-fit:cover; object-position:top; }

.shp-page .demo-flip-hint{ position:absolute; bottom:10px; left:10px; right:10px; z-index:3; display:flex; align-items:center; justify-content:center; gap:6px; font-family:var(--display); font-size:10px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:#1a1512; background:rgba(255,253,249,.92); border-radius:999px; padding:8px 10px; opacity:.94; pointer-events:none; transition:background .3s ease; }
.shp-page .demo-flip-hint svg{ width:11px; height:11px; transition:transform .4s ease; }
.shp-page .demo-card-media.flipped .demo-flip-hint svg{ transform:rotate(180deg); }

.shp-page .demo-card-body{ padding:18px 18px 20px; display:flex; flex-direction:column; gap:6px; flex:1; }
.shp-page .demo-card-name{ font-family:var(--lux-serif); font-size:20px; font-weight:600; color:var(--ink); }
.shp-page .demo-card-desc{ font-family:var(--body); font-size:12.5px; color:var(--ink-soft); line-height:1.45; flex:1; }
.shp-page .demo-card-cta{ margin-top:10px; display:inline-flex; align-items:center; justify-content:center; gap:6px; font-family:var(--display); font-size:11.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:#1a1512; background:linear-gradient(135deg,var(--coral),var(--coral-deep)); border-radius:999px; padding:11px 14px; text-decoration:none; box-shadow:0 12px 22px -12px rgba(140,106,61,.5); transition:transform .3s ease, box-shadow .3s ease; border:none; width:100%; }
.shp-page .demo-card-cta:hover{ transform:translateY(-2px); box-shadow:0 16px 28px -12px rgba(140,106,61,.6); }
.shp-page .demo-card-cta svg{ width:12px; height:12px; }
.shp-page .demo-card-cta--preview{ background:transparent; color:var(--coral-deep); border:1.5px solid var(--coral); box-shadow:none; }
.shp-page .demo-card-cta--preview:hover{ background:rgba(201,163,94,.1); box-shadow:none; }

/* Προεπισκόπηση σχεδίου κάρτας QR (χωρίς πραγματικό Live Demo event) —
   κλικ στην εικόνα ΚΑΙ το κουμπί ανοίγουν το ίδιο lightbox. */
.shp-page .demo-qr-media.has-preview{ cursor:pointer; }
.shp-page .preview-zoom-hint{
  position:absolute; top:10px; right:10px; z-index:3; width:32px; height:32px;
  background:rgba(255,253,249,.92); border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:var(--ink); pointer-events:none; transition:transform .25s ease;
}
.shp-page .demo-qr-media.has-preview:hover .preview-zoom-hint{ transform:scale(1.1); }
.shp-page .preview-zoom-hint svg{ width:15px; height:15px; }
.shp-page .preview-lightbox{
  position:fixed; inset:0; z-index:300; display:flex; align-items:center; justify-content:center;
  padding:40px 20px; background:rgba(15,13,10,.88); backdrop-filter:blur(4px);
  opacity:0; visibility:hidden; transition:opacity .25s ease, visibility .25s ease;
}
.shp-page .preview-lightbox.is-open{ opacity:1; visibility:visible; }
.shp-page .preview-lightbox figure{ margin:0; max-width:420px; width:100%; text-align:center; }
.shp-page .preview-lightbox img{
  width:100%; height:auto; border-radius:16px; box-shadow:0 30px 70px rgba(0,0,0,.5);
  transform:scale(.96); transition:transform .3s ease;
}
.shp-page .preview-lightbox.is-open img{ transform:scale(1); }
.shp-page .preview-lightbox figcaption{ margin-top:16px; font-family:var(--lux-serif); font-size:18px; color:#fff; }
.shp-page .preview-lightbox-close{
  position:absolute; top:20px; right:20px; background:rgba(255,255,255,.1); border:none; border-radius:50%;
  width:44px; height:44px; display:flex; align-items:center; justify-content:center; color:#fff;
}

.shp-page .demo-soon{ align-items:center; justify-content:center; border:1.5px dashed var(--line); background:transparent; }
.shp-page .demo-soon .demo-card-media{ background:transparent; aspect-ratio:auto; padding:38px 20px 8px; cursor:default; }
.shp-page .demo-soon-icon{ width:38px; height:38px; border-radius:50%; border:1.5px dashed var(--coral-deep); display:flex; align-items:center; justify-content:center; color:var(--coral-deep); font-family:var(--lux-serif); font-style:italic; font-size:20px; margin:0 auto; }
.shp-page .demo-soon .demo-card-body{ align-items:center; text-align:center; }
.shp-page .demo-soon .demo-card-name{ font-size:16px; }
.shp-page .demo-soon .demo-card-desc{ font-family:var(--lux-serif); font-style:italic; }

.shp-page .demo-cta-banner{ margin:70px 0 20px; background:var(--ink); border-radius:24px; padding:56px 48px; display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap; }
.shp-page .demo-cta-banner h2{ font-family:var(--lux-serif); font-weight:500; font-style:italic; font-size:clamp(24px,3vw,30px); color:#fff; max-width:420px; line-height:1.3; }
.shp-page .demo-cta-banner .demo-card-cta{ padding:15px 30px; font-size:12.5px; width:auto; }

@media (max-width:720px){
  .shp-page .demo-gallery{ padding:120px 0 40px; }
  .shp-page .demo-cta-banner{ padding:36px 28px; }
}

/* ============================================================
   BLOG — single post + archive (νέο, 29/8). Πριν έδειχναν με το
   προεπιλεγμένο WordPress theme, χωρίς branding. Ίδια παλέτα/
   τυπογραφία με τα .article-* που ήδη υπάρχουν για τις Pages.
   ============================================================ */
.shp-page .blog-back-link{ display:inline-block; font-size:13px; font-weight:600; color:var(--ink-mute); text-decoration:none; margin-bottom:24px; }
.shp-page .blog-back-link:hover{ color:var(--ink); }
.shp-page .blog-meta{ font-size:12.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--lux-gold, #C9A35E); font-weight:700; margin-bottom:14px; }

.shp-page .blog-more-section{ padding:80px 0 120px; background:var(--panel); }
.shp-page .blog-more-title{ font-family:var(--display); font-size:clamp(24px,3vw,32px); font-weight:700; color:var(--ink); margin-bottom:36px; }
.shp-page .blog-more-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.shp-page .blog-more-card{ display:block; background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden; text-decoration:none; color:inherit; transition:transform .25s ease, box-shadow .25s ease; }
.shp-page .blog-more-card:hover{ transform:translateY(-4px); box-shadow:0 14px 30px rgba(20,22,26,0.08); }
.shp-page .blog-more-thumb{ aspect-ratio:16/9; background-size:cover; background-position:center; background-color:var(--panel); }
.shp-page .blog-more-date{ font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-mute); margin:16px 18px 6px; }
.shp-page .blog-more-card-title{ font-family:var(--display); font-size:17px; font-weight:700; color:var(--ink); margin:0 18px 8px; line-height:1.35; }
.shp-page .blog-more-excerpt{ font-size:13.5px; color:var(--ink-soft); line-height:1.6; margin:0 18px 20px; }

.shp-page .blog-archive-section{ padding:160px 0 100px; }
.shp-page .blog-archive-grid{ margin-top:20px; }

.shp-page .blog-comments-section{ padding:0 0 100px; }
.shp-page .blog-comments-section .comment-respond{ margin-top:30px; }
.shp-page .blog-comments-section input[type=text], .shp-page .blog-comments-section input[type=email], .shp-page .blog-comments-section textarea{
	width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:8px; font-family:var(--body); font-size:14px; margin-bottom:14px; background:#fff; color:var(--ink);
}
.shp-page .blog-comments-section .form-submit input{
	background:var(--ink); color:#fff; border:none; padding:12px 26px; border-radius:999px; font-size:14px; font-weight:600; cursor:pointer;
}
.shp-page .blog-comments-section .comment-list{ list-style:none; margin:0 0 30px; padding:0; }
.shp-page .blog-comments-section .comment-list li{ margin-bottom:20px; padding-bottom:20px; border-bottom:1px solid var(--line); }

.shp-page .blog-pagination{ display:flex; gap:10px; justify-content:center; margin-top:50px; }
.shp-page .blog-pagination .page-numbers{ display:inline-flex; align-items:center; justify-content:center; min-width:38px; height:38px; padding:0 10px; border-radius:8px; border:1px solid var(--line); color:var(--ink); text-decoration:none; font-size:14px; }
.shp-page .blog-pagination .page-numbers.current{ background:var(--ink); color:#fff; border-color:var(--ink); }
.shp-page .blog-empty{ color:var(--ink-soft); }

@media (max-width:900px){
  .shp-page .blog-more-grid{ grid-template-columns:1fr; }
}

/* 1.8.3: 4 tabs στο /demo/ — οριζόντιο scroll αντί για overflow σε κινητό */
@media (max-width: 640px){
  .shp-page .demo-tabs-wrap{ overflow-x:auto; justify-content:flex-start; padding-left:16px; padding-right:16px; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .shp-page .demo-tabs-wrap::-webkit-scrollbar{ display:none; }
  .shp-page .demo-tabs{ margin:0 auto; flex-shrink:0; }
  .shp-page .demo-tab{ padding:10px 14px; font-size:12px; white-space:nowrap; }
}