/* =============================================================
   ATHANELEON — global.css
   Θεμέλια: tokens, γραμματοσειρές, τυπογραφία, theme (dark/light),
   κουμπιά, container, βασικά utilities.
   Φορτώνεται ΠΡΩΤΟ, πριν από κάθε section-specific CSS.
   ============================================================= */

/* -------------------------------------------------------------
   1. ΓΡΑΜΜΑΤΟΣΕΙΡΕΣ  (self-hosted — δες /fonts/README)
      Τίτλοι:  Ysabeau Infant  (ExtraBold = 800)
      Κείμενο: Google Sans Flex (Medium = 500)
      Και οι δύο variable, με πλήρη ελληνικά, άδεια SIL OFL.
   ------------------------------------------------------------- */
@font-face {
  font-family: "Ysabeau Infant";
  /* Υποσύνολο σε Λατινικά+Ελληνικά (.woff). Αν προσθέσεις .woff2 αργότερα,
     βάλε το ΠΡΙΝ το .woff: url("../fonts/...woff2") format("woff2"), */
  src: url("../fonts/YsabeauInfant-LatGrk.woff")  format("woff");
  font-weight: 100 900;            /* variable wght axis */
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Commissioner";
  /* Υποσύνολο σε Λατινικά+Ελληνικά (variable wght). */
  src: url("../fonts/Commissioner-LatGrk.woff")  format("woff");
  font-weight: 100 900;            /* variable wght axis */
  font-style: normal;
  font-display: swap;
}

/* -------------------------------------------------------------
   2. DESIGN TOKENS
   ------------------------------------------------------------- */
:root {
  /* --- Brand palette (πηγή αλήθειας) --- */
  --c-black:        #100E0A;   /* ζεστό σχεδόν-μαύρο (όχι κρύο #000) */
  --c-black-2:      #1A1712;   /* ελαφρώς ανοιχτότερο, για εναλλαγές */
  --c-gold:         #C4A24E;   /* κύριο χρυσό */
  --c-gold-bright:  #E4CB86;   /* φωτεινό χρυσό — hover / highlights */
  --c-gold-deep:    #8C6F2E;   /* βαθύ χρυσό — accents σε ανοιχτό φόντο */
  --c-paper:        #F6F1E7;   /* λευκό-χαρτί (ζεστό) */
  --c-paper-2:      #ECE5D6;   /* δεύτερη απόχρωση χαρτιού */
  --c-grey:         #8C8980;   /* ζεστό γκρι (κείμενο σε σκούρο) */
  --c-grey-warm:    #6E6A60;   /* γκρι για κείμενο σε ανοιχτό */

  /* --- Semantic tokens — προεπιλογή: DARK theme --- */
  --bg:           var(--c-black);
  --bg-alt:       var(--c-black-2);
  --text:         var(--c-paper);
  --text-muted:   var(--c-grey);
  --accent:       var(--c-gold);
  --accent-bright:var(--c-gold-bright);
  --line:         rgba(196, 162, 78, 0.22);   /* λεπτές χρυσές γραμμές */
  --overlay:      rgba(16, 14, 10, 0.55);      /* σκίαση πάνω σε εικόνες */
  --shadow:       0 18px 50px -20px rgba(0, 0, 0, 0.65);

  /* --- Τυπογραφία --- */
  --font-display: "Ysabeau Infant", "Cormorant Garamond", Georgia, serif;
  --font-body:    "Commissioner", system-ui, -apple-system, "Segoe UI", sans-serif;

  --weight-body:    450;   /* λίγο κάτω από Medium για άνετη ανάγνωση σώματος */
  --weight-medium:  500;   /* «Medium» του γραφίστα — UI/labels/κουμπιά */
  --weight-display: 800;   /* ExtraBold τίτλοι */

  /* Fluid type scale (mobile-first, clamp: min · προτιμώμενο · max) */
  --fs-200: clamp(0.78rem, 0.74rem + 0.18vw, 0.86rem);  /* small / captions */
  --fs-300: clamp(0.92rem, 0.88rem + 0.20vw, 1.00rem);  /* body small */
  --fs-400: clamp(1.00rem, 0.96rem + 0.25vw, 1.13rem);  /* body */
  --fs-500: clamp(1.20rem, 1.10rem + 0.50vw, 1.50rem);  /* lead */
  --fs-600: clamp(1.50rem, 1.30rem + 1.00vw, 2.10rem);  /* h3 */
  --fs-700: clamp(2.00rem, 1.60rem + 2.00vw, 3.20rem);  /* h2 */
  --fs-800: clamp(2.60rem, 1.90rem + 3.40vw, 4.80rem);  /* h1 */
  --fs-900: clamp(3.20rem, 2.10rem + 5.50vw, 7.00rem);  /* hero display */

  --leading-tight: 1.05;
  --leading-snug:  1.2;
  --leading-body:  1.65;

  --tracking-tight:  -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.08em;
  --tracking-caps:    0.16em;   /* για κεφαλαία labels */

  /* --- Spacing scale (fluid) --- */
  --space-2xs: clamp(0.40rem, 0.38rem + 0.10vw, 0.50rem);
  --space-xs:  clamp(0.60rem, 0.55rem + 0.25vw, 0.80rem);
  --space-sm:  clamp(0.90rem, 0.80rem + 0.40vw, 1.20rem);
  --space-md:  clamp(1.40rem, 1.20rem + 0.80vw, 2.00rem);
  --space-lg:  clamp(2.20rem, 1.80rem + 1.60vw, 3.40rem);
  --space-xl:  clamp(3.40rem, 2.60rem + 3.00vw, 5.50rem);
  --space-2xl: clamp(5.00rem, 3.60rem + 5.00vw, 8.50rem);  /* κενά μεταξύ sections */

  /* --- Layout --- */
  --container:      1240px;   /* μέγιστο πλάτος περιεχομένου */
  --container-narrow: 760px;  /* για κείμενο/άρθρα */
  --gutter:         clamp(1.10rem, 0.70rem + 2.00vw, 2.40rem);  /* πλαϊνά περιθώρια */
  --radius:         4px;      /* διακριτικές, premium γωνίες */
  --radius-lg:      10px;

  /* --- Motion --- */
  --ease:        cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:    180ms;
  --dur:         320ms;
  --dur-slow:    640ms;

  /* --- Z layers --- */
  --z-header:  100;
  --z-overlay: 200;
  --z-modal:   300;

  color-scheme: dark;
}

/* --- LIGHT theme (για ανοιχτές ενότητες, π.χ. Eshop / κείμενα) ---
   Χρήση: <section data-theme="light"> ... </section> */
[data-theme="light"] {
  --bg:           var(--c-paper);
  --bg-alt:       var(--c-paper-2);
  --text:         var(--c-black);
  --text-muted:   var(--c-grey-warm);
  --accent:       var(--c-gold-deep);
  --accent-bright:var(--c-gold);
  --line:         rgba(16, 14, 10, 0.14);
  --overlay:      rgba(246, 241, 231, 0.45);
  --shadow:       0 18px 44px -24px rgba(60, 48, 20, 0.30);
  color-scheme: light;
}

/* -------------------------------------------------------------
   3. RESET / NORMALIZE (modern, ελαφρύ)
   ------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: clip;   /* αποτρέπει οριζόντιο scroll από off-canvas menu / carousels / marquees */
}

body { overflow-x: clip; }   /* δεύτερο επίπεδο ασφαλείας· δεν σπάει sticky όπως το overflow:hidden */

body {
  min-height: 100svh;
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: var(--weight-body);
  font-size: var(--fs-400);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-synthesis: none;            /* να μην «παχαίνει» τεχνητά το variable font */
  transition: background-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
}

img, picture, svg, video, canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

input, button, textarea, select {
  font: inherit;
  color: inherit;
}

button { cursor: pointer; background: none; border: none; }

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}

ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }

:target { scroll-margin-top: 6rem; }

/* -------------------------------------------------------------
   4. ΤΥΠΟΓΡΑΦΙΑ
   ------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;              /* καλύτερα σπασίματα τίτλων */
  color: var(--text);
}

h1 { font-size: var(--fs-800); }
h2 { font-size: var(--fs-700); }
h3 { font-size: var(--fs-600); line-height: var(--leading-snug); }
h4 { font-size: var(--fs-500); line-height: var(--leading-snug); }

p { max-width: 68ch; text-wrap: pretty; }

strong, b { font-weight: var(--weight-medium); }

small { font-size: var(--fs-200); }

/* Eyebrow / kicker — μικρό χρυσό label πάνω από τίτλους */
.eyebrow {
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: var(--fs-200);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}
.eyebrow::before {
  content: "";
  width: 2rem;
  height: 1px;
  background: var(--accent);
  opacity: 0.8;
}

/* Lead paragraph */
.lead {
  font-size: var(--fs-500);
  line-height: 1.5;
  color: var(--text);
  font-weight: var(--weight-body);
}

::selection {
  background: var(--accent);
  color: var(--c-black);
}

/* -------------------------------------------------------------
   5. LAYOUT HELPERS
   ------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--container-narrow); }

/* Κάθετο ρυθμικό κενό ανάμεσα στα sections */
.section {
  padding-block: var(--space-2xl);
  background-color: var(--bg);
  color: var(--text);
}
.section--tight { padding-block: var(--space-xl); }

/* Flow: αυτόματο κάθετο κενό μεταξύ διαδοχικών παιδιών */
.flow > * + * { margin-block-start: var(--flow-space, var(--space-sm)); }

/* -------------------------------------------------------------
   6. ΚΟΥΜΠΙΑ
   ------------------------------------------------------------- */
.btn {
  --btn-bg: var(--accent);
  --btn-fg: var(--c-black);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: 0.85em 1.6em;
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: var(--fs-300);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--btn-fg);
  background-color: var(--btn-bg);
  border: 1px solid var(--btn-bg);
  border-radius: var(--radius);
  transition: background-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
  will-change: transform;
}
.btn:hover {
  --btn-bg: var(--accent-bright);
  transform: translateY(-2px);
}
.btn:active { transform: translateY(0); }

/* Δευτερεύον — περίγραμμα */
.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  border-color: var(--line);
}
.btn--ghost:hover {
  --btn-bg: transparent;
  --btn-fg: var(--accent-bright);
  border-color: var(--accent);
}

/* Link με βέλος / υπογράμμιση που «μεγαλώνει» */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-weight: var(--weight-medium);
  color: var(--accent);
  letter-spacing: var(--tracking-wide);
}
.link-arrow::after {
  content: "→";
  transition: transform var(--dur-fast) var(--ease);
}
.link-arrow:hover { color: var(--accent-bright); }
.link-arrow:hover::after { transform: translateX(4px); }

/* -------------------------------------------------------------
   7. SCROLL-REVEAL  (η κίνηση ενεργοποιείται από το main.js)
      Αρχική κατάσταση: κρυμμένο/μετατοπισμένο.
      Όταν μπει στο viewport, το JS βάζει .is-visible.
   ------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* -------------------------------------------------------------
   8. ACCESSIBILITY UTILITIES
   ------------------------------------------------------------- */
/* Ορατό μόνο σε screen readers */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* Skip-link: «Μετάβαση στο περιεχόμενο» */
.skip-link {
  position: absolute;
  left: var(--space-sm);
  top: -100%;
  z-index: var(--z-modal);
  background: var(--accent);
  color: var(--c-black);
  padding: 0.6em 1em;
  border-radius: var(--radius);
  font-weight: var(--weight-medium);
  transition: top var(--dur-fast) var(--ease);
}
.skip-link:focus { top: var(--space-sm); }

/* Καθαρό, ορατό focus παντού (πλην ποντικιού) */
:focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: 3px;
  border-radius: 2px;
}

/* -------------------------------------------------------------
   9. ΣΕΒΑΣΜΟΣ «REDUCED MOTION»
      (το brief ζητά εναλλακτική χωρίς κίνηση)
   ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ============================================================
   IMAGE HELPER — όταν μπαίνει <img> μέσα σε placeholder box,
   γεμίζει το πλαίσιο σωστά (object-fit) και φεύγει το dashed border.
   ============================================================ */
.et-media-ph > img, .et-tile-ph > img, .et-producer-ph > img,
.pg-media-ph > img, .pg-stage-media > img,
.bt-media-ph > img, .bt-protect-ph > img,
.pr-bottle-ph > img, .pr-gift-ph > img,
.wh-ph > img, .ex-ph > img,
.bl-ph > img, .co-visit-ph > img, .hx-gift-ph > img {
  width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit;
}
.et-media-ph:has(img), .et-tile-ph:has(img), .et-producer-ph:has(img),
.pg-media-ph:has(img), .pg-stage-media:has(img),
.bt-media-ph:has(img), .bt-protect-ph:has(img),
.pr-bottle-ph:has(img), .pr-gift-ph:has(img),
.wh-ph:has(img), .ex-ph:has(img),
.bl-ph:has(img), .co-visit-ph:has(img), .hx-gift-ph:has(img) {
  padding: 0; border-style: solid; overflow: hidden;
}
/* Για διαφανή PNG προϊόντων (μπουκάλια) θέλουμε contain, όχι cover */
.pr-show-media .pr-bottle-ph > img, .pr-pack-media .pr-bottle-ph > img { object-fit: contain; }

/* ============================================================
   SCROLL-TO-TOP — κουμπί κάτω δεξιά (όλες οι σελίδες)
   ============================================================ */
.scroll-top {
  position: fixed; right: clamp(16px, 3vw, 28px); bottom: clamp(16px, 3vw, 28px);
  width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent); color: var(--c-black);
  border: none; cursor: pointer;
  box-shadow: 0 10px 26px rgba(0,0,0,.45);
  opacity: 0; visibility: hidden; transform: translateY(14px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), background var(--dur-fast) var(--ease);
  z-index: 80;
}
.scroll-top:hover { background: var(--accent-bright); }
.scroll-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .scroll-top { transition: opacity .01s; } }
/* ============================================================
   PRELOADER (logo που «αναπνέει») — εξωτερικό CSS για συμβατότητα με CSP.
   Έχει CSS fallback auto-hide (4s) ώστε να ΜΗΝ κολλήσει ποτέ, ακόμη κι αν
   το JS μπλοκαριστεί. Το main.js το σβήνει νωρίτερα (στο load) με .is-done.
   ============================================================ */
.preloader { position: fixed; inset: 0; z-index: 99999; display: grid; place-items: center; background: var(--bg, #0d0b08); transition: opacity .5s ease, visibility .5s ease; animation: plAutohide 0s linear 4s forwards; }
.preloader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
@keyframes plAutohide { to { opacity: 0; visibility: hidden; pointer-events: none; } }
.preloader-logo { width: clamp(120px, 38vw, 190px); height: auto; animation: plBreathe 2.4s ease-in-out infinite; }
@keyframes plBreathe { 0%, 100% { transform: scale(1); opacity: .8; } 50% { transform: scale(1.06); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .preloader-logo { animation: none; opacity: 1; } .preloader { animation-delay: 2s; } }

/* ============================================================
   COOKIE CONSENT — banner (3 κουμπιά) + modal διαχείρισης (CSP-safe)
   ============================================================ */
/* — Banner — (κεντράρισμα χωρίς transform ώστε το animation να δουλεύει & σε mobile) */
.cookie-banner { position: fixed; left: 0; right: 0; bottom: clamp(12px, 3vw, 24px); margin: 0 auto; z-index: 150; width: min(880px, calc(100% - 20px)); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-lg); padding: var(--space-md) var(--space-lg); background: var(--bg-alt, #15110b); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: 0 12px 40px rgba(0,0,0,.45); animation: cookieIn .4s var(--ease) both; }
.cookie-text { flex: 1 1 300px; min-width: 0; margin: 0; font-size: var(--fs-200); color: var(--text-muted); line-height: 1.5; }
.cookie-text a { color: var(--accent-bright); }
.cookie-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); flex: 0 0 auto; }
.cookie-actions .btn { white-space: nowrap; }
.cookie-decline, .cookie-manage, .cookie-modal-cancel { background: transparent; border: 1px solid var(--line); color: var(--text); }
.cookie-decline:hover, .cookie-manage:hover, .cookie-modal-cancel:hover { border-color: var(--accent); }
.cookie-banner.is-hiding { opacity: 0; transform: translateY(12px); transition: opacity .3s var(--ease), transform .3s var(--ease); }
@keyframes cookieIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@media (max-width: 48em) {
  .cookie-banner { left: 10px; right: 10px; width: auto; margin: 0; padding: var(--space-md); }
  .cookie-text { flex: 1 1 auto; }
  .cookie-actions { width: 100%; }
  .cookie-actions .btn { flex: 1 1 auto; }
}
/* — Modal διαχείρισης — */
.cookie-modal { position: fixed; inset: 0; z-index: 210; display: grid; place-items: center; padding: var(--space-md); background: rgba(0,0,0,.62); animation: cookieFade .25s ease both; }
.cookie-modal-card { width: min(440px, 100%); max-height: 85vh; overflow-y: auto; background: var(--bg-alt, #15110b); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-lg); box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.cookie-modal-card h3 { font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--fs-500); margin: 0 0 var(--space-sm); color: var(--text); }
.cookie-cat { padding: var(--space-md) 0; border-top: 1px solid var(--line); }
.cookie-cat:first-of-type { border-top: none; }
.cookie-cat p { margin: 4px 0 0; font-size: var(--fs-200); color: var(--text-muted); line-height: 1.5; }
.cookie-cat-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); }
.cookie-cat-head strong { color: var(--text); }
.cookie-cat-always { font-size: .7rem; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--accent); }
.cookie-toggle { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-md); cursor: pointer; }
.cookie-toggle strong { color: var(--text); }
.cookie-toggle small { display: block; margin-top: 2px; color: var(--text-muted); font-size: var(--fs-200); }
.cookie-switch { position: relative; flex: none; width: 44px; height: 24px; }
.cookie-switch input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.cookie-switch > span { position: absolute; inset: 0; border-radius: 999px; background: var(--c-black); border: 1px solid var(--line); transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.cookie-switch > span::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--text-muted); transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.cookie-switch input:checked + span { background: rgba(196,162,78,.25); border-color: var(--accent); }
.cookie-switch input:checked + span::after { transform: translateX(20px); background: var(--accent-bright); }
.cookie-modal-actions { margin-top: var(--space-lg); display: flex; justify-content: flex-end; gap: var(--space-sm); }
@keyframes cookieFade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cookie-banner, .cookie-modal { animation: none; } }

/* Κλείδωμα scroll όσο είναι ενεργός ο preloader (να μη σκρολάρει το από-πίσω) */
html.preloader-lock, html.preloader-lock body { overflow: hidden; touch-action: none; }

/* ============================================================
   PHOTO SECTIONS — επαναχρησιμοποιήσιμα εφέ (CSP-safe, CSS-only)
   Εικόνες: <img> με gradient fallback αν λείπουν. object-fit: cover.
   ============================================================ */
.photo-sec { padding-block: var(--space-3xl, 6rem); }
.photo-sec-head { text-align: center; margin-bottom: var(--space-2xl); }
.photo-sec-head .eyebrow { justify-content: center; }
.photo-media { position: relative; overflow: hidden; background: linear-gradient(135deg, #1c1812, #0f0d0a); }
.photo-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--space-lg); background: linear-gradient(to top, rgba(0,0,0,.92) 0%, rgba(0,0,0,.78) 35%, rgba(0,0,0,.35) 70%, transparent 100%); }
.photo-cap-num { font-family: var(--font-display); font-weight: var(--weight-display); color: var(--accent-bright); font-size: var(--fs-600); line-height: 1; display: block; }
.photo-cap h3 { font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--fs-500); color: #fff; margin: 4px 0 0; }
.photo-cap p { color: rgba(255,255,255,.8); font-size: var(--fs-200); margin: 4px 0 0; max-width: 46ch; }

/* — Εφέ 1: ΣΤΟΙΒΑΞΗ στο scroll (sticky, η μία πέφτει πάνω στην άλλη) — */
.photo-stack { display: flex; flex-direction: column; gap: 9vh; }
.photo-stack-card { position: sticky; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); box-shadow: 0 24px 60px -28px rgba(0,0,0,.85); }
.photo-stack-card .photo-media { aspect-ratio: 16 / 10; }
.photo-stack-card:nth-child(1) { top: 84px; }
.photo-stack-card:nth-child(2) { top: 100px; }
.photo-stack-card:nth-child(3) { top: 116px; }
@media (min-width: 56em) {
  .photo-stack { gap: 14vh; }
  .photo-stack-card:nth-child(1) { top: 100px; }
  .photo-stack-card:nth-child(2) { top: 124px; }
  .photo-stack-card:nth-child(3) { top: 148px; }
  .photo-stack-card .photo-media { aspect-ratio: 21 / 9; }
}

/* — Πλέγμα 3 για τα άλλα εφέ — */
.photo-grid3 { display: grid; grid-template-columns: 1fr; gap: var(--space-md); }
@media (min-width: 46em) { .photo-grid3 { grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); } }
.photo-grid3 .photo-cell { position: relative; aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--radius-lg); border: 1px solid var(--line); background: linear-gradient(135deg, #1c1812, #0f0d0a); }
.photo-grid3 .photo-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* — Εφέ 2: KEN BURNS (αργό zoom) — */
.photo-kb img { animation: kenburns 20s ease-in-out infinite alternate; transform-origin: center; }
.photo-kb:nth-child(2) img { animation-delay: -7s; }
.photo-kb:nth-child(3) img { animation-delay: -14s; }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.14); } }

/* — Εφέ 3: HOVER ZOOM (interactive) — */
.photo-hz img { transition: transform 1.1s var(--ease); }
.photo-hz:hover img { transform: scale(1.08); }

@media (prefers-reduced-motion: reduce) {
  .photo-stack-card { position: static; }
  .photo-stack { gap: var(--space-2xl); }
  .photo-kb img { animation: none; }
}
/* Mobile: η κάρτα να «κολλάει» πιο χαμηλά (περίπου στη μέση) ώστε η επόμενη να την επικαλύπτει στο κέντρο */
@media (max-width: 56em) and (prefers-reduced-motion: no-preference) {
  .photo-stack-card:nth-child(1) { top: 24vh; }
  .photo-stack-card:nth-child(2) { top: 27vh; }
  .photo-stack-card:nth-child(3) { top: 30vh; }
}

/* Συνδεδεμένες εικόνες σε placeholder κουτιά (γεμίζουν· καθαρό look όταν υπάρχει φωτό) */
.wh-ph img, .ex-ph img, .co-visit-ph img, .pr-gift-ph img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
.wh-ph:has(img), .ex-ph:has(img), .co-visit-ph:has(img), .pr-gift-ph:has(img) { padding: 0; border-style: solid; border-color: var(--line); }
.wh-ph:has(img)::after, .ex-ph:has(img)::after, .co-visit-ph:has(img)::after { display: none; }

/* ============================================================
   GENERIC LIGHTBOX — για άλμπουμ με [data-lightbox] (π.χ. Παραγωγή)
   ============================================================ */
[data-lightbox] img { cursor: zoom-in; }
.lb-overlay { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.88); padding: var(--space-lg); animation: cookieFade .2s ease both; }
.lb-overlay[hidden] { display: none; }
.lb-img { max-width: min(92vw, 1100px); max-height: 84vh; border-radius: var(--radius-lg); box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.lb-btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,.4); border: 1px solid var(--line); color: var(--c-paper, #F6F1E7); width: 52px; height: 52px; border-radius: 50%; font-size: 1.8rem; cursor: pointer; display: grid; place-items: center; transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.lb-btn:hover { background: var(--accent); color: var(--c-black, #100E0A); border-color: var(--accent); }
.lb-prev { left: 16px; } .lb-next { right: 16px; }
.lb-close { position: absolute; top: 16px; right: 18px; background: none; border: none; color: var(--c-paper, #F6F1E7); font-size: 2.4rem; line-height: 1; cursor: pointer; }
.lb-close:hover { color: var(--accent); }
.lb-count { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); color: var(--c-paper, #F6F1E7); font-size: var(--fs-200); background: rgba(0,0,0,.4); padding: 4px 12px; border-radius: 999px; }
@media (max-width: 40em) { .lb-btn { width: 42px; height: 42px; font-size: 1.5rem; } .lb-prev { left: 8px; } .lb-next { right: 8px; } }