:root{
  --scy-text: #111;
  --scy-accent:#2bb673;
  --scy-btn-bg:#111;
  --scy-btn-text:#fff;

  --scy-header-bg:#111;
  --scy-header-text:#fff;

  --scy-topbar-bg:#fff;
  --scy-topbar-text:#111;

  --scy-menu-bg:#f3f3f3;
  --scy-menu-text:#111;

  --scy-footer-bg:#111;
  --scy-footer-text:#fff;

  --scy-font: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* =========================================================
   Header: burger SVG + tekst + cart button
   (voorkomt dat spans als "streepjes" worden gestyled)
   ========================================================= */
.scy-burger{ gap:6px; }
.scy-burger .scy-burger-ico,
.scy-burger .scy-burger-text{
  background: transparent !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  border-radius: 0 !important;
}
.scy-burger .scy-burger-ico svg{ display:block; }
.scy-burger .scy-burger-text{ font-size:12px; font-weight:700; line-height:1; }

.scy-header-actions{ align-items:center; }
.scy-cart .scy-badge{ top:-6px; right:-6px; }

/* Header: zoekknop popover */
.scy-searchbtn-wrap{ position:relative; display:inline-flex; align-items:center; }
.scy-searchbtn-wrap.is-open{ z-index: 201; }
.scy-searchbtn{ cursor:pointer; }

.scy-searchbtn{
  /* Zorg dat het vergrootglas altijd zichtbaar is (sommige globale button-stijlen maken 'm anders onzichtbaar) */
  color: var(--scy-header-contrast, #fff) !important;
}
.scy-searchbtn svg{ display:block; width:22px; height:22px; }
.scy-searchbtn svg path{ stroke: currentColor !important; }

.scy-search-pop{
  position:absolute;
  right:0;
  top: calc(100% + 10px);
  width: min(340px, 86vw);
  background: #fff;
  color: #111;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  padding: 10px;
  box-shadow: 0 18px 45px rgba(0,0,0,.18);
  opacity: 0;
  transform: translateY(-6px);
  pointer-events:none;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 200;
}
.scy-searchbtn-wrap.is-open .scy-search-pop{
  opacity: 1;
  transform: translateY(0);
  pointer-events:auto;
}
.scy-search-pop .search-form{ display:flex; gap:8px; align-items:center; }
.scy-search-pop .search-field{
  flex:1;
  width:100%;
  padding: 12px 14px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);
  outline: none;
}
.scy-search-pop .search-field:focus{ border-color: rgba(0,0,0,.28); }
.scy-search-pop .search-submit{
  padding: 11px 14px;
  border-radius: 999px;
  border: 0;
  background: #111;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}

*{box-sizing:border-box}

/* Safari/compat: form appearance reset + consistent font */
input, button, select, textarea{
  -webkit-appearance:none;
  appearance:none;
  font:inherit;
}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration{
  display:none;
}

body{
  margin:0;
  font-family:var(--scy-font);
  color:var(--scy-text);
  background:#fff;

  /* Safari/compat: betere font rendering */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a{color:inherit; text-decoration:none}
a:hover{opacity:.92}

/* Container: Safari fallback voor width:min() */
.scy-container{
  width: calc(100% - 32px);
  max-width: 1200px;
  margin:0 auto;
}
/* Je originele min() mag blijven als moderne override */
@supports (width: min(1200px, 100%)) {
  .scy-container{
    width:min(1200px, calc(100% - 32px));
    max-width:none;
  }
}

/* Full width variant (geen max-width, geen zij-padding)
   Handig voor pagina templates waar content schermbreed mag zijn. */
.scy-container--full{
  width:100%;
  max-width:none;
  margin:0;
}
@supports (width: min(1200px, 100%)) {
  .scy-container--full{
    width:100%;
    max-width:none;
  }
}

/* Wide container variant (tussen standaard en full width)
   Voor pagina's waar 1200px net te smal is, maar full width te breed.
*/
.scy-container--wide{
  width:100%;
  max-width:1600px;
  margin:0 auto;
  padding:0 40px;
}

@media (max-width: 768px){
  .scy-container--wide{ padding:0 20px; }
}

.scy-page-full{
  padding-left:0;
  padding-right:0;
}

/* Full width pagina template: forceer content ook echt schermbreed.
   Sommige blokken (of editor output) centreren zichzelf met max-width/margin:auto.
   In deze template willen we dat niet. */
.scy-page-full .scy-content{
  width:100%;
  max-width:none;
}
.scy-page-full .scy-content > *{
  max-width:none !important;
  width:100%;
}
.scy-page-full .scy-content .alignwide,
.scy-page-full .scy-content .alignfull{
  max-width:none !important;
  width:100% !important;
  margin-left:0 !important;
  margin-right:0 !important;
}

.scy-site-main{padding:18px 0 40px}

/* Buttons */
.scy-btn, button, input[type="submit"]{
  background:var(--scy-btn-bg);
  color:var(--scy-btn-text);
  border:none;
  border-radius:10px;
  padding:12px 18px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.scy-btn:hover, button:hover, input[type="submit"]:hover{filter:brightness(.95)}

/* TOPBAR (zoals foto 2: socials naast elkaar, rechts logo's) */
.scy-topbar{
  background:var(--scy-topbar-bg);
  color:var(--scy-topbar-text);
  font-size:14px;
  border-bottom:1px solid #eee;
}
.scy-topbar-inner{
  display:grid;
  grid-template-columns: 1fr auto 1fr; /* links - midden - rechts */
  align-items:center;
  gap:16px;
  padding:10px 24px;
}
.scy-topbar-left{
  display:flex;
  align-items:center;
  gap:16px;
  min-width:0;
  justify-content:flex-start;
}
.scy-topbar-center{
  display:flex;
  justify-content:center;
  align-items:center;
  min-width:0;
}
.scy-topbar-right{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  min-width:0;
}
.scy-topbar-contact{
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  padding:8px 14px;
  border-radius:999px;
  color: inherit;
  background: rgba(0,0,0,.06);
  border:1px solid rgba(0,0,0,.10);
  line-height:1;
  opacity:.95;
  transition: transform .12s ease, background .12s ease, opacity .12s ease, filter .12s ease;
  text-decoration:none;
  white-space:nowrap;
}
.scy-topbar-contact:hover{opacity:1; transform: translateY(-1px)}
.scy-ico{opacity:.75; display:inline-flex; align-items:center}
.scy-ico svg{display:block}

/* Tekst naast de iconen (telefoon/mail) */
.scy-topbar-text{
  display:inline-flex;
  align-items:center;
  font-weight:600;
  font-size:14px;
  opacity:.9;
}

@media (max-width: 520px){
  .scy-topbar-text{font-size:13px}
}

/* Socials: altijd naast elkaar */
.scy-social{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:10px;
  flex-wrap:nowrap;
  white-space:nowrap;
}
.scy-social a{
  display:inline-flex;
  width:30px;height:30px;
  align-items:center;justify-content:center;
  border-radius:999px;
  color: inherit;
  background: rgba(0,0,0,.06);
  border:1px solid rgba(0,0,0,.10);
  line-height:1;
  transition: transform .12s ease, background .12s ease, opacity .12s ease, filter .12s ease;
}
.scy-social a:hover{ transform: translateY(-1px); opacity:1; filter: brightness(1.02); }
.scy-social svg{ width:16px; height:16px; display:block; fill: currentColor; }

/* Socials brand kleuren */
.scy-social.scy-social--brand a{
  border-color: transparent;
}
.scy-social.scy-social--brand a[data-net='facebook']{ background:#1877F2; color:#fff; }
.scy-social.scy-social--brand a[data-net='instagram']{ background:#E1306C; color:#fff; }
.scy-social.scy-social--brand a[data-net='tiktok']{ background:#000; color:#fff; }
.scy-social.scy-social--brand a[data-net='youtube']{ background:#FF0000; color:#fff; }
.scy-social.scy-social--brand a[data-net='whatsapp']{ background:#25D366; color:#fff; }
.scy-social.scy-social--brand a[data-net='x']{ background:#000; color:#fff; }
.scy-social.scy-social--brand a[data-net='linkedin']{ background:#0A66C2; color:#fff; }
.scy-social.scy-social--brand a[data-net='pinterest']{ background:#BD081C; color:#fff; }

/* Back to top (upgraded) */
.scy-backtotop{
  position:fixed;
  right:30px;
  bottom:40px;
  width:64px;
  height:64px;
  border-radius:999px;
  display:none;
  align-items:center;
  justify-content:center;
  z-index:9999;
  border:0;
  cursor:pointer;
  color:#fff;
  background: var(--scy-accent, #e60000);
  /* moderne browsers: iets meer “premium” via gradient */
  background: linear-gradient(135deg, var(--scy-accent, #ff2a2a), color-mix(in srgb, var(--scy-accent, #ff2a2a) 60%, #000 40%));
  box-shadow:
    0 10px 25px rgba(0,0,0,.25),
    0 4px 10px rgba(0,0,0,.15);
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.scy-backtotop svg{
  width:22px;
  height:22px;
  fill: currentColor;
  transition: transform .2s ease;
}
.scy-backtotop:hover{
  transform: translateY(-4px);
  box-shadow:
    0 15px 35px rgba(0,0,0,.35),
    0 6px 14px rgba(0,0,0,.25);
  filter: brightness(1.02);
}
.scy-backtotop:hover svg{ transform: translateY(-2px); }

@media (max-width:768px){
  .scy-backtotop{
    width:54px;
    height:54px;
    right:20px;
    bottom:30px;
  }
  .scy-backtotop svg{ width:20px; height:20px; }
}

/* Aangesloten bij: label + rij met logo’s (onbeperkt) */
.scy-affiliations{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
.scy-aff-label{
  font-size:13px;
  opacity:.7;
  white-space:nowrap;
}
.scy-aff-logos{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:nowrap;   /* desktop: 1 rij */
  overflow:hidden;
  min-width:0;
}
.scy-aff-logos img{
  height:20px;
  width:auto;
  display:block;
  object-fit:contain;
}

/* Mobiel: stack, maar socials blijven rij; logo's mogen wrappen */
@media (max-width: 640px){
  .scy-topbar-inner{
    grid-template-columns: 1fr;
    gap:10px;
    padding:10px 24px;
  }
  .scy-topbar-left,
  .scy-topbar-center,
  .scy-topbar-right{
    justify-content:flex-start;
  }
  .scy-aff-logos{
    flex-wrap:wrap;
    overflow:visible;
  }
}

/* Main header */
.scy-header-main{
  background:var(--scy-header-bg);
  color:var(--scy-header-text);
}
.scy-header-main-inner{
  display:flex;
  align-items:center;
  gap:16px;
  padding:18px 0;
  position:relative;
}
.scy-logo img{height:auto; max-height:44px; width:auto}
.scy-site-title{font-size:26px; letter-spacing:4px; text-transform:uppercase}

/* Search */
.scy-search{
  flex:1;
  max-width:650px;
}
.scy-search form{
  display:flex;
  align-items:center;
  gap:10px;
  background:#fff;
  border-radius:999px;
  padding:10px 14px;
}
.scy-search input[type="search"],
.scy-search input[type="text"]{
  width:100%;
  border:none;
  outline:none;
  font-size:16px;
  background:transparent;
}

/* Zoekknop fix: strak, accent, icoon */
.scy-search button,
.scy-search input[type="submit"]{
  background:var(--scy-accent) !important;
  color:#fff !important;
  border-radius:999px !important;
  padding:10px 14px !important;
  min-width:44px;
  height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.scy-search button{
  font-size:0;
}
.scy-search button::before{
  content:"🔍";
  font-size:16px;
  line-height:1;
}

/* Icons rechts */
.scy-icons{
  display:flex;
  align-items:center;
  gap:10px;
  /* Houd iconen altijd rechts, ook als de zoekbalk uit staat */
  margin-left:auto;
}
.scy-icon{
  position:relative;
  display:inline-flex;
  width:42px;height:42px;
  align-items:center;justify-content:center;
  border-radius:999px;
  background:var(--scy-header-icon-bg, rgba(255,255,255,.12));
  border:1px solid var(--scy-header-icon-border, rgba(255,255,255,.18));
  /* Altijd zichtbaar: contrast op basis van header-achtergrond (ongeacht wat iemand bij "header tekstkleur" invult). */
  color:var(--scy-header-contrast, var(--scy-cart-color, var(--scy-header-text, #fff)));
}

/* Tooltip voor icon-buttons (winkelwagen / bestelling) */
.scy-icon[data-tooltip]{
  position: relative;
}
.scy-icon[data-tooltip]:hover::after,
.scy-icon[data-tooltip]:focus::after{
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(100% + 10px);
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
  color: #fff;
  background: rgba(0,0,0,0.78);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 14px 28px rgba(0,0,0,0.28);
  pointer-events: none;
  z-index: 40;
}
.scy-icon[data-tooltip]:hover::before,
.scy-icon[data-tooltip]:focus::before{
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(100% + 4px);
  border: 6px solid transparent;
  border-top-color: rgba(0,0,0,0.78);
  pointer-events: none;
  z-index: 39;
}
.scy-icon svg{display:block;width:22px;height:22px;}
.scy-searchbtn{padding:0;}
/* Vergrootglas iets optisch groter zodat het gelijk voelt aan winkelwagen/bestelling iconen */
.scy-searchbtn svg{transform:scale(1.08);transform-origin:center;}
.scy-icon:hover{background:var(--scy-header-icon-hover, rgba(255,255,255,.18));}
.scy-badge{
  position:absolute;
  top:-6px; right:-6px;
  min-width:20px;height:20px;
  padding:0 6px;
  border-radius:999px;
  background:var(--scy-cart-badge-bg, var(--scy-accent));
  color:#fff;
  font-size:12px;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;
}

.scy-badge.is-zero{display:none;}

/* Burger */
.scy-burger{
  display:none;
  width:44px;height:44px;
  padding:10px;
  background:rgba(255,255,255,.12);
  border-radius:12px;
}
.scy-burger span{
  display:block;
  height:2px;
  background:#fff;
  margin:6px 0;
  border-radius:2px;
}

/* Menu bar */
.scy-nav{
  background:var(--scy-menu-bg);
  color:var(--scy-menu-text);
  border-bottom:1px solid #e7e7e7;
}
.scy-nav-inner{padding:10px 0}
.scy-menu{
  list-style:none;
  display:flex;
  gap:18px;
  margin:0;padding:0;
  align-items:center;
  flex-wrap:wrap;
}
.scy-menu a{
  display:inline-flex;
  padding:10px 12px;
  border-radius:10px;
}
.scy-menu a:hover{background:rgba(0,0,0,.05)}

/* Mobile nav */
@media (max-width: 980px){
  .scy-search{max-width:none}
}
@media (max-width: 640px){
  .scy-header-main-inner{
    flex-wrap:wrap;
  }
  .scy-search{order:3; width:100%}
  .scy-burger{display:inline-flex; margin-left:auto}
  .scy-nav{display:none}
  .scy-nav.is-open{display:block}
  .scy-menu{flex-direction:column; align-items:flex-start}
}

/* HERO met instelbare hoogte + achtergrond */
.scy-hero{
  position:relative;
  min-height: var(--scy-hero-h, 420px);
  display:flex;
  align-items:center;
  padding:34px 0;
  background:#f7f7f7;
}
/* Safari/iOS: stabielere viewport height als je ooit vh gebruikt */
@supports (height: 100svh){
  .scy-hero{
    min-height: var(--scy-hero-h, 420px);
  }
}

.scy-hero.has-bg{
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.scy-hero-overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,var(--scy-hero-overlay, .2));
  pointer-events:none;
}

/* Hero layout variants */
.scy-hero.layout-full,
.scy-hero.layout-fullscreen{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  border-radius: 0;
}
.scy-hero.layout-fullscreen{
  min-height: 100vh;
}
.scy-hero.bg-fixed::before{
  background-attachment: fixed;
}
@media (max-width: 900px){
  .scy-hero.bg-fixed::before{ background-attachment: scroll; }
}

/* Hero heading logo (links) */
.scy-hero-heading-logo{
  margin: 0 0 10px;
}
.scy-hero-heading-logo img{
  display:block;
  width: var(--scy-hero-heading-logo-w, 220px);
  max-width: 100%;
  height: auto;
  max-height: var(--scy-hero-heading-logo-h, 140px);
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.35));
}

.scy-hero-inner{position:relative; z-index:2}
.scy-hero-text h1{color:#111}
.scy-hero.has-bg .scy-hero-text h1,
.scy-hero.has-bg .scy-hero-text p{color:#fff}

/* Buttons varianten */
.scy-hero-buttons{display:flex; gap:12px; flex-wrap:wrap; margin-top:16px}

.scy-btn-primary{background:var(--scy-btn-bg); color:var(--scy-btn-text)}
.scy-btn-secondary{background:var(--scy-accent); color:#fff}
.scy-btn-ghost{
  background:transparent;
  color:inherit;
  border:1px solid rgba(255,255,255,.5);
}
.scy-hero:not(.has-bg) .scy-btn-ghost{
  border-color: rgba(0,0,0,.2);
}

/* =========================================================
   Safari/compat fallback voor FLEX GAP (oudere Safari)
   ========================================================= */
@supports not (gap: 12px) {
  .scy-topbar-inner { grid-gap: 16px; } /* grid fallback */
  .scy-topbar-left > * { margin-right: 16px; }
  .scy-topbar-left > *:last-child { margin-right: 0; }

  .scy-social a { margin-right: 10px; }
  .scy-social a:last-child { margin-right: 0; }

  .scy-affiliations > * { margin-right: 12px; }
  .scy-affiliations > *:last-child { margin-right: 0; }

  .scy-aff-logos img { margin-right: 14px; }
  .scy-aff-logos img:last-child { margin-right: 0; }

  .scy-icons > * { margin-right: 10px; }
  .scy-icons > *:last-child { margin-right: 0; }

  .scy-menu > li { margin-right: 18px; }
  .scy-menu > li:last-child { margin-right: 0; }

  .scy-hero-buttons > * { margin-right: 12px; margin-bottom: 10px; }
}
/* =========================
   HEADER FIX (Safari/Chrome)
   - Zoekknop altijd rechts
   - Logo groter
   ========================= */

/* Logo groter (werkt voor custom-logo output) */
.scy-logo img,
.scy-logo .custom-logo{
  max-height: 92px;  /* groter logo (was te klein) */
  width: auto;
  height: auto;
}


/* Header logo: witte "badge" achtergrond zodat het logo niet wegvalt op donkere header */
.scy-header-main .scy-logo .custom-logo-link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.98);
  padding: 10px 14px;
  border-radius: 14px;
  box-shadow: 0 12px 26px rgba(0,0,0,.18);
  line-height: 1;
}
.scy-header-main .scy-logo .custom-logo-link:hover{
  transform: translateY(-1px);
}
.scy-header-main .scy-logo .custom-logo-link:focus{
  outline: 2px solid rgba(255,255,255,.55);
  outline-offset: 2px;
}
.scy-header-main .scy-logo .custom-logo-link .custom-logo{
  display:block;
  max-height: 78px; /* groter in de header */
  width:auto;
  height:auto;
}

/* Mobiel: logo iets kleiner zodat het niet alles wegdrukt */
@media (max-width: 820px){
  .scy-logo img,
  .scy-logo .custom-logo{
    max-height: 72px;
  }
  .scy-header-main .scy-logo .custom-logo-link .custom-logo{
    max-height: 62px;
  }
}

/* Customizer toggle: wit vlak achter header-logo uit */
.scy-no-header-logo-badge .scy-header-main .scy-logo .custom-logo-link{
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
/* Zorg dat de header niet “krap” wordt met groter logo */
.scy-header-main-inner{
  gap: 18px;
}

/* SAFARI/FLEX FIX: input niet width:100% in flex, maar flex:1 */
.scy-search form{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap: 12px;              /* ruimte tussen input en knop */
}

/* Dit is de echte fix: input moet flexibel zijn, niet 100% breed */
.scy-search form input[type="search"],
.scy-search form input[type="text"]{
  flex: 1 1 auto;
  width: auto;            /* overridet width:100% */
  min-width: 0;           /* belangrijk voor Safari */
  -webkit-appearance: none;
  appearance: none;
}

/* Knop blijft compact rechts en wrapt niet */
.scy-search form button,
.scy-search form input[type="submit"]{
  flex: 0 0 auto;
  white-space: nowrap;
  -webkit-appearance: none;
  appearance: none;
}

/* (optioneel) nette klikbare hoogte in Safari */
.scy-search form input[type="submit"],
.scy-search form button{
  line-height: 1;
}
/* =========================
   SEARCH: knop echt rechts
   (maakt van de zoekbalk 1 geheel)
   ========================= */

.scy-search form{
  display:flex;
  align-items:stretch;
  gap:0 !important;                 /* geen ruimte tussen input en knop */
  padding:10px 12px;                /* jouw bestaande padding */
  border-radius:999px;
  overflow:hidden;                  /* zorgt dat knop mooi in de pill valt */
}

/* Input vult alles links */
.scy-search form input[type="search"],
.scy-search form input[type="text"]{
  flex: 1 1 auto;
  width:auto;
  min-width:0;
  border:0;
  outline:0;
  padding:10px 14px;
  background:transparent;
}

/* Knop wordt een “eindkap” rechts */
.scy-search form button,
.scy-search form input[type="submit"]{
  flex: 0 0 auto;
  margin-left:auto;                /* duwt hem altijd naar rechts */
  height:auto;
  min-width:120px;                 /* voelt “eindknop” i.p.v. rond knopje */
  padding:10px 18px !important;
  border-radius:999px !important;  /* blijft pill-vorm */
}

/* Als je de button als icoon had gemaakt: zet tekst weer aan */
.scy-search button{
  font-size:16px !important;       /* jij had font-size:0; dat maakt ‘m raar */
}

/* Verwijder jouw vergrootglas pseudo als je tekst wilt */
.scy-search button::before{
  content:none !important;
}
/* =========================
   FOOTER: widgets naast elkaar (Safari-proof)
   ========================= */
.scy-footer{
  background: var(--scy-footer-bg);
  color: var(--scy-footer-text);
}

.scy-footer-inner{
  padding: 36px 0 18px;
}

/* Basis: altijd grid */
.scy-footer-widgets{
  display: grid;
  gap: 26px;
  align-items: start;
}

/* Kolommen via class op de wrapper */
.scy-footer-widgets.scy-cols-1{ grid-template-columns: 1fr; }
.scy-footer-widgets.scy-cols-2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.scy-footer-widgets.scy-cols-3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.scy-footer-widgets.scy-cols-4{ grid-template-columns: 1.1fr 1fr 1fr 1.3fr; }

/* Safari / layout: voorkom dat content de grid opblaast */
.scy-footer-col{
  min-width: 0;
}
.scy-footer-col *{
  min-width: 0;
}

/* Widget styling (optioneel maar ziet er meteen beter uit) */
.scy-footer .scy-widget-title{
  margin: 0 0 10px;
  font-size: 16px;
}
.scy-footer .scy-widget{
  opacity: .95;
}

/* Mobiel: stack */
@media (max-width: 820px){
  .scy-footer-widgets{
    grid-template-columns: 1fr !important;
  }
}

/* Bottom bar */
.scy-bottombar{
  border-top: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.12);
  color: var(--scy-footer-text);
  padding: 12px 0;
}
/* =========================================================
   VS-EM Widgets styling (SCY theme)
   Doel: netjes, compact, Safari-proof, geen rare overrides
========================================================= */

/* algemene widget spacing in footer */
.scy-footer .scy-widget{
  margin:0;
  color: var(--scy-footer-text);
}
.scy-footer .scy-widget-title{
  margin:0 0 12px;
  font-weight:800;
  font-size:18px;
  color: var(--scy-footer-text);
  position:relative;
}
.scy-footer .scy-widget-title::after{
  content:"";
  display:block;
  width:56px;
  height:3px;
  border-radius:2px;
  background: var(--scy-accent);
  margin-top:8px;
  opacity:.95;
}

/* links in footer widgets */
.scy-footer .scy-widget a{
  color: inherit;
  text-decoration:none;
  opacity:.92;
}
.scy-footer .scy-widget a:hover{
  opacity:1;
  text-decoration:underline;
  text-underline-offset: 2px;
}

/* ---------------------------
   Openingstijden widget
--------------------------- */
.vs-oh{ font-size:14px; }

.vs-oh-multi{
  display:grid;
  gap: 14px;
}

/* Openingstijden: meerdere vestigingen als tabs (geen stapel kaarten) */
.vs-oh-tabs{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin: 0 0 12px;
  padding:6px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  background: rgba(255,255,255,.04);
}
.vs-oh-tab{
  appearance:none;
  border:0;
  background: transparent;
  color: rgba(255,255,255,.88);
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  cursor:pointer;
}
.vs-oh-tab:hover{background: rgba(255,255,255,.08)}
.vs-oh-tab.is-active{background: rgba(255,255,255,.14)}
.vs-oh-panel{animation: vsFadeIn .14s ease-out}
@keyframes vsFadeIn{from{opacity:.6;transform:translateY(1px)}to{opacity:1;transform:none}}
.vs-oh-location-title{
  font-weight: 800;
  letter-spacing: .2px;
  padding: 16px 24px 0;
  opacity: .98;
}

.vs-oh-list{
  list-style:none;
  margin:0;
  padding:0;
  border-top:1px solid rgba(255,255,255,.18);
}
.vs-oh-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:10px 24px;
  border-bottom:1px solid rgba(255,255,255,.18);
}
.vs-oh-label{
  font-weight:700;
  opacity:.95;
}
.vs-oh-time{
  opacity:.9;
  white-space:nowrap;
}
.vs-oh-row.is-today{
  background: rgba(43,182,115,.12); /* accent tint */
  border-radius:8px;
  padding-left:10px;
  padding-right:10px;
}
.vs-oh-note{
  margin-top:10px;
  opacity:.85;
  font-size:13px;
}

/* ---------------------------
   Contact widget
--------------------------- */
.vs-contact{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.vs-contact-item{
  display:flex;
  gap:10px;
  align-items:center;
  line-height:1.4;
}
.vs-contact-ico{
  width:22px;
  flex:0 0 22px;
  opacity:.9;
}
.vs-contact a{ text-decoration:none; }
.vs-contact a:hover{ text-decoration:underline; }

/* ---------------------------
   Links menu widget
--------------------------- */
.vlw-list{
  list-style:none;
  margin:0;
  padding:0;
  border-top:1px solid rgba(255,255,255,.18);
}
.vlw-li{
  margin:0;
  padding:10px 24px;
  border-bottom:1px solid rgba(255,255,255,.18);
}
.vlw-link{
  display:block;
  font-weight:600;
  opacity:.92;
}
.vlw-link:hover{
  opacity:1;
  transform: translateX(2px);
}

/* ---------------------------
   Vrij tekstblok widget
--------------------------- */
.vs-txt{
  font-size:14px;
  line-height:1.6;
  opacity:.95;
}
.vs-txt p{ margin:.6em 0; }
.vs-txt ul, .vs-txt ol{ margin:.6em 0 .6em 1.2em; }

/* =========================
   FOOTER LAYOUT (SCY)
========================= */

.scy-footer{
  background: var(--scy-footer-bg);
  color: var(--scy-footer-text);
  margin-top: 40px;
}

.scy-footer-inner{
  padding: 34px 0 18px;
}

/* Widgets naast elkaar */
.scy-footer-widgets{
  display: grid;
  gap: 28px;
  align-items: start;
  margin-bottom: 18px;
}

.scy-footer-widgets.scy-cols-1{ grid-template-columns: 1fr; }
.scy-footer-widgets.scy-cols-2{ grid-template-columns: repeat(2, 1fr); }
.scy-footer-widgets.scy-cols-3{ grid-template-columns: repeat(3, 1fr); }
.scy-footer-widgets.scy-cols-4{ grid-template-columns: repeat(4, 1fr); }

@media (max-width: 980px){
  .scy-footer-widgets.scy-cols-3,
  .scy-footer-widgets.scy-cols-4{
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px){
  .scy-footer-widgets{
    grid-template-columns: 1fr !important;
  }
}

/* Footer tekst (© 2026...) centreren */
.scy-footer-text{
  text-align: center;
  opacity: .95;
  padding-top: 14px;
}

/* =========================
   BOTTOMBAR + LOGO TOKEN
========================= */

.scy-bottombar{
  background: rgba(0,0,0,.18); /* iets donkerder dan footer */
  border-top: 1px solid rgba(255,255,255,.12);
}

.scy-bottombar-inner{
  position: relative;
  display: flex;
  justify-content: center;  /* tekst in het midden */
  align-items: center;
  padding: 18px 0;
  min-height: 58px;
}

/* onderste tekst centreren */
.scy-bottombar-text{
  text-align: center;
  opacity: .95;
}

/* Logo badge op de rand (half boven, half in de balk) */
.scy-footer-token{
  position: absolute;
  left: 0;
  top: 0;
  transform: translateY(-50%);
  width: 220px;
  height: 78px;
  pointer-events: none;
  z-index: 2;
}

.scy-footer-token-plate{
  position: absolute;
  inset: 0;
  background: var(--scy-footer-token-badge-bg, #fff);
  border-radius: 14px;
  box-shadow: 0 14px 30px rgba(0,0,0,.25);
  opacity: .98;
}

/* Customizer toggle: wit vlak achter footer token logo uit */
.scy-no-footer-token-badge .scy-footer-token-plate{
  background: transparent !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

.scy-footer-token-logo{
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  height: 50px;
  width: auto;
  border-radius: 10px;
}

/* Mobiel: token gewoon boven de tekst, niet half eroverheen */
@media (max-width: 640px){
  .scy-bottombar-inner{
    flex-direction: column;
    gap: 10px;
    padding: 18px 0 16px;
  }
  .scy-footer-token{
    position: static;
    transform: none;
    width: auto;
    height: auto;
    pointer-events: auto;
  }
  .scy-footer-token-plate{ display:none; } /* op mobiel simpel */
  .scy-footer-token-logo{
    position: static;
    transform: none;
    height: 44px;
    display: block;
    margin: 0 auto;
  }
}
/* Full width achtergrond blijft */
.scy-nav{
  background: var(--scy-menu-bg);
  color: var(--scy-menu-text);
  border-bottom: 1px solid #e7e7e7;
}

/* Binnen container: wat padding zodat het niet “plakt” */
.scy-nav-inner{
  padding: 10px 0;
}

/* Menu items wat beter uitlijnen */
.scy-menu{
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
/* =========================
   NAV BAR: full width bg, menu IN container
   ========================= */

/* Full width achtergrond blijft */
.scy-nav{
  background: var(--scy-menu-bg);
  color: var(--scy-menu-text);
  border-bottom: 1px solid rgba(0,0,0,.06);

  /* subtiele schaduw/lucht onder de balk */
  box-shadow: 0 10px 22px rgba(0,0,0,.06);
  position: relative;
  z-index: 50;
}

/* Container inhoud: geef links/rechts padding zodat tekst echt "in de container" valt */
.scy-nav-inner{
  padding: 10px 16px;               /* <<< dit is de key */
}

/* Menu opmaak */
.scy-menu{
  list-style: none;
  display: flex;
  gap: 10px;
  margin: 0;
  padding: 0;                        /* geen rare inspring */
  align-items: center;
  flex-wrap: wrap;
}

/* Links: iets compacter en netter */
.scy-menu a{
  display: inline-flex;
  align-items: center;
  padding: 9px 12px;
  border-radius: 10px;
  color: inherit;
  font-weight: 600;
  line-height: 1;
  transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}

/* Hover: heel subtiel */
.scy-menu a:hover{
  background: rgba(0,0,0,.05);
}

/* =========================
   ACTIVE/CURRENT: subtiel accent (niet groot)
   ========================= */

.scy-menu li.current-menu-item > a,
.scy-menu li.current_page_item > a,
.scy-menu li.current-menu-ancestor > a{
  background: rgba(0,0,0,.06);
  box-shadow: inset 0 -2px 0 var(--scy-accent); /* klein lijntje onderin */
}

/* Optioneel: heel klein “dotje” links (als je dat mooier vindt)
   Zet dit aan als je het wilt, anders gewoon weglaten.
*/
/*
.scy-menu li.current-menu-item > a::before,
.scy-menu li.current_page_item > a::before,
.scy-menu li.current-menu-ancestor > a::before{
  content:"";
  width:6px;height:6px;
  border-radius:999px;
  background: var(--scy-accent);
  margin-right:8px;
}
*/
/* =========================
   PAGINA TITELS: H1 kleur + underline
   ========================= */

/* Globale headings kleur uit Customizer vars */
h1{ color: var(--scy-h1, #111); }
h2{ color: var(--scy-h2, #111); }
h3{ color: var(--scy-h3, #111); }
h4{ color: var(--scy-h4, #111); }

/* Page/post title (WP core) + WooCommerce */
.entry-title,
.wp-block-post-title,
.woocommerce-products-header__title,
.woocommerce-cart-form__contents caption,
.page-title{
  color: var(--scy-h1, #111);
}

/* Underline “streep” onder paginatitels */
.entry-title,
.wp-block-post-title,
.woocommerce-products-header__title,
.page-title{
  position: relative;
  display: inline-block;
  margin: 0 0 14px;
  padding-bottom: 10px;
}

/* De streep zelf */
.entry-title::after,
.wp-block-post-title::after,
.woocommerce-products-header__title::after,
.page-title::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  height:3px;
  width:64px;                 /* niet overdreven groot */
  background: var(--scy-accent, #2bb673);
  border-radius: 999px;
  opacity: .95;
}

/* Klein beetje extra lucht boven content */
.entry-title + *,
.wp-block-post-title + *,
.woocommerce-products-header__title + *{
  margin-top: 8px;
}
/* =========================
   MOBILE BURGER: altijd zichtbaar
   ========================= */

/* Knop zelf */
.scy-burger{
  background: rgba(255,255,255,.92);       /* licht pilltje */
  border: 1px solid rgba(0,0,0,.14);
  box-shadow: 0 8px 18px rgba(0,0,0,.14);
}

/* De 3 streepjes: altijd donker */
.scy-burger span{
  background: #111 !important;
}

/* Hover/active feedback (mobile tap) */
.scy-burger:active{
  transform: scale(.98);
  filter: brightness(.98);
}

/* Extra zekerheid: als header donker is, blijft burger nog steeds zichtbaar */
.scy-header-main .scy-burger{
  background: rgba(255,255,255,.92);
  border-color: rgba(14, 3, 3, 0.18);
}
.scy-header-main .scy-burger span{
  background: #111 !important;
}

/* Focus ring (toegankelijk) */
.scy-burger:focus-visible{
  outline: 3px solid color-mix(in srgb, var(--scy-accent, #2bb673) 55%, #fff);
  outline-offset: 2px;
}
/* ==========================================
   FIX: Hamburger menu (mobiel) strak & leesbaar
   ========================================== */

/* Basis: maak ‘m compact en high-contrast */
.scy-burger{
  width: 46px;
  height: 46px;
  padding: 0;
  border-radius: 14px;

  /* donkere knop op felgroen */
  background: rgba(0,0,0,.38) !important;
  border: 1px solid rgba(255,255,255,.22) !important;

  /* geen rare enorme lichtvlek */
  box-shadow: 0 10px 22px rgba(0,0,0,.22) !important;

  color: #fff !important;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}

/* Kill alle “bubble” styling die ‘m lelijk maakt */
.scy-burger-ico{
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Tekst “Menu” weg op mobiel (het is een hamburger-icoon… men snapt het) */
.scy-burger-text{
  display: none !important;
}

/* Icoon netjes centreren */
.scy-burger svg{
  display: block;
}

/* Hover/active subtiel */
.scy-burger:hover{
  background: rgba(0,0,0,.48) !important;
  border-color: rgba(255,255,255,.30) !important;
}
.scy-burger:active{
  transform: scale(.98);
}

/* Focus duidelijk (toetsenbord) */
.scy-burger:focus-visible{
  outline: 3px solid color-mix(in srgb, var(--scy-accent, #2bb673) 60%, #fff);
  outline-offset: 2px;
}
/* ==========================================
   HEADER "FLOAT" SHADOW
   ========================================== */

/* Zorg dat de header boven de content ligt */
.scy-site-header{
  position: relative;
  z-index: 50;
}

/* Schaduw onder de header (zachte zweef-look) */
.scy-site-header::after{
  content:"";
  position:absolute;
  left: 0;
  right: 0;
  bottom: -18px;
  height: 18px;
  pointer-events:none;

  /* mooie zachte schaduw */
  background: radial-gradient(ellipse at 50% 0%,
    rgba(0,0,0,.22) 0%,
    rgba(0,0,0,.12) 35%,
    rgba(0,0,0,0) 70%
  );
  filter: blur(6px);
  opacity: .75;
}

/* Extra: dunne lijn voor extra definitie (optioneel, maar ziet er vaak beter uit) */
.scy-site-header{
  border-bottom: 1px solid rgba(0,0,0,.06);
}
/* ==========================================
   HAMBURGER: alleen mobiel zichtbaar
   ========================================== */

/* Standaard (desktop/tablet): hamburger weg */
.scy-burger{
  display: none !important;
}

/* Standaard (desktop/tablet): nav gewoon zichtbaar */
.scy-nav{
  display: block;
}

/* Mobiel: hamburger aan + menu standaard dicht */
@media (max-width: 768px){
  .scy-burger{
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }

  /* menu pas tonen als je header.js een class/data-state open zet */
  .scy-nav{
    display: none;
  }

  /* als je script een class zet zoals .is-open op nav */
  .scy-nav.is-open{
    display: block;
  }

  /* als je script juist body class gebruikt zoals .scy-nav-open */
  body.scy-nav-open .scy-nav{
    display: block;
  }
}
/* ================================
   SCY MENU – dropdown submenus
   ================================ */

/* Basis: menu horizontaal */
.scy-nav .scy-menu{
  list-style:none;
  display:flex;
  gap:18px;
  align-items:center;
  margin:0;
  padding:0;
}

/* Zorg dat li de "anchor" is voor absolute submenu */
.scy-nav .scy-menu > li{
  position:relative;
}

/* Links */
.scy-nav .scy-menu a{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:10px 12px;
  border-radius:999px;
  color: var(--scy-menu-text, #111);
  text-decoration:none;
  font-weight:600;
  line-height:1;
}

/* Actief/hover: minder lomp */
.scy-nav .scy-menu > li.current-menu-item > a,
.scy-nav .scy-menu > li.current-menu-ancestor > a,
.scy-nav .scy-menu > li > a:hover{
  background: rgba(0,0,0,.06);
}

/* Pijltje voor items met submenu */
.scy-nav .scy-menu > li.menu-item-has-children > a::after{
  content:"";
  width:0; height:0;
  border-left:5px solid transparent;
  border-right:5px solid transparent;
  border-top:6px solid currentColor;
  opacity:.65;
  transform: translateY(1px);
}

/* Submenu: standaard verborgen */
.scy-nav .scy-menu li .sub-menu{
  list-style:none;
  margin:0;
  padding:8px;
  position:absolute;
  left:0;
  top: calc(100% + 10px);
  min-width: 220px;

  /* Dropdown heeft eigen kleuren zodat white-on-white (of white-on-photo) niet kan gebeuren */
  background: var(--scy-menu-dropdown-bg, #fff);
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 14px;
  box-shadow: 0 14px 40px rgba(0,0,0,.12);

  display:block;
  opacity:0;
  visibility:hidden;
  transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
  z-index:9999;
}

/* Submenu items */
.scy-nav .scy-menu li .sub-menu li{
  margin:0;
}

/* Submenu links */
.scy-nav .scy-menu li .sub-menu a{
  display:flex;
  width:100%;
  padding:10px 12px;
  border-radius:10px;
  font-weight:600;
  color: var(--scy-menu-dropdown-text, #111);
}

/* Submenu hover */
.scy-nav .scy-menu li .sub-menu a:hover{
  background: rgba(0,0,0,.06);
}

/* Home: als hero doorlopend aan staat (menu over foto) -> dropdown donker + witte tekst */
body.scy-hero-extend-header .scy-nav .scy-menu li .sub-menu{
  background: rgba(0,0,0,.82);
  border-color: rgba(255,255,255,.14);
  box-shadow: 0 18px 50px rgba(0,0,0,.28);
}
body.scy-hero-extend-header .scy-nav .scy-menu li .sub-menu a{
  color: #fff;
}
body.scy-hero-extend-header .scy-nav .scy-menu li .sub-menu a:hover{
  background: rgba(255,255,255,.12);
}

/* Show dropdown on hover + keyboard focus */
.scy-nav .scy-menu > li.menu-item-has-children:hover > .sub-menu,
.scy-nav .scy-menu > li.menu-item-has-children:focus-within > .sub-menu{
  opacity:1;
  visibility:visible;
  transform: translateY(0);
}

/* Show 2e/3e niveau dropdowns (submenu-in-submenu) */
.scy-nav .scy-menu li .sub-menu li.menu-item-has-children:hover > .sub-menu,
.scy-nav .scy-menu li .sub-menu li.menu-item-has-children:focus-within > .sub-menu{
  opacity:1;
  visibility:visible;
  transform: translateY(0);
}

/* Kleine "hover-bridge" zodat je niet de dropdown verliest */
.scy-nav .scy-menu > li.menu-item-has-children::after{
  content:"";
  position:absolute;
  left:0;
  top:100%;
  width:100%;
  height:12px;
}

/* 2e niveau (submenu in submenu) naar rechts */
.scy-nav .scy-menu li .sub-menu li.menu-item-has-children{
  position:relative;
}
.scy-nav .scy-menu li .sub-menu li.menu-item-has-children > a::after{
  content:"›";
  margin-left:auto;
  opacity:.6;
}
.scy-nav .scy-menu li .sub-menu li .sub-menu{
  left: calc(100% + 10px);
  top: 0;
}

/* Mobiel: dropdowns niet hover-based (wordt door je burger menu / JS geregeld) */
@media (max-width: 640px){
  .scy-nav .scy-menu{
    flex-direction:column;
    align-items:stretch;
    gap:6px;
  }
  .scy-nav .scy-menu li .sub-menu{
    position:static;
    min-width:0;
    opacity:1;
    visibility:visible;
    transform:none;
    box-shadow:none;
    border:none;
    padding:6px 0 0;
    display:none; /* default dicht op mobiel */
  }

  /* als je in JS een class op li zet zoals .is-open, dan klapt hij open */
  .scy-nav .scy-menu li.is-open > .sub-menu{
    display:block;
  }
}


/* =========================================================
   Tekstbalk / Marquee
   ========================================================= */
.scy-marquee{
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  background: var(--scy-marquee-bg, #111);
  color: var(--scy-marquee-text, #fff);
  font-size: 14px;
  line-height: 1;
  overflow:hidden;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.scy-marquee-track{
  justify-content:flex-start;
  margin:0;
  display:flex;
  width:max-content;
  animation: scy-marquee linear infinite;
  will-change: transform;
}
.scy-marquee-content{
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:10px 24px;
  white-space:nowrap;
}
.scy-marquee-item{
  opacity:.95;
  font-weight:700;
}
a.scy-marquee-item:hover{ opacity:1; text-decoration:underline; }
.scy-marquee-sep{ opacity:.55; font-weight:900; }

@keyframes scy-marquee{
  0%{ transform: translateX(0); }
  100%{ transform: translateX(-50%); }
}

/* =========================================================
   Homepage Hero (zoals voorbeeld)
   ========================================================= */
.scy-hero{
  position:relative;
  border-radius:18px;
  overflow:hidden;
  min-height: var(--scy-hero-h, 420px);
  background:#111;
  color:#fff;
  margin: 18px 0 22px;
}
.scy-hero::before{
  content:"";
  position:absolute; inset:0;
  background-image: var(--scy-hero-bg);
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  opacity:1;
  transform: scale(1.02);
}
.scy-hero::after{
  content:"";
  position:absolute; inset:0;
  background: var(--scy-hero-overlay-bg, rgba(0,0,0,var(--scy-hero-overlay, .2)));
}
.scy-hero-inner{
  position:relative;
  padding: 44px 42px 24px;
  max-width: 1200px;
  margin: 0 auto;
}
.scy-hero-kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:12px;
  opacity:.85;
}

/* Hero: grid + optioneel logo rechts */
.scy-hero-inner{ width:100%; }
.scy-hero-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 22px;
  align-items:center;
  position:relative;
}
.scy-hero-side{
  position:absolute;
  right: var(--scy-hero-logo-right, 16px);
  display:flex;
  justify-content:flex-end;
  align-items:center;
  pointer-events:auto;
}
/* standaard midden-rechts */
.scy-hero-side.pos-mid{
  top: 50%;
  transform: translateY(-50%);
}
/* boven-rechts */
.scy-hero-side.pos-top{
  top: 18px;
  transform: none;
}
/* onder-rechts */
.scy-hero-side.pos-bot{
  bottom: 18px;
  top: auto;
  transform: none;
}

.scy-hero-logo-wrap{
  width:auto;
  max-width: var(--scy-hero-logo-max, 220px);
  display:flex;
  justify-content:flex-end;
  align-items:center;
  padding: 6px;
  margin-left:auto;
}
.scy-hero-logo{
  width:100%;
  height:auto;
  max-height: var(--scy-hero-logo-maxh, 150px);
  object-fit: contain;
  filter: drop-shadow(0 14px 30px rgba(0,0,0,.35));
}
@media (max-width: 980px){
  .scy-hero-grid{ grid-template-columns:1fr; }
  .scy-hero-side{
    position:static;
    right:auto;
    top:auto;
    bottom:auto;
    transform:none;
    justify-content:flex-start;
    margin-top: 14px;
  }
  .scy-hero-logo-wrap{ max-width: 200px; }
}

/* =========================================================
   Hero doorlopend achter header (1 afbeelding, geen restart)
   ========================================================= */
body.scy-hero-extend-header{
  --scy-header-stack-h: 152px; /* topbar + header + menu (desktop, safe default) */
}
@media (max-width: 768px){
  body.scy-hero-extend-header{ --scy-header-stack-h: 128px; }
}

/* Header bovenop de hero */
body.scy-hero-extend-header .scy-site-header{
  position:absolute;
  top:0; left:0; right:0;
  z-index:999;
  background: transparent;
  border-bottom: 0;
}
body.scy-hero-extend-header .scy-site-header::after{ display:none; }

/* Hero start bij de top, zodat background "doorloopt" */
body.scy-hero-extend-header .scy-hero{
  margin-top: 0;
  border-radius: 0 0 18px 18px;
}
body.scy-hero-extend-header .scy-hero::before{
  background-position: center top;
}

/* Extra ruimte voor hero-content zodat het niet onder header/menu valt */
body.scy-hero-extend-header .scy-hero-inner{
  padding-top: calc(44px + var(--scy-header-stack-h));
}

.scy-hero-title{
  margin: 14px 0 14px;
  font-size: clamp(34px, 5vw, 64px);
  line-height: 1.02;
  font-weight: 900;
  text-shadow: 0 18px 40px rgba(0,0,0,.35);
}
.scy-hero-title .accent{ color: var(--scy-accent); }
.scy-hero-sub{
  font-size: 16px;
  line-height: 1.55;
  opacity:.92;
  max-width: 58ch;
}
.scy-hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top: 22px;
}
.scy-hero-actions .scy-btn{ border-radius:14px; padding:12px 18px; font-weight:800; background: var(--scy-hero-btn-bg, rgba(255,255,255,.14)); color: var(--scy-hero-btn-text, #fff); }
.scy-btn .scy-btn-ico{ display:inline-flex; width:18px; height:18px; margin-right:8px; vertical-align:middle; }
.scy-btn .scy-btn-ico svg{ width:18px; height:18px; }
.scy-btn.ghost{
  background: var(--scy-hero-btn-ghost-bg, rgba(255,255,255,.12));
  color: var(--scy-hero-btn-ghost-text, var(--scy-hero-btn-text, #fff));
  border:1px solid rgba(255,255,255,.18);
}
.scy-btn.ghost:hover{ background: rgba(255,255,255,.16); }

.scy-hero-features{
  position:relative;
  margin-top: 26px;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:14px;
  width:100%;
}
.scy-hero-feature{
  color: var(--scy-hero-feature-text, #fff);
  display:flex;
  flex: 1 1 210px;
  max-width: 280px;
  gap:12px;
  align-items:center;
  padding:14px 14px;
  border-radius:16px;
  background: var(--scy-hero-feature-bg, rgba(0,0,0,.42));
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(6px);
}

/* scy-hero-features-nowrap */
@media (min-width: 900px){
  .scy-hero-features{ flex-wrap:nowrap; }
  .scy-hero-feature{ flex:1 1 0; max-width:none; min-width:0; }
  .scy-hero-feature .txt{ min-width:0; }
}

.scy-hero-feature .ico{
  width:34px;height:34px;
  border-radius:12px;
  display:flex;
  align-items:center;justify-content:center;
  background: rgba(255,255,255,.12);
  font-weight:900;
}
.scy-hero-feature .t{
  font-weight:900;
  line-height:1.1;
}
.scy-hero-feature .d{
  font-size:13px;
  opacity:.86;
  margin-top:3px;
}

/* =========================================================
   Homepage blocks: netter + "cards"
   ========================================================= */
.scy-home-blocks{ display:flex; flex-direction:column; gap:18px; }
.scy-home-block{
  border:1px solid #eee;
  border-radius:18px;
  padding:18px;
  background:#fff;
  box-shadow: 0 10px 26px rgba(0,0,0,.04);
}
.scy-home-block-title{
  margin:0 0 12px;
  font-size: 22px;
  font-weight: 900;
}

/* =========================================================
   Pagina titel (single/page): mooier
   ========================================================= */
.scy-title{
  margin: 6px 0 18px;
  font-size: clamp(28px, 3.2vw, 44px);
  font-weight: 900;
  line-height: 1.06;
  text-shadow: 0 14px 30px rgba(0,0,0,.08);
  position:relative;
}
.scy-title::after{
  content:"";
  display:block;
  width: 84px;
  height: 4px;
  margin-top: 12px;
  border-radius: 999px;
  background: var(--scy-accent);
  box-shadow: 0 10px 20px rgba(0,0,0,.10);
}

/* Mobile tweaks */
@media (max-width: 780px){
  .scy-hero{ border-radius:16px; }
  .scy-hero-inner{ padding: 30px 22px 18px; }
  .scy-hero-feature{ flex: 1 1 46%; max-width:none; }
  .scy-hero-features{ gap:12px; }
}
@media (max-width: 420px){
  .scy-hero-feature{ flex: 1 1 100%; }
}

/* FAQ template */
.scy-faq-wrap{ padding: 28px 0 50px; }
.scy-faq-grid{ max-width: 980px; margin: 0 auto; }
.scy-faq-item{ background: rgba(0,0,0,.04); border: 1px solid rgba(0,0,0,.08); border-radius: 16px; padding: 0; overflow: hidden; }
.scy-faq-item + .scy-faq-item{ margin-top: 12px; }
.scy-faq-item summary{ list-style: none; cursor: pointer; padding: 16px 18px; font-weight: 800; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.scy-faq-item summary::-webkit-details-marker{ display:none; }
.scy-faq-item summary:after{ content:'+'; font-weight:900; opacity:.7; }
.scy-faq-item[open] summary:after{ content:'−'; }
.scy-faq-body{ padding: 0 18px 18px; opacity:.92; }

/* 404 */
.scy-404{ padding: 50px 0 70px; }
.scy-404 .scy-card{ max-width: 900px; margin: 0 auto; padding: 28px; border-radius: 22px; background: rgba(0,0,0,.04); border: 1px solid rgba(0,0,0,.08); }
.scy-404 h1{ margin:0 0 8px; }
.scy-404 p{ margin:0 0 18px; opacity:.86; }
.scy-404 .scy-actions{ display:flex; flex-wrap:wrap; gap:10px; }

/* =========================================================
   Home (blog index) layout
   ========================================================= */
.scy-home-posts{ margin-top:18px; }
.scy-home-posts-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.scy-home-post{ border:1px solid #eee; border-radius:18px; padding:18px; background:#fff; box-shadow:0 10px 26px rgba(0,0,0,.04); }
.scy-home-post-title{ margin:0 0 10px; font-size:22px; font-weight:900; }
@media(max-width:900px){ .scy-home-posts-grid{ grid-template-columns:1fr; } }

/* ==========================================================
   Footer upgrades (5 kolommen, logo-badge, nette cards)
   ========================================================== */

/* Grid altijd responsief, ongeacht 1-5 actieve kolommen */
.scy-footer-widgets{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

@media(max-width:560px){
  .scy-footer-widgets{ grid-template-columns: 1fr; }
}

/* Bottom bar 2 regels */
.scy-bottombar-text{
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: center;
}
.scy-bottombar-line{ line-height: 1.2; }

/* Cards voor Openingstijden en Contact widget */
.vs-card{
  background: var(--vs-card-bg, rgba(255,255,255,0.08));
  border: 1px solid var(--vs-card-border, rgba(255,255,255,0.12));
  border-radius: var(--vs-card-radius, 18px);
  padding: 14px;
  box-shadow: 0 18px 40px rgba(0,0,0,.18);
  backdrop-filter: blur(8px);
  /* voorkom dat lange strings (mail/kvk) buiten de kaart tekenen */
  overflow: hidden;
}

/* Contact-kaart: laat inhoud zichtbaar zodat lange mailadressen niet worden afgesneden */
.scy-footer .widget_vsem_contact .vs-card,
.scy-footer .widget_vsem_contact_widget .vs-card{
  overflow: visible;
}


/* Kaart onder Contact-titel (optioneel) */
.vs-contact-map{
  margin: 10px 0 14px;
  border-radius: var(--vs-card-radius, 18px);
  border: 1px solid var(--vs-card-border, rgba(255,255,255,0.12));
  background: var(--vs-card-bg, rgba(255,255,255,0.08));
  box-shadow: 0 18px 40px rgba(0,0,0,.18);
  overflow: hidden;
}
.vs-contact-map iframe{
  display:block;
  width:100%;
  height: var(--vs-map-h, 160px);
  border:0;
  pointer-events:none;
}

.vs-contact-map{ position: relative; }
.vs-contact-map-link{
  position:absolute;
  inset:0;
  display:block;
  cursor:pointer;
  background: transparent;
}
.vs-contact-map-link:focus{
  outline: 2px solid rgba(255,255,255,.75);
  outline-offset: 2px;
}

.vs-contact{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.vs-contact-item{ display:flex; align-items:center; gap:10px; }
.vs-contact-ico{
  width:24px;
  height:24px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background: rgba(255,255,255,0.08);
  font-size:14px;
  line-height:1;
}

/* Lange waarden (zoals mailadressen) netjes binnen de kaart houden */
.vs-contact-item a,
.vs-contact-item span{
  display: block;
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
  line-height: 1.25;
}

/* Mailadres moet leesbaar blijven: liever netjes wrappen dan afkappen */
.vs-contact-email a{
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Contact-kaart: mag volledig de kolombreedte gebruiken */
.scy-footer .widget_vsem_contact .vs-card,
.scy-footer .widget_vsem_contact_widget .vs-card{
  max-width: 100%;
}

/* Contactkolom slimmer plaatsen op desktop.
   We willen 'm breder, maar NIET onder de eerste widget laten vallen.
   Daarom: bij 4 kolommen start contact op kolom 3 (span 2), bij 3 kolommen start op kolom 2 (span 2). */
@media (min-width: 1100px){
  /* Houd footer-widgets netjes op 1 rij (geen kolom-spanning) */
  .scy-footer-widgets{ grid-auto-flow: row; }
  .scy-footer-col.scy-col-contact{ grid-column: auto; }
}


/* Contactkaart in footer: nooit afsnijden */
.scy-footer .scy-footer-col.scy-col-contact .vs-card{ overflow: visible !important; }
.scy-footer .scy-footer-col:has(.vs-contact) .vs-card{ overflow: visible !important; }

/* Contacttekst: leesbaar (niet microscopisch) */
@media (min-width: 641px){
  .scy-footer .scy-footer-col.scy-col-contact .vs-contact,
  .scy-footer .scy-footer-col:has(.vs-contact) .vs-contact{
    font-size: 14px !important;
  }
  .scy-footer .scy-footer-col.scy-col-contact .vs-contact-email a,
  .scy-footer .scy-footer-col:has(.vs-contact) .vs-contact-email a,
  .scy-footer .scy-footer-col.scy-col-contact .vs-contact-phone a,
  .scy-footer .scy-footer-col:has(.vs-contact) .vs-contact-phone a{
    font-size: 14px !important;
    letter-spacing: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}

/* In flex containers moet het tekstdeel ook mogen krimpen */
.vs-contact-item > :not(.vs-contact-ico){
  min-width: 0;
}

/* Footer Contact: groter en netter */
.scy-footer .widget_vsem_contact .vs-contact,
.scy-footer .widget_vsem_contact_widget .vs-contact{
  font-size: 14px !important;
}

/* Mail/telefoon ook gewoon leesbaar */
@media (min-width: 641px){
  .scy-footer .widget_vsem_contact .vs-contact-email a,
  .scy-footer .widget_vsem_contact_widget .vs-contact-email a,
  .scy-footer .widget_vsem_contact .vs-contact-phone a,
  .scy-footer .widget_vsem_contact_widget .vs-contact-phone a{
    font-size: 14px !important;
    letter-spacing: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}
.scy-footer .widget_vsem_contact .vs-contact-item,
.scy-footer .widget_vsem_contact_widget .vs-contact-item{
  line-height: 1.25;
}
.scy-footer .widget_vsem_contact .vs-contact-ico,
.scy-footer .widget_vsem_contact_widget .vs-contact-ico{
  width: 22px;
  height: 22px;
  font-size: 13px;
}

@media (min-width: 641px){
  .scy-footer .widget_vsem_contact .vs-contact-email a,
  .scy-footer .widget_vsem_contact .vs-contact-phone a,
  .scy-footer .widget_vsem_contact_widget .vs-contact-email a,
  .scy-footer .widget_vsem_contact_widget .vs-contact-phone a{
    white-space: normal;
    overflow-wrap: break-word;
  }
}

.vs-oh-status{ display:flex; align-items:center; gap:10px; margin:0 0 12px; font-weight:800; }
.vs-oh-status-sub{ opacity:.85; font-weight:600; margin-left:2px; }
.vs-oh-dot{ width:10px; height:10px; border-radius:999px; display:inline-block; }
.vs-oh-status.is-open .vs-oh-dot{ background:#2bb673; }
.vs-oh-status.is-closed .vs-oh-dot{ background:#e74c3c; }

.vs-oh-list{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.vs-oh-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; border-radius: 14px; background: rgba(255,255,255,0.06); }
.vs-oh-row.is-today{ background: rgba(43,182,115,0.14); border: 1px solid rgba(43,182,115,0.22); }
.vs-oh-label{ opacity:.95; font-weight:700; }
.vs-oh-time{ opacity:.9; font-weight:700; }
.vs-oh-note{ margin-top:12px; opacity:.85; }

/* ================================
   Pagina's: content in card met schaduw
   Alleen voor standaard pagina's (body.page)
================================= */

/* Subtiele pagina-achtergrond zodat de card zichtbaar is */
body.page{
  background: #f6f7f9;
}

body.page .scy-container.scy-page{
  padding-top: 64px;
  padding-bottom: 80px;
}

/* Card */
body.page .scy-container.scy-page .scy-article{
  background: #fff;
  border-radius: 18px;
  padding: 52px;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 20px 60px rgba(0,0,0,0.10), 0 8px 20px rgba(0,0,0,0.06);
}

body.page .scy-container.scy-page .scy-title{
  margin-top: 0;
}

/* ================================
   Pagina template: Brede container
   - Titel blijft netjes
   - Shortcodes/overzichten mogen de volle (brede) contentbreedte gebruiken
================================= */

/* Minder "boxed" gevoel: iets minder binnenpadding in de card */
body.page-template-page-wide .scy-container.scy-page .scy-article,
body.page-template-page-wide-php .scy-container.scy-page .scy-article{
  padding: 40px;
}

@media (max-width: 768px){
  body.page-template-page-wide .scy-container.scy-page .scy-article,
  body.page-template-page-wide-php .scy-container.scy-page .scy-article{
    padding: 24px;
  }
}

/* Forceer content wrappers om mee te schalen met de brede container */
body.page-template-page-wide .scy-container.scy-page .scy-content,
body.page-template-page-wide-php .scy-container.scy-page .scy-content{
  width: 100%;
  max-width: none;
}

body.page-template-page-wide .scy-container.scy-page .scy-content > *,
body.page-template-page-wide-php .scy-container.scy-page .scy-content > *{
  width: 100%;
  max-width: none !important;
}

/* Veel plugins/shortcodes stoppen alles in een .container/.wrap met max-width.
   Binnen dit template willen we dat niet. */
body.page-template-page-wide .scy-content .container,
body.page-template-page-wide .scy-content .wrap,
body.page-template-page-wide .scy-content [class*="container"],
body.page-template-page-wide .scy-content [class*="wrap"],
body.page-template-page-wide-php .scy-content .container,
body.page-template-page-wide-php .scy-content .wrap,
body.page-template-page-wide-php .scy-content [class*="container"],
body.page-template-page-wide-php .scy-content [class*="wrap"]{
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

@media (max-width: 768px){
  body.page .scy-container.scy-page{
    padding-top: 32px;
    padding-bottom: 44px;
  }
  body.page .scy-container.scy-page .scy-article{
    border-radius: 14px;
    padding: 28px;
  }
}

/* ============================
   Contact (Grafisch) template
   ============================ */

.scy-contact-page{
  padding-top: 30px;
  padding-bottom: 80px;
}

.scy-contact-hero{
  text-align: left;
  margin: 16px 0 20px;
}

.scy-contact-intro-text{
  color: inherit;
  max-width: 980px;
  font-size: inherit;
  line-height: inherit;
}

.scy-contact-quick{
  margin-top: 18px;
  display:flex;
  gap: 12px;
  justify-content:flex-start;
  flex-wrap:wrap;
}

.scy-contact-pill{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(0,0,0,.06);
  text-decoration:none;
  color: inherit;
  border: 1px solid rgba(0,0,0,.06);
  transition: all .2s ease;
}
.scy-contact-pill:hover{
  transform: translateY(-2px);
  background: rgba(0,0,0,.08);
}

.scy-contact-grid{
  display:flex;
  gap: 22px;
  align-items:flex-start;
  margin-top: 22px;
}

/* Vestiging switcher (tabs) */
.scy-contact-loc-switch{
  width: 100%;
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  margin-top: 10px;
  margin-bottom: -6px;
}

.scy-contact-loc-tab{
  appearance:none;
  border: 1px solid rgba(0,0,0,.10);
  background: #fff;
  color: inherit;
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 800;
  cursor:pointer;
  box-shadow: 0 10px 28px rgba(0,0,0,.06);
  transition: all .2s ease;
}

.scy-contact-loc-tab:hover{ transform: translateY(-1px); }

.scy-contact-loc-tab.is-active{
  border-color: rgba(0,0,0,.22);
  background: rgba(0,0,0,.04);
}

/* Panels die wisselen per vestiging */
.scy-contact-loc-panel{ display:none; }
.scy-contact-loc-panel.is-active{ display:block; }
.scy-contact-loc-panel--contents.is-active{ display: contents; }

.scy-contact-col{
  display:flex;
  flex-direction:column;
  gap: 22px;
  min-width: 0;
}

.scy-contact-col--left{ flex: 1.15; }
.scy-contact-col--right{ flex: .85; }

.scy-contact-card{
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 18px 55px rgba(0,0,0,.08);
}

.scy-contact-card-head h2{
  margin: 0;
  font-size: 18px;
}

.scy-contact-card-head p{
  margin: 6px 0 0;
  color: rgba(0,0,0,.65);
}

/* Direct contact items (meerdere telefoons/e-mails) */
.scy-contact-direct-grid{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.scy-contact-direct-item{
  display:flex;
  flex-direction:column;
  gap: 6px;
  padding: 14px 14px;
  border-radius: 16px;
  background: rgba(0,0,0,.03);
  border: 1px solid rgba(0,0,0,.06);
  text-decoration:none;
  color: inherit;
  transition: all .2s ease;
}

.scy-contact-direct-item:hover{
  transform: translateY(-2px);
  background: rgba(0,0,0,.04);
}

.scy-contact-direct-ico{ font-size: 18px; }
.scy-contact-direct-main{ font-weight: 800; font-size: 15px; }
.scy-contact-direct-sub{ color: rgba(0,0,0,.65); font-size: 13px; }

.scy-contact-loc-list{
  margin-top: 14px;
  display:grid;
  gap: 14px;
}

.scy-contact-loc{
  background: rgba(0,0,0,.03);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 16px;
  padding: 14px;
}

.scy-contact-loc-name{
  font-weight: 800;
  font-size: 16px;
}

.scy-contact-loc-addr{
  margin-top: 8px;
  color: rgba(0,0,0,.70);
}

.scy-contact-loc-meta{
  margin-top: 10px;
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
}

.scy-contact-mini{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(0,0,0,.06);
  text-decoration:none;
  color: inherit;
}

.scy-contact-loc-actions{
  margin-top: 12px;
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
}

.scy-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  text-decoration:none;
  border: 1px solid rgba(0,0,0,.10);
  transition: all .2s ease;
}

.scy-btn--dark{
  background: #111;
  color: #fff;
  border-color: #111;
}

.scy-btn--ghost{
  background: transparent;
  color: #111;
}

.scy-btn:hover{
  transform: translateY(-2px);
}

.scy-contact-map-frame{
  margin-top: 14px;
  border-radius: 16px;
  overflow:hidden;
  border: 1px solid rgba(0,0,0,.08);
  background: #f3f3f3;
}

.scy-contact-map-frame iframe{
  width:100%;
  height: 320px;
  border:0;
  display:block;
}

.scy-contact-map-empty{
  margin-top: 14px;
  padding: 14px;
  border-radius: 16px;
  background: rgba(0,0,0,.03);
  border: 1px dashed rgba(0,0,0,.15);
  color: rgba(0,0,0,.70);
}

.scy-contact-oh-wrap{
  margin-top: 16px;
}

/* Openingstijden (widget) beter leesbaar op contactpagina */
.scy-contact-hours .scy-contact-oh{
  font-size: 15px;
}
.scy-contact-hours .scy-contact-oh,
.scy-contact-hours .scy-contact-oh *{
  color: #111;
}
.scy-contact-hours .scy-contact-oh .scy-contact-oh-title{
  margin: 0 0 10px;
  font-size: 16px;
}
.scy-contact-hours .scy-contact-oh .vsem-openinghours,
.scy-contact-hours .scy-contact-oh .openinghours,
.scy-contact-hours .scy-contact-oh .opening-hours,
.scy-contact-hours .scy-contact-oh .widget,
.scy-contact-hours .scy-contact-oh .widget-content{
  background: transparent !important;
}
.scy-contact-hours .scy-contact-oh table{
  width:100%;
  border-collapse: separate;
  border-spacing: 0 8px;
}
.scy-contact-hours .scy-contact-oh table tr{
  background: rgba(0,0,0,.03);
}
.scy-contact-hours .scy-contact-oh table td,
.scy-contact-hours .scy-contact-oh table th{
  padding: 10px 12px;
  font-size: 14px;
}
.scy-contact-hours .scy-contact-oh table tr td:first-child,
.scy-contact-hours .scy-contact-oh table tr th:first-child{
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
}
.scy-contact-hours .scy-contact-oh table tr td:last-child,
.scy-contact-hours .scy-contact-oh table tr th:last-child{
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
  text-align:right;
}

/* Social media grid */
.scy-contact-social-grid{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
}
.scy-contact-social{
  display:flex;
  flex-direction:column;
  gap: 6px;
  padding: 14px;
  border-radius: 16px;
  background: rgba(0,0,0,.03);
  border: 1px solid rgba(0,0,0,.06);
  text-decoration:none;
  color: inherit;
  transition: all .2s ease;
}
.scy-contact-social:hover{
  transform: translateY(-2px);
  background: rgba(0,0,0,.04);
}
.scy-contact-social-ico{ font-size: 18px; }
.scy-contact-social-ico svg{ width: 20px; height: 20px; display:block; fill: currentColor; }
.scy-contact-social-main{ font-weight: 800; font-size: 15px; }
.scy-contact-social-sub{ color: rgba(0,0,0,.65); font-size: 13px; }

@media (max-width: 980px){
  .scy-contact-grid{ flex-direction: column; }
  .scy-contact-col--left, .scy-contact-col--right{ flex: 1; }
  .scy-contact-map-frame iframe{ height: 280px; }
}

@media (max-width: 768px){
  .scy-contact-page{ padding-bottom: 60px; }
  .scy-contact-card{ padding: 14px; border-radius: 16px; }
  .scy-contact-direct-grid{ grid-template-columns: 1fr; }
  .scy-contact-social-grid{ grid-template-columns: 1fr; }
}

/* =========================================================
   Search page (custom)
========================================================= */
.scy-search-page{ padding: 38px 0 70px; }
.scy-search-head{ padding: 22px; border-radius: 22px; background: rgba(0,0,0,.04); border: 1px solid rgba(0,0,0,.08); }
.scy-search-title{ margin: 0 0 14px; font-size: clamp(26px, 3vw, 40px); letter-spacing: -.02em; }
.scy-search-title span{ color: var(--scy-accent); }

.scy-search-form{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.scy-search-form input[type="search"]{
  flex:1;
  min-width: 240px;
  height: 46px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);
  padding: 0 16px;
  background: rgba(255,255,255,.9);
  outline: none;
}
.scy-search-form button{
  height: 46px;
  border-radius: 999px;
  padding: 0 18px;
  border: 0;
  background: var(--scy-btn-bg);
  color: var(--scy-btn-text);
  font-weight: 700;
  cursor: pointer;
}

.scy-search-results{ margin-top: 18px; }
.scy-search-subtitle{ margin: 28px 0 12px; font-size: 20px; }
.scy-search-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 980px){
  .scy-search-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px){
  .scy-search-grid{ grid-template-columns: 1fr; }
}

.scy-search-card{ padding: 0; overflow:hidden; border-radius: 22px; border: 1px solid rgba(0,0,0,.08); background: #fff; box-shadow: 0 14px 35px rgba(0,0,0,.08); }
.scy-search-card-link{ display:block; color: inherit; text-decoration:none; height: 100%; }
.scy-search-thumb{
  height: 170px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.scy-search-thumb--empty{
  background: linear-gradient(135deg, rgba(0,0,0,.06), rgba(0,0,0,.02));
}
.scy-search-body{ padding: 16px 16px 18px; }
.scy-search-badge{
  display:inline-flex;
  align-items:center;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  background: rgba(0,0,0,.06);
  margin-bottom: 10px;
}
.scy-search-card-title{ margin: 0 0 8px; font-size: 18px; line-height: 1.2; }
.scy-search-excerpt{ margin: 0 0 12px; opacity: .82; font-size: 14px; line-height: 1.4; }
.scy-search-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(0,0,0,.08);
  font-weight: 800;
  font-size: 13px;
}

.scy-search-pagination{ margin-top: 18px; }
.scy-search-pagination .page-numbers{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 38px;
  height: 38px;
  border-radius: 999px;
  background: rgba(0,0,0,.06);
  margin-right: 6px;
  text-decoration:none;
  color: inherit;
}
.scy-search-pagination .page-numbers.current{
  background: var(--scy-btn-bg);
  color: var(--scy-btn-text);
}

.scy-search-empty{ margin-top: 18px; padding: 24px; border-radius: 22px; background: rgba(0,0,0,.04); border: 1px solid rgba(0,0,0,.08); }