/* =============================================================
   ATHANELEON — emfialotirio.css  (Το Εμφιαλωτήριο)
   Νέο εφέ: 3D depth diorama gallery (mouse-driven). Prefix .bt-
   ============================================================= */

.bt-media-ph {
  border-radius: var(--radius-lg); border: 1px solid var(--line);
  display: grid; place-items: center; color: var(--text-muted);
  background: radial-gradient(circle at 30% 20%, var(--c-black-2), var(--c-black));
  width: 100%; height: 100%; min-height: 140px;
}

/* ---------------- 1) ΕΙΣΑΓΩΓΗ (split hero) ---------------- */
.bt-hero { padding-top: calc(96px + var(--space-xl)); padding-bottom: var(--space-2xl); background: radial-gradient(70% 60% at 80% 0%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 70%), var(--bg); }
.bt-hero-inner { display: grid; grid-template-columns: 1fr; gap: var(--space-xl); align-items: center; }
@media (min-width: 64em) { .bt-hero-inner { grid-template-columns: 1.05fr .95fr; gap: var(--space-2xl); } }
.bt-hero-text { opacity: 0; transform: translateY(20px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.bt-hero.is-in .bt-hero-text { opacity: 1; transform: none; }
.bt-hero-title { font-size: var(--fs-800); margin-top: var(--space-sm); }
.bt-hero-sub { margin-top: var(--space-md); color: var(--text-muted); font-size: var(--fs-500); max-width: 46ch; }
.bt-hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-lg); }
.bt-hero-media { aspect-ratio: 4 / 3; opacity: 0; transform: translateY(20px) scale(.98); transition: opacity 1s var(--ease) .2s, transform 1s var(--ease) .2s; }
.bt-hero.is-in .bt-hero-media { opacity: 1; transform: none; }

/* ---------------- 2) ΕΓΚΑΤΑΣΤΑΣΕΙΣ (3D depth gallery) ---------------- */
.bt-gallery { padding-block: var(--space-2xl); background: var(--bg-alt); overflow: hidden; }
.bt-gallery-head { text-align: center; margin-bottom: var(--space-xl); }
.bt-gallery-head .eyebrow { justify-content: center; }
.bt-gallery-head h2 { margin-top: var(--space-2xs); }
.bt-gallery-head p { margin-top: var(--space-sm); color: var(--text-muted); }

.bt-stage { max-width: 1100px; margin: 0 auto; padding-inline: var(--gutter); perspective: 1100px; }
.bt-scene {
  display: grid; gap: 16px;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, minmax(150px, 26vh));
  grid-template-areas: "a a b c" "a a d e";
  transform-style: preserve-3d;
  transform: rotateX(calc(var(--my, 0) * 5deg)) rotateY(calc(var(--mx, 0) * -5deg));
  transition: transform .25s var(--ease);
}
.bt-tile {
  margin: 0; border-radius: var(--radius-lg); overflow: hidden;
  opacity: 0;
  transform: translateZ(calc(var(--depth, 1) * 26px))
             translate3d(calc(var(--mx, 0) * var(--depth, 1) * -9px), calc(var(--my, 0) * var(--depth, 1) * -9px), 0);
  transition: opacity .8s var(--ease) calc(var(--i, 0) * 110ms), transform .25s var(--ease);
  box-shadow: 0 20px 40px -24px rgba(0,0,0,.7);
}
.bt-gallery.is-in .bt-tile { opacity: 1; }
.bt-tile:nth-child(1) { grid-area: a; }
.bt-tile .bt-media-ph { border-radius: var(--radius-lg); }
.bt-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 55.999em) {
  .bt-scene { grid-template-columns: 1fr 1fr; grid-template-rows: none; grid-template-areas: none; transform: none !important; }
  .bt-tile { grid-area: auto !important; transform: none !important; }
  .bt-tile:nth-child(1) { grid-column: 1 / -1; }
}

/* ---------------- 3) ΕΞΟΠΛΙΣΜΟΣ (spec sheet) ---------------- */
.bt-spec { background: var(--bg); }
.bt-spec-inner { display: grid; grid-template-columns: 1fr; gap: var(--space-xl); align-items: center; }
@media (min-width: 56em) { .bt-spec-inner { grid-template-columns: 1fr 1fr; gap: var(--space-2xl); } }
.bt-spec-text > * + * { margin-top: var(--space-md); }
.bt-spec-text p { color: var(--text-muted); }
.bt-spec-card { background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-lg); box-shadow: var(--shadow); }
.bt-spec-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-md); padding-block: var(--space-sm); border-bottom: 1px solid var(--line); }
.bt-spec-row:last-of-type { border-bottom: 0; }
.bt-spec-label { color: var(--text-muted); }
.bt-spec-val { font-family: var(--font-display); font-weight: var(--weight-display); color: var(--accent); font-size: var(--fs-600); }
.bt-spec-val small { font-family: var(--font-body); font-weight: var(--weight-body); color: var(--text-muted); font-size: var(--fs-200); }
.bt-spec-note { margin-top: var(--space-sm); color: var(--text-muted); font-size: var(--fs-200); font-style: italic; }

/* ---------------- 4) ΥΓΙΕΙΝΗ & ΑΣΦΑΛΕΙΑ ---------------- */
.bt-hygiene { background: var(--bg-alt); text-align: center; }
.bt-hygiene-head { max-width: 62ch; margin: 0 auto var(--space-xl); }
.bt-hygiene-head .eyebrow { justify-content: center; }
.bt-hygiene-head h2 { margin-top: var(--space-2xs); }
.bt-hygiene-head p { margin-top: var(--space-sm); color: var(--text-muted); }
.bt-hygiene-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-md); grid-template-columns: 1fr; }
@media (min-width: 48em) { .bt-hygiene-grid { grid-template-columns: repeat(3, 1fr); } }
.bt-hygiene-item { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-lg) var(--space-md); display: flex; flex-direction: column; align-items: center; transition: transform .4s var(--ease), border-color .4s var(--ease); }
.bt-hygiene-item:hover { transform: translateY(-5px); border-color: var(--accent); }
.bt-hygiene-icon { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; color: var(--accent); border: 1px solid var(--line); background: color-mix(in srgb, var(--accent) 8%, transparent); margin-bottom: var(--space-sm); }
.bt-hygiene-icon svg { width: 28px; height: 28px; }
.bt-hygiene-item h3 { font-size: var(--fs-500); }
.bt-hygiene-item p { margin-top: var(--space-2xs); color: var(--text-muted); font-size: var(--fs-300); }
.bt-hygiene-note { margin-top: var(--space-lg); color: var(--text-muted); font-size: var(--fs-200); font-style: italic; }

/* ---------------- 5) ΓΕΦΥΡΑ ΦΑΣΟΝ (band) ---------------- */
.bt-fason { padding-block: var(--space-2xl); background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 14%, var(--bg)), var(--bg)); text-align: center; }
.bt-fason-inner { max-width: 64ch; margin: 0 auto; }
.bt-fason-inner .eyebrow { justify-content: center; }
.bt-fason-inner h2 { margin-top: var(--space-2xs); }
.bt-fason-inner p { margin-top: var(--space-sm); color: var(--text-muted); }
.bt-fason-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); justify-content: center; margin-top: var(--space-lg); }
/* ΔΙΟΡΘΩΣΗ MOBILE: και τα δύο ζευγάρια κουμπιών στην ΙΔΙΑ ευθεία, ισομοιρασμένα
   & ίσου ύψους (το μεγαλύτερο κείμενο μπορεί να σπάσει σε 2 γραμμές χωρίς κόψιμο). */
@media (max-width: 47.999em) {
  .bt-hero-actions, .bt-fason-actions { flex-wrap: nowrap; align-items: stretch; gap: var(--space-2xs); }
  .bt-hero-actions .btn, .bt-fason-actions .btn { flex: 1 1 0; padding-inline: var(--space-xs); font-size: var(--fs-200); white-space: normal; line-height: 1.2; }
}

/* ---------------- 6) [ΦΑΣΗ 2] ΠΕΡΙΗΓΗΣΗ ---------------- */
.bt-tour { background: var(--bg); }
.bt-tour-head { text-align: center; margin-bottom: var(--space-lg); }
.bt-tour-head .eyebrow { justify-content: center; }
.bt-tour-head h2 { margin-top: var(--space-2xs); }
.bt-tour-frame { position: relative; max-width: 960px; margin: 0 auto; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); border: 1px dashed var(--line); display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, var(--c-black-2), var(--c-black)); }
.bt-tour-soon { position: absolute; top: var(--space-md); left: var(--space-md); font-size: var(--fs-200); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--accent); border: 1px solid var(--line); border-radius: 999px; padding: .3em .8em; }
.bt-tour-play { width: 78px; height: 78px; border-radius: 50%; display: grid; place-items: center; color: var(--c-black); background: var(--accent); opacity: .55; }

@media (prefers-reduced-motion: reduce) {
  .bt-hero-text, .bt-hero-media { opacity: 1 !important; transform: none !important; }
  .bt-scene { transform: none !important; }
  .bt-tile { opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   ΝΕΑ SECTIONS (Batch 2) — Προστασία γεύσης · QC · Ενέργεια
   ============================================================ */
.bt-protect { background: var(--bg); }
.bt-protect-inner { display: grid; grid-template-columns: 1fr; gap: var(--space-xl); align-items: center; }
@media (min-width: 56em) { .bt-protect-inner { grid-template-columns: 1.1fr 0.9fr; gap: var(--space-2xl); } }
.bt-protect-text h2 { font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--fs-700); margin-top: var(--space-2xs); }
.bt-protect-text > p { color: var(--text-muted); margin-top: var(--space-sm); max-width: 52ch; }
.bt-protect-list { list-style: none; margin: var(--space-lg) 0 0; padding: 0; display: grid; gap: var(--space-sm); }
.bt-protect-list li { position: relative; padding-left: 1.5em; color: var(--text-muted); }
.bt-protect-list li::before { content: ""; position: absolute; left: 0; top: .55em; width: .55em; height: .55em; border-radius: 50%; background: var(--accent); }
.bt-protect-list strong { color: var(--text); }
.bt-protect-media { display: flex; justify-content: center; }
.bt-protect-ph { width: 100%; max-width: 380px; aspect-ratio: 3 / 4; display: grid; place-items: center; text-align: center; color: var(--text-muted); font-size: var(--fs-200); background: radial-gradient(120% 80% at 50% 20%, rgba(196,162,78,.12), transparent 60%), var(--c-black); border: 1px dashed var(--line); border-radius: var(--radius-lg); padding: var(--space-md); }

.bt-qc { background: var(--bg-alt); }
.bt-qc-head { text-align: center; max-width: 48ch; margin: 0 auto var(--space-xl); }
.bt-qc-head h2 { font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--fs-700); margin-top: var(--space-2xs); }
.bt-qc-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: var(--space-md); }
@media (min-width: 56em) { .bt-qc-steps { grid-template-columns: repeat(4, 1fr); } }
.bt-qc-step { padding: var(--space-lg); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg); }
.bt-qc-n { display: inline-grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--accent); color: var(--c-black); font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--fs-400); margin-bottom: var(--space-sm); }
.bt-qc-step h3 { font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--fs-500); margin-bottom: var(--space-2xs); }
.bt-qc-step p { color: var(--text-muted); font-size: var(--fs-300); }

.bt-energy { background: var(--bg); }
.bt-energy-head { text-align: center; max-width: 50ch; margin: 0 auto var(--space-xl); }
.bt-energy-head h2 { font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--fs-700); margin-top: var(--space-2xs); }
.bt-energy-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-md); }
@media (min-width: 48em) { .bt-energy-grid { grid-template-columns: repeat(3, 1fr); } }
.bt-energy-card { padding: var(--space-lg); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-alt); }
.bt-energy-ic { width: 44px; height: 44px; color: var(--accent); margin-bottom: var(--space-sm); }
.bt-energy-ic svg { width: 100%; height: 100%; }
.bt-energy-card h3 { font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--fs-500); margin-bottom: var(--space-2xs); }
.bt-energy-card p { color: var(--text-muted); font-size: var(--fs-300); }

/* review: spec card πιο μαζεμένη (ύψος+πλάτος), hygiene note κεντραρισμένο */
.bt-spec-card { max-width: 460px; margin-inline: auto; width: 100%; padding: var(--space-md) var(--space-lg); }
.bt-spec-row { padding-block: var(--space-xs); }
.bt-spec-val { font-size: var(--fs-500); }
.bt-hygiene-note { text-align: center; max-width: 70ch; margin-inline: auto; }

/* ============================================================
   REVIEW: αφαιρέθηκαν εικόνες/βίντεο → μονόστηλα layouts
   ============================================================ */
.bt-hero-inner { grid-template-columns: 1fr !important; }

/* Protect — header + 2×2 κάρτες με εικονίδια */
.bt-protect-head { max-width: 64ch; }
.bt-protect-head h2 { font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--fs-700); margin-top: var(--space-2xs); }
.bt-protect-head p { color: var(--text-muted); margin-top: var(--space-sm); }
.bt-protect-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-md); margin-top: var(--space-lg); align-items: start; }
@media (min-width: 40em) { .bt-protect-grid { grid-template-columns: 1fr 1fr; } }
.bt-protect-card { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-md); background: var(--bg-alt); transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.bt-protect-card:hover { transform: translateY(-4px); border-color: var(--accent); }
.bt-protect-ic { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); margin-bottom: var(--space-xs); }
.bt-protect-ic svg { width: 20px; height: 20px; }
.bt-protect-card h3 { font-size: var(--fs-400); }
.bt-protect-card p { color: var(--text-muted); margin-top: 4px; font-size: var(--fs-200); line-height: 1.55; }
/* Κεντράρισμα περιεχομένων στις κάρτες:
   Συσκευασία & γεύση (.bt-protect-card) / Πριν τη σφράγιση (.bt-qc-step) /
   Ενέργεια & περιβάλλον (.bt-energy-card) */
.bt-protect-card, .bt-qc-step, .bt-energy-card { text-align: center; }
.bt-protect-ic, .bt-energy-ic { margin-left: auto; margin-right: auto; }