/* =====================================================================
   Light & Shade kassa — opmaak bovenop het thema Classic
   Zelfde uitstraling als het platform: rustig, veel wit, donkere knoppen
   met ronde hoeken en de zalmkleur als accent.
   Pas hieronder de lettertypes en kleuren aan als ze afwijken van het platform
   (assets/style.css van de storefront).
   ===================================================================== */
:root{
  --ls-font: "Exo 2", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --ls-font-head: "Lora", Georgia, "Times New Roman", serif;
  --ls-dark: #1d1d1b;
  --ls-text: #3a3835;
  --ls-muted: #8a857d;
  --ls-line: #e6e2da;
  --ls-bg: #f7f5f1;
  --ls-accent: #e09a7f;
  --ls-ok: #2f6b2a;
  --ls-radius: 6px;
}

/* ---------- basis ---------- */
body{font-family:var(--ls-font);color:var(--ls-text);background:var(--ls-bg);font-size:15px}
#wrapper{background:var(--ls-bg);padding-top:2rem;box-shadow:none}
h1,h2,h3,.h1,.h2,.h3,.page-header h1{font-family:var(--ls-font-head);font-weight:400;color:var(--ls-dark);text-transform:none;letter-spacing:0}
h4,h5,h6,.h4,.h5,.h6{font-family:var(--ls-font);color:var(--ls-dark);text-transform:none}
a{color:var(--ls-dark)}
a:hover,a:focus{color:var(--ls-dark);text-decoration:underline;text-decoration-color:var(--ls-accent)}
.ls-wrap{max-width:1296px;margin:0 auto;padding:0 1.5rem}
.ls-muted{color:var(--ls-muted)}
#header{box-shadow:none;background:#fff}
.breadcrumb{background:transparent;padding:0;margin-bottom:1rem;font-size:.85rem}
.breadcrumb li a{color:var(--ls-muted)}

/* ---------- kop ---------- */
.ls-topbar{background:#2b2926;color:#f2efe9;font-size:.82rem}
.ls-topbar .ls-wrap{display:flex;justify-content:space-between;align-items:center;min-height:36px;gap:1rem}
#header .ls-topbar a,.ls-topbar a{color:#f2efe9;text-decoration:none}
#header .ls-head a{color:var(--ls-dark)}
#header .ls-head a.ls-continue{color:var(--ls-muted)}
.ls-top-contact a{margin-right:1.4rem}
.ls-langs a{margin-left:.9rem;opacity:.75}#header .ls-langs a.on,#header .ls-langs a:hover{opacity:1;color:var(--ls-accent)}
.ls-head{background:#fff;border-bottom:1px solid var(--ls-line)}
.ls-head .ls-wrap{display:flex;align-items:center;gap:2rem;min-height:84px}
.ls-logo img{max-height:52px;width:auto;height:auto;display:block}
.ls-continue{font-size:.92rem;color:var(--ls-muted);text-decoration:none;margin-right:auto}
.ls-continue:hover{color:var(--ls-dark)}
.ls-icons{display:flex;gap:1.3rem;align-items:center}
.ls-icons a{position:relative;display:flex;align-items:center;gap:.4rem;text-decoration:none;color:var(--ls-dark)}
.ls-icons svg,.ls-secure svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5}
.ls-icon-txt{font-size:.88rem}
.ls-count{position:absolute;top:-7px;right:-9px;min-width:18px;height:18px;border-radius:9px;background:var(--ls-accent);color:#fff;font-size:11px;font-weight:600;line-height:18px;text-align:center;padding:0 5px}
.ls-head--checkout .ls-wrap{min-height:76px}
.ls-secure{display:flex;align-items:center;gap:.5rem;margin-left:auto;font-size:.95rem;color:var(--ls-dark)}
.ls-secure svg{width:20px;height:20px;color:var(--ls-ok)}
.ls-help{font-size:.88rem;color:var(--ls-muted)}
.ls-help a{color:var(--ls-dark);font-weight:500}

/* ---------- voet ---------- */
#footer{background:#fff;padding:0;margin-top:3rem}
.ls-foot{background:#fff;border-top:1px solid var(--ls-line);padding-top:3rem;color:var(--ls-text);font-size:.9rem}
.ls-foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:2.5rem}
.ls-foot h4{font-size:1rem;font-weight:600;margin:0 0 1rem}
.ls-foot ul{list-style:none;margin:0;padding:0}
.ls-foot li{margin:0 0 .5rem}
.ls-foot a{color:var(--ls-text);text-decoration:none}
.ls-foot a:hover{color:var(--ls-dark);text-decoration:underline;text-decoration-color:var(--ls-accent)}
.ls-addr{margin:0 0 .6rem;line-height:1.6}
.ls-foot-bottom{border-top:1px solid var(--ls-line);margin-top:2.5rem;padding-top:1.2rem;padding-bottom:1.6rem;color:var(--ls-muted);font-size:.8rem}
.ls-foot--min{padding:1.4rem 0}
.ls-foot--min .ls-wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;color:var(--ls-muted);font-size:.85rem}
.ls-foot--min nav{display:flex;flex-wrap:wrap;gap:1.4rem}

/* ---------- knoppen en velden ---------- */
.btn{border-radius:999px;font-family:var(--ls-font);text-transform:none;font-weight:500;letter-spacing:0;padding:.7rem 1.5rem;box-shadow:none}
.btn-primary,.btn-primary:disabled,.btn-primary.disabled{background:var(--ls-dark);border-color:var(--ls-dark);color:#fff}
.btn-primary:hover,.btn-primary:focus,.btn-primary:active{background:#000;border-color:#000;color:#fff}
.btn-secondary,.btn-tertiary{background:#fff;border:1px solid var(--ls-dark);color:var(--ls-dark)}
.btn-secondary:hover,.btn-tertiary:hover{background:var(--ls-dark);color:#fff}
.form-control,.custom-select,select.form-control,input[type=text],input[type=email],input[type=password],input[type=tel]{
  border:1px solid #d6d2cb;border-radius:4px;background:#fff;color:var(--ls-dark);padding:.6rem .8rem;box-shadow:none}
.form-control:focus{border-color:var(--ls-dark);outline:2px solid var(--ls-accent);outline-offset:0}
.form-control-label,label{color:var(--ls-dark)}
.custom-checkbox input[type=checkbox]+span,.custom-radio{border-color:#b8b3ab}
.custom-radio input[type=radio]:checked+span{background:var(--ls-dark)}
.input-group .input-group-btn>.btn{border-radius:0 4px 4px 0;padding:.6rem 1rem}
.alert-info{background:#f1f0ee;border-color:var(--ls-line);color:var(--ls-text)}
.alert-success{background:#eef6ea;border-color:#d5e8cc;color:var(--ls-ok)}

/* ---------- kaarten: winkelmandje, account, bevestiging ---------- */
.card,.page-content.card,#content.page-content,.cart-grid-body .card,.cart-summary,.page-my-account #content,.block-promo{
  border:1px solid var(--ls-line);border-radius:var(--ls-radius);box-shadow:none;background:#fff}
.card-block{padding:1.4rem 1.6rem}
.page-header{margin-bottom:1.4rem}
.cart-grid-body .card-block h1{font-size:1.6rem}
.cart-item{border-bottom:1px solid var(--ls-line)}
.product-line-info a.label{color:var(--ls-dark);font-weight:500}
.product-price,.current-price,.cart-summary-line .value{color:var(--ls-dark)}
.cart-summary-totals .cart-summary-line.cart-total{background:#f6f2ec;border-radius:4px}
.cart-detailed-actions .btn{width:100%}
.page-my-account #content .links a span.link-item{border:1px solid var(--ls-line);border-radius:var(--ls-radius);box-shadow:none;background:#fff;text-transform:none;font-size:.95rem;color:var(--ls-dark)}
.page-my-account #content .links a:hover span.link-item{border-color:var(--ls-accent)}
.page-my-account #content .links a i{color:var(--ls-accent)}

/* ---------- afrekenen ---------- */
body#checkout{background:var(--ls-bg)}
body#checkout section.checkout-step{border:1px solid var(--ls-line);border-radius:var(--ls-radius);box-shadow:none;margin-bottom:1rem;background:#fff}
body#checkout section.checkout-step .step-title{font-family:var(--ls-font-head);font-weight:400;text-transform:none;font-size:1.25rem;color:var(--ls-dark)}
body#checkout section.checkout-step.-current .step-title{color:var(--ls-dark)}
body#checkout section.checkout-step .step-number{background:var(--ls-dark);color:#fff;border-radius:50%;width:28px;height:28px;line-height:28px;text-align:center;display:inline-block;font-family:var(--ls-font);font-size:.85rem}
body#checkout section.checkout-step.-complete .step-number{background:var(--ls-ok)}
body#checkout section.checkout-step .step-edit{color:var(--ls-muted)}
body#checkout .delivery-option,body#checkout .payment-option{border:1px solid var(--ls-line);border-radius:4px;padding:.9rem 1rem;margin-bottom:.6rem;background:#fff}
body#checkout .delivery-option:has(input:checked),body#checkout .payment-option:has(input:checked){border-color:var(--ls-dark)}
body#checkout .nav-inline .nav-link,body#checkout .nav-separator{text-transform:none;color:var(--ls-muted)}
body#checkout .nav-inline .nav-link.active{color:var(--ls-dark);font-weight:600}
body#checkout #payment-confirmation .btn{width:100%;padding:.95rem}
body#checkout .cart-summary{position:sticky;top:1rem}
#order-confirmation #content-hook_order_confirmation .card-title{font-family:var(--ls-font-head);font-weight:400;text-transform:none}
#order-confirmation .material-icons.rtl-no-flip.done{color:var(--ls-ok)}

/* ---------- gsm ---------- */
@media (max-width: 991px){
  .ls-foot-grid{grid-template-columns:1fr 1fr}
  .ls-head .ls-wrap{gap:1rem;min-height:68px}
  .ls-logo img{max-height:40px}
  .ls-help{display:none}
  body#checkout .cart-summary{position:static}
}
@media (max-width: 575px){
  .ls-foot-grid{grid-template-columns:1fr}
  .ls-continue{font-size:0}
  .ls-continue::first-letter{font-size:1.4rem}
  .ls-top-contact a:last-child{display:none}
  .ls-icon-txt{display:none}
}

/* ---------- geruststelling naast het mandje (module blockreassurance) ---------- */
.blockreassurance_product,#block-reassurance{margin-top:1rem}
#block-reassurance ul,.blockreassurance_product{list-style:none;padding:0}
#block-reassurance li,.blockreassurance_product>div{display:flex;gap:.8rem;align-items:flex-start;border:0;padding:.55rem 0;font-size:.85rem;color:var(--ls-text)}
#block-reassurance img,.blockreassurance_product img,#block-reassurance svg,.blockreassurance_product svg{width:22px!important;height:22px!important;flex:none;opacity:.7;filter:grayscale(1)}