/* ==========================================================================
   V&M Liberis – core design system
   Φορτώνεται από το child theme. Χρησιμοποιείται με CSS classes στα widgets
   του Elementor (Advanced → CSS Classes) – δες τη λίστα στο τέλος.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  --vml-bg:#121110;
  --vml-surface:#1A1816;
  --vml-surface-2:#211E1B;
  --vml-ink:#F3EFE8;
  --vml-ink-2:#B9B3A9;
  --vml-ink-3:#8A857D;
  --vml-line:rgba(255,255,255,.10);
  --vml-rule:rgba(255,255,255,.18);
  --vml-white:#FFFFFF;
  --vml-black:#0B0A09;
  --vml-font:"Geom",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --vml-r-card:26px;
  --vml-r-band:32px;
  --vml-r-photo:20px;
  --vml-gap:16px;
  --vml-card-shadow:0 1px 2px rgba(0,0,0,.35),0 10px 26px rgba(0,0,0,.42),0 32px 64px rgba(0,0,0,.32);
  --vml-btn-shadow:0 6px 18px rgba(0,0,0,.28);
  color-scheme:dark;
}

/* ---------- 2. Base ---------- */
html{-webkit-text-size-adjust:100%}
body{
  background:var(--vml-bg);
  color:var(--vml-ink);
  font-family:var(--vml-font);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
h1,h2,h3,h4,h5,h6{font-family:var(--vml-font);color:var(--vml-ink);font-weight:700;letter-spacing:-.02em}
a{color:var(--vml-ink)}
::selection{background:var(--vml-ink);color:var(--vml-black)}
:focus-visible{outline:2px solid var(--vml-ink);outline-offset:3px}

/* Depth: φωτογραφικός κόκκος + απαλή πτώση φωτός στις άκρες (μπαίνει από το functions.php) */
.vml-depth{position:fixed;inset:0;pointer-events:none;z-index:15}
.vml-depth--vig{background:radial-gradient(120% 90% at 50% 38%,rgba(0,0,0,0) 55%,rgba(0,0,0,.4) 100%)}
.vml-depth--grain{
  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='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px;opacity:.07;mix-blend-mode:screen}

/* ---------- 3. Buttons ---------- */
/* Κύριο (κράτηση): λευκό pill με μαύρα γράμματα.
   Στο Elementor: Button widget → CSS class "vml-btn". */
.vml-btn .elementor-button,
a.vml-btn,button.vml-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:52px;padding:0 24px;border-radius:999px;border:0;
  background:var(--vml-white);color:var(--vml-black);
  font-family:var(--vml-font);font-weight:600;font-size:16px;line-height:1;text-decoration:none;
  box-shadow:var(--vml-btn-shadow);transition:transform .12s ease,box-shadow .2s ease;cursor:pointer}
.vml-btn .elementor-button:hover,a.vml-btn:hover,button.vml-btn:hover{color:var(--vml-black);background:var(--vml-white)}
.vml-btn .elementor-button:active,a.vml-btn:active,button.vml-btn:active{transform:scale(.97)}
.vml-btn .elementor-button .elementor-button-text{color:inherit}

/* Δευτερεύον: μαύρο pill με λευκά γράμματα και λευκό περίγραμμα.
   Στο Elementor: CSS class "vml-btn vml-btn--dark". */
.vml-btn--dark .elementor-button,
a.vml-btn--dark,button.vml-btn--dark{
  background:var(--vml-black);color:var(--vml-white);border:1.5px solid var(--vml-white);
  box-shadow:0 4px 14px rgba(0,0,0,.35),0 1px 2px rgba(0,0,0,.3)}
.vml-btn--dark .elementor-button:hover,a.vml-btn--dark:hover,button.vml-btn--dark:hover{background:var(--vml-black);color:var(--vml-white)}

/* Κουμπί μόνο με εικονίδιο (π.χ. τιμοκατάλογος): κύκλος 46px */
.vml-btn--icon .elementor-button,a.vml-btn--icon,button.vml-btn--icon{width:46px;min-height:46px;height:46px;padding:0}

/* ---------- 4. Cards ---------- */
/* Γενική κάρτα με βάθος. Στο Elementor: Container → CSS class "vml-card". */
.vml-card{
  background:var(--vml-surface);border-radius:var(--vml-r-card);
  border:1px solid rgba(255,255,255,.07);box-shadow:var(--vml-card-shadow);overflow:hidden}

/* Μεγάλη τονισμένη ζώνη (Προϊόντα, Διακρίσεις, Σεμινάρια). Container → "vml-band". */
.vml-band{
  background:var(--vml-surface);border-radius:var(--vml-r-band);
  border:1px solid var(--vml-rule);box-shadow:var(--vml-card-shadow);overflow:hidden}

/* Φωτογραφία ως κάρτα. Image widget (ή Video) → "vml-photo". */
.vml-photo img,.vml-photo video,img.vml-photo{
  border-radius:var(--vml-r-photo);box-shadow:var(--vml-card-shadow);
  outline:1px solid rgba(255,255,255,.06);outline-offset:-1px;display:block}
.vml-photo--bw img{filter:grayscale(1) contrast(1.05)}

/* Οριζόντια λωρίδα με snap (καταστήματα, προϊόντα σε κινητό). Container (row) → "vml-rail". */
.vml-rail{display:flex !important;flex-wrap:nowrap !important;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:18px;scrollbar-width:none}
.vml-rail::-webkit-scrollbar{display:none}
.vml-rail > *{flex:0 0 auto;scroll-snap-align:start}

/* ---------- 5. Glass (πάνω μπάρα, bottom nav, sheets) ---------- */
.vml-glass{
  position:relative;
  background:rgba(0,0,0,.16);
  -webkit-backdrop-filter:blur(15px) saturate(120%);backdrop-filter:blur(15px) saturate(120%);
  box-shadow:0 8px 24px rgba(0,0,0,.35),0 2px 6px rgba(0,0,0,.25),inset 0 0 4px 2px rgba(255,255,255,.2);
  color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.2)}
.vml-glass::before,.vml-glass::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0}
.vml-glass::before{background:linear-gradient(to left top,rgba(255,255,255,.1) 0%,rgba(255,255,255,0) 50%)}
.vml-glass::after{background:linear-gradient(to bottom,rgba(255,255,255,.06) 0%,rgba(255,255,255,0) 100%)}
.vml-glass > *{position:relative;z-index:1}

/* ---------- 6. Typography helpers ---------- */
.vml-display .elementor-heading-title,.vml-display{font-weight:700;letter-spacing:-.02em;line-height:1;text-shadow:0 2px 12px rgba(0,0,0,.35)}
.vml-muted,.vml-muted .elementor-widget-container{color:var(--vml-ink-2)}
.vml-caption,.vml-caption .elementor-widget-container{color:var(--vml-ink-3);font-size:13px}

/* ---------- 7. Accessibility ---------- */
@media (prefers-reduced-transparency: reduce){
  .vml-glass{background:#161513 !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important}
  .vml-depth{display:none}
}
@media (prefers-contrast: more){
  :root{--vml-ink-2:#D6D0C6;--vml-ink-3:#B4AEA4;--vml-line:rgba(255,255,255,.3);--vml-rule:rgba(255,255,255,.35)}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{scroll-behavior:auto !important}
  .vml-btn .elementor-button,a.vml-btn,button.vml-btn{transition:none}
}

/* ==========================================================================
   CSS classes για το Elementor (Advanced → CSS Classes)
   vml-btn ............ κύριο κουμπί (λευκό pill)       – Button widget
   vml-btn vml-btn--dark  δευτερεύον (μαύρο pill)       – Button widget
   vml-btn vml-btn--icon  κουμπί-εικονίδιο (κύκλος)     – Button widget
   vml-card ........... κάρτα με βάθος                  – Container
   vml-band ........... μεγάλη τονισμένη κάρτα           – Container
   vml-photo .......... φωτογραφία/βίντεο ως κάρτα      – Image / Video
   vml-photo vml-photo--bw  ασπρόμαυρη φωτογραφία        – Image
   vml-rail ........... οριζόντια λωρίδα με snap         – Container (row)
   vml-glass .......... γυαλί                            – Container
   vml-display ........ μεγάλος τίτλος με σκιά           – Heading
   vml-muted / vml-caption  δευτερεύον / μικρό κείμενο   – Text Editor
   ========================================================================== */