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

/* ── BRAND FONTS ─────────────────────────────────────────────
   Self-hosted (assets/fonts/), no external Google Fonts request.
   Titles: PF Bague Sans Pro (Medium) — H1 46px, H2 30px (below).
   Body:   Asty CF Std (Book).
   ──────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'PF Bague Sans Pro';
  src: url('../fonts/pf-bague-sans-pro-medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: optional;
}
@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: optional;
}
@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: optional;
}

/* ── 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: #001928;      /* 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 Bague Sans Pro 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 Bague Sans Pro', 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; }
body { font-family:var(--ft); color:var(--ink); line-height:1.5; background:var(--white); }
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 Medium 46px, H2 Medium 30px).
   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); font-weight:500; }
h1 { font-size:46px; }
h2 { font-size:30px; }

/* 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; }

/* ── 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); }

/* ── 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);
  font-weight:400; 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 Bague Sans Pro (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(--ft); font-weight:400; }
#news .h2 { font-family:var(--ft); font-weight:400; }
#products .h2 { font-family:var(--ft); font-weight:400; }

/* ── BUTTONS ────────────────────────────────────────────────── */
.btn-primary {
  display:inline-flex; align-items:center; justify-content:center;
  padding:.7rem 1.7rem; background:var(--gw-gold); color:#fff;
  font-family:var(--fb); font-size:.82rem; font-weight:600;
  border-radius:3px; border:2px solid var(--gw-gold);
  transition:background .18s var(--ez), border-color .18s;
}
.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 .75rem; 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:#fff; 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;
}
.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. */
.lang-switch { display:flex; align-items:center; gap:.4rem; list-style:none; margin:0; padding:0; }
.lang-switch-item {
  display:flex; width:22px; height:22px; border-radius:50%; overflow:hidden;
  opacity:.55; transition:opacity .18s, box-shadow .18s;
}
.lang-switch-item img { width:100%; height:100%; object-fit:cover; }
.lang-switch-item:hover,
.lang-switch-item.is-active { opacity:1; box-shadow:0 0 0 2px var(--gw-gold); }

.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);
  }
  .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:580px;
  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; }
/* 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'); }

/* 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-scrim {
  position:absolute; inset:0;
  background:linear-gradient(108deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.55) 38%,rgba(0,0,0,.08) 75%,transparent 100%);
}
.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:3.3rem;
  font-weight:800; line-height:1.06;
  color:#fff; max-width:100%;
  letter-spacing:-.01em;
  text-shadow:0 2px 16px rgba(0,0,0,.25);
}
/* 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(--ft); font-weight:400; font-size:clamp(1.8rem, 3.4vw, 3.2rem); line-height:0.9; margin-bottom:1.75rem; }

.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; font-weight:500; 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);
}

/* 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:-17px; top:50%; transform:translateY(-50%);
  width:240px; height:100%;
  background:url('../img/research-cotton.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);
  font-weight:500; line-height:1.55; color:var(--ink);
}
.r-statement strong { font-weight:900; }
.r-statement em     { color:var(--gw-gold); font-style:normal; font-weight:700; }

.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; }

/* Homepage product grid overrides — the shared product-card.php template-part
   uses .lp-card/.lp-img-wrap which are tuned for the square catalog grid.
   On the homepage we want taller portrait images, so we override here. */
.prod-grid .lp-img-wrap {
  aspect-ratio: unset;
  height: 320px;
  margin-bottom: 0;
}
.prod-grid .lp-name {
  padding: .6rem 0 0;
  font-size: 1.1rem;
  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:var(--ink-10); 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:#fff; }
.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-navy); }
/* .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 font-weight:700 on it has no matching
   file and silently renders as regular. PF Bague Sans Pro (var(--fh))
   is the only other font loaded, at weight 500 — the heaviest weight
   actually available site-wide — so that's what's used here instead. */
.company-page .faq-q { font-family:var(--fh); font-weight:500; 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 font-weight limitation as the .company-page fix above: .faq-q's
   own font (Asty CF Std) only has weight 400 loaded, so it needs PF
   Bague Sans Pro (weight 500) to actually render heavier. */
#faq .faq-q { font-family:var(--fh); font-weight:500; 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-bottom:7%; }
.center-hd { text-align:center; margin-bottom:2.6rem; }

.news-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; }
.n-card {
  background:#fff; overflow:hidden;
  box-shadow:0 1px 5px rgba(0,0,0,.06);
  transition:box-shadow .28s, transform .28s;
}
.n-card:hover { box-shadow:0 8px 24px rgba(0,0,0,.1); transform:translateY(-4px); }
.n-img { display:block; overflow:hidden; height:200px; }
.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;
  -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; inset:0;
  background:url('../img/contact-bg.jpg') center/cover no-repeat;
}
.ct-veil {
  position:absolute; inset:0;
  background:linear-gradient(100deg,rgba(8,12,20,.92) 0%,rgba(8,12,20,.84) 50%,rgba(8,12,20,.76) 100%);
}
.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);
  font-weight:800; line-height:1.16; color:#fff;
}

/* Form card */
.form-box { background:#fff;  padding:2rem; box-shadow:0 14px 48px rgba(0,0,0,.2); }
.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; }

/* 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; }

/* ════════════════ FOOTER ═══════════════════════════════════════ */
footer { background:var(--gw-navy-dark); color:#fff; padding:3.8rem 0 1.6rem; }
.ft-grid {
  display:grid; grid-template-columns:1.8fr 1fr 1fr 1fr 1fr;
  gap:2rem 2.5rem; margin-bottom:3rem;
}
.ft-logo {
  display:inline-flex; align-items:center; margin-bottom:.6rem;
}
.ft-logo img   { height:42px; width:auto; display:block; }
.ft-badge-75   { display:block; max-width:244px; width:100%; height:auto; margin-top:10px; margin-bottom:.85rem; }
.ft-brand p { font-size:.78rem; color:rgba(255,255,255,.78); line-height:1.7; }
.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:#fff;
  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      { 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; }
  .prod-grid    { grid-template-columns:1fr; }
  .news-grid    { grid-template-columns:1fr; }
  .fr.two       { grid-template-columns:1fr; }
  .ft-grid      { 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);
  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); font-weight:500; 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; }

/* 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(--white); padding-block:5rem 2rem; }
.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; font-weight:700;
  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(--white); padding-block:5rem 1rem; }
.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(--white); padding-block:1rem 5rem; }
.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(--white); padding-block:3rem 5rem; }
.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:var(--ink);
  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;
}
.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;
}
.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(--white); padding-block:3.5rem 2.5rem; text-align:center; }
.pd-tagline {
  font-family:var(--ft); font-weight:400; color:var(--gw-gold);
  font-size:clamp(1.3rem,2.6vw,1.9rem);
}

.sec-pd { background:var(--white); padding-block:0 4rem; }
.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-weight:900; 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:56px; 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(--white); padding-block:1rem 5rem; }
.related-h2 { font-family:var(--fh); font-weight:800; font-size:1.7rem; margin-bottom:1.8rem; }
.related-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; }
.custom-1{font-size: 40px;
    line-height: 46px;}
@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)
   ════════════════════════════════════════════════════════════════ */

/* Section 2 two-column layout (cotton) */
.sec-pd-extra {
  padding-block:4rem 5rem;
  background:var(--ink-10);
  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; font-weight:700;
  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(--ink-10);
  border-top:1px solid var(--line);
}
.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);
  font-weight:700; 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:700;
  text-transform:uppercase; letter-spacing:.08em;
  color:var(--ink-40); 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(--ink-10); }
.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:.95rem; font-weight:700;
  margin-bottom:1rem;
}
.pd-fiber h3 {
  font-family:var(--fb); font-size:.95rem; font-weight:700;
  margin-bottom:1rem;
}
/* Μηδική: χωρίς κόκκινη γραμμή */
.pd-diseases h3 {
  font-family:var(--fb); font-size:.95rem; font-weight:700;
  margin-bottom:1rem;
}
.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;
}
.pd-content-heading {
  font-family:var(--fh); font-size:clamp(1.4rem,2.5vw,1.9rem);
  font-weight:700; 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); font-weight:800; 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 { padding-block:3.2rem 5rem; }

.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;
}
.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: var(--gw-body);
  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: var(--gw-navy);
  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-card-bg);
  border: 1px solid var(--gw-border);
  border-radius: var(--radius-sm);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
}

.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: var(--gw-ink);
  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);
  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 var(--gw-navy);
  border-radius: var(--radius-sm);
  padding: 12px 20px;
  text-decoration: none;
  color: var(--gw-navy);
  font-weight: 600;
  font-size: 15px;
  transition: background 0.15s ease, color 0.15s ease;
}

.company-page .info-card__link:hover {
  background: var(--gw-navy);
  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: var(--gw-navy);
  font-size: .85rem;
  text-decoration: underline;
  cursor: pointer;
}
.company-page .info-card__more:hover { color: var(--gw-navy-dark); }

@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: var(--gw-navy);
  margin: 0 0 16px;
}

.company-page .timeline-entry ul {
  list-style: disc;
  margin: 0 0 16px;
  padding-left: 20px;
}

.company-page .timeline-entry li { margin-bottom: 8px; }

.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: var(--gw-navy);
  margin: 0 0 16px;
}

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

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

/* ---------- 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: var(--gw-ink);
  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; }