/* Raleway is already loaded in header.php */

.ff-footer__h{
  font-family: "Raleway", sans-serif;
}


/* --- Base --- */
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:#111}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0; list-style:none;}

/* Container full width + 80px padding */
.ff-wrap{
  width:100%;
  padding-left:80px;
  padding-right:80px;
}

body.ff-page{
  /* fallback: onderkant altijd 100% wit */
  background-color: #fff;

  /* gradient alleen in het begin van de pagina */
  background-image: linear-gradient(to bottom, #eee 0%, #fff 100%);
  background-repeat: no-repeat;
  background-size: 100% 900px; /* <-- pas dit getal aan (bv 700-1200px) */

  min-height: 100vh;
}

@media (max-width: 1024px){
  .ff-wrap{padding-left:20px;padding-right:20px;}
}

/* --- Header sections --- */
.ff-header{width:100%}

/* Section 1: logo centered */
.ff-topbar{
  padding:10px 0;
}
.ff-logo{
  font-family:"Raleway", Sans-serif;
  font-size:24px;
  font-weight:700;
  color:#000;
  text-align:center;
  letter-spacing:1px;
}

/* Section 2: menu + search + button */
.ff-navbar{
  border-top:1px solid #eee;
  border-bottom:1px solid #eee;
  padding:22px 0;
}

/* Sticky header: alleen de navbar (menu + search + knop) */
.ff-navbar{
  position: sticky;
  top: 0;
  z-index: 900;          /* moet hoger dan content */
  background: #fff;      /* zodat het niet “doorzichtig” is */
  border-bottom: 1px solid #eee;
}

/* Sticky navbar (JS-variant) */
.ff-navbar.is-sticky{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 2000;
  background: #fff;
  border-bottom: 1px solid #eee;
}

/* Spacer element dat JS injecteert om “jump” te voorkomen */
.ff-sticky-spacer{
  height: 0;
}

/* (optioneel) als je topbar erboven wilt laten verdwijnen tijdens scroll,
   dan laat je .ff-topbar gewoon normaal staan. */
.ff-navgrid{
  display:flex;
  align-items:center;
  gap:18px;
}
.ff-col-menu{flex:0 0 67%;}
.ff-col-search{flex:0 0 20%;}
.ff-col-cta{flex:1;display:flex;justify-content:flex-end;}

/* Desktop menu */
.ff-menu{
  display:flex;
  gap:18px;
  align-items:center;
  flex-wrap:wrap;
}

/* ===== Mega menu (fixed, always full-width from left) ===== */
.ff-menu > li{position:static;} /* belangrijk */

.ff-menu > li > a{
  font-weight:400;
  font-size:16px;
  padding:10px 10px;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.ff-menu > li > a:hover{color:#cc0000}

.ff-mega{
  position:fixed;
  left:0;
  right:0;
  width:100vw;
  top:var(--ff-mega-top, 0px);
  background:#fff;
  border-top:1px solid #eee;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
  padding:50px 0;
  display:none;
  z-index:500;
  margin-top:-10px;
}

.ff-mega:hover{ display:block; }

.ff-mega::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-20px;
  height:20px;
  background:transparent;
}

.ff-menu > li:hover .ff-mega{display:block}

/* Extra zekerheid: hover blijft actief via parent */
.ff-menu > li:hover > .ff-mega,
.ff-menu > li:focus-within > .ff-mega{
  display:block;
}

/* ✅ WRAP niet als flex gebruiken, maar de grid-wrapper */
.ff-mega .ff-wrap{
  display:block;
}

/* ✅ Nieuwe wrapper uit header.php: dit is nu de layout container */
.ff-mega-grid{
  display:flex;
  flex-wrap:wrap;     /* zodat jouw "2e rij" automatisch naar beneden gaat */
  gap:0;              /* borders doen het grid-werk */
}

/* Kolommen */
.ff-mega-col{
  width:20%;
  min-width:160px;
  padding:0 30px;
  border-right:1px solid #eee;
  box-sizing:border-box;
}

/* ✅ elke 5e kolom (einde van rij) geen rechter border */
.ff-mega-col:nth-child(5n){
  border-right:0;
}

/* ✅ ook de laatste kolom geen border */
.ff-mega-col:last-child{
  border-right:0;
}

/* Titel */
.ff-mega-title{
  font-weight:600;
  margin-bottom:14px;
}

/* Als je lege titels hebt (ik render een empty placeholder) */
.ff-mega-title--empty{
  height: 24px;      /* houdt uitlijning strak */
  margin-bottom:14px;
}

/* Zorg dat elke kolom exact dezelfde titel-ruimte heeft */
.ff-mega-title{
  min-height: 24px;          /* pas aan tot het exact gelijk oogt */
  display: flex;
  align-items: flex-end;     /* of center, afhankelijk van je design */
}

/* Lege titel: behoud hoogte maar toon niks */
.ff-mega-title--empty{
  visibility: hidden;        /* neemt ruimte in, maar niet zichtbaar */
}

/* Links */
.ff-mega-links{
  list-style:none;
  padding:0;
  margin:0;
}
.ff-mega-links li a{
  display:flex;
  align-items:center;
  gap:10px;
  padding:6px 0;
  font-size:14px;
  color:#222;
  border-bottom:1px solid #eee;
  text-decoration:none;
}

/* “Angle right” */
.ff-mega-links li a::before{
  content:"›";
  display:inline-block;
  width:12px;
  color:#999;
  font-weight:900;
  transform:translateY(-1px);
}

.ff-mega-links li a:hover{color:#cc0000}

.ff-mega-more{
  display:inline-block;
  margin-top:14px;
  font-size:14px;
  text-decoration:none;
  font-weight:500;
  margin-bottom:40px
}
.ff-mega-more:hover{text-decoration:underline}

/* Search */
.ff-search{
  position:relative;
  display:flex;
  align-items:stretch;
  width:100%;
  z-index:1001;
}
.ff-search input{
  width:100%;
  border:none;
  background:#f8f8f8;
  padding:14px 24px;
  border-radius:0px;
  outline:none;
  font-size:14px;
}
.ff-search button{
  width:44px;
  border:none;
  background:#cc0000;
  color:#fff;
    cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.ff-search button:hover{filter:brightness(.95)}
.ff-search svg{width:18px;height:18px}

/* Search dropdown */
.ff-search-dd{
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  right:0;
  background:#fff;
  border:1px solid #eee;
  box-shadow:0 10px 24px rgba(0,0,0,.08);
  border-radius:8px;
  overflow:hidden;
  display:none;
  z-index:2000;
}
.ff-search-dd.open{display:block}
.ff-search-item{
  display:flex;
  gap:12px;
  padding:10px;
  align-items:center;
}
.ff-search-item:hover{background:#fafafa}
.ff-search-thumb{
  width:80px;height:80px;
  flex:0 0 80px;
  background:#f2f2f2;
  border-radius:6px;
  overflow:hidden;
}
.ff-search-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.ff-search-title{
  font-size:14px;
  font-weight:600;
}
.ff-search-footer{
  padding:10px;
  border-top:1px solid #eee;
  background:#fff;
}
.ff-search-footer a{
  text-decoration:underline;
  font-weight:600;
  font-size:14px;
}

/* CTA button */
.ff-btn-outline{
  border:1px solid #333;
  color:#333;
  background:#fff;
  padding:14px 24px;
  border-radius:0px;
  font-weight:700;
  letter-spacing:.6px;
  font-size:13px;
}
.ff-btn-outline:hover{background:#f7f7f7}

/* Section 3 banner */
.ff-banner{
  background:#aaa;
  color:#fff;
  padding:14px 0;
}
.ff-banner .ff-text{
  text-align:center;
  font-size:14px;
}

/* --- Mobile menu --- */
.ff-mobilebar{
  display:none;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:5px 0;
}
.ff-burger{
  width:34px;height:30px;
  border-right:1px solid #eee;
  border-left: 0px solid #eee;
  border-bottom: 0px solid #eee;
  border-top: 0px solid #eee;
  background:#fff;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.ff-burger svg{width:22px;height:22px}

@media (max-width: 1024px){
  .ff-col-menu{display:none;}
  .ff-col-search{flex:1;}
  .ff-col-cta{display:none;}
  .ff-mobilebar{display:flex;}

  /* mega menu op mobiel niet via hover tonen */
  .ff-mega{display:none !important;}
}

/* Mobile drawer */
.ff-drawer{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.35);
  z-index:200;
}
.ff-drawer.open{display:block}
.ff-drawer-panel{
  width:min(360px, 90vw);
  height:100%;
  background:#fff;
  padding:16px;
  overflow:auto;
}
.ff-drawer-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:10px;
}
.ff-drawer-close{
  border:1px solid #eee;
  background:#fff;
  border-radius:8px;
  padding:8px 10px;
  cursor:pointer;
}
.ff-mnav a{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 6px;
  border-bottom:1px solid #f0f0f0;
  font-weight:600;
}
.ff-arrow{
  width:18px;height:18px;opacity:.7;
}
.ff-sub{
  display:none;
  padding-left:12px;
}
.ff-sub.open{display:block}
.ff-sub a{
  font-weight:500;
  color:#222;
}

/* ===== Mobile drawer: FULL WIDTH white background ===== */
@media (max-width: 1024px){
  .ff-drawer-panel{
    width:100vw;     /* was min(360px, 90vw) */
    max-width:none;
    border-radius:0;
    padding:18px;
  }
}

/* =========================
   HEADER - MOBILE FIX
   ========================= */
@media (max-width: 900px){

  /* maak de navgrid op mobiel: burger + search naast elkaar */
  .ff-navgrid{
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    gap: 12px !important;
    align-items: center !important;
  }

  /* menu en CTA verbergen op mobiel (alleen burger + search) */
  .ff-col-menu,
  .ff-col-cta{
    display: none !important;
  }

  /* burger links in kolom 1 */
  .ff-mobilebar{
    display: flex !important;
    align-items: center !important;
  }

  /* search rechts in kolom 2 */
  .ff-col-search{
    width: 100% !important;
  }

  /* ===== zoekbalk wit + button wit + icoon zwart ===== */
  .ff-search{
    background: #fff !important;
    border-radius: 0 !important;       /* strak zoals je voorbeeld */
    overflow: hidden !important;
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    align-items: center !important;
  }

  .ff-search input{
    background: #fff !important;
    color: #111 !important;
    border: 0 !important;
    outline: none !important;
    padding: 14px 14px !important;
  }

  .ff-search input::placeholder{
    color: #666 !important;
    opacity: 1 !important;
  }

  .ff-search button{
    background: #fff !important;
    border: 0 !important;
    padding: 0 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #111 !important;            /* svg stroke gebruikt currentColor */
  }

  .ff-search button svg{
    width: 20px !important;
    height: 20px !important;
    stroke: currentColor !important;
  }
}

@media (max-width: 900px){

  /* Mobile: 2 kolommen: burger + search */
  .ff-navgrid{
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    gap: 12px !important;
    align-items: center !important;
  }

  /* Desktop menu + CTA weg op mobiel */
  .ff-col-menu,
  .ff-col-cta{
    display: none !important;
  }

  /* Burger links */
  .ff-mobilebar{
    display: flex !important;
    align-items: center !important;
  }

  .ff-burger{
    width: 48px !important;
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Search rechts, zelfde hoogte */
  .ff-search{
    height: 48px !important;
    background: #fff !important;
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    align-items: center !important;
    overflow: hidden !important;
  }

  .ff-search input{
    height: 48px !important;
    background: #fff !important;
    color: #111 !important;
    border: 0 !important;
    outline: none !important;
    padding: 0 14px !important;
  }

  .ff-search button{
    height: 48px !important;
    background: #fff !important;
    border: 0 !important;
    padding: 0 14px !important;
    color: #111 !important; /* svg gebruikt currentColor */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .ff-search button svg{
    width: 20px !important;
    height: 20px !important;
    stroke: currentColor !important;
  }
  
  .ff-navbar {
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    padding: 0px;
  }
}

/* =========================
   FOOTER (Fashionforme)
   ========================= */

.ff-footer{
  background:#fff;
  color:#111;
}

.ff-footer__section{
  padding: 30px 0;
}

.ff-footer__h{
  margin:0 0 28px 0;
  font-size: 18px;
  font-weight: 800;
  color:#111;
  border-top:1px solid #eee;
  border-bottom:1px solid #eee;
  padding-top:15px;
  padding-bottom:15px;
}

.ff-footer__grid4{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px;
}

.ff-footer__coltitle{
  font-weight: 800;
  margin: 0 0 10px 0;
}

.ff-footer__list{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap: 10px;
}

.ff-footer__link{
  color:#333;
  text-decoration:none;
  font-size: 16px;
  line-height: 1.75;
}

.ff-footer__link:hover{
  text-decoration: underline;
}

/* Red bar */
.ff-footer__bar{
  background:#d8151f; /* rood */
  color:#fff;
  padding: 38px 0;
}

/* ✅ Desktop blijft zoals jij had: brand links, socials center, CTA rechts */
.ff-footer__barinner{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  gap: 18px;
}

.ff-footer__brand{
  font-weight: 900;
  letter-spacing: .02em;
}

/* Social in red bar: icon + tekst netjes in lijn + separators | */
.ff-footer__social{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 0;                 /* separators regelen de spacing */
  flex-wrap:wrap;
}

.ff-footer__soc{
  display:inline-flex;
  align-items:center;     /* icon en tekst op één lijn */
  gap: 10px;              /* ruimte tussen icon en tekst */
  color:#fff;
  text-decoration:none;
  font-size: 16px;
  line-height: 1;         /* voorkomt "zakken" */
  opacity: .95;
  padding: 0 18px;        /* ruimte links/rechts zoals screenshot */
  position: relative;
}

/* separator | na elke link, behalve de laatste */
.ff-footer__soc:not(:last-child)::after{
  content:"";
  position:absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 18px;           /* hoogte van het streepje */
  background: rgba(255,255,255,.35); /* lichte balk */
}

/* icon sizing & uitlijning */
.ff-footer__icon{
  display:inline-flex;
  width: 18px;
  height: 18px;
  align-items:center;
  justify-content:center;
  flex: 0 0 18px;
}

.ff-footer__icon svg{
  width: 18px;
  height: 18px;
  display:block;
  fill: currentColor;
}

.ff-footer__soc:hover{
  text-decoration: underline;
  opacity: 1;
}

/* CTA */
.ff-footer__cta{
  justify-self:end;
  color:#fff;
  text-decoration:none;
  border:1px solid rgba(255,255,255,.7);
  padding: 10px 16px;
  font-weight: 800;
  letter-spacing: .06em;
  font-size: 13px;
}
.ff-footer__cta:hover{
  border-color:#fff;
}

/* Bottom */
.ff-footer__bottom{
  background:#fff;
  border-top:1px solid #eee;
  padding: 14px 0;
}

.ff-footer__bottominner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  flex-wrap:wrap;
}

.ff-footer__legal{
  display:flex;
  gap: 14px;
  flex-wrap:wrap;
}

.ff-footer__legal a{
  color:#333;
  text-decoration:none;
  font-size: 13px;
}

.ff-footer__legal a:hover{
  text-decoration: underline;
}

.ff-footer__copy{
  color:#666;
  font-size: 12px;
}

/* =========================
   ✅ Footer responsive (MOBILE zoals oude WP)
   ========================= */
@media (max-width: 900px){

  .ff-footer__grid4{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }

  /* ✅ Rode balk: links brand + icons, rechts CTA */
  .ff-footer__barinner{
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "brand cta"
      "social cta";
    gap: 12px 16px;
    text-align:left;
    align-items:start;
  }

  .ff-footer__brand{
    grid-area: brand;
    text-align:left;
  }

  .ff-footer__social{
    grid-area: social;
    justify-content:flex-start;
    gap: 14px;
    flex-wrap:nowrap;
  }

  .ff-footer__cta{
    grid-area: cta;
    justify-self:end;
    align-self:center;
  }

  /* ✅ Mobile: alleen iconen, geen tekst */
  .ff-footer__soc-label{
    display:none;
  }

  /* ✅ Mobile: iconen zwart (zoals je oude WP) */
  .ff-footer__soc{
    color:#000;
    padding: 0;               /* geen brede padding op mobiel */
    opacity: 1;
  }

  /* ✅ Mobile: separators uit */
  .ff-footer__soc:not(:last-child)::after{
    display:none;
  }

  .ff-footer__icon{
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
  }
  .ff-footer__icon svg{
    width: 22px;
    height: 22px;
  }

  .ff-footer__bottominner{
    justify-content:center;
    text-align:center;
  }
}

@media (max-width: 520px){
  .ff-footer__grid4{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
}


/* 1) voorkom dat dropdown wordt afgeknipt door wrappers */
.ff-navbar,
.ff-topbar,
.ff-navgrid,
.ff-col-search,
.ff-wrap{
  overflow: visible !important;
}

/* 2) zorg dat de hele header boven de pagina ligt (voor sticky) */
.ff-header,
.ff-topbar,
.ff-navbar{
  position: relative;
  background:#fff;
}

/* 3) dropdown altijd boven alles in header */
.ff-search{ z-index: 1500; }
.ff-search-dd{ z-index: 2000; }

/* 4) mobiel: dropdown niet “net buiten beeld” door kleine header/hoogte */
@media (max-width: 900px){
  .ff-search-dd{
    max-height: 60vh;
    overflow: auto;   /* i.p.v. hidden, zodat je kan scrollen */
  }
}

/* Portal dropdown (altijd boven alles) */
.ff-search-dd.ff-portal{
  position: fixed !important;
  top: var(--ff-dd-top, 60px) !important;
  left: var(--ff-dd-left, 12px) !important;
  width: var(--ff-dd-width, calc(100vw - 24px)) !important;
  right: auto !important;
  z-index: 99999 !important;
  max-height: 60vh;
  overflow: auto;
}

/* ✅ Mobile footer links (legal) echt gecentreerd */
@media (max-width: 900px){
  .ff-footer__bottominner{
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .ff-footer__legal{
    justify-content: center;
    width: 100%;
  }

  .ff-footer__legal a{
    display: inline-block;
    text-align: center;
  }
}

/* Page content typography (CMS pages) */
.ff-page-content h2,
.ff-page-content h3{
  margin-top: 50px;
  font-size: 24px;
  font-weight: 500;
  line-height: 32px;
}

.ff-page-content p,
.ff-page-content li{
  font-size: 16px;
  font-weight: normal;
  line-height: 30px;
  
}

.ff-page-content ul{ list-style: circle;}
.ff-page-content li{ margin-left:20px;}

/* optioneel: eerste titel niet meteen 50px */
.ff-page-content h2:first-child,
.ff-page-content h3:first-child{
  margin-top: 0;
}