/* ═══════════════════════════════════════════════════════════════
   ΣΠΥΡΟΥ — style.css v4
   Matches Soil / AncoraThemes layout language, ΣΠΥΡΟΥ brand red
   ═══════════════════════════════════════════════════════════════ */

/* ── BRAND FONTS ─────────────────────────────────────────────
   Self-hosted (assets/fonts/), no external Google Fonts request.
   Titles: PF Transport SCapsOsF (Black) — H1 46px, H2 30px (below).
   Body:   Asty CF Std (Book).
   ──────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'PF Transport SCapsOsF';
  src: url('../fonts/pf-transport-black.woff2') format('woff2'),
       url('../fonts/pf-transport-black.woff') format('woff');
  /* font-weight:900 matches the official Transfonter-generated
     stylesheet for this "Black" weight file. This is NOT redundant
     with the "only one weight file" fact below — quite the opposite:
     leaving font-weight undeclared here made the browser register
     this face at an implicit weight of 400. Any bold request on this
     family (e.g. the browser's own default `h1 { font-weight: bold }`
     UA style, still in effect anywhere our CSS doesn't reset it) then
     had no matching-or-heavier face to use, so the browser FAKE-BOLDED
     (synthesized) these already-Black glyphs — visibly thicker/
     distorted vs. the true design. Declaring the real weight (900,
     the heaviest CSS value) means every request from 100–900 resolves
     to this one face directly with no synthesis, since nothing can be
     bolder than 900 to synthesize up to.
     Every rule using var(--fh) has had its own font-weight declaration
     removed too (there's nothing for a different weight to actually
     select — it would just silently render as this same Black weight
     regardless of the number requested), so font-weight is simply
     never set anywhere this font is used; this @font-face declaration
     is what makes that safe. */
  font-weight: 900;
  font-style: normal;
  /* font-display:swap (was "optional"). "optional" told the browser:
     if this font isn't already cached and doesn't finish loading
     within a very short (~100ms) block period, show the fallback
     (system-ui/sans-serif) and NEVER swap to the real font for that
     page load, even after it finishes downloading. On a first visit /
     cold cache / slower connection, that meant visitors saw the
     generic fallback font permanently, while repeat visits (font
     already cached) showed the correct branded font — the exact
     inconsistent "sometimes old font, sometimes new" behavior
     reported and confirmed via two screenshots of the same hero
     title. "swap" still shows the fallback immediately (no blank
     text), but swaps to the real font as soon as it's ready, on every
     visit. */
  font-display: swap;
}
@font-face {
  font-family: 'Asty CF Std';
  src: url('../fonts/asty-cf-std-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Asty CF Std';
  src: url('../fonts/asty-cf-std-light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* ── DESIGN TOKENS ──────────────────────────────────────────── */
:root {
  --gw-gold:      #ffc502;      /* brand accent: CTAs, stats, active states */
  --gw-gold-dk:   #e0ac00;      /* accent hover/active                      */
  --gw-navy:      #06324f;      /* brand section background                 */
  --gw-navy-dark: #132038;      /* darkest brand background (footer, etc.)  */
  --ink:      #1a1a1a;          /* near-black text           */
  --ink-60:   #555;             /* muted text                */
  --ink-40:   #888;             /* secondary/placeholder     */
  --ink-10:   #f7f5f0;          /* warm-tinted off-white BG  */
  --line:     #e6e6e3;          /* divider color             */
  --white:    #fff;

  /* Typography — PF Transport SCapsOsF for titles, Asty CF Std for
     everything else (body copy + UI labels/buttons/nav). --fb and
     --ft both point at the same body font: the theme historically
     used 3 separate font roles (Barlow Condensed / Barlow / Inter),
     but the brand type spec only defines 2, so both collapse to the
     one body typeface here rather than introducing a 3rd family. */
  --fh:  'PF Transport SCapsOsF', system-ui, sans-serif;
  --fb:  'Asty CF Std',       system-ui, sans-serif;
  --ft:  'Asty CF Std',       system-ui, sans-serif;

  --mw:  1300px;
  --px:  clamp(1.25rem, 5vw, 2.5rem);
  --ez:  cubic-bezier(.4,0,.2,1);
}

/* ── RESET ──────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; font-size:20px; -webkit-font-smoothing:antialiased; overflow-x:clip; }
/* overflow-x:clip (not "hidden") is intentional: setting only
   overflow-x:hidden without an explicit overflow-y forces the browser
   to compute overflow-y as auto (CSS overflow spec), which makes body
   its own scroll container — and once that happens, any descendant
   using position:sticky (e.g. .navbar) sticks relative to body's box
   instead of the actual viewport, breaking the sticky header on
   scroll. "clip" prevents horizontal overflow the same way but
   doesn't trigger that scroll-container promotion. */
body { font-family:var(--ft); color:var(--ink); line-height:1.5; background:var(--white); overflow-x:clip; overflow-wrap:break-word; }
img  { display:block; max-width:100%; }
a    { color:inherit; text-decoration:none; }
ul,ol{ list-style:none; }
button { cursor:pointer; font-family:inherit; background:none; border:none; }
input,textarea { font-family:inherit; font-size:inherit; }

/* Base heading type — per brand spec (H1 Black 96px/76 line-height,
   H2 Black 62px/66 line-height). Low specificity (bare element
   selectors) on purpose: every heading that already has its own more
   specific rule elsewhere (e.g. .pd-title, .page-hero h1, clamp()-
   based responsive sizes) keeps working exactly as before — this only
   sets the *default* for any heading that doesn't already override
   it, and swaps every existing var(--fh) heading over to the new font
   automatically. */
h1, h2 { font-family:var(--fh); }
h1 { font-size:96px; line-height:76px; }
h2 { font-size:62px; line-height:66px; }

/* Brand spec's other three type roles — reusable utility classes,
   Asty CF Std (var(--ft)) at Regular weight (400, the family's
   default weight — no need to state it explicitly). Apply directly
   where needed; nothing auto-adopts these the way h1/h2 do above,
   since none of them map onto one specific HTML tag site-wide. */
.body-title { font-family:var(--ft); font-weight:400; font-size:34px; line-height:36px; }
.body-text  { font-family:var(--ft); font-weight:400; font-size:20px; line-height:36px; }
.body-text p { margin-bottom:50px; }
.body-text p:last-child { margin-bottom:0; }
.description { font-family:var(--ft); font-weight:400; font-size:17px; line-height:36px; }

/* no-js fallbacks */
.no-js .faq-panel            { max-height:none !important; }
.no-js .investor-year-panel  { max-height:none !important; }
.no-js .anim      { opacity:1 !important; transform:none !important; }

/* ── LAYOUT ─────────────────────────────────────────────────── */
.container { max-width:var(--mw); margin-inline:auto; padding-inline:var(--px); }
/* Optional narrow variant for long-form reading content (e.g. a text-heavy
   page) — use class="container container--narrow" instead of an inline
   style="max-width:..." attribute, so it stays a one-line CSS change
   instead of something to hunt down in a PHP template. */
.container--narrow { max-width:760px; }
.sec       { padding-block:1rem; }

/* ── GENERIC PAGE CONTENT (page.php) ────────────────────────────
   Renders arbitrary editor content (the_content()) — headings,
   paragraphs, lists, tables the client adds via wp-admin, none of
   which can be individually audited for an explicit `color`. Setting
   `color` directly here (not just the custom properties) means every
   unstyled descendant inherits the already-resolved white instead of
   silently keeping body's dark literal value — see the .h2/.lp-name
   fixes elsewhere in this file for why that distinction matters. */
.sec-page-content {
  background: var(--gw-navy);
  color: #fff;
  --ink:      #fff;
  --ink-60:   rgba(255,255,255,.72);
  --ink-40:   rgba(255,255,255,.52);
  --ink-10:   rgba(255,255,255,.08);
  --line:     rgba(255,255,255,.16);
}
/* Search results / 404 fallback (index.php) — same treatment. */
.sec-fallback-content {
  background: var(--gw-navy);
  color: #fff;
  --ink:      #fff;
  --ink-60:   rgba(255,255,255,.72);
  --ink-40:   rgba(255,255,255,.52);
  --ink-10:   rgba(255,255,255,.08);
  --line:     rgba(255,255,255,.16);
}

/* ── PER-SECTION BACKGROUND (Golden West brand) ────────────────
   Toggled per homepage section via the admin meta box (see
   goldenwest_section_bg_class() in inc/meta-boxes-front-page.php).
   Overriding the shared --ink/--ink-60/--ink-40/--line/--ink-10
   tokens locally means every existing component (headings, body
   text, cards, FAQ numbers, badges…) already themed with those
   tokens gets correct light-on-navy contrast automatically —
   no per-component overrides to write or maintain. ─────────── */
.sec--navy {
  background: var(--gw-navy);
  --ink:      #fff;
  --ink-60:   rgba(255,255,255,.72);
  --ink-40:   rgba(255,255,255,.52);
  --ink-10:   rgba(255,255,255,.08);
  --line:     rgba(255,255,255,.16);
}
.sec--light { background: var(--white); }
/* FAQ and News sit one shade darker than the other navy sections —
   still uses .sec--navy for its text-token overrides above (same
   light-on-navy contrast), this only replaces the background itself. */
#faq.sec--navy, #research.sec--navy { background: var(--gw-navy-dark); }
#news.sec--navy { background: var(--gw-navy); }

/* Homepage <main> background: fills the gaps between sections (e.g.
   margins/padding on individual .sec elements) with navy instead of
   the default page background, so nothing flashes white between
   sections regardless of which are toggled navy vs light. Scoped to
   the front page only (WordPress's own "home" body class) — other
   templates' <main> content isn't wrapped in the --ink token-override
   system .sec--navy relies on, so painting their <main> navy would
   leave normal dark body text unreadable against it. */
body.home main { background-color: var(--gw-navy); }

/* ── TYPE HELPERS ───────────────────────────────────────────── */
.eyebrow {
  display:block; font-family:var(--fb);
  font-size:.7rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gw-gold);
}
.h2 {
  font-family:var(--fh);
  font-size:clamp(1.85rem, 3.2vw, 2.6rem);
  line-height:1.1;
  letter-spacing:-.01em;
  color:var(--ink);
}
.sec-sub { font-size:.9rem; color:var(--ink-40); max-width:480px; margin:.6rem auto 0; }

/* "Ερωτήσεις – αποτελέσματα" heading only — PF Transport SCapsOsF (the
   font .h2 normally uses via --fh) has just ONE weight loaded (500),
   so .h2's own font-weight:400 has no matching file to render and
   silently falls back to that 500, which reads as bold. Asty CF Std
   is the actual lighter weight available in the theme (see the same
   fix already applied to .pd-tagline). Scoped to #faq so no other
   .h2 heading elsewhere on the site is affected. */
#faq .h2 { font-family:var(--fh); font-weight:400; }
#news .h2 { font-family:var(--fh); font-weight:400; }
#products .h2 { font-family:var(--fh); font-weight:400; margin-bottom:40px; }

/* ── BUTTONS ────────────────────────────────────────────────── */
.btn-primary {
  display:inline-flex; align-items:center; justify-content:center;
  padding:.7rem 1.7rem; background:#FFC503; color:#132038;
  font-family:var(--fb); font-size:.82rem; font-weight:600;
  border-radius:3px; border:2px solid #FFC503;
  transition:background .18s var(--ez), border-color .18s;
}
/* Contact form submit button — inverted from the standard .btn-primary
   colors (yellow bg / navy text): navy bg / yellow text instead.
   Scoped to this specific button only via its data-js hook, so every
   other .btn-primary elsewhere on the site is unaffected. */
.btn-primary[data-js="contact-submit"] {
  background:var(--gw-navy-dark); color:#FFC503; border-color:var(--gw-navy-dark);
}
.btn-primary[data-js="contact-submit"]:hover {
  background:var(--gw-gold); border-color:var(--gw-gold); color:var(--gw-navy-dark);
}
.btn-primary:hover { background:var(--gw-gold-dk); border-color:var(--gw-gold-dk); }
.btn-block   { width:100%; }
.btn-white-sm {
  display:inline-block; padding:.42rem .95rem;
  background:#fff; color:var(--ink);
  font-family:var(--fb); font-size:.78rem; font-weight:600; border-radius:3px;
  border:1.5px solid #fff; transition:background .18s,color .18s;
}
.btn-white-sm:hover { background:transparent; color:#fff; }

/* ── SCROLL ANIMATIONS ──────────────────────────────────────── */
@keyframes heroSlide { from{opacity:0;transform:translateY(32px)} to{opacity:1;transform:none} }
.hero-h1  { animation:heroSlide .85s var(--ez) .1s both; }
.hero-cta { animation:heroSlide .85s var(--ez) .32s both; }

.anim {
  opacity:0; transform:translateY(22px);
  transition:opacity .65s var(--ez), transform .65s var(--ez);
}
.anim.in        { opacity:1; transform:none; }
.anim-d1.in     { transition-delay:.14s; }

@media (prefers-reduced-motion:reduce) {
  .hero-h1,.hero-cta { animation:none; }
  .anim { opacity:1; transform:none; transition:none; }
}

/* ════════════════ NAVBAR ════════════════════════════════════════ */
.navbar {
  position:sticky; top:0; z-index:1000;
  background:var(--gw-navy); border-bottom:1px solid var(--gw-navy-dark);
  transition:box-shadow .3s var(--ez);
}
.navbar.stuck { box-shadow:0 2px 28px rgba(0,0,0,.09); }

/* ── NAVY NAVBAR — top-level chrome only ────────────────────────
   .nl is shared with .sub-menu (dropdown), which keeps its own
   white background + dark text regardless of the bar's colour — so
   these must target ONLY direct top-level children, never `.nl`
   generally, or the dropdown text goes white-on-white.
   Desktop only (min-width:861px): below that, .nav-links becomes
   its own full-screen WHITE slide-out panel (see the mobile media
   query further down) — forcing white text here unconditionally
   would make top-level mobile menu items invisible on that white
   panel. */
@media (min-width:861px) {
  .nav-links > li > .nl { color:#fff; }
  .nav-links > li > .nl:hover { color:var(--gw-gold); background:rgba(255,255,255,.1); }
  .nav-links > li > .sub-menu-toggle { color:#fff; }
  .nav-links > li:hover > .sub-menu-toggle { color:var(--gw-gold); }
}

.nav-inner {
  display:flex; align-items:stretch; height:80px; gap:1rem;
}

/* Logo — image replaces the former text badge */
.logo-wrap {
  display:flex; align-items:center; flex-shrink:0;
}
.logo-wrap img {
  height:36px; width:auto; display:block;
  /* Flexbox centers the SVG's bounding box perfectly, but the artwork
     itself has more empty space at the bottom of its own viewBox than
     the top, so geometric centering alone still reads as "sitting low".
     Small manual nudge to compensate — adjust if the logo file changes. */
  transform: translateY(-3px);
  margin-bottom: 0px;
}

.nav-links {
  display:flex; align-items:stretch; flex:1; justify-content:center; gap:0;
}
/* Top-level items stretch to fill the navbar's full height — otherwise
   the <li> is only as tall as its text, leaving an invisible strip of
   navbar below it (inside the bar, but outside the <li>) where the
   mouse silently exits the hover chain before ever reaching the
   dropdown. Stretching closes that dead zone completely. */
.nav-links > li { display:flex; align-items:center; }
.nl {
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.42rem .95rem; font-family:var(--fb); font-size:.82rem; font-weight:400;
  color:var(--ink); border-radius:3px; cursor:pointer;
  transition:color .18s, background .18s;
}
.nl:hover { color:var(--gw-gold); background:var(--ink-10); }
.nl-active { color:var(--gw-gold); }
/* When the menu comes from wp-admin (Εμφάνιση → Μενού) instead of the
   hardcoded fallback, WordPress marks the current item on the <li>
   itself, not the <a> — these two selectors are what make a dynamic
   menu's active link look identical to .nl-active above. */
.nav-links li.current-menu-item > a,
.nav-links li.current_page_item > a,
.nav-links li.current-menu-parent > a { color:var(--gw-gold); }
.arr { opacity:.6; }
/* The label and its arrow (button or decorative icon) are two separate
   sibling elements sitting side by side in the same <li>. Highlighting
   only whichever one the mouse happens to be over left a visible gap
   between two disconnected little boxes. Backing the whole <li> instead
   gives one seamless pill that covers both — at any depth, since a
   submenu row has exactly the same label+arrow shape. */
.nav-links li:hover {
  /* background: var(--ink-10); */
  border-radius:3px;
}
.nav-links li:hover > .nl,
.nav-links li:hover > .sub-menu-toggle { color:var(--gw-gold); }

/* ── NAV SUBMENU (dynamic product categories, or any nested item) ──
   Desktop: pure-CSS hover flyout, unlimited depth (2nd level opens
   to the right of the 1st, 3rd to the right of the 2nd, etc), each
   level animating in on its own once the parent level is open.
   Mobile: JS-driven accordion (see initSubmenuToggle in main.js). */
.nav-links li { position:relative; }

.sub-menu-toggle {
  display:inline-flex; align-items:center; justify-content:center;
  width:1.8rem; height:1.8rem; margin-left:-.3rem;
  color:inherit; border-radius:3px; transition:background .18s;
}
.sub-menu-toggle:hover { background:var(--ink-10); }

/* Icon itself is a ::before (not the button's own background), so the
   button's background-color above (hover highlight) never conflicts
   with the icon's background-color:currentColor + mask combo below. */
.sub-menu-toggle::before {
  content:""; display:block; background-color:currentColor;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:contain; mask-size:contain;
}
/* Top level (e.g. "Κηπευτικά" in the main bar): opens DOWNWARD
   (.sub-menu top:100%) → down-chevron. */
.sub-menu-toggle.arr-down::before {
  width:.625rem; height:.375rem;
  -webkit-mask-image:url(../img/icons/arrow-drop-down.svg);
  mask-image:url(../img/icons/arrow-drop-down.svg);
}
/* Any nested level inside an already-open .sub-menu: flies out to the
   RIGHT (.sub-menu .sub-menu left:100%) → right-chevron. */
.sub-menu-toggle.arr-open::before {
  width:.375rem; height:.625rem;
  -webkit-mask-image:url(../img/icons/arrow-open.svg);
  mask-image:url(../img/icons/arrow-open.svg);
}
/* Always points the same way — no rotation on expand, in any state, at any depth. */

/* Standalone decorative icon variant — used on every top-level bar
   item that has a dropdown (all of them are non-navigating triggers
   now, not just "Προϊόντα" — see GoldenWest_Nav_Walker), whose whole label
   is already the tap target, so unlike .sub-menu-toggle above it needs
   no button, no larger invisible touch-target box, and no independent
   hover background of its own — it's just an inline glyph sized
   directly, sitting inside .nl's own flex gap right after the title
   text. */
.ico-arr-down {
  display:inline-block; flex-shrink:0; opacity:.6;
  width:.625rem; height:.375rem; background-color:currentColor;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:contain; mask-size:contain;
  -webkit-mask-image:url(../img/icons/arrow-drop-down.svg);
  mask-image:url(../img/icons/arrow-drop-down.svg);
}

@keyframes subMenuIn {
  from { opacity:0; transform:translateY(-6px) scale(.97); }
  to   { opacity:1; transform:none; }
}
@keyframes subMenuInRight {
  from { opacity:0; transform:translateX(-8px); }
  to   { opacity:1; transform:none; }
}
@keyframes subMenuItemIn {
  from { opacity:0; transform:translateY(-4px); }
  to   { opacity:1; transform:none; }
}

.sub-menu {
  position:absolute; top:100%; left:0; z-index:1100;
  min-width:220px; padding:.4rem; margin-top:0;
  background:var(--gw-navy-dark); border:1px solid var(--line); border-radius:8px;
  box-shadow:0 16px 40px rgba(0,0,0,.14);
  opacity:0; visibility:hidden; pointer-events:none;
  transform-origin:top left;
  transition:opacity .16s var(--ez), visibility 0s linear .16s;
  /* Same token-override technique as .sec--navy: the dropdown's own
     background just went dark, so its text/hover tokens need to
     switch to their light-on-navy values too — .nl/.sub-menu-toggle
     are shared with the (already-navy) top-level bar and already use
     these tokens, so overriding them here is enough; no changes
     needed to the shared rules themselves. */
  --ink:      #fff;
  --ink-60:   rgba(255,255,255,.72);
  --ink-40:   rgba(255,255,255,.52);
  --ink-10:   rgba(255,255,255,.12);
  --line:     rgba(255,255,255,.16);
}
.sub-menu li { display:flex; align-items:center; }
.sub-menu .nl { flex:1 1 auto; white-space:nowrap; }
.sub-menu .sub-menu-toggle { flex:0 0 auto; }

@media (min-width:861px) {
  /* 2nd+ level flyout offset — desktop only. Mobile positions every
     panel as its own full-screen fixed overlay instead (see the mobile
     media query below); this rule has higher specificity than that
     mobile positioning and was overriding it for any nested (2nd+
     level) panel, pushing it completely off-screen (left:100%) and
     making it look like tapping a category with children "did nothing". */
  .sub-menu .sub-menu {
    top:-.4rem; left:100%; margin-top:0; margin-left:0;
  }

  /* Visibility, ANY depth: hovering an <li> reveals its own direct
     child .sub-menu, however deep it's nested. */
  .nav-links li:hover > .sub-menu {
    opacity:1; visibility:visible; pointer-events:auto;
    transition:opacity .16s var(--ez), visibility 0s linear;
  }

  /* Top level only: fade + scale down from the nav bar. */
  .nav-links > li:hover > .sub-menu {
    animation:subMenuIn .32s var(--ez) both;
  }

  /* Any deeper level: flies out to the right, slightly delayed so it
     reads as "first the column opens, then the next one to its right". */
  .nav-links li .sub-menu li:hover > .sub-menu {
    animation:subMenuInRight .28s var(--ez) .08s both;
  }

  /* Stagger each row's fade-up inside a freshly-opened top-level column. */
  .nav-links > li:hover > .sub-menu > li {
    animation:subMenuItemIn .22s var(--ez) both;
  }
  .nav-links > li:hover > .sub-menu > li:nth-child(1) { animation-delay:.03s; }
  .nav-links > li:hover > .sub-menu > li:nth-child(2) { animation-delay:.06s; }
  .nav-links > li:hover > .sub-menu > li:nth-child(3) { animation-delay:.09s; }
  .nav-links > li:hover > .sub-menu > li:nth-child(4) { animation-delay:.12s; }
  .nav-links > li:hover > .sub-menu > li:nth-child(n+5) { animation-delay:.15s; }
}

.nav-end { display:flex; align-items:center; gap:1rem; flex-shrink:0; }

/* ── LANGUAGE SWITCHER (Polylang) ──────────────────────────────
   Compact flag row per the approved header design. Flag <img>
   markup itself comes from Polylang; sizing/spacing only here. */
/* ── LANGUAGE SWITCHER (Polylang) ──────────────────────────────
   Dropdown on every viewport: only the current language's flag
   shows as a toggle button in the header; the rest live in a
   dropdown panel opened via initLangSwitcher() in main.js. Flag
   <img> markup itself comes from Polylang; sizing/spacing only here. */
.lang-switch-wrap { position:relative; }
.lang-switch-toggle {
  display:flex; align-items:center; gap:.3rem;
  background:none; border:none; padding:0; cursor:pointer;
}
.lang-switch-toggle__caret {
  width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent;
  border-top:5px solid rgba(255,255,255,.7);
}
.lang-switch {
  position:absolute; top:calc(100% + 10px); right:0; z-index:1200;
  display:flex; flex-direction:column; align-items:center; gap:.9rem;
  list-style:none; margin:0;
  background:var(--gw-navy-dark); border-radius:25px; padding:.6rem;
  box-shadow:0 16px 40px rgba(0,0,0,.18);
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translateY(-6px); transition:opacity .16s var(--ez), transform .16s var(--ez), visibility 0s linear .16s;
}
.lang-switch-wrap.is-open .lang-switch {
  opacity:1; visibility:visible; pointer-events:auto; transform:none;
  transition:opacity .16s var(--ez), transform .16s var(--ez);
}
.lang-switch-item {
  display:flex; width:26px; height:26px; margin:0 2px; border-radius:50%; overflow:hidden;
  opacity:.55; transition:opacity .18s;
}
.lang-switch-item img {
  width:100% !important; height:100% !important; object-fit:cover;
  image-rendering:pixelated; image-rendering:-webkit-optimize-contrast;
}
.lang-switch-item:hover,
.lang-switch-item.is-active { opacity:1; }

.tel-link {
  display:flex; align-items:center; gap:.6rem;
  font-family:var(--fb); font-size:.8rem; font-weight:400; color:#fff;
  transition:color .18s;
}
.tel-link svg { position:relative; top:-2px; }
.tel-link:hover { color:var(--gw-gold); }

.burger {
  display:none; flex-direction:column; gap:5px;
  width:36px; height:36px; align-items:center; justify-content:center;
  border-radius:3px; transition:background .18s;
}
.burger:hover { background:rgba(255,255,255,.1); }
.burger span {
  display:block; width:22px; height:2px; background:#fff; border-radius:2px;
  transition:transform .28s var(--ez), opacity .18s;
}
.burger[aria-expanded="true"] span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

.sub-menu li.panel-nav { display:none; }
.sub-menu li.panel-view-all { display:none; }

@media (max-width:860px) {
  .burger { display:flex; }
  /* .nav-links leaves the flex flow entirely once it becomes
     position:fixed (right below), so without this, .nav-end (and the
     burger inside it) would just pack next to the logo on the left
     instead of sitting in the actual right corner. */
  .nav-end { margin-left:auto; }
  .tel-link { display:none; }

  .nav-links {
    position:fixed; inset:64px 0 0;
    background:#fff; flex-direction:column; justify-content:flex-start;
    padding:1.5rem var(--px); gap:.25rem;
    transform:translateX(-100%); transition:transform .28s var(--ez);
    overflow-y:auto;
  }
  .nav-links.open { transform:none; }
  .nl { width:100%; padding:.9rem 1rem; font-size:.92rem; }

  .nav-links li { width:100%; }
  /* No absolute positioning here — .sub-menu .nl{flex:1} and
     .sub-menu .sub-menu-toggle{flex:0 0 auto} (defined above, outside
     this media query) already place the link and its arrow side by
     side. Overlapping them with position:absolute let taps land on the
     link underneath instead of the button, navigating straight through
     instead of opening the category's own panel. */
  .sub-menu-toggle { width:2.6rem; height:2.6rem; }

  /* Mobile: each level is its own full-screen panel (position:fixed
     ignores DOM nesting depth, so it always covers the whole nav area
     regardless of how deep this <ul> actually sits), sliding in from
     the right over whatever's behind it — a drill-down, not an
     in-place accordion, since 3-4 nested levels of indentation stopped
     being usable. */
  .sub-menu {
    position:fixed; inset:64px 0 0 0; z-index:1300;
    background:#fff; opacity:1; visibility:visible; pointer-events:auto;
    display:flex; flex-direction:column; gap:.25rem;
    padding:1.5rem var(--px); margin:0; border:none; box-shadow:none;
    overflow-y:auto;
    transform:translateX(100%);
    transition:transform .3s var(--ez);
    /* The base (desktop) .sub-menu rule sets these to white-on-navy
       values, since its own background is navy-dark there — this
       mobile panel's background just went white instead, so without
       resetting them back to dark here too, the text stayed white on
       white and was effectively invisible. */
    --ink:      #1a1a1a;
    --ink-60:   rgba(0,0,0,.6);
    --ink-40:   rgba(0,0,0,.4);
    --ink-10:   rgba(0,0,0,.06);
    --line:     rgba(0,0,0,.12);
  }
  .sub-menu.panel-open { transform:none; }

  .sub-menu li.panel-nav {
    display:flex; align-items:center; justify-content:space-between;
    width:100%; padding-bottom:1rem; margin-bottom:.5rem;
    border-bottom:1px solid var(--line);
  }
  .panel-back {
    display:inline-flex; align-items:center; gap:.3rem;
    font-family:var(--fb); font-size:.85rem; font-weight:600; color:var(--ink);
    padding:.5rem .7rem; margin-left:-.7rem; border-radius:4px;
  }
  .panel-back:hover { background:var(--ink-10); }
  .panel-back-arrow { font-size:1.15rem; }
  .panel-heading { font-family:var(--fb); font-size:.8rem; font-weight:700; color:var(--ink-40); }

  .sub-menu li.panel-view-all { display:flex; }
  .panel-view-all .nl {
    font-weight:700; color:var(--gw-gold);
    border-bottom:1px solid var(--line); margin-bottom:.4rem; padding-bottom:1rem;
  }
}
:focus-visible { outline:2px solid var(--gw-gold); outline-offset:3px; border-radius:3px; }

/* ════════════════ HERO ═════════════════════════════════════════ */
.hero {
  position:relative; min-height:750px;
  display:flex; align-items:center; overflow:hidden;
}
.hero-photo {
  position:absolute; inset:0;
  background-size:cover; background-position:center; background-repeat:no-repeat;
  opacity:0; transition:opacity 1.2s ease;
}
.hero-photo.is-active { opacity:1; }
/* When hero parallax is enabled (Customizer checkbox → body.hero-parallax
   class), oversize each photo vertically so the JS parallax's
   translateY has room to move within without ever revealing an empty
   gap at the top/bottom edge of the hero. No effect when the setting
   is off — .hero-photo stays exactly inset:0 as before. */
body.hero-parallax .hero-photo {
  top:-45%; bottom:-45%; height:190%;
  will-change:transform;
}
/* Used only when no Hero images are set in the CMS (see front-page.php) */
.hero-photo-default { background-image:url('../img/banner-hero.jpg'); }

/* Decorative yellow chevron, bottom-left corner of the hero — matches
   the approved reference design. Background image (not <img>) since
   it's purely visual. */
.hero-arrow {
  position:absolute; left:0; bottom:0; z-index:1;
  width:261px; height:auto; aspect-ratio:323/509;
  background:url('../img/hero-banner-arrow.png') left bottom/contain no-repeat;
  pointer-events:none;
}

/* Hero — video mode (see front-page.php / inc/meta-boxes-front-page.php).
   Mutually exclusive with .hero-photo above: only one of the two ever
   renders per page load, chosen server-side by Hero mode. */
.hero-video-wrap { position:absolute; inset:0; overflow:hidden; }
.hero-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* YouTube/Vimeo embed "cover" trick: an <iframe> can't use object-fit,
   so instead it's sized to whichever of width/height is the larger
   overflow (16:9 assumed) and centered — always fills the box without
   letterboxing, at the cost of the embed being oversized/cropped just
   like a background-image would be. */
.hero-video-embed-wrap {
  position:absolute; top:50%; left:50%;
  width:100vw; height:56.25vw;       /* 16:9 = width / 0.5625 */
  min-height:100%; min-width:177.78%; /* 100% * 16/9, i.e. height-driven fallback */
  transform:translate(-50%,-50%);
  pointer-events:none; /* decorative background — no click-to-play controls exposed */
}
.hero-video-embed-wrap iframe { width:100%; height:100%; display:block; border:0; }
.hero-body {
  position:relative; z-index:1;
  /* Flex item of .hero (row axis) with no flex-grow/width previously
     shrink-wrapped to its own content's natural (no-wrap) line width,
     so hero-h1's manually <br>-broken lines never actually got a
     width to wrap within on narrow screens — they just rendered at
     full unbroken length and got clipped by .hero's overflow:hidden.
     width:100% forces this flex item to fill the available row space
     so text wraps against a real, viewport-constrained width. */
  width:100%;
  padding-block:clamp(3rem,9vw,6rem) clamp(2.5rem,5.5vw,4.5rem);
  display:flex; flex-direction:column; align-items:flex-start; gap:1.75rem;
}
.hero-h1 {
  font-family:var(--fh);
  font-size:96px;
  line-height:0.9;
  color:#fff; max-width:100%;
  margin-left:120px;
  letter-spacing:-.01em;
}
/* Hidden for now per client request — markup stays in front-page.php
   in case it comes back. */
.hero-cta { display:none; }

/* ════════════════ ABOUT ════════════════════════════════════════ */
.sec-about { }

.about-layout {
  display:grid; grid-template-columns:1.15fr .85fr;
  gap:5rem; align-items:stretch;
  margin: 7% 0 7% 0;
}

.about-left .h2 { font-family:var(--fh); font-weight:400; font-size:clamp(1.8rem, 3.4vw, 3.2rem); line-height:0.9; margin-bottom:1.75rem; }

/* About left copy — replaces the old 3-item numbered feature-list
   (v1.10.3) with plain flowing paragraphs; kept close in size/color to
   .f-text p so the section's overall type rhythm doesn't shift. */
.about-copy { margin-top:1.5rem; }
.about-copy p {
  font-size:.95rem; line-height:1.7; color:var(--ink-60);
  margin-bottom:1.1rem;
}
.about-copy p:last-child { margin-bottom:0; }

.feature-list {
  display:flex; flex-direction:column; gap:1.95rem; margin-top:50px;
}
/* Timeline connector — one segment per gap, not one line spanning the
   whole list. A single list-wide line (previous approach) assumed
   every feature was the same height, which broke as soon as
   descriptions wrapped to different numbers of lines: the line's
   start/end points (based on the *list's* total height) drifted away
   from the actual circle centers, showing as gaps at the top/bottom.
   Anchoring each segment to its own .feature side-steps that: top is
   always this circle's true center (20px circle radius, minus the
   -0.6rem .f-num nudges it up by), and using top+bottom together
   (no explicit height) lets the box stretch to fit whatever this
   feature's content height turns out to be, automatically reaching
   exactly into the next feature's circle regardless of text length.
   :not(:last-child) means the last circle gets no trailing segment. */
.feature { display:flex; gap:1rem; align-items:flex-start; position:relative; }
.feature:not(:last-child)::after {
  content:'';
  position:absolute;
  left:20px;
  /* Circle center (20px - 0.6rem) + circle radius (20px) = circle's
     bottom edge, plus an 8px gap so the line visibly starts below
     the circle instead of touching it. */
  top:calc(48px - 0.6rem);
  /* -1.95rem reaches the next feature's top; +0.6rem backs off to
     that circle's top edge (it sits 0.6rem above its feature's own
     top, same margin-top nudge as .f-num); +8px leaves the matching
     gap before the next circle. */
  bottom:calc(-1.35rem + 8px);
  width:1px;
  background:var(--ink-40);
  z-index:0;
}
.f-num {
  flex-shrink:0; width:40px; height:40px; border-radius:50%;
  background:var(--gw-gold); color:#fff;
  font-family:var(--fb); font-size:.72rem; font-weight:700;
  display:flex; align-items:center; justify-content:center; margin-top:-0.6rem;
  position:relative; z-index:1;
}
.f-text { margin-top:-8px; }
.f-text h3 { font-family:var(--fh); font-size:1.1rem; margin-bottom:.28rem; color:var(--ink); }
.f-text p  { font-size:.9rem; color:var(--ink-60); line-height:1.62; }

/* Stats strip — standalone full-width block below the about grid */
.stats-strip {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:1rem 2rem;
  margin-top:3rem; margin-bottom:7%; padding-top:2.5rem;
}
.s-lbl {
  display:block; font-family:var(--fb);
  font-size:.68rem; font-weight:600; letter-spacing:.08em;
  color:var(--ink-40); margin-bottom:.4rem;
}
/* Higher specificity prevents WordPress base styles overriding the red
   on even-numbered stat values. */
.stats-strip .stat .s-val {
  display:block; font-family:var(--fh);
  font-size:clamp(2.4rem,4.5vw,3.4rem);
  font-weight:300; line-height:1;
  color:var(--gw-gold) !important;
}
/* 2nd and 4th stat values in white instead of gold, alternating with
   the 1st/3rd (still gold) for visual rhythm across the strip.
   !important on both rules: an external stylesheet (some plugin,
   never identified) was previously observed forcing these values to
   black — JS used to fight it with an inline !important override,
   removed now that these rules carry their own. */
.stats-strip .stat:nth-child(2) .s-val,
.stats-strip .stat:nth-child(4) .s-val {
  color:#fff !important;
}

/* About right photo */
.about-img {
  width:100%; height:100%; min-height:400px; object-fit:cover;
   box-shadow:0 6px 28px rgba(0,0,0,.11);
}

/* ════════════════ RESEARCH ═════════════════════════════════════ */
.sec-research {
  position:relative; overflow:hidden;
  padding-block:6rem;
  border-top:0px solid var(--line);
}

/* Cotton illustration as a section background via ::before.
   Reasons for pseudo-element over <img> in HTML:
   1. opacity applies to the image only — text content is unaffected
   2. background decoration belongs in CSS, not the markup
   3. front-page.php loses a div that existed purely for visual effect */
.sec-research::before {
  content:'';
  position:absolute; left:-25px; top:30%;
  width:568px; height:609px;
  transform:rotate(-34deg) translateY(-28%);
  background:url('../img/corn-transparent.png') center/contain no-repeat;
  opacity:.8;
  pointer-events:none;
  z-index:0;
}

/* Keep content above the pseudo-element */
.research-wrap { position:relative; z-index:1; }

.r-grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap:4.5rem; align-items:center;
}
.r-statement {
  font-family:var(--fh);
  font-size:clamp(1.2rem,2.5vw,1.6rem);
  line-height:1.55; color:var(--ink);
}
.r-statement strong { }
.r-statement em     { color:var(--gw-gold); font-style:normal; }

.r-right p { font-family:var(--ft); font-size:.9rem; color:var(--ink-60); line-height:1.78; margin-bottom:.9rem; }


/* ════════════════ PRODUCTS ═════════════════════════════════════ */
.sec-products { border-top:0px solid var(--line); margin:7% 0; }

.prod-layout {
  display:grid;
  grid-template-columns:220px 1fr;
  gap:2.5rem;
  align-items:start;
}
.prod-text {
  display:flex; flex-direction:column; align-items:flex-start; gap:1.1rem;
  padding-top:.15rem;
}
.prod-text .h2 { margin-top:.1rem; }

.prod-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.6rem; }

.prod-grid .lp-name {
  padding: 0.6rem 0px 0px;
  font-size: 28px;
  font-weight: 400;
  color: var(--ink);
}

.prod-card {  overflow:hidden; }
.pc-img    { position:relative; overflow:hidden; height:280px; }
.pc-img img {
  width:100%; height:100%; object-fit:cover;
  transition:transform .5s var(--ez);
}
.prod-card:hover .pc-img img { transform:scale(1.05); }
.pc-overlay {
  position:absolute; inset:0; background:rgba(0,0,0,.28);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .28s var(--ez);
}
.prod-card:hover .pc-overlay { opacity:1; }
.pc-name { padding:.65rem 0; font-family:var(--fb); font-size:.85rem; font-weight:400; color:var(--ink-60); }

/* ════════════════ FAQ ══════════════════════════════════════════ */
.sec-faq { border-top:0; padding:7% 0; }

.faq-list { border-top:1px solid var(--line); margin-top:3rem; }
.faq-row  { border-bottom:1px solid #cececa; }

.faq-btn {
  display:flex; align-items:center; gap:1.3rem;
  width:100%; padding:1.28rem 0 1.12rem; text-align:left; cursor:pointer;
}
.faq-btn:hover .faq-q { color:var(--gw-gold); }

.faq-n   { font-family:var(--fb); font-size:1.55rem; font-weight:600; color:aliceblue; min-width:2rem; flex-shrink:0; filter:brightness(.7); }
.faq-q   { flex:1; font-family:var(--fb); font-size:1.55rem; font-weight:400; color:var(--ink); line-height:1.42; transition:color .18s; }
@media (min-width:861px) {
  .faq-q { margin-left:20%; }
}
.faq-tog {
  flex-shrink:0; width:40px; height:40px; border-radius:50%;
  border:1.5px solid var(--line); display:flex; align-items:center; justify-content:center;
  color:var(--ink-60); transition:background .18s, border-color .18s, color .18s;
}
.faq-row.is-open .faq-tog { background:var(--gw-gold); border-color:var(--gw-gold); color:var(--gw-navy-dark); }
.faq-row.is-open .faq-n { color:var(--ink); filter:none; }
/* Same accordion component, reused on company-page (e.g. "Σκοπός της
   εταιρίας" on Καταστατικό Εταιρείας) — navy instead of red there, to
   match that page's palette rather than the homepage's red accent. */
.company-page .faq-row.is-open .faq-tog { background:var(--gw-navy); border-color:var(--gw-navy); color:#fff; }
.company-page .faq-btn:hover .faq-q { color:var(--gw-gold); }
/* .faq-pi p has no text-align of its own (site-wide FAQ rule doesn't
   need one), so it silently inherited .company-page's justify when
   this component got reused here (Σκοπός της εταιρίας, Επιτροπές Δ.Σ.
   accordions) — same class of bug as the h1-h5 and info-card__role
   fixes above. */
.company-page .faq-pi p { text-align: left; }
.company-page .faq-pi li { text-align: left; }
.company-page .faq-pi { padding:0 6rem 1.3rem 0; }

/* Default for .company-page accordions (e.g. "Επιτροπή Ελέγχου",
   "Επιτροπή αμοιβών...") — bolder question text. Asty CF Std (the
   .faq-q default, var(--fb)) only ships one weight (400/Book) as a
   self-hosted @font-face, so a heavier weight on it has no matching
   file and silently renders as regular. PF Transport SCapsOsF
   (var(--fh)) is used here instead — it's the only other font loaded,
   and being Black weight, it's inherently the heaviest text on the
   site without needing any font-weight declaration at all. */
.company-page .faq-q { font-family:var(--fh); font-size:22px; }
@media (min-width:861px) {
  .company-page .faq-q { margin-left:9%; }
}

/* The "Σκοπός της εταιρίας" accordion wants a visually different,
   thinner treatment than every other .company-page accordion, so it
   carries an EXTRA class (.org-purpose) on its wrapper rather than
   living under the shared .company-page selector — that was the bug
   in the previous version of this rule: it accidentally also applied
   here, to "Επιτροπή Ελέγχου" etc. Add class="company-page org-purpose"
   to that one block's wrapper div in the Custom HTML block. */
.org-purpose .faq-q { font-weight:400; font-size:22px; }
@media (min-width:861px) {
  .org-purpose .faq-q { margin-left:10%; }
}

/* "Ερωτήσεις – αποτελέσματα" (front page only) — bold question text.
   Same reasoning as the .company-page fix above: .faq-q's own font
   (Asty CF Std) only has weight 400 loaded, so PF Transport SCapsOsF
   (Black, the only other font loaded) is used here instead to
   actually render heavier. */
#faq .faq-q { font-family:var(--ft); line-height:1.6rem; }
#faq .faq-pi p { font-size:.9rem; color:var(--ink-60); line-height:1.72; }

/* Front-page-only layout tweaks: wider question indent and roomier
   panel padding. Scoped under #faq so the shared .faq-q/.faq-panel
   rules above (reused on .company-page accordions) stay untouched
   everywhere else. (.faq-tog is no longer overridden here — the base
   .faq-tog rule above is 40px sitewide now, so no front-page-only
   size/color override is needed anymore.) */
#faq .faq-q { margin-left:10%; }
@media (min-width:861px) {
  #faq .faq-panel { margin-left:10%; }
}
#faq .faq-pi { padding:0 7rem 1.3rem 3.3rem; }

.ico-m { display:none; }
.faq-row.is-open .ico-p { display:none; }
.faq-row.is-open .ico-m { display:block; }

.faq-panel { overflow:hidden; max-height:0; transition:max-height .38s var(--ez); }
/* Desktop only — indents the panel content to align under the question
   text (past the number + gap), rather than starting flush left. */
@media (min-width:861px) {
  .faq-panel { margin-left:14.5%; }
}
.faq-pi    { padding:0 0 1.3rem 3.3rem; }
.faq-pi p  { font-size:.86rem; color:var(--ink-60); line-height:1.72; }

/* ════════════════ NEWS ═════════════════════════════════════════ */
.sec-news { border-top:0; padding:7% 0; }
.center-hd { text-align:center; margin-bottom:2.6rem; }
#news .center-hd { text-align:left; }

.news-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:3.7rem; }
.n-card {
  overflow:hidden;
  border:1px solid #fff;
  box-shadow:0 1px 5px rgba(0,0,0,.06);
  transition:box-shadow .28s, transform .28s, border-color .28s;
  border-color:rgba(255,255,255,.3);
}
.n-card:hover { border-color:var(--gw-gold); box-shadow:0 8px 24px rgba(0,0,0,.1); transform:translateY(-4px); }
.n-img { display:block; overflow:hidden; height:400px; }
.n-img img { width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ez); }
.n-card:hover .n-img img { transform:scale(1.06); }
.n-body  { padding:1.15rem 1.2rem 1.3rem; }
.n-tag   { font-family:var(--fb); font-size:.67rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--gw-gold); display:block; margin-bottom:.45rem; }
.n-body h3 { font-family:var(--fb); font-size:1.1rem; font-weight:600; line-height:1.42; margin-bottom:.45rem; }
.n-body h3 a { color:var(--ink); transition:color .18s; }
.n-body h3 a:hover { color:var(--gw-gold); }
.n-body time { font-size:.74rem; color:var(--ink-40); }

/* ════════════════ TESTIMONIALS ════════════════════════════════ */
.sec-testi { border-top:1px solid var(--line); }

.slider-wrap { max-width:600px; margin-inline:auto; margin-bottom:3rem; overflow:hidden; }
.slider-rail {
  display:flex; will-change:transform;
  transition:transform .5s cubic-bezier(.4,0,.2,1);
}
.slide {
  min-width:100%; padding:0 1rem;
  display:flex; flex-direction:column; align-items:center; text-align:center;
}
.sl-ava {
  width:72px; height:72px; border-radius:50%; overflow:hidden;
  border:3px solid var(--line); margin-bottom:1.3rem;
}
.sl-ava img { width:100%; height:100%; object-fit:cover; }
.slide blockquote {
  font-family:var(--ft); font-size:.9rem; color:var(--ink-60);
  line-height:1.72; font-style:normal; margin-bottom:1.1rem; max-width:520px;
}
.slide cite {
  font-family:var(--fb); font-size:.85rem; font-weight:700;
  font-style:normal; color:var(--ink);
  display:flex; flex-direction:column; align-items:center; gap:.2rem;
}
.slide cite span { font-weight:400; font-size:.77rem; color:var(--ink-40); }

.sl-dots { display:flex; justify-content:center; gap:.55rem; margin-top:1.7rem; }
.dot {
  width:8px; height:8px; border-radius:4px; background:var(--line);
  cursor:pointer; padding:0; transition:background .18s, width .28s var(--ez);
}
.dot.on     { background:var(--gw-gold); width:22px; }
.dot:hover  { background:var(--ink-40); }

/* ════════════════ PARTNERS CAROUSEL (infinite auto-scroll) ═════ */
.partners-carousel {
  overflow:hidden;
  border-top:0;
  background: var(--white);
  -webkit-mask:linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  mask:linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}

@keyframes partnersScroll {
  from { transform:translateX(0); }
  to   { transform:translateX(-50%); } /* -50% because track = items × 2 */
}

.partners-track {
  display:flex; align-items:center;
  gap:4rem; width:max-content;
  animation:partnersScroll 22s linear infinite;
}
/* Pause on hover so users can read a logo */
.partners-carousel:hover .partners-track { animation-play-state:paused; }

.partner-item {
  flex-shrink:0; opacity:.4; filter:grayscale(1);
  transition:opacity .28s, filter .28s;
  display:flex; align-items:center;
}
.partner-item:hover { opacity:.75; filter:grayscale(0); }

.partner-item img {
  height:136px; width:auto; max-width:260px;
  object-fit:contain; display:block;
}
/* Fallback when no logo image is uploaded — show the company name */
.partner-name {
  font-family:var(--fb); font-size:.82rem; font-weight:800;
  letter-spacing:.07em; text-transform:uppercase;
  white-space:nowrap;
}

/* Respect reduced-motion: freeze the carousel */
@media (prefers-reduced-motion:reduce) {
  .partners-track { animation:none; }
  .partners-carousel {
    overflow-x:auto;
    -webkit-mask:none; mask:none;
  }
}

/* ════════════════ CONTACT ══════════════════════════════════════ */
.sec-contact { position:relative; padding-block:6rem; overflow:hidden; }
.ct-photo {
  position:absolute; left:0; right:0;
  /* Oversized vertically (45% buffer each side) so the JS parallax's
     translateY has room to move within without ever revealing an
     empty gap at the top/bottom edge of the section. */
  top:-45%; bottom:-45%; height:190%;
  background:url('../img/contact-bg.jpg') center/cover no-repeat;
  will-change:transform;
}
.ct-grid {
  position:relative; z-index:1;
  display:grid; grid-template-columns:1fr 1fr;
  gap:4.5rem; align-items:center;
}
.ct-left { color:#fff; }
.ct-icons { margin-bottom:2rem; }
.ct-icons svg { width:280px; height:auto; max-width:100%; }
.ct-h2 {
  font-family:var(--fh); font-size:clamp(1.8rem,3.2vw,2.5rem);
  line-height:1.16; color:#fff;
}

/* Form card */
.form-box { background:#fff; padding:2rem; box-shadow:0 14px 48px rgba(0,0,0,.2); box-sizing:border-box; width:100%; }
.fr { margin-bottom:.72rem; }
.fr.two { display:grid; grid-template-columns:1fr 1fr; gap:.72rem; }
.ff { display:flex; flex-direction:column; }
.ff input,.ff textarea {
  padding:.64rem .84rem; border:1.5px solid var(--line); border-radius:3px;
  font-size:.85rem; color:var(--ink); background:#fff; outline:none;
  transition:border-color .18s;
}
.ff input:focus,.ff textarea:focus { border-color:var(--gw-gold); }
.ff input.err,.ff textarea.err { border-color:#e53e3e; }
.ff textarea { resize:vertical; min-height:92px; }
.fe { font-size:.72rem; color:#e53e3e; margin-top:.22rem; min-height:1em; }

/* Contact page form: navy card with outlined/transparent fields,
   instead of the default white card — matches the approved reference
   design. Scoped to .ct-right so the shared .form-box/.ff system used
   elsewhere (the Careers application form) is unaffected. */
.ct-right .form-box {
  background:var(--gw-navy);
  box-shadow:0 20px 60px rgba(0,0,0,.35);
}
.ct-right .ff input,
.ct-right .ff textarea {
  background:transparent; border-color:rgba(255,255,255,.3); color:#fff;
}
.ct-right .ff input::placeholder,
.ct-right .ff textarea::placeholder { color:rgba(255,255,255,.6); }
.ct-right .ff input:focus,
.ct-right .ff textarea:focus { border-color:var(--gw-gold); }
.ct-right .consent-row label { color:rgba(255,255,255,.78); }

/* Submit states */
.btn-primary .ldg { display:none; }
.btn-primary.loading .lbl { display:none; }
.btn-primary.loading .ldg { display:inline; }
.btn-primary.loading { opacity:.7; pointer-events:none; }

.form-ok { margin-top:.8rem; padding:.8rem 1rem; background:#f0fdf4; border:1px solid #86efac; color:#166534; border-radius:3px; font-size:.83rem; text-align:center; }

/* ════════════════ CAREERS / JOB OPENINGS ════════════════════════
   Archive (filters + list), single job page (description + apply
   form). Reuses the existing form system above (.form-box/.fr/.ff/
   .fe/.hp-field/.consent-row-adjacent classes) rather than a parallel
   set of form styles. */

/* .form-box has no ambient dark background of its own here (unlike on
   the Contact page, where .ct-right sits on a dark photo, outside the
   --ink-* token system entirely) — it's a plain white card directly
   inside .sec-page-content, which IS part of that token system and
   overrides --ink-60/etc to near-white values. Reset them back
   locally so .consent-row label (color:var(--ink-60)) and anything
   else that relies on the token rather than a literal color stays
   readable on this card's own white background. Same technique as
   .cat-card/.info-card elsewhere in this file. */
.job-single-apply .form-box {
  --ink:      #1a1a1a;
  --ink-60:   rgba(0,0,0,.6);
  --ink-40:   rgba(0,0,0,.4);
  --ink-10:   rgba(0,0,0,.08);
  --line:     rgba(0,0,0,.14);
}

/* .form-box has no ambient dark background of its own here (unlike on
   the Contact page, where .ct-right sits on a dark photo) — it's a
   plain white card directly inside .sec-page-content, which is navy.
   Give the heading its own explicit dark color rather than reusing
   .ct-h2 (white — correct on Contact's dark photo, wrong here). */
.job-apply-h2 {
  font-family:var(--fh); font-size:1.3rem;
  color:var(--ink); margin:0 0 1.4rem;
}

.job-filters {
  display:flex; flex-wrap:wrap; gap:.7rem;
  margin-bottom:1.6rem;
}
.job-filters .sort-select { min-width:200px; }

.job-empty-msg { color:#fff; }

.job-list { display:flex; flex-direction:column; gap:1rem; }
.job-card {
  display:flex; flex-direction:column; align-items:flex-start; gap:.9rem;
  background:var(--gw-card-bg); border:1px solid var(--gw-border);
  border-radius:var(--radius-sm); padding:1.4rem 1.6rem;
}
.job-card__title { font-family:var(--fh); font-size:1.15rem; margin:0 0 .3rem; }
.job-card__title a { color:#1a1a1a; text-decoration:none; }
.job-card__title a:hover { color:var(--gw-navy); }
.job-card__summary { font-size:.85rem; color:rgba(0,0,0,.6); margin:0; }
.job-card__meta { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.job-pill {
  font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.03em;
  padding:.3rem .7rem; border-radius:20px;
  background:var(--gw-navy); color:#fff;
}
.job-card__link {
  font-size:.85rem; font-weight:600; color:var(--gw-navy); text-decoration:none;
  white-space:nowrap;
}
.job-card__link:hover { color:var(--gw-gold-dk); }

.job-hero-pills { margin-top:.8rem; display:flex; gap:.5rem; flex-wrap:wrap; }
.job-hero-pills .job-pill { background:rgba(255,255,255,.14); }

.job-single-grid {
  display:grid; grid-template-columns:1.2fr 1fr; gap:3rem;
  align-items:start;
  padding-block:2.8rem;
}
.job-single-desc { font-size:.95rem; line-height:1.75; color:var(--ink-60); }
.job-single-desc h2, .job-single-desc h3 { color:var(--ink); margin-top:1.6rem; }
.job-single-desc ul { padding-left:1.2rem; }
@media (max-width:1024px) {
  .job-single-grid { grid-template-columns:1fr !important; justify-items:stretch; }
  .job-single-apply, .job-single-desc {
    /* grid-column:1/-1 alone (not also an explicit width:100%, which
       was removed here — combining the two caused the form to sit
       slightly off-center, more padding on the left than the right,
       confirmed live) makes each child span the full single track. */
    grid-column: 1 / -1;
  }
}

/* Belt-and-braces alongside the above: nothing inside the job
   application form can force width beyond its container, regardless
   of what specific element turns out to be the cause — reported live
   on a real device (346px viewport) as the form "no longer shrinking"
   past a certain point, most likely something with an un-shrinkable
   intrinsic minimum width. Couldn't pin down the one exact element
   remotely (viewport-resize testing isn't reliably reproducing narrow
   widths in this environment), so this is a broad, safe guarantee
   rather than a single targeted fix. */
.job-single-apply, .job-single-apply * { max-width:100%; box-sizing:border-box; }
.job-single-apply .ff input,
.job-single-apply .ff textarea { min-width:0; }

.job-upload-row {
  display:flex; flex-direction:column; gap:1rem;
  margin:.9rem 0 1rem;
}
.job-upload label {
  display:block; font-size:.78rem; font-weight:600; color:var(--ink); margin-bottom:.4rem;
}
.job-dropzone {
  border:1.5px dashed var(--line); border-radius:6px;
  padding:1.3rem .9rem; text-align:center; cursor:pointer;
  transition:border-color .18s, background-color .18s;
}
.job-dropzone:hover, .job-dropzone:focus-visible { border-color:var(--gw-gold); outline:none; }
.job-dropzone.drag-over { border-color:var(--gw-gold); background:#fffbea; }
.job-dropzone.has-file { border-color:#86efac; background:#f0fdf4; }
.job-dropzone__icon { display:block; font-size:1.3rem; color:var(--ink-40); margin-bottom:.3rem; }
.job-dropzone__text { display:block; font-size:.82rem; font-weight:600; color:var(--ink); }
.job-dropzone__hint { display:block; font-size:.68rem; color:var(--ink-40); margin-top:.2rem; }
.job-dropzone__filename {
  display:block; font-size:.76rem; color:var(--gw-navy); font-weight:600;
  margin-top:.4rem; word-break:break-all;
}
/* Belt-and-braces: the actual <input type=file> already carries the
   HTML `hidden` attribute (see single-job_opening.php) — this
   explicit rule guards against it becoming visible anyway (a native
   "Choose file" button was seen leaking through in one browser render)
   if any other stylesheet or reset touches input[type=file] display. */
[data-js="job-file-input"] { display:none !important; }

/* ════════════════ DOWNLOADS ══════════════════════════════════════
   page-downloads.php. Cards use explicit colors throughout (not the
   --ink-* token system) since they're plain light cards sitting
   directly in .sec-page-content (navy, with light-on-dark token
   overrides — see v1.6.0) — simpler than a local token reset for a
   handful of elements that each only need one specific color anyway. */
.download-list { display:flex; flex-direction:column; gap:1rem; padding-block:2.8rem; }
.download-card {
  display:flex; align-items:center; gap:1.2rem;
  background:var(--gw-card-bg); border:1px solid var(--gw-border);
  border-radius:var(--radius-sm); padding:1.2rem 1.4rem;
}
.download-card__icon {
  flex:0 0 auto; width:48px; height:48px; display:flex; align-items:center; justify-content:center;
  background:var(--gw-navy); color:#fff; border-radius:6px;
  font-size:.68rem; font-weight:700; letter-spacing:.02em;
}
.download-card__main { flex:1 1 auto; min-width:0; }
.download-card__title { font-family:var(--fh); font-size:1.05rem; color:#1a1a1a; margin:0 0 .2rem; }
.download-card__desc { font-size:.83rem; color:rgba(0,0,0,.6); margin:0 0 .25rem; }
.download-card__size { font-size:.72rem; color:rgba(0,0,0,.4); }
.download-card__btn {
  flex:0 0 auto; display:inline-flex; align-items:center; gap:.4rem;
  padding:.6rem 1.2rem; border-radius:3px;
  background:#FFC503; color:#132038; font-weight:700; font-size:.85rem;
  text-decoration:none; white-space:nowrap;
  transition:background-color .18s;
}
.download-card__btn:hover { background:var(--gw-gold-dk); }
.download-empty-msg { color:#fff; padding-block:2.8rem; }
@media (max-width:560px) {
  .download-card { flex-wrap:wrap; }
  .download-card__btn { width:100%; justify-content:center; }
}

/* ════════════════ FOOTER ═══════════════════════════════════════ */
footer { position:relative; overflow:hidden; background:var(--gw-navy-dark); color:#fff; padding:3.8rem 0 1.6rem; }

/* Decorative yellow chevron, bottom-right corner, flush to the edge —
   client-provided asset, purely visual, so it's a background image
   rather than an <img> in the markup. */
.ft-arrow {
  position:absolute; left:0; bottom:0;
  width:90px; height:auto; aspect-ratio:143/223;
  background:url('../img/hero-footer-arrow.png') center/contain no-repeat;
  pointer-events:none;
}
.ft-grid {
  display:grid; grid-template-columns:1.8fr 1fr 1fr 1fr 1fr;
  gap:2rem 2.5rem; margin-bottom:3rem;
}
/* "Έδρα" column switched off in Customizer → 4 tracks instead of 5, so no
   empty gap is left on the right. Tablet/mobile rules below override this
   same property, so they keep working unchanged. */
.ft-grid.ft-grid--no-hq { grid-template-columns:1.8fr 1fr 1fr 1fr; }
.ft-logo {
  display:inline-flex; align-items:center; margin-bottom:.6rem;
}
.ft-logo img   { height:42px; width:auto; display:block; }
.ft-tagline    { font-family:var(--fh); margin:14px 0 .85rem; }
.ft-brand p { font-size:1.58rem; color:rgba(255,255,255,.58); line-height:1; font-weight:300; }
.ft-col h4,
.ft-col-widget-title {
  font-family:var(--fb); font-size:.68rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:rgba(255,255,255,.7); margin-bottom:.95rem;
}
.ft-col ul li+li { margin-top:.5rem; }
.ft-col ul a { font-size:.82rem; color:rgba(255,255,255,.85); transition:color .18s; }
.ft-col ul a:hover { color:#fff; text-decoration:underline; }
.ft-social { display:flex; gap:.7rem; }
.ft-social a {
  width:30px; height:30px; border-radius:50%;
  border:1.5px solid rgba(255,255,255,.5);
  display:flex; align-items:center; justify-content:center;
  transition:background .18s, border-color .18s;
}
.ft-social a:hover { background:rgba(255,255,255,.15); border-color:#fff; }
.ft-btm { border-top:1px solid rgba(255,255,255,.25); padding-top:1.25rem; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.6rem; }
.ft-btm span,.ft-btm nav a { font-size:.74rem; color:rgba(255,255,255,.65); }
.ft-btm nav { display:flex; gap:1.2rem; }
.ft-btm nav a:hover { color:#fff; }
.ft-2pix-link { display:inline-flex; align-items:center; gap:.3em; }
.ft-2pix-icon { display:inline-block; vertical-align:middle; }

/* ════════════════ BACK TO TOP ══════════════════════════════════ */
.btt {
  position:fixed; bottom:2rem; right:2rem; z-index:999;
  width:42px; height:42px; border-radius:50%;
  background:var(--gw-gold); color:var(--gw-navy-dark);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 18px rgba(0,0,0,.16);
  opacity:0; pointer-events:none; transform:translateY(10px);
  transition:opacity .3s, transform .3s, background .18s;
}
.btt.show  { opacity:1; pointer-events:all; transform:none; }
.btt:hover { background:var(--gw-gold-dk); }

/* ════════════════ RESPONSIVE ════════════════════════════════════ */
@media (max-width:1060px) {
}
@media (max-width:860px) {
  .sec          { padding-block:4.5rem; }
  .sec-research { padding-block:4.5rem; }
  .sec-contact  { padding-block:4.5rem; }
  .about-layout,.r-grid,.ct-grid,.prod-layout { grid-template-columns:1fr; gap:2.8rem; }
  .about-img    { height:280px; }
  .stats-strip  { grid-template-columns:repeat(2,1fr); gap:1.6rem; }
  .ct-icons     { display:none; }
  .ft-grid,.ft-grid.ft-grid--no-hq { grid-template-columns:repeat(2,1fr); }
  .ft-brand     { grid-column:1/-1; }
}
@media (max-width:640px) {
  .hero         { min-height:420px; }
  .hero-h1      { font-size:2rem; }
  .hero-arrow   { width:121px; }
  /* Base h1/h2 (96px/62px desktop, per brand spec above) scaled down
     for mobile — those sizes are far too large for a narrow screen.
     Elements with their own more specific rule (.hero-h1, .pd-title,
     .page-hero h1, etc.) are unaffected, same as on desktop. */
  h1            { font-size:2.4rem; line-height:1.15; }
  h2            { font-size:1.9rem; line-height:1.2; }
  .prod-grid    { grid-template-columns:1fr; }
  .news-grid    { grid-template-columns:1fr; }
  .fr.two       { grid-template-columns:1fr; }
  .ft-grid,.ft-grid.ft-grid--no-hq { grid-template-columns:1fr; }
  .ft-brand     { grid-column:1; }
  .btt          { bottom:1.2rem; right:1.2rem; }
}

/* ════════════════════════════════════════════════════════════════
   SHARED — PLAIN PAGE HERO  (cream band, used on contact/team/etc.)
   ════════════════════════════════════════════════════════════════ */
.page-hero {
  background:var(--gw-navy-dark);
  padding-block:5.5rem 5rem;
  /* Same technique as .sec--navy (front-page sections): locally
     redefine the shared text/background tokens so every existing
     component underneath (h1, breadcrumb, muted span…) picks up
     correct light-on-navy contrast automatically — no per-component
     overrides to hunt down or maintain. */
  --ink:      #fff;
  --ink-60:   rgba(255,255,255,.72);
  --ink-40:   rgba(255,255,255,.52);
  --ink-10:   rgba(255,255,255,.08);
  --line:     rgba(255,255,255,.16);
}
.page-hero h1 {
  font-family:var(--fh); line-height:1.14;
  font-size:clamp(1.9rem,3.6vw,2.5rem); color:var(--ink);
  max-width:680px;
}
.page-hero h1 .muted { color:var(--ink); opacity:.6; font-weight:500; }
/* Opt-out of the shared 680px cap above — used on pages whose heading
   is long enough to get clipped by it (currently: Επικοινωνία, Team). */
.page-hero--wide h1 { max-width:none; }
/* background-color override removed — .page-hero itself is now
   --gw-navy-dark too (was --gw-navy), so this was a redundant
   same-value rule. */

/* Breadcrumb (product listing / detail) */
.crumb {
  display:flex; align-items:center; gap:.5rem; flex-wrap:wrap;
  font-family:var(--fb); font-size:.78rem; color:var(--ink-40);
  margin-top:.6rem;
}
.crumb a { color:var(--ink-40); transition:color .18s; }
.crumb a:hover { color:var(--gw-gold); }
.crumb .sep { opacity:.5; }
.crumb .current { color:var(--ink-60); }

/* ════════════════════════════════════════════════════════════════
   CONTACT PAGE — office cards
   ════════════════════════════════════════════════════════════════ */
.sec-offices {
  background: var(--gw-navy);
  padding-block:5rem 2rem;
  --ink:      #fff;
  --ink-60:   rgba(255,255,255,.72);
  --ink-40:   rgba(255,255,255,.52);
  --ink-10:   rgba(255,255,255,.08);
  --line:     rgba(255,255,255,.16);
}
.office-block { padding-block:2.4rem; border-bottom:1px solid var(--line); }
.office-block:first-child { padding-top:0; }
.office-h3 {
  font-family:var(--fh); font-size:1.5rem;
  margin-bottom:1.5rem; color:var(--ink);
}
.office-grid {
  display:grid; grid-template-columns:1.1fr 1.1fr 1fr 1.3fr;
  gap:1.5rem;
}
.office-lbl {
  display:block; font-family:var(--fb); font-size:.68rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.08em; color:var(--ink-40);
  margin-bottom:.4rem;
}
.office-val { font-size:.86rem; color:var(--ink-60); line-height:1.6; }
.office-val a { color:var(--ink-60); transition:color .18s; }
.office-val a:hover { color:var(--gw-gold); }

@media (max-width:900px) {
  .office-grid { grid-template-columns:1fr 1fr; gap:1.4rem 1.5rem; }
}
@media (max-width:560px) {
  .office-grid { grid-template-columns:1fr; }
}

/* ════════════════════════════════════════════════════════════════
   CONTACT FORM — simple variant (Όνομα / Email / Θέμα / Μήνυμα)
   ════════════════════════════════════════════════════════════════ */
/* Honeypot spam trap (see inc/contact-form.php) — hidden off-screen
   rather than display:none/visibility:hidden, since some bots skip
   fields hidden that obviously; a real visitor tabbing through with
   tabindex="-1" set never lands here either way. */
.hp-field {
  position:absolute; left:-9999px; top:auto;
  width:1px; height:1px; overflow:hidden;
}
.consent-row {
  display:flex; align-items:flex-start; gap:.6rem;
  margin:.85rem 0 1.1rem;
}
.consent-row input[type="checkbox"] {
  margin-top:.18rem; width:16px; height:16px; accent-color:var(--gw-gold); flex-shrink:0;
}
.consent-row label { font-size:.78rem; color:var(--ink-60); line-height:1.5; }
.form-err {
  margin-top:.85rem; padding:.7rem 1rem; border-radius:8px;
  background:#fdecea; color:#b32d2e; font-size:.85rem;
}

/* ════════════════════════════════════════════════════════════════
   TEAM PAGE
   ════════════════════════════════════════════════════════════════ */
.sec-team {
  background: var(--gw-navy);
  padding-block:5rem 1rem;
  --ink:      #fff;
  --ink-60:   rgba(255,255,255,.72);
  --ink-40:   rgba(255,255,255,.52);
  --ink-10:   rgba(255,255,255,.08);
  --line:     rgba(255,255,255,.16);
}
.team-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.6rem;
  margin-bottom:4rem;
}
.tm-card { }
.tm-photo {
  width:100%; aspect-ratio:3/3.6; object-fit:contain;
   margin-bottom:1rem;
    /* background: var(--ink-10); */
}
.tm-name { font-family:var(--fb); font-size:1rem; font-weight:700; margin-bottom:.3rem; color:var(--ink); }
.tm-role { font-size:.8rem; color:var(--ink-60); line-height:1.5; margin-bottom:.4rem; }
.tm-phone { font-family:var(--fb); font-size:.84rem; font-weight:700; color:var(--ink); }

/* Sales reps list */
.sec-reps {
  background: var(--gw-navy);
  padding-block:1rem 5rem;
  --ink:      #fff;
  --ink-60:   rgba(255,255,255,.72);
  --ink-40:   rgba(255,255,255,.52);
  --ink-10:   rgba(255,255,255,.08);
  --line:     rgba(255,255,255,.16);
}
.reps-list { border-top:1px solid var(--line); }
.rep-row {
  display:grid; grid-template-columns:3rem 1.6fr 1.4fr 1fr;
  align-items:center; gap:1rem;
  padding-block:1.1rem; border-bottom:1px solid var(--line);
}
.rep-num { font-family:var(--fb); font-weight:700; font-size:.85rem; color:var(--ink); }
.rep-region { font-size:.86rem; color:var(--ink-60); }
.rep-name { font-family:var(--fb); font-weight:700; font-size:.86rem; color:var(--ink); }
.rep-phone { font-family:var(--fb); font-size:.86rem; color:var(--ink-60); text-align:right; }

@media (max-width:860px) {
  .team-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px) {
  .team-grid { grid-template-columns:1fr; max-width:280px; margin-inline:auto; margin-bottom:3rem; }
  .rep-row { grid-template-columns:2.2rem 1fr; row-gap:.3rem; align-items:start; }
  .rep-name { grid-column:1 / -1; }
  .rep-phone { grid-column:1 / -1; text-align:left; }
}

/* ════════════════════════════════════════════════════════════════
   PRODUCT LISTING (category grid + pagination)
   ════════════════════════════════════════════════════════════════ */
.sec-listing {
  background: var(--gw-navy);
  padding-block:3rem 5rem;
  --ink:      #fff;
  --ink-60:   rgba(255,255,255,.72);
  --ink-40:   rgba(255,255,255,.52);
  --ink-10:   rgba(255,255,255,.08);
  --line:     rgba(255,255,255,.16);
}
.listing-head {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:2.2rem; gap:1rem; flex-wrap:wrap;
}
.sort-select {
  font-family:var(--fb); font-size:.82rem; color:#1a1a1a;
  padding:.55rem 2.2rem .55rem .9rem; border:1.5px solid var(--line); border-radius:4px;
  background:#fff
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6"><path d="M1 1l4 4 4-4" stroke="%23888" stroke-width="1.4" fill="none"/></svg>')
    no-repeat right .85rem center;
  appearance:none; cursor:pointer;
}
.listing-controls { display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; }

.listing-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.8rem 1.6rem;
  margin-bottom:3rem;
}
.lp-card { }
.lp-img-wrap { overflow:hidden; aspect-ratio:1/1; margin-bottom:.9rem; }
.lp-img-wrap img { width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ez); }
.lp-card:hover .lp-img-wrap img { transform:scale(1.06); }
.lp-name { font-family:var(--fb); font-size:1.1rem; font-weight:700; color:var(--ink); }
.lp-card a.lp-link { display:block; }
.lp-card a.lp-link:hover .lp-name { color:var(--gw-gold); }

/* Pagination */
.pagination { display:flex; gap:.5rem; }
.page-btn {
  width:38px; height:38px; display:flex; align-items:center; justify-content:center;
  border-radius:4px; background:var(--ink-10); font-family:var(--fb); font-size:.84rem; font-weight:600;
  color:var(--ink); transition:background .18s, color .18s;
  /* Same reasoning as .cat-card above: this chip's own light
     background must stay legible regardless of the section it's in.
     (Custom properties resolve for the whole rule regardless of
     declaration order, so background/color above already pick these
     local values up — no need to repeat them.) */
  --ink:      #1a1a1a;
  --ink-10:   #f7f5f0;
}
.page-btn:hover { background:var(--line); }
.page-btn.current { background:var(--gw-gold); color:#fff; }

@media (max-width:860px) { .listing-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px) { .listing-grid { grid-template-columns:1fr; max-width:340px; margin-inline:auto 3rem; } }

/* ── CATEGORY GRID (root /products/ hub, and subcategory drill-down) ── */
.cat-subheading {
  font-family:var(--fb); font-size:1.1rem; font-weight:700; color:var(--ink);
  margin:0 0 1.2rem;
}
.cat-subheading + .cat-grid { margin-bottom:3rem; }

.cat-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem;
  margin-bottom:1rem;
}
.cat-card {
  display:block; border:1px solid var(--line); border-radius:10px; overflow:hidden;
  background:var(--white); transition:box-shadow .22s var(--ez), transform .22s var(--ez), border-color .22s;
  /* Self-contained white card — always stays dark-on-white regardless
     of the section it sits in (including navy ones), same reasoning
     as .sub-menu not inheriting the navbar's colours: reset the
     shared tokens back to their light-mode values locally. */
  --ink:      #1a1a1a;
  --ink-60:   #555;
  --ink-40:   #888;
  --ink-10:   #f7f5f0;
  --line:     #e6e6e3;
}
.cat-card:hover {
  box-shadow:0 18px 40px rgba(0,0,0,.09); transform:translateY(-3px); border-color:transparent;
}
.cat-card-media {
  aspect-ratio:16/10; background-size:cover; background-position:center;
  background-color:var(--ink-10);
}
.cat-card--no-image .cat-card-body { padding-top:1.6rem; }
.cat-card-body { padding:1.2rem 1.3rem 1.4rem; }
.cat-card-title {
  font-family:var(--fb); font-size:1.05rem; font-weight:700; color:var(--ink);
  margin:0 0 .3rem; transition:color .18s;
}
.cat-card:hover .cat-card-title { color:var(--gw-gold); }
.cat-card-count { font-size:.78rem; color:var(--ink-40); }
.cat-card-children {
  display:flex; flex-wrap:wrap; gap:.35rem .5rem; margin-top:.8rem; padding-top:.8rem;
  border-top:1px solid var(--line); list-style:none;
}
.cat-card-children li {
  font-size:.76rem; color:var(--ink-60); background:var(--ink-10);
  padding:.25rem .55rem; border-radius:20px;
}
.cat-card-children li.cat-card-more { background:transparent; color:var(--ink-40); padding-left:0; }

@media (max-width:860px) { .cat-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px) { .cat-grid { grid-template-columns:1fr; } }

/* ════════════════════════════════════════════════════════════════
   PRODUCT DETAIL
   ════════════════════════════════════════════════════════════════ */
.sec-pd-head {
  background: var(--gw-navy);
  padding-block:3.5rem 2.5rem; text-align:center;
  --ink:      #fff;
  --ink-60:   rgba(255,255,255,.72);
  --ink-40:   rgba(255,255,255,.52);
  --ink-10:   rgba(255,255,255,.08);
  --line:     rgba(255,255,255,.16);
}
.pd-tagline {
  font-family:var(--ft); font-weight:400; color:#fff;
  font-size:clamp(1.3rem,2.6vw,1.9rem);
}

.sec-pd {
  background: var(--gw-navy);
  padding-block:0 4rem;
  --ink:      #fff;
  --ink-60:   rgba(255,255,255,.72);
  --ink-40:   rgba(255,255,255,.52);
  --ink-10:   rgba(255,255,255,.08);
  --line:     rgba(255,255,255,.16);
}
.pd-grid { display:grid; grid-template-columns:1fr 1fr; gap:3.5rem; align-items:start; }
.pd-photo { width:100%; height:520px; object-fit:cover;  }

.pd-title-row { display:flex; align-items:baseline; gap:1.6rem; margin-bottom:1.6rem; flex-wrap:wrap; }
.pd-title { font-family:var(--fh); font-size:2.4rem; color:var(--ink); }

.pd-title-row {
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:1rem; flex-wrap:wrap;
}
.pd-badges { display:flex; align-items:flex-start; gap:.2rem; flex-shrink:0; }
.pd-badge { max-height:70px; width:auto; display:block; }
.pd-badges { display:flex; gap:1.4rem; flex-wrap:wrap; }
.pd-badge { display:flex; align-items:center; gap:.4rem; font-size:.85rem; color:var(--ink-60); }
.pd-badge b { color:var(--ink); font-weight:700; }

.pd-spec-table { margin-bottom:1.8rem; }
.pd-spec-row {
  display:flex; justify-content:space-between; gap:1rem;
  padding-block:.7rem; border-bottom:1px solid var(--line);
  font-size:.88rem;
}
.pd-spec-row span:first-child { color:var(--ink-60); }
.pd-spec-row span:last-child  { font-weight:700; color:var(--ink); }

.pd-features { font-size:.86rem; color:var(--ink-60); line-height:2; }
.pd-features .dot-sep { margin:0 .5rem; opacity:.5; }
/* Corn: xaraktiristika rendered as plain paragraph with / separator */
.pd-features-text { font-size:.86rem; color:var(--ink-60); line-height:1.75; margin-top:1rem; }

/* Related products */
.sec-related {
  background: var(--gw-navy);
  padding-block:1rem 5rem;
  --ink:      #fff;
  --ink-60:   rgba(255,255,255,.72);
  --ink-40:   rgba(255,255,255,.52);
  --ink-10:   rgba(255,255,255,.08);
  --line:     rgba(255,255,255,.16);
}
.related-h2 { font-family:var(--fh); font-size:2.5rem; margin-bottom:1.8rem; color:var(--ink); }
.related-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; }
.custom-1{
  line-height: 0.9;
  font-size: clamp(1.8rem, 3.4vw, 3.2rem);
}
@media (max-width:900px) {
  .pd-grid { grid-template-columns:1fr; gap:2rem; }
  .pd-photo { height:360px; }
  .related-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px) {
  .related-grid { grid-template-columns:1fr; max-width:340px; margin-inline:auto; }
  .pd-title-row { flex-direction:column; gap:.6rem; }
}

/* ════════════════════════════════════════════════════════════════
   PRODUCT DETAIL — shared new styles (cotton / alfalfa / veggie)
   ════════════════════════════════════════════════════════════════ */

/* Cotton: 2-column extra section — background/token overrides consolidated
   below at the single .sec-pd-extra rule (was previously duplicated with
   a conflicting background here; same "two rules, same specificity,
   later one silently wins" issue fixed elsewhere in this file). */
.sec-pd-extra {
  padding-block:4rem 5rem;
  border-top:1px solid var(--line);
}
.pd-two-col {
  display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:start;
}
.pd-col-heading {
  font-family:var(--fh); font-size:1.15rem;
  margin-bottom:1.2rem; color:var(--ink);
}
.pd-col-heading--tolerances { margin-top:2rem; }

/* Fiber characteristics table (cotton, right column) */
.pd-fiber-table { display:flex; flex-direction:column; gap:0; }
.pd-fiber-row {
  display:flex; justify-content:space-between; align-items:baseline;
  padding:.65rem 0; border-bottom:1px solid var(--line); font-size:.88rem;
}
.pd-fiber-row span { color:var(--ink-60); }
.pd-fiber-row b    { color:var(--ink); font-weight:700; }

/* Alfalfa full-width text section */
.sec-pd-alfalfa-text {
  position:relative; overflow:hidden;
  padding-block:5rem;
  background: var(--gw-navy);
  border-top:1px solid var(--line);
  --ink:      #fff;
  --ink-60:   rgba(255,255,255,.72);
  --ink-40:   rgba(255,255,255,.52);
  --ink-10:   rgba(255,255,255,.08);
  --line:     rgba(255,255,255,.16);
}
.alfalfa-deco {
  position:absolute; left:-10px; top:50%; transform:translateY(-50%);
  width:200px; height:auto; opacity:.08; pointer-events:none;
}
.alfalfa-deco img { width:100%; height:auto; display:block; }
.pd-alfalfa-heading {
  font-family:var(--fh); font-size:clamp(1.4rem,2.5vw,1.9rem);
  line-height:1.3; color:var(--ink);
  margin-bottom:2rem; max-width:760px;
}
.pd-alfalfa-content {
  columns:2; column-gap:3rem;
  font-size:.88rem; color:var(--ink-60); line-height:1.82;
}
.pd-alfalfa-content p { break-inside:avoid; margin-bottom:1rem; }

/* Veggie bullet lists */
.pd-bullet-list ul { list-style:none; padding:0; margin:0; }
.pd-bullet-list li {
  display:flex; align-items:flex-start; gap:.7rem;
  padding:.7rem 0; border-bottom:1px solid var(--line);
  font-size:.88rem; color:var(--ink-60); line-height:1.5;
}
.pd-bullet-list li::before {
  content:'•'; color:var(--gw-gold); font-size:1.1rem;
  flex-shrink:0; margin-top:.05rem;
}

/* Responsive */
@media (max-width:860px) {
  .pd-two-col { grid-template-columns:1fr; gap:2.5rem; }
  .pd-alfalfa-content { columns:1; }
  .alfalfa-deco { display:none; }
}

/* ════════════════════════════════════════════════════════════════
   PRODUCT DETAIL — crop-type-specific styles
   ════════════════════════════════════════════════════════════════ */

/* Sub-heading inside spec panel (Μηδική / Κηπευτικά) */
.pd-sub-heading {
  font-family:var(--fb); font-size:.78rem; font-weight:400;
  text-transform:uppercase; letter-spacing:.08em;
  color:var(--gw-gold); margin:1.4rem 0 .6rem;
}
.pd-spec-table .pd-sub-heading { margin-left:0; }

/* Cotton: 2-column extra section */
.sec-pd-extra {
  padding-block:4rem;
  background: var(--gw-navy);
  --ink:      #fff;
  --ink-60:   rgba(255,255,255,.72);
  --ink-40:   rgba(255,255,255,.52);
  --ink-10:   rgba(255,255,255,.08);
  --line:     rgba(255,255,255,.16);
}
.pd-extra-grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap:3.5rem; align-items:start;
}
.pd-management h3 {
  font-family:var(--fb); font-size:.78rem; font-weight:400;
  text-transform:uppercase; letter-spacing:.08em;
  color:var(--gw-gold); margin:1.4rem 0 .6rem;
}
.pd-fiber h3 {
  font-family:var(--fb); font-size:.78rem; font-weight:400;
  text-transform:uppercase; letter-spacing:.08em;
  color:var(--gw-gold); margin:1.4rem 0 .6rem;
}
/* Μηδική: χωρίς κόκκινη γραμμή */
.pd-diseases h3 {
  font-family:var(--fb); font-size:.95rem; font-weight:700;
  margin-bottom:1rem; color:var(--ink);
}
.pd-management p {
  font-size:.86rem; color:var(--ink-60); line-height:1.78;
}

/* Cotton fiber table */
.pd-fiber-table { }
.pd-fiber-row {
  display:flex; justify-content:space-between;
  padding:.55rem 0; border-bottom:1px solid var(--line);
  font-size:.87rem;
}
.pd-fiber-row span:first-child { color:var(--ink-60); }
.pd-fiber-row span:last-child  { font-weight:600; color:var(--ink); }

/* Alfalfa: full-width content section reuses sec-research for the cotton deco */
.sec-pd-content {
  padding-block:4.5rem;
  background: var(--gw-navy);
  --ink:      #fff;
  --ink-60:   rgba(255,255,255,.72);
  --ink-40:   rgba(255,255,255,.52);
  --ink-10:   rgba(255,255,255,.08);
  --line:     rgba(255,255,255,.16);
}
.pd-content-heading {
  font-family:var(--fh); font-size:clamp(1.4rem,2.5vw,1.9rem);
  margin-bottom:1.5rem; color:var(--ink);
}
.pd-full-content {
  max-width:780px; margin-inline:auto;
  font-size:.9rem; color:var(--ink-60); line-height:1.82;
  columns:2; column-gap:3rem;
}
.pd-full-content p { margin-bottom:1rem; break-inside:avoid; }

/* Veggie: bullet lists */
.pd-bullet-list {
  list-style:none; margin-bottom:1.4rem;
}
.pd-bullet-list li {
  position:relative; padding:.55rem .75rem .55rem 1.2rem;
  font-size:.87rem; color:var(--ink-60); line-height:1.5;
  border-bottom:1px solid var(--line);
}
.pd-bullet-list li::before {
  content:'•'; position:absolute; left:0;
  color:var(--gw-gold); font-weight:700;
}

/* Responsive */
@media (max-width:860px) {
  .pd-extra-grid  { grid-template-columns:1fr; gap:2rem; }
  .pd-full-content { columns:1; }
}

/* Disease resistance table (Μηδική) */
.pd-resistance { font-weight:700; }
.pd-resistance--hr { color:var(--gw-gold); }
.pd-resistance--r  { color:#2a7a3b; }

.pd-resistance-legend {
  margin-top:.9rem; padding-top:.7rem;
  display:flex; gap:1.4rem; flex-wrap:wrap;
  font-size:.78rem; color:var(--ink-60);
}
.pd-resistance-legend b { color:var(--ink); }

/* ════════════════════════════════════════════════════════════════
   SINGLE POST — 2-column layout with latest-news sidebar
   ════════════════════════════════════════════════════════════════ */
.single-main { padding-block:0 5rem; }

.single-layout,
.blog-layout {
  display:grid;
  grid-template-columns:1fr 320px;
  gap:4rem;
  align-items:start;
}

/* ── Article ── */
.single-article { min-width:0; }

.single-top-row {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:1.3rem;
}
.single-avatar {
  width:56px; height:56px; overflow:hidden;
  background:var(--ink-10); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.single-avatar img { width:100%; height:100%; object-fit:cover; }

.single-hero-caption {
  font-size:.8rem; color:var(--ink-40); margin:-1.3rem 0 2rem;
}
.single-hero-caption span { font-weight:700; color:var(--ink-60); }

.single-title {
  font-family:var(--fh); line-height:1.12;
  font-size:clamp(1.6rem,3vw,2.2rem);
  color:var(--ink); margin:.5rem 0 .8rem;
}

.single-meta {
  font-family:var(--fb); font-size:.78rem;
  color:var(--ink-40); margin-bottom:1.6rem;
}

.single-hero-img {
  margin-bottom:2rem; overflow:hidden;
}
.single-hero-img img {
  width:100%; height:auto; display:block;
}

.single-content {
  font-size:.92rem; color:var(--ink-60);
  line-height:1.85; max-width:680px;
}
.single-content p  { margin-bottom:1.1rem; }
.single-content h2,
.single-content h3 {
  font-family:var(--fb); font-weight:700;
  color:var(--ink); margin:1.8rem 0 .7rem;
}
.single-content img { max-width:100%; }

.single-back { margin-top:2.5rem; }

/* ── Sidebar ── */
.single-sidebar,
.blog-sidebar-col {
  position:sticky; top:80px;   /* stays visible while scrolling */
}

.sidebar-heading {
  font-family:var(--fb); font-size:.7rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.12em;
  color:var(--gw-gold); margin-bottom:1.2rem;
  padding-bottom:.6rem; border-bottom:2px solid var(--line);
}

.sidebar-news-list {
  display:flex; flex-direction:column; gap:1rem;
}

.sidebar-news-card {
  display:flex; gap:1rem; align-items:center;
  padding:1rem; border:1px solid var(--line);
  text-decoration:none; color:inherit;
  transition:border-color .2s,box-shadow .2s;
}
.sidebar-news-card:hover { border-color:var(--ink-40); box-shadow:0 2px 10px rgba(0,0,0,.06); }

.sidebar-news-img {
  flex-shrink:0; width:72px; height:72px;
  overflow:hidden; border:1px solid var(--line);
}
.sidebar-news-img img {
  width:100%; height:100%; object-fit:cover; display:block;
}
.sidebar-news-img--placeholder {
  width:100%; height:100%; background:var(--ink-10);
}

.sidebar-news-body {
  display:flex; flex-direction:column; gap:.5rem; min-width:0;
}
.sidebar-news-title {
  font-family:var(--fb); font-size:.92rem; font-weight:700;
  color:var(--ink); line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2;
  -webkit-box-orient:vertical; overflow:hidden;
}
.sidebar-news-date {
  display:inline-flex; align-items:center; gap:.35rem;
  font-size:.76rem; color:var(--ink-40); font-family:var(--fb);
}

/* ── Responsive ── */
@media (max-width:900px) {
  .single-layout,
  .blog-layout {
    grid-template-columns:1fr;
    gap:3rem;
  }
  .single-sidebar,
  .blog-sidebar-col { position:static; }
}

/* ════════════════════════════════════════════════════════════════
   BLOG LIST (home.php) — post cards + sidebar promo/categories
   ════════════════════════════════════════════════════════════════ */
.blog-list-sec {
  background: var(--gw-navy);
  padding-block:3.2rem 5rem;
  --ink:      #fff;
  --ink-60:   rgba(255,255,255,.72);
  --ink-40:   rgba(255,255,255,.52);
  --ink-10:   rgba(255,255,255,.08);
  --line:     rgba(255,255,255,.16);
}

.blog-list { display:flex; flex-direction:column; gap:0; min-width:0; }

.blog-card {
  display:flex; gap:1.6rem; align-items:flex-start;
  padding-bottom:2rem; margin-bottom:2rem;
  border-bottom:1px solid var(--line);
}
.blog-card:last-child { border-bottom:none; margin-bottom:0; padding-bottom:0; }
.blog-card-img {
  flex-shrink:0; width:260px; height:190px;
  overflow:hidden; display:block;
}
.blog-card-img img { width:100%; height:100%; object-fit:cover; display:block; }
.blog-card-img--placeholder { width:100%; height:100%; background:var(--ink-10); }

.blog-card-body { min-width:0; padding-top:.1rem; }

.blog-card-meta {
  display:flex; align-items:center; gap:.9rem; margin-bottom:.7rem;
}
.blog-card-date {
  display:inline-flex; align-items:center; gap:.4rem;
  font-family:var(--fb); font-size:.78rem; color:var(--ink-40);
}
.blog-card-badge {
  font-family:var(--fb); font-size:.72rem; font-weight:600;
  padding:.3rem .75rem;
  background:#f4e6c8; color:#8a6a2a;
  transition:background .18s,color .18s;
}
.blog-card-badge:hover { background:var(--gw-gold); color:#fff; }

.blog-card-title {
  font-family:var(--fb); font-weight:700; line-height:1.35;
  font-size:1.15rem; margin-bottom:.6rem;
  display:-webkit-box; -webkit-line-clamp:2;
  -webkit-box-orient:vertical; overflow:hidden;
}
.blog-card-title a { color:var(--ink); transition:color .18s; }
.blog-card-title a:hover { color:var(--gw-gold); }

.blog-card-excerpt {
  font-size:.88rem; color:var(--ink-60); line-height:1.75;
  margin-bottom:.9rem; text-align:justify;
  display:-webkit-box; -webkit-line-clamp:2;
  -webkit-box-orient:vertical; overflow:hidden;
}

.blog-card-more {
  font-family:var(--fb); font-size:.82rem; font-weight:700;
  color:var(--gw-gold); display:inline-flex; align-items:center; gap:.25rem;
}
.blog-card-more:hover { text-decoration:underline; }

/* ── Sidebar promo box ── */
.blog-promo {
  background:var(--white); border:1px solid var(--line);
  padding:2rem 1.5rem; text-align:center; margin-bottom:2.5rem;
  /* Self-contained white box — same reasoning as .cat-card: stays
     dark-on-white regardless of the section's own background. */
  --ink:      #1a1a1a;
  --ink-40:   #888;
  --line:     #e6e6e3;
  --ink-10:   #f7f5f0;
}
.blog-promo-avatar {
  width:110px; height:110px; overflow:hidden;
  background:var(--ink-10); border:1px solid var(--line);
  margin:0 auto 1.2rem;
  display:flex; align-items:center; justify-content:center;
}
.blog-promo-avatar img { width:100%; height:100%; object-fit:cover; }
.blog-promo-title {
  font-family:var(--fb); font-size:1.05rem; font-weight:700; color:var(--ink);
  margin-bottom:.3rem;
}
.blog-promo-sub { font-size:.82rem; color:var(--ink-40); margin-bottom:1.3rem; }
.blog-promo-social { display:flex; justify-content:center; gap:.6rem; }
.blog-promo-social a {
  width:34px; height:34px; border:1.5px solid var(--line);
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--ink); transition:background .18s,color .18s,border-color .18s;
}
.blog-promo-social a:hover { background:var(--gw-gold); border-color:var(--gw-gold); color:#fff; }

/* ── Sidebar boxes shared spacing (recent posts / categories) ── */
.blog-sidebar-box { margin-bottom:2.5rem; }
.blog-sidebar-box:last-child { margin-bottom:0; }

.blog-cat-list { display:flex; flex-direction:column; gap:.7rem; }
.blog-cat-list li a {
  display:block; padding:.7rem 1rem; border:1px solid var(--line);
  font-family:var(--fb); font-size:.85rem; font-weight:600;
  color:var(--ink); transition:border-color .18s,color .18s,background .18s;
}
.blog-cat-list li a:hover { border-color:var(--gw-gold); color:var(--gw-gold); background:var(--ink-10); }
.blog-cat-list li.current a {
  border-color:var(--gw-gold); color:#fff; background:var(--gw-gold);
}
.blog-cat-list li.current a:hover { color:#fff; }

@media (max-width:600px) {
  .blog-card { flex-direction:column; }
  .blog-card-img { width:100%; height:220px; }
}

/* ============================================================
   ΣΠΥΡΟΥ — Κοινό CSS για τις σελίδες "Εταιρεία" (.company-page)
   ------------------------------------------------------------
   Χρήση: βάλε το HTML της σελίδας (π.χ. ιστορικό, στατιστικά) μέσα
   σε ένα Custom HTML block ή στο Κειμενικό/Code editor του page,
   τυλιγμένο σε <div class="company-page">...</div> — καθόλου δικό
   του <style> μέσα στη σελίδα. Όλα τα στυλ ζουν εδώ, οπότε αλλαγή
   εδώ (π.χ. --gw-navy) ισχύει ταυτόχρονα σε όλες τις σελίδες
   που χρησιμοποιούν αυτή την κλάση.
   Όλα τα selectors παρακάτω είναι scoped κάτω από .company-page (ή
   ξεχωριστά ονόματα custom properties), οπότε δεν συγκρούονται με
   τίποτα άλλο στο υπόλοιπο theme.
   ============================================================ */
:root {
  /* --gw-navy / --gw-navy-dark now come from the theme-wide token
     block at the top of this file (single source of truth — see
     Phase 2 of the rebrand plan). Only page-scoped tokens with no
     global equivalent are declared here. */
  --gw-cream: #f2efe9;
  --gw-ink: #1a1a1a;
  --gw-body: #3d3d3d;
  --gw-border: #e2ddd2;
  --gw-card-bg: #f7f5f0;
  --gw-placeholder: #d9d9d9;
  --font-heading: var(--fh);
  --font-body: var(--ft);
  --radius-sm: 4px;
  --container-w: 1180px;
}

.company-page * { box-sizing: border-box; }

.company-page {
  font-family: var(--font-body);
  color: white;
  line-height: 1.65;
  /* Base body-text size for every company-page (Καταστατικό, Ιστορικό,
     Επιτροπές, κ.λπ.) — inherited by any paragraph/section that doesn't
     set its own font-size (timeline entries, archives, intro text...),
     so all of them read at the same size without needing a rule each.
     Headings, badges, and buttons keep their own explicit sizes below
     and are unaffected. */
  font-size: .9rem;
  /* Justify is intentional here (client's call) — it still works fine
     together with the floated .intro-figure image above: text simply
     justifies within whatever width is left after wrapping around it. */
  text-align: justify;
}

/* Headings always stay left-aligned regardless of the justify above —
   justify on a heading (especially one that wraps to 2+ lines, e.g. a
   long h2 like "Σπόροι φυτών μεγάλης καλλιέργειας") stretches word
   spacing unevenly and reads badly. Covers every level, not just the
   ones currently in use, so a future h1/h4/h5 doesn't need this same
   fix rediscovered later. */
.company-page h1,
.company-page h2,
.company-page h3,
.company-page h4,
.company-page h5 {
  text-align: left;
}

.company-page .wrap {
  /* page.php already wraps the_content() in its own <div class="container">
     (same max-width, same responsive padding) before this markup even
     starts — so giving .wrap its own copy of both was compounding into
     a double indent instead of fixing the alignment. This class is kept
     (rather than deleted from every section's markup) purely so nothing
     else needs to change; it does no layout work of its own anymore. */
  max-width: none;
  margin: 0;
  padding-inline: 0;
}

/* ---------- Intro section ---------- */
.company-page .intro-section {
  padding: 64px 0 48px;
}

.company-page .intro-section h2 {
  font-family: var(--font-heading);
  font-size: 26px;
  color: #fff;
  margin: 0 0 28px;
}

.company-page .intro-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  font-size: .9rem;
}

.company-page .intro-columns .with-figure {
  /* Text wraps AROUND the badge (float), not beside it in a fixed
     column — so this is no longer a flex row. Since the only child
     here is a floated element, the container needs its own clearfix
     (below) or it would collapse to zero height. */
}
.company-page .intro-columns .with-figure::after {
  content: "";
  display: table;
  clear: both;
}

.company-page .intro-figure {
  float: left;
  shape-outside: circle(50%);
  margin: 0 20px 12px 0;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--gw-placeholder);
  overflow: hidden;
}

.company-page .intro-figure img { width: 100%; height: 100%; object-fit: cover; }

.company-page .intro-columns p { margin: 0 0 16px; }

@media (max-width: 860px) {
  .company-page .intro-columns { grid-template-columns: 1fr; }
}

/* ---------- Info cards (3-up) ---------- */
.company-page .info-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding: 40px 0 56px;
}

.company-page .info-card {
  background: var(--gw-navy-dark);
  border: none;
  border-radius: var(--radius-sm);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  /* Self-contained light card — same reasoning as .cat-card elsewhere:
     .company-page just switched to white text for its navy background,
     but this card's own background stays light, so anything inside it
     without its own explicit color (e.g. .info-card__desc) must not
     inherit that white — reset back to the original dark body colour
     here, scoped to just this card. */
  color: #fff;
}

.company-page .info-card__icon {
  width: 82px;
  height: 82px;
  border-radius: var(--radius-sm);
  margin-bottom: 20px;
}
/* When this class is used on a real <img> (the category icons below),
   the SVG itself already draws the navy rounded square + white glyph —
   so the gray placeholder background above must NOT show through. */
img.info-card__icon {
  background: none;
  width: 82px;
  height: 82px;
  display: block;
}

.company-page .info-card h3 {
  font-family: var(--font-heading);
  font-size: 27px;
  color: #fff;
  margin: 0 0 12px;
  font-weight: 400;
  line-height: 1.05;
  text-align: left;
  /* Reserves room for exactly 3 lines regardless of the actual title
     length (1, 2, or 3 lines) — so .info-card__desc below always
     starts at the same vertical position across the 3-up grid instead
     of "dancing" based on how long each card's title happens to be.
     em is relative to THIS element's own font-size, so it stays
     correct even if font-size changes later. */
  min-height: calc(1.05em * 3);
}

/* Uses an explicit class (not a bare "p" selector) on purpose: WordPress's
   wpautop auto-wraps loose/untagged content in <p> tags — including the
   icon <img> itself if it's left untagged — so a generic ".info-card p"
   selector would also catch that auto-wrapped icon paragraph and give it
   flex:1 too, fighting the real description paragraph for space. Always
   write the description as <p class="info-card__desc"> explicitly in the
   HTML (see the info-cards-section snippet) rather than leaving it as
   bare text and hoping wpautop wraps it the same way every time. */
/* Small role tag ABOVE the name (e.g. "Πρόεδρος, Εκτελεστικό Μέλος") —
   same pill-badge look as .bio-role in the popup, so the preview card
   and the expanded popup read as the same design language. .info-card
   p already have flex:1 by default (see .info-card__desc below); this
   stays a normal (non-growing) element since it's a short fixed-height
   label, not the flexible description text. */
.company-page .info-card__role {
  display: inline-block;
  align-self: flex-start;
  background: var(--ink-10);
  color: var(--gw-navy-dark);
  font-weight: 600;
  font-size: .92rem;
  letter-spacing: .03em;
  padding: 6px 0px 10px 0;
  border-radius: 999px;
  text-align: left;
}

.company-page .info-card__desc {
  flex: 1;
  margin: 0 0 24px;
  font-size: .9rem;
  text-align: left;
}
/* Safety net: if wpautop still wraps the icon or the link in their own
   unclassed <p> (harmless on its own, but the default browser <p> margin
   would throw off the tight icon/label spacing), zero it out. */
.company-page .info-card > p:not(.info-card__desc) { margin: 0; }

.company-page .info-card__link {
  display: inline-block;
  width: 100%;
  text-align: center;
  border: 1px solid #0c4076;
  border-radius: var(--radius-sm);
  padding: 12px 20px;
  text-decoration: none;
  background: #0c4076;
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.company-page .info-card__link:hover {
  background: var(--gw-gold);
  border-color: var(--gw-gold);
  color: #fff;
}

/* First/featured card: filled navy button by default (not just on
   hover) — matches the design, where one card is visually the primary
   pick and the other two stay outline. */
.company-page .info-card__link--solid {
  background: var(--gw-navy);
  color: #fff;
}
.company-page .info-card__link--solid:hover {
  background: var(--gw-navy-dark);
}

/* "Περισσότερα…" — opens the full text in the bio-modal popup (same
   system as the board-member bios). Deliberately understated (plain
   text link, no border/background) so it doesn't visually compete with
   the actual file-download button below it — that one is the real
   call to action, this is just "expand the teaser text". */
.company-page .info-card__more {
  display: inline-block;
  align-self: flex-start;
  background: none;
  border: none;
  padding: 0;
  margin: 0 0 16px;
  color: #fff;
  font-size: .85rem;
  text-decoration: underline;
  cursor: pointer;
}
.company-page .info-card__more:hover { color: var(--gw-gold); }

@media (max-width: 860px) {
  .company-page .info-cards { grid-template-columns: 1fr; }
}

/* ---------- Timeline entries (Το 2015 / Το 2016 ...) ---------- */
.company-page .timeline {
  /* No padding of its own on purpose — see the note on .archives-section
     below. Every entry already carries its own 32px top+bottom, so the
     rhythm between "Το 2015" / "Το 2016" / "Αρχεία" stays identical
     (32px + 32px = 64px) no matter which two sections are adjacent. A
     second padding here used to stack on top of that and make the gap
     before "Αρχεία" different from the gap between two timeline years. */
}

.company-page .timeline-entry {
  padding: 32px 0;
}

.company-page .timeline-entry h2 {
  font-family: var(--font-heading);
  font-size: 24px;
  color: #fff;
  margin: 0 0 16px;
}

/* ── Shared rich-text list rule ────────────────────────────────────────
   ONE rule for lists written by editors inside content areas — company
   pages (History, Vision…), blog posts, generic pages, job descriptions,
   FAQ answers, long product text. Before this, only .timeline-entry had
   bullets/spacing (the global `ul,ol{list-style:none}` reset strips them
   everywhere else) and lists sat right against the paragraph above/below.
   - bullets: disc / decimal, 1.3rem indent
   - space above (.9rem) so a lead-in line like "…we focus on:" is not
     glued to its list, and below (1.25rem) before the next paragraph
   - items 0.45rem apart (was 8px on company pages — too loose next to
     the .9rem body text)
   Only bare lists (no class) and Gutenberg's .wp-block-list are touched,
   so component lists (nav, footer, FAQ list, info-cards, .pd-bullet-list,
   category grids…) keep their own styling untouched. */
:is(.company-page, .single-content, .page-content, .job-single-desc, .faq-pi, .pd-full-content)
  :is(ul:not([class]), ul.wp-block-list) {
  list-style: disc;
  margin: .9rem 0 1.25rem;
  padding-left: 1.3rem;
}
:is(.company-page, .single-content, .page-content, .job-single-desc, .faq-pi, .pd-full-content)
  :is(ol:not([class]), ol.wp-block-list) {
  list-style: decimal;
  margin: .9rem 0 1.25rem;
  padding-left: 1.5rem;
}
:is(.company-page, .single-content, .page-content, .job-single-desc, .faq-pi, .pd-full-content)
  :is(ul:not([class]), ol:not([class]), .wp-block-list) > li {
  margin-bottom: .45rem;
}
:is(.company-page, .single-content, .page-content, .job-single-desc, .faq-pi, .pd-full-content)
  :is(ul:not([class]), ol:not([class]), .wp-block-list) > li:last-child {
  margin-bottom: 0;
}
/* Paragraph spacing for the same content areas. The global reset zeroes
   every <p> margin, so consecutive paragraphs written in the editor sat
   line against line (History page, FAQ answers, generic pages). Low
   specificity on purpose: component-specific paragraph rules
   (.intro-columns p, .timeline-entry p, .archives-section p, …) are more
   specific and keep winning. A paragraph that is only a bold lead-in
   line ("Sustainable yields in…") stays close to the text it introduces,
   and the last paragraph of a block adds no trailing gap. */
:is(.company-page, .single-content, .page-content, .job-single-desc, .faq-pi, .pd-full-content) p {
  margin-bottom: 1.1rem;
}
:is(.company-page, .single-content, .page-content, .job-single-desc, .faq-pi, .pd-full-content) p:has(> strong:only-child) {
  margin-bottom: .4rem;
}
:is(.company-page, .single-content, .page-content, .job-single-desc, .faq-pi, .pd-full-content) p:last-child {
  margin-bottom: 0;
}

/* nested lists sit tight under their parent item */
:is(.company-page, .single-content, .page-content, .job-single-desc, .faq-pi, .pd-full-content)
  li > :is(ul:not([class]), ol:not([class])) {
  margin: .45rem 0 0;
}

.company-page .timeline-entry p { margin: 0 0 16px; }

/* ---------- "Αρχεία" section (e.g. link to the company presentation) ----------
   Padding/heading style intentionally mirrors .timeline-entry exactly
   (same 32px top padding, same h2 size/color/margin) so this reads as
   one continuous rhythm of sections, not a visually different tacked-on
   block. */
.company-page .archives-section {
  padding: 32px 0 64px;
}

.company-page .archives-section h2 {
  font-family: var(--font-heading);
  font-size: 24px;
  color: #fff;
  margin: 0 0 16px;
}

.company-page .archives-section p { margin: 0; }

.company-page .archives-section a {
  color: var(--gw-gold);
  text-decoration: underline;
}
.company-page .archives-section a:hover { color: var(--gw-gold-dk); }

/* ---------- Closing tagline strip ---------- */
.company-page .closing-tagline {
  padding: 8px 0 64px;
}

.company-page .closing-tagline h2 {
  font-family: var(--font-heading);
  font-size: 22px;
  color: #fff;
  margin: 0;
}

/* ============================================================
   ΣΠΥΡΟΥ — "Ενημέρωση μετόχων" (investor_notice CPT) accordion
   ------------------------------------------------------------
   See page-templates/investors.php for the markup this styles.
   Scoped under .investor-notices only — not .company-page, since
   this lives on its own selectable Page Template, not a Custom
   HTML block.
   ============================================================ */
.investor-notices-section { padding: 32px 0 64px; }

.investor-filter {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}
.investor-filter label {
  font-size: .9rem;
  font-weight: 600;
  color: var(--ink);
}
.investor-filter select {
  font-family: var(--fb);
  font-size: .9rem;
  padding: 8px 12px;
  border: 1px solid var(--gw-border, #e2ddd2);
  border-radius: var(--radius-sm, 4px);
  background: #fff;
  color: var(--ink);
  cursor: pointer;
}

.investor-notices {
  border-top: 1px solid var(--gw-border, #e2ddd2);
}

.investor-year-group {
  border-bottom: 1px solid var(--gw-border, #e2ddd2);
}

.investor-year-header {
  width: 100%;
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: 14px 18px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--fb);
  font-size: .95rem;
  font-weight: 600;
  color: var(--ink);
  transition: background .18s, color .18s;
}
.investor-year-header:hover { background: var(--ink-10); }

/* Open state — matches the client's "navy bar, white text" reference */
.investor-year-header[aria-expanded="true"] {
  background: var(--gw-navy, #0f2a5c);
  color: #fff;
}

.investor-year-chevron {
  display: inline-block;
  width: .625rem;
  height: .375rem;
  margin-left: 30px;
  background-color: currentColor;
  opacity: .8;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-image: url(../img/icons/arrow-drop-down.svg);
  mask-image: url(../img/icons/arrow-drop-down.svg);
  transition: transform .18s;
}
/* Closed groups show a right-pointing arrow (─▸, "expand me"); the open
   one rotates to point down (already resting on the ground, so to
   speak) — reuses the same down-chevron asset as everywhere else in the
   theme rather than shipping a second icon file for a 90°-rotated twin. */
.investor-year-header[aria-expanded="false"] .investor-year-chevron {
  transform: rotate(-90deg);
}

.investor-year-panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height .38s var(--ez);
}

.investor-year-panel-inner { padding: 4px 18px 18px; }

.investor-notice-row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 8px 0;
  font-size: .9rem;
}

.investor-notice-date {
  flex: 0 0 auto;
  color: var(--ink-60, #6b6b6b);
  font-variant-numeric: tabular-nums;
}

.investor-notice-title { color: var(--ink); text-decoration: none; }
a.investor-notice-title:hover { color: var(--gw-navy, #0f2a5c); text-decoration: underline; }

.investor-notices-empty { padding: 24px 0; color: var(--ink-60, #6b6b6b); }

/* ============================================================
   Generic "read more" bio popup — used first for the board-member
   cards on "Δομή και οργάνωση" (each card's button references a
   hidden .bio-content block by id via data-bio-target — see the
   usage note in assets/js/bio-modal.js), but written generic enough
   to reuse anywhere else a "Περισσότερα" should open a popup instead
   of navigating away.
   ============================================================ */
.bio-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.bio-modal[hidden] { display: none; }

.bio-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(12, 16, 26, .6);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.bio-modal__panel {
  position: relative;
  background: #fff;
  border-radius: 20px;
  max-width: 720px;
  width: 100%;
  max-height: 85vh;
  /* No longer scrolls itself — see .bio-modal__scroll below, which is
     the ONLY part that scrolls, so the name/role header stays put. */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* Bottom padding restored here (not just on .bio-modal__scroll) —
     padding on the scroll wrapper alone only ever shows once scrolled
     all the way to its end; the VIEWPORT itself needs its own inset so
     text isn't flush against the rounded corner at rest. */
  padding: 56px 56px 32px;
  box-shadow: 0 24px 70px rgba(15, 20, 30, .3);
  /* Thin brand-colored top edge instead of a heavier bar — reads as a
     deliberate accent rather than a banner. */
  border-top: 4px solid var(--gw-navy, #0f2a5c);
  /* Entrance animation: starts slightly down + scaled + transparent,
     settles into place. bio-modal.js adds .is-open a frame after
     removing [hidden] so the transition actually has something to
     animate from (toggling [hidden] alone can't transition). */
  opacity: 0;
  transform: translateY(12px) scale(.97);
  transition: opacity .22s ease, transform .22s ease;
}
.bio-modal.is-open .bio-modal__panel {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.bio-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: var(--ink-10, #f7f5f0);
  font-size: 1.6rem;
  line-height: 1;
  color: var(--ink-60, #6b6b6b);
  cursor: pointer;
  border-radius: 50%;
  transition: background .15s, color .15s, transform .15s;
}
.bio-modal__close:hover {
  background: var(--gw-navy, #0f2a5c);
  color: #fff;
  transform: rotate(90deg);
}

.bio-modal__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0; /* required for the child's overflow-y:auto to actually kick in inside a flex column */
}
/* Wraps everything EXCEPT the name/role (added around them by
   bio-modal.js right after the bio content is injected) — this is the
   only element that scrolls, so the header above it stays fixed in
   view no matter how long the bio text is. */
.bio-modal__scroll {
  order: 3;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  padding-top: 4px;
  padding-bottom: 8px;
  padding-right: 8px; /* keeps text clear of the scrollbar */
}
.bio-modal__body h3 {
  order: 1;
  font-family: var(--font-heading, var(--fh));
  font-size: 28px;
  color: var(--gw-ink, #1a1a1a);
  margin: 0 0 14px;
}
.bio-modal__body .bio-role {
  /* Pill badge, not just colored text — reads as a modern "tag" rather
     than a plain label line. */
  order: 2;
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  color: var(--gw-navy, #0f2a5c);
  background: var(--ink-10, #f7f5f0);
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .04em;
  padding: 6px 14px;
  border-radius: 999px;
  margin: 0 0 22px;
}
.bio-modal__body p {
  text-align: left;
  line-height: 1.7;
  margin: 0 0 16px;
}
.bio-modal__body p:last-child { margin-bottom: 0; }