/* products.css — Αρχική · ενότητα 3: Η σειρά (belt) */
.products { position: relative; background: var(--bg); }
/* ΔΙΟΡΘΩΣΗ MOBILE: το min-height:100vh έπρεπε να ισχύει ΜΟΝΟ στο desktop/
   enhanced mode (όπου το section είναι sticky/pinned). Σε mobile δημιουργούσε
   ένα τεράστιο κενό section, αφού το belt είναι απλό horizontal-scroll strip
   με φυσικό (μικρό) ύψος — οι κάρτες "χάνονταν" μέσα σε ολόκληρη την οθόνη. */
.products-pin { display: flex; flex-direction: column; }
@media (min-width: 64em) { .products-pin { min-height: 100vh; } }

/* ---- belt ---- */
.belt {
  flex: 1; min-height: 0;
  display: flex; align-items: center; gap: var(--space-md);
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding: var(--space-xl) var(--gutter); -webkit-overflow-scrolling: touch;
}
.belt-item { flex: 0 0 auto; scroll-snap-align: center; }

.belt-title { flex: 0 0 100%; display: grid; place-items: center; text-align: center; }
.belt-title .eyebrow { justify-content: center; margin-bottom: var(--space-sm); }
.belt-statement {
  max-width: 16ch; margin: 0 auto; color: var(--text);
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.8rem, 1.2rem + 3vw, 4rem); line-height: 1.12; letter-spacing: -0.01em;
}
.belt-statement .pw { display: inline-block; opacity: 0; transform: translateY(0.5em); }
.belt-title.is-in .pw {
  opacity: 1; transform: none;
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  transition-delay: calc(var(--i, 0) * 60ms);
}

/* ---- κάρτα ---- */
.product-card {
  flex: 0 0 min(86%, 360px);
  background: var(--bg-alt); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: var(--space-lg); text-align: center;
}
.product-card img { height: clamp(160px, 22vh, 230px); width: auto; margin: 0 auto var(--space-sm); object-fit: contain; }
.product-name { font-size: var(--fs-600); }
.product-cap { display: inline-block; margin-top: 6px; padding: .3em .9em; font-size: var(--fs-200); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--accent); border: 1px solid var(--line); border-radius: 999px; }
.product-specs { display: flex; justify-content: center; gap: var(--space-md); margin-top: var(--space-sm); font-size: var(--fs-200); color: var(--text-muted); }
.product-desc { margin-top: var(--space-sm); margin-inline: auto; color: var(--text-muted); font-size: var(--fs-300); }
.product-card .btn { margin-top: var(--space-md); }

/* ---- dots + CTA (πάντα μπροστά) ---- */
.products-progress { display: none; gap: 10px; justify-content: center; padding-block: var(--space-sm); position: relative; z-index: 50; }
.products-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line); border: none; cursor: pointer; transition: transform .3s var(--ease), background .3s var(--ease); }
.products-dot.is-active { background: var(--accent); transform: scale(1.35); }
.products-cta { display: flex; flex-wrap: wrap; gap: var(--space-sm); justify-content: center; padding: var(--space-md) var(--gutter) var(--space-lg); position: relative; z-index: 50; }

/* ---- ENHANCED (JS): coverflow belt με scroll-jack — ΠΑΝΤΑ ενεργό πλέον
   (πριν περιοριζόταν σε desktop ≥64em· σε mobile δούλευε μόνο με swipe). ---- */
.products.is-enhanced { height: 200vh; }
.products.is-enhanced .products-pin { position: sticky; top: 0; height: 100vh; }
.products.is-enhanced .belt { display: block; position: relative; overflow: visible; padding: 0; }
.products.is-enhanced .belt-item {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  transition: transform .8s var(--ease), opacity .8s var(--ease), filter .8s var(--ease);
  will-change: transform, opacity;
}
.products.is-enhanced .belt-title { width: min(640px, 90%); }
.products.is-enhanced .product-card { width: min(400px, 86%); padding: var(--space-md); }
.products.is-enhanced .product-card img { height: clamp(150px, 19vh, 200px); }
.products.is-enhanced .products-progress { display: flex; }

@media (prefers-reduced-motion: reduce) { .belt-statement .pw { opacity: 1; transform: none; } }


/* override: sticky pin + header clearance */
.products.is-enhanced .products-pin {
  position: sticky; top: 0; height: 100vh;
  padding-top: 96px;            /* χώρος για το fixed header */
  box-sizing: border-box;
}

/* review #2: αφαίρεση κουκκίδων ένδειξης ενεργής κάρτας */
.products-progress { display: none !important; }

/* review: compact card — μικρότερα margins, μικρότερη εικόνα, μικρότερο κείμενο */
.product-card img { height: clamp(120px, 16vh, 180px); margin-bottom: var(--space-xs); }
.product-desc { font-size: var(--fs-200); margin-top: var(--space-xs); max-width: 30ch; }
.product-specs { margin-top: var(--space-xs); gap: var(--space-sm); }
.product-card .btn { margin-top: var(--space-sm); }
.products.is-enhanced .product-card img { height: clamp(110px, 15vh, 165px); }

/* ΔΙΟΡΘΩΣΗ MOBILE: σε πολύ μικρά πλάτη η κάρτα στενεύει κι άλλο ώστε να
   μη "κολλάει" στις άκρες της οθόνης κατά το coverflow animation. */
@media (max-width: 39.999em) {
  .products.is-enhanced .product-card { width: min(78vw, 320px); padding: var(--space-sm) var(--space-md); }
  .products.is-enhanced .belt-title { width: min(86vw, 500px); }
}

/* ΔΙΟΡΘΩΣΗ MOBILE: τα 2 κουμπιά («Όλα τα προϊόντα» / «Κατάστημα») έσπαγαν σε
   δύο σειρές (flex-wrap:wrap). Σε mobile τα κρατάμε ΣΤΗΝ ΙΔΙΑ ΕΥΘΕΙΑ,
   ισομοιρασμένα, με μικρότερο padding/γραμματοσειρά ώστε να χωρούν. */
@media (max-width: 47.999em) {
  .products-cta { flex-wrap: nowrap; align-items: stretch; gap: var(--space-2xs); }
  .products-cta .btn { flex: 1 1 0; padding-inline: var(--space-sm); font-size: var(--fs-200); white-space: nowrap; }
}