#lofoot-root{
  --navy:#10293d;--navy-deep:#0d2334;--gray-bg:#e9e7e3;--blue:#1c9bd7;
  --orange-a:#f0974a;--orange-b:#e87f1e;--ink:#16242f;--muted:#5e6f7c;
  --muted-light:#9aa7b1;--line:#e2e0dc;
  margin-top:25px;
  font-family:'Onest',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:var(--ink);-webkit-font-smoothing:antialiased;
}
#lofoot-root *{box-sizing:border-box;}
#lofoot-root a{color:inherit;text-decoration:none;}
#lofoot-root .lof-help-wrap{background:var(--gray-bg);border-top-left-radius:42px;border-top-right-radius:42px;padding:80px 24px 70px;}
#lofoot-root .lof-help-inner{max-width:var(--container,1280px);margin:0 auto;}
#lofoot-root .lof-help-title{font-size:52px;font-weight:500;color:#001831;text-align:center;margin:0 0 26px;letter-spacing:-.5px;}
#lofoot-root .lof-help-lead{max-width:660px;margin:0 auto 56px;text-align:center;color:var(--muted);font-size:18px;line-height:1.65;font-weight:400;}
#lofoot-root .lof-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-bottom:0;}
#lofoot-root .lof-news-band{position:relative;}
#lofoot-root .lof-news-band--top{position:relative;z-index:5;transform:translateY(-150px);margin-bottom:-150px;}
#lofoot-root .lof-news-band--top .lof-news::before{display:none;}
#lofoot-root .lof-news-band-gray{position:absolute;left:0;right:0;top:0;height:50%;background:var(--gray-bg);z-index:0;}
#lofoot-root .lof-news-inner{position:relative;z-index:1;max-width:var(--container,1280px);margin:0 auto;padding:0 24px;}
#lofoot-root .lof-card{background:#fff;border-radius:22px;padding:38px 34px 40px;min-height:150px;box-shadow:0 1px 2px rgba(16,41,61,.04);}
#lofoot-root .lof-card-inner{border-left:3px solid var(--blue);padding-left:22px;}
#lofoot-root .lof-card-label{color:var(--muted);font-size:18px;font-weight:400;margin:0 0 18px;}
#lofoot-root .lof-card-value{color:var(--navy);font-size:24px;font-weight:500;margin:0;}
#lofoot-root .lof-wa-icon{width:46px;height:46px;border-radius:11px;display:flex;align-items:center;justify-content:center;overflow:hidden;}
#lofoot-root .lof-wa-icon img{width:100%;height:100%;object-fit:cover;display:block;}
#lofoot-root .lof-news{position:relative;background:var(--navy-deep);border-radius:30px;padding:62px 64px 70px;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;color:#fff;}
#lofoot-root .lof-news::before{content:"";position:absolute;top:-22px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:30px solid transparent;border-right:30px solid transparent;border-bottom:24px solid var(--navy-deep);}
#lofoot-root .lof-news-title{font-size:54px;font-weight:500;color:#fff;margin:0 0 22px;letter-spacing:-.5px;}
#lofoot-root .lof-news-text{font-size:16.5px;line-height:1.7;color:#c4ccd3;font-weight:300;max-width:470px;margin:0;}
#lofoot-root .lof-news-form{display:flex;background:#1b3245;border:1px solid #2c4356;border-radius:60px;padding:7px 7px 7px 30px;align-items:center;}
#lofoot-root .lof-news-form input{flex:1;background:transparent;border:none;outline:none;color:#fff;font-family:inherit;font-size:16px;font-weight:300;}
#lofoot-root .lof-news-form input::placeholder{color:#8fa0ad;}
#lofoot-root .lof-news-btn{display:flex;align-items:center;gap:14px;background:linear-gradient(90deg,var(--orange-a),var(--orange-b));border:none;border-radius:60px;padding:15px 32px 15px 16px;color:#fff;font-family:inherit;font-size:17px;font-weight:500;cursor:pointer;white-space:nowrap;}
#lofoot-root .lof-news-btn .lof-arrow{width:34px;height:34px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
#lofoot-root .lof-news-btn .lof-arrow svg{display:block;}
/* The <footer> element deliberately carries NO container of its own. It wraps the
   link grid, the payment band and the bottom bar, so the payment proof sits inside
   the semantic footer and querySelector('footer .lof-pay-chips') resolves. A
   max-width here would shrink the full-bleed border-tops of .lof-pay and
   .lof-bottom to 1232px and stack a second layer of padding on top of their own
   -inner containers. The constraint therefore lives on .lof-foot-grid, which
   already carried the 56px bottom padding, so the box is unchanged. */
#lofoot-root .lof-foot-grid{max-width:var(--container,1280px);margin:0 auto;display:grid;grid-template-columns:1.25fr 1fr 1fr 1fr 1fr;gap:40px;padding:96px 24px 56px;}
#lofoot-root .lof-brand-logo{display:flex;align-items:center;margin-bottom:22px;}
#lofoot-root .lof-brand-logo img{height:34px;width:auto;display:block;}
#lofoot-root .lof-brand-desc{color:var(--muted);font-size:15.5px;line-height:1.6;max-width:255px;margin:0 0 30px;font-weight:400;}
#lofoot-root .lof-open-title{color:var(--navy);font-size:16px;font-weight:600;margin:0 0 14px;}
#lofoot-root .lof-open-text{color:var(--muted);font-size:15px;line-height:1.6;margin:0 0 26px;font-weight:400;max-width:230px;}
#lofoot-root .lof-socials{display:flex;gap:14px;margin-bottom:26px;}
#lofoot-root .lof-soc{width:42px;height:42px;border-radius:50%;background:var(--navy);display:flex;align-items:center;justify-content:center;}
#lofoot-root .lof-trust{display:inline-flex;align-items:center;}
#lofoot-root .lof-trust img{height:40px;width:auto;display:block;}
#lofoot-root .lof-col-title{font-size:15px;font-weight:600;color:var(--navy);margin:0 0 26px;}
#lofoot-root .lof-col-links{display:flex;flex-direction:column;gap:20px;}
#lofoot-root .lof-col-links a{color:var(--muted);font-size:15.5px;font-weight:400;line-height:1.4;transition:color .15s;}
#lofoot-root .lof-col-links a:hover{color:var(--navy);}
#lofoot-root .lof-col-links a.lof-all-brands{font-weight:600;display:inline-flex;align-items:center;gap:7px;margin-top:6px;}
#lofoot-root .lof-col-links a.lof-all-brands svg{width:15px;height:15px;flex:none;}
#lofoot-root .lof-col-links a.lof-all-brands:hover{color:var(--orange-b);}
#lofoot-root .lof-col-strong{color:var(--navy);font-weight:600;font-size:15.5px;margin:0 0 22px;}
#lofoot-root .lof-col-meta{display:flex;flex-direction:column;gap:20px;}
#lofoot-root .lof-col-meta span{color:var(--muted);font-size:15.5px;font-weight:400;}
#lofoot-root .lof-bottom{border-top:1px solid var(--line);}
#lofoot-root .lof-bottom-inner{max-width:var(--container,1280px);margin:0 auto;padding:30px 24px 56px;display:flex;align-items:center;justify-content:space-between;gap:24px;}
#lofoot-root .lof-copyright{color:var(--muted);font-size:14.5px;font-weight:400;}
#lofoot-root .lof-legal{display:flex;flex-wrap:wrap;row-gap:10px;gap:34px;}
#lofoot-root .lof-legal a{color:var(--muted);font-size:14.5px;font-weight:400;}
#lofoot-root .lof-legal a:hover{color:var(--navy);}
/* Clickable "Klantenservice" column heading - looks like the title, links to the service hub. */
#lofoot-root a.lof-col-title{display:inline-block;text-decoration:none;transition:color .15s;}
#lofoot-root a.lof-col-title:hover{color:var(--orange-b);}
/* Retouren button (policy: a returns button in the footer). Grouped right, before the legal links. */
#lofoot-root .lof-retour-btn{margin-left:auto;display:inline-flex;align-items:center;gap:9px;padding:11px 22px;border:1.5px solid var(--orange-b);border-radius:60px;color:#b8571e;font-size:14.5px;font-weight:600;text-decoration:none;white-space:nowrap;transition:background .15s,color .15s;}
#lofoot-root .lof-retour-btn svg{flex:none;}
#lofoot-root .lof-retour-btn:hover{background:var(--orange-b);color:#fff;}
@media(max-width:980px){
  #lofoot-root .lof-cards{grid-template-columns:1fr;}
  #lofoot-root .lof-news{grid-template-columns:1fr;}
  #lofoot-root .lof-help-title{font-size:44px;}
  #lofoot-root .lof-news-title{font-size:38px;}
  #lofoot-root .lof-foot-grid{grid-template-columns:1fr 1fr;}
  #lofoot-root .lof-bottom-inner{flex-direction:column;align-items:flex-start;}
  #lofoot-root .lof-retour-btn{margin-left:0;}
}
@media(max-width:560px){
  #lofoot-root .lof-foot-grid{grid-template-columns:1fr;}
  #lofoot-root .lof-news{padding:34px 24px 40px;border-radius:22px;gap:22px;}
  #lofoot-root .lof-news-title{font-size:28px;}
  #lofoot-root .lof-news-form{flex-direction:column;border-radius:24px;padding:18px;align-items:stretch;gap:14px;}
  #lofoot-root .lof-news-btn{justify-content:center;}
}

/* Payment band -------------------------------------------------------------
   Sitewide payment proof between the footer grid and the bottom bar, fed by
   qx_pay_chips(). Chip metrics are copied from .paychip in checkout.css on
   purpose, so the five payment rows on this site read as one component.
   An official brand mark is never recoloured, so each logo sits on its own
   white tile with a hairline border (a borderless white tile disappears on the
   white band). iDEAL/Wero ships with its own yellow tile, so that one keeps the
   border but drops the padding and lets the mark fill the tile. */
#lofoot-root .lof-pay{border-top:1px solid var(--line);}
#lofoot-root .lof-pay-inner{max-width:var(--container,1280px);margin:0 auto;padding:26px 24px;display:flex;align-items:center;justify-content:flex-start;gap:18px;flex-wrap:wrap;}
#lofoot-root .lof-pay-title{margin:0;display:inline-flex;align-items:center;gap:8px;font-size:14px;color:#212121;font-weight:600;}
#lofoot-root .lof-pay-title svg{flex:none;display:block;}
#lofoot-root .lof-pay-chips{display:flex;align-items:center;justify-content:flex-start;gap:10px;flex-wrap:wrap;}
#lofoot-root .lof-chip{height:38px;min-width:56px;padding:0 10px;background:#fff;border:1px solid #e6e9ec;border-radius:8px;display:grid;place-items:center;box-sizing:border-box;}
#lofoot-root .lof-chip img{height:18px;width:auto;max-width:84px;object-fit:contain;display:block;}
#lofoot-root .lof-chip--ideal{padding:0;overflow:hidden;}
#lofoot-root .lof-chip--ideal img{height:36px;max-width:none;}
#lofoot-root .lof-chip--mc img,#lofoot-root .lof-chip--bancontact img{height:22px;}
@media (max-width:760px){
  #lofoot-root .lof-pay-inner{flex-direction:column;align-items:flex-start;gap:12px;padding:22px 20px;}
}