/* Kerst-inkopen.nl — thema op OpenCart 3 default (Bootstrap 3) */
@font-face { font-family: 'Figtree'; src: url('../fonts/figtree.woff2') format('woff2'); font-weight: 300 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Bricolage Grotesque'; src: url('../fonts/bricolage.woff2') format('woff2'); font-weight: 600 800; font-style: normal; font-display: swap; }

:root {
  --rood: #C8102E; --rood-donker: #9E0B22;
  --groen: #1E5B3F; --groen-donker: #143D2B; --groen-licht: #E9F2EC; --mint: #CFE3D7;
  --grond: #FAF8F5; --kaart: #FFFFFF; --tegel: #F1ECE4; --lijn: #ECE7E0;
  --inkt: #1D1D1B; --zacht: #5C5A55; --goud: #B7791F;
  --display: 'Bricolage Grotesque', Georgia, serif;
  --tekst: 'Figtree', 'Segoe UI', Helvetica, Arial, sans-serif;
  --r-groot: 20px; --r: 16px; --r-klein: 12px;
}

/* ---------- basis ---------- */
html { -webkit-text-size-adjust: 100%; }
body { font-family: var(--tekst); font-size: 16px; line-height: 1.55; color: var(--inkt); background: var(--grond); }
h1, h2, h3, h4, h5, h6 { color: var(--inkt); font-family: var(--tekst); font-weight: 700; }
h1, h2, .ki-display { font-family: var(--display); font-weight: 800; letter-spacing: -0.02em; line-height: 1.08; }
h1 { font-size: 40px; } h2 { font-size: 28px; } h3 { font-size: 21px; }
a { color: var(--groen); } a:hover, a:focus { color: var(--rood); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--rood); outline-offset: 2px; }
.container { max-width: 1280px; width: 100%; padding-left: 24px; padding-right: 24px; }
legend { font-family: var(--display); font-weight: 800; border-color: var(--lijn); }
hr { border-color: var(--lijn); }
.ki-skip { position: absolute; left: -9999px; top: 0; background: var(--inkt); color: #fff; padding: 10px 16px; z-index: 1000; }
.ki-skip:focus { left: 16px; top: 16px; color: #fff; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* knoppen */
.btn { border-radius: 24px; font-weight: 700; font-family: var(--tekst); padding: 9px 20px; border-width: 2px; text-shadow: none; box-shadow: none; background-image: none; }
.btn-lg { padding: 13px 26px; font-size: 16px; }
.btn-primary { background: var(--rood); border-color: var(--rood); color: #fff; }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active { background: var(--rood-donker); border-color: var(--rood-donker); color: #fff; }
.btn-default { background: #fff; border-color: var(--lijn); color: var(--inkt); }
.btn-default:hover, .btn-default:focus { background: var(--grond); border-color: var(--zacht); color: var(--inkt); }
.btn-danger { background: var(--rood); border-color: var(--rood); }
.btn-info, .btn-success { background: var(--groen); border-color: var(--groen); color: #fff; }
.btn-info:hover, .btn-success:hover { background: var(--groen-donker); border-color: var(--groen-donker); color: #fff; }
.ki-btn { display: inline-block; font-weight: 700; font-size: 16px; padding: 14px 26px; border-radius: 28px; border: 2px solid transparent; text-decoration: none; line-height: 1.2; }
.ki-btn:hover, .ki-btn:focus { text-decoration: none; }
.ki-btn--light { background: #fff; color: var(--rood-donker); }
.ki-btn--light:hover, .ki-btn--light:focus { background: var(--grond); color: var(--rood-donker); }
.ki-btn--light-green { background: #fff; color: var(--groen); }
.ki-btn--light-green:hover, .ki-btn--light-green:focus { background: var(--groen-licht); color: var(--groen-donker); }
.ki-btn--ghost { border-color: #fff; color: #fff; }
.ki-btn--ghost:hover, .ki-btn--ghost:focus { background: rgba(255,255,255,.12); color: #fff; }

/* formulieren */
.form-control { border-radius: var(--r-klein); border: 2px solid var(--lijn); box-shadow: none; height: 44px; font-size: 16px; }
textarea.form-control { height: auto; }
.form-control:focus { border-color: var(--groen); box-shadow: none; }
.input-group .form-control:first-child { border-radius: var(--r-klein) 0 0 var(--r-klein); }
.input-group-btn:last-child > .btn { border-radius: 0 var(--r-klein) var(--r-klein) 0; height: 44px; }
.alert { border-radius: var(--r-klein); border: 0; }
.alert-success { background: var(--groen-licht); color: var(--groen-donker); }
.alert-success a { color: var(--groen-donker); font-weight: 700; }
.alert-danger { background: #FBE5E8; color: var(--rood-donker); }
.breadcrumb { background: transparent; border: 0; padding: 20px 0 8px; margin: 0 0 12px; font-size: 14px; }
.breadcrumb > li { text-shadow: none; padding: 0; }
.breadcrumb > li:after { display: none; }
.breadcrumb > li + li:before { content: "/"; color: var(--zacht); padding: 0 8px; }
.breadcrumb a { color: var(--zacht); }
.breadcrumb i.fa-home { color: var(--zacht); }
.list-group a { border-color: var(--lijn); color: var(--inkt); }
.list-group a.active, .list-group a.active:hover, .list-group a:hover { background: var(--groen-licht); color: var(--groen-donker); border-color: var(--lijn); text-shadow: none; }
.pagination > li > a, .pagination > li > span { color: var(--groen); border-color: var(--lijn); }
.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover { background: var(--groen); border-color: var(--groen); }
.table > thead > tr > td, .table > tbody > tr > td { border-color: var(--lijn); }
.panel { border-radius: var(--r); border-color: var(--lijn); box-shadow: none; }
.panel-default > .panel-heading { background: var(--grond); border-color: var(--lijn); border-radius: var(--r) var(--r) 0 0; }
.panel-title { font-weight: 700; }

/* ---------- USP-balk ---------- */
.ki-usp { background: var(--groen-donker); color: #fff; font-size: 14px; font-weight: 600; }
.ki-usp ul { list-style: none; margin: 0; padding: 9px 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 32px; }
.ki-usp .fa { color: var(--mint); }
@media (max-width: 767px) { .ki-usp li:not(:first-child) { display: none; } }

/* ---------- header ---------- */
.ki-header { background: #fff; border-bottom: 1px solid var(--lijn); }
.ki-header__row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 36px; padding-top: 18px; padding-bottom: 18px; }
.ki-logo { display: flex; align-items: center; gap: 12px; color: var(--inkt); text-decoration: none; flex-shrink: 0; }
.ki-logo:hover, .ki-logo:focus { color: var(--inkt); text-decoration: none; }
.ki-logo img { max-height: 56px; width: auto; }
.ki-logo__text { font-family: var(--display); font-weight: 800; font-size: 26px; letter-spacing: -0.02em; }
.ki-logo__text span { color: var(--rood); }
.ki-header__search { flex: 1 1 360px; min-width: 0; }
.ki-search { display: flex; position: relative; }
.ki-search input { flex: 1; min-width: 0; height: 48px; padding: 0 18px; border: 2px solid var(--groen); border-right: 0; border-radius: 24px 0 0 24px; font-size: 16px; background: #fff; -webkit-appearance: none; }
.ki-search input:focus { outline: none; box-shadow: inset 0 0 0 1px var(--groen); }
.ki-search button { height: 48px; padding: 0 22px; border: 0; border-radius: 0 24px 24px 0; background: var(--groen); color: #fff; font-weight: 700; }
.ki-search button:hover { background: var(--groen-donker); }
.ki-search button .fa { margin-right: 8px; }
.ki-header__links { display: flex; align-items: center; gap: 6px; }
.ki-iconlink { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 10px; font-size: 13px; font-weight: 600; color: var(--inkt); min-width: 44px; text-decoration: none; }
.ki-iconlink:hover, .ki-iconlink:focus { color: var(--rood); text-decoration: none; }
.ki-cart { margin-left: 6px; }
.ki-cartbtn { display: flex; align-items: center; gap: 10px; padding: 11px 20px; border-radius: 24px; background: var(--rood); color: #fff; font-weight: 700; font-size: 15px; border: 0; white-space: nowrap; }
.ki-cartbtn:hover, .ki-cartbtn:focus, .ki-cart.open .ki-cartbtn { background: var(--rood-donker); color: #fff; }
.ki-cartbtn .fa { margin-right: 6px; }
#cart .dropdown-menu { background: #fff; border-radius: var(--r); border: 1px solid var(--lijn); box-shadow: 0 12px 32px rgba(29,29,27,.12); min-width: 380px; padding: 12px; z-index: 1001; }
#cart .dropdown-menu .table-striped > tbody > tr:nth-of-type(odd) { background: var(--grond); }
#cart .dropdown-menu li > div { min-width: 0; padding: 0; }
@media (max-width: 767px) {
  .ki-header__row { gap: 12px; }
  .ki-logo__text { font-size: 21px; }
  .ki-logo svg { width: 36px; height: 36px; }
  .ki-header__links { margin-left: auto; }
  .ki-iconlink span, .ki-search__label { display: none; }
  .ki-header__search { order: 3; flex-basis: 100%; }
  .ki-search button .fa { margin: 0; }
  #cart .dropdown-menu { min-width: 300px; }
  .ki-cartbtn { padding: 10px 14px; font-size: 14px; }
}

/* ---------- menu ---------- */
.ki-menu { border-top: 1px solid var(--lijn); background: #fff; }
.ki-menu__toggle { display: none; }
.ki-menu__list { list-style: none; margin: 0; padding: 0; display: flex !important; flex-wrap: wrap; height: auto !important; }
.ki-menu__list > li { position: relative; }
.ki-menu__list > li > a { display: block; padding: 14px 12px; font-weight: 700; font-size: 15px; color: var(--inkt); text-decoration: none; }
.ki-menu__list > li > a:hover, .ki-menu__list > li > a:focus, .ki-menu__list > li.open > a { color: var(--rood); }
.ki-menu__list .fa-angle-down { color: var(--zacht); margin-left: 2px; }
.ki-menu__drop { border-radius: var(--r); border: 1px solid var(--lijn); box-shadow: 0 12px 32px rgba(29,29,27,.12); padding: 14px 8px 8px; min-width: 260px; margin-top: 0; }
.ki-menu__drop ul a { display: block; padding: 7px 14px; color: var(--inkt); border-radius: 8px; }
.ki-menu__drop ul a:hover, .ki-menu__drop ul a:focus { background: var(--groen-licht); color: var(--groen-donker); text-decoration: none; }
.ki-menu__all { display: block; margin-top: 6px; padding: 10px 14px; border-top: 1px solid var(--lijn); font-weight: 700; color: var(--rood); }
@media (min-width: 768px) { .ki-menu__list > li.dropdown:hover > .dropdown-menu { display: block; } }
@media (max-width: 767px) {
  .ki-menu__toggle { display: flex; align-items: center; gap: 10px; width: 100%; padding: 13px 0; border: 0; background: none; font-weight: 700; font-size: 16px; color: var(--inkt); }
  .ki-menu__list { display: none !important; flex-direction: column; padding-bottom: 10px; }
  .ki-menu__list.in { display: flex !important; }
  .ki-menu__list > li > a { padding: 12px 0; border-top: 1px solid var(--lijn); }
  .ki-menu__drop { position: static; float: none; box-shadow: none; border: 0; padding: 0 0 8px 12px; }
}

/* ---------- hero ---------- */
.ki-hero { display: flex; flex-wrap: wrap; gap: 24px; padding-top: 32px; }
.ki-hero__main { position: relative; flex: 999 1 560px; min-width: 0; min-height: 440px; border-radius: var(--r-groot); background: var(--rood-donker) center / cover no-repeat; color: #fff; overflow: hidden; display: flex; align-items: flex-end; }
.ki-hero__shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(110,8,24,.88) 0%, rgba(110,8,24,.55) 45%, rgba(110,8,24,.05) 100%); }
.ki-hero__body { position: relative; padding: 56px; display: flex; flex-direction: column; gap: 18px; max-width: 640px; }
.ki-hero__body h1 { color: #fff; font-size: 60px; margin: 0; line-height: 1; letter-spacing: -0.03em; }
.ki-hero__body p { font-size: 19px; line-height: 1.5; margin: 0; max-width: 520px; }
.ki-hero__buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.ki-badge { align-self: flex-start; background: #fff; color: var(--rood-donker); font-weight: 700; font-size: 13px; padding: 6px 12px; border-radius: 14px; }
.ki-hero__side { flex: 1 1 340px; display: flex; flex-direction: column; gap: 24px; }
.ki-count { background: var(--groen-donker); color: #fff; border-radius: var(--r-groot); padding: 32px; display: flex; flex-direction: column; gap: 20px; }
.ki-count__title { font-weight: 600; color: var(--mint); }
.ki-count__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ki-count__grid > div { background: var(--groen); border-radius: var(--r-klein); padding: 14px 4px; text-align: center; }
.ki-count__grid b { display: block; font-family: var(--display); font-weight: 800; font-size: 34px; line-height: 1; font-variant-numeric: tabular-nums; }
.ki-count__grid span { display: block; font-size: 12px; margin-top: 6px; color: var(--mint); }
.ki-count__link { color: #fff; font-weight: 700; text-decoration: underline; }
.ki-count__link:hover, .ki-count__link:focus { color: var(--mint); }
.ki-review { background: #fff; border: 1px solid var(--lijn); border-radius: var(--r-groot); padding: 28px; display: flex; flex-direction: column; gap: 8px; }
.ki-review__score { display: flex; align-items: baseline; gap: 10px; }
.ki-review__score b { font-family: var(--display); font-weight: 800; font-size: 40px; line-height: 1; }
.ki-stars { color: var(--goud); font-size: 20px; letter-spacing: 2px; }
.ki-review__count { color: var(--zacht); font-size: 15px; }
.ki-review__ship { font-weight: 600; font-size: 15px; }
.ki-review__ship b { color: var(--rood); }
@media (max-width: 767px) {
  .ki-hero { padding-top: 16px; gap: 16px; }
  .ki-hero__main { min-height: 380px; }
  .ki-hero__body { padding: 28px; }
  .ki-hero__body h1 { font-size: 38px; }
  .ki-hero__body p { font-size: 17px; }
  .ki-count { padding: 24px; }
  .ki-count__grid b { font-size: 28px; }
}

/* ---------- secties ---------- */
.ki-section { padding-top: 64px; }
.ki-section__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 24px; }
.ki-section__head h2 { margin: 0; font-size: 36px; }
.ki-section__head a { font-weight: 700; }
@media (max-width: 767px) { .ki-section { padding-top: 44px; } .ki-section__head h2 { font-size: 28px; } }

.ki-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }
.ki-tile { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--lijn); border-radius: var(--r); overflow: hidden; color: var(--inkt); text-decoration: none; }
.ki-tile:hover, .ki-tile:focus { color: var(--rood); text-decoration: none; border-color: #DCD3C6; }
.ki-tile__img { display: block; aspect-ratio: 4 / 3; background: var(--tegel); overflow: hidden; }
.ki-tile__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ki-tile__name { padding: 16px 18px; font-weight: 700; font-size: 16px; }
@media (max-width: 480px) { .ki-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .ki-tile__name { padding: 12px; font-size: 15px; } }

.ki-business { background: var(--groen); color: #fff; border-radius: var(--r-groot); display: flex; flex-wrap: wrap; overflow: hidden; }
.ki-business__body { flex: 1 1 480px; padding: 56px; display: flex; flex-direction: column; gap: 16px; }
.ki-business__body h2 { color: #fff; font-size: 40px; margin: 0; }
.ki-business__body p { font-size: 17px; color: #E6F0EA; max-width: 460px; margin: 0; }
.ki-business__img { flex: 1 1 360px; min-height: 280px; background: #164A33 center / cover no-repeat; }
@media (max-width: 767px) { .ki-business__body { padding: 28px; } .ki-business__body h2 { font-size: 30px; } }

/* ---------- productkaarten (alle overzichten) ---------- */
.ki-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }
.ki-grid > .product-layout { width: auto; padding: 0; float: none; }
.product-thumb { position: relative; background: #fff; border: 1px solid var(--lijn); border-radius: var(--r); overflow: hidden; margin-bottom: 20px; display: flex; flex-direction: column; height: calc(100% - 20px); }
.ki-grid .product-thumb { height: 100%; margin-bottom: 0; }
.product-thumb .image { position: relative; padding: 0; background: #fff; text-align: center; }
.product-thumb .image a:hover { opacity: 1; }
.product-thumb .image img { margin: 0 auto; }
.product-thumb .caption { padding: 16px 18px 8px; min-height: 0; flex: 1; display: flex; flex-direction: column; gap: 6px; }
.product-thumb .caption h4 { font-family: var(--tekst); font-weight: 600; font-size: 16px; line-height: 1.35; margin: 0; }
.product-thumb .caption h4 a { color: var(--inkt); }
.product-thumb .caption h4 a:hover { color: var(--rood); }
.product-thumb .caption > p:not(.price):not(.ki-stock) { font-size: 14px; color: var(--zacht); }
.product-thumb .price { font-family: var(--display); font-weight: 800; font-size: 22px; color: var(--inkt); margin: auto 0 0; }
.product-thumb .price-new { color: var(--rood); }
.product-thumb .price-old { color: var(--zacht); font-family: var(--tekst); font-weight: 400; font-size: 15px; text-decoration: line-through; margin-left: 6px; }
.product-thumb .price-tax { display: none; }
.product-thumb .rating { display: none; }
.product-thumb .button-group { display: flex; gap: 8px; border: 0; background: transparent; padding: 0 18px 18px; overflow: visible; }
.product-thumb .button-group button { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 22px; border: 2px solid var(--lijn); background: #fff; color: var(--zacht); font-weight: 700; text-transform: none; line-height: 1; padding: 0; float: none; }
.product-thumb .button-group button:first-child { flex: 1 1 auto; width: auto; background: var(--rood); border-color: var(--rood); color: #fff; }
.product-thumb .button-group button:first-child:hover { background: var(--rood-donker); border-color: var(--rood-donker); }
.product-thumb .button-group button + button { border-left: 2px solid var(--lijn); }
.product-thumb .button-group button:not(:first-child):hover { border-color: var(--rood); color: var(--rood); background: #fff; }
.product-thumb .button-group button span { display: inline !important; margin-left: 6px; }
.ki-flag { position: absolute; top: 12px; left: 12px; background: var(--rood); color: #fff; font-weight: 700; font-size: 13px; padding: 5px 10px; border-radius: 12px; }
.ki-stock { font-size: 13px; font-weight: 600; color: var(--groen); margin: 0; }
.ki-stock:before { content: "\25CF\00a0"; }
.ki-stock--out { color: var(--zacht); }
/* lijstweergave op categoriepagina */
.product-list .product-thumb { flex-direction: row; flex-wrap: wrap; }
.product-list .product-thumb .image { float: none; flex: 0 0 220px; }
.product-list .product-thumb .caption { margin-left: 0; flex: 1 1 300px; }
.product-list .product-thumb .button-group { flex: 1 1 100%; border: 0; margin-left: 0; }
@media (max-width: 480px) {
  .ki-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .product-thumb .caption { padding: 12px 12px 6px; }
  .product-thumb .price { font-size: 19px; }
  .product-thumb .button-group { padding: 0 12px 12px; }
  .product-thumb .button-group button span { display: none !important; }
}

/* categorie- en zoekpagina */
#product-category h2, #product-search h1, #product-special h2, #product-manufacturer h2 { font-size: 36px; margin-top: 4px; }
#product-category .img-thumbnail { border-radius: var(--r); border-color: var(--lijn); }
#input-sort, #input-limit { height: 40px; }
#list-view, #grid-view { border-radius: 20px; }
.btn-link#compare-total { font-weight: 600; }

/* ---------- productpagina ---------- */
#product-product h1 { font-size: 40px; margin: 0 0 14px; }
#product-product .thumbnails { margin-left: 0; }
#product-product .thumbnails > li { margin-left: 0; }
#product-product .thumbnails > li:first-child { width: 100%; }
#product-product .thumbnails .img-thumbnail { border-radius: var(--r); border: 1px solid var(--lijn); padding: 8px; background: #fff; }
#product-product .image-additional { max-width: 92px; margin: 0 10px 10px 0; }
#product-product .image-additional .img-thumbnail { border-radius: var(--r-klein); padding: 4px; }
#product-product .list-unstyled li { color: var(--zacht); }
#product-product .list-unstyled h2 { font-size: 40px; color: var(--rood); margin: 10px 0 0; }
#product-product .list-unstyled span[style*="line-through"] { color: var(--zacht); font-size: 18px; }
#product-product #product { background: #fff; border: 1px solid var(--lijn); border-radius: var(--r-groot); padding: 22px; margin-top: 18px; }
#product-product #product h3 { font-size: 18px; margin-top: 0; }
#product-product #input-quantity { height: 52px; border-radius: 26px; text-align: center; font-weight: 700; font-size: 18px; max-width: 120px; }
#product-product #button-cart { height: 56px; border-radius: 28px; font-size: 17px; margin-top: 12px; }
#product-product .btn-group > .btn-default { border-radius: 22px !important; margin-right: 6px; }
#product-product .nav-tabs { border-color: var(--lijn); margin-top: 32px; }
#product-product .nav-tabs > li > a { border-radius: 12px 12px 0 0; font-weight: 700; color: var(--zacht); }
#product-product .nav-tabs > li.active > a { color: var(--inkt); border-color: var(--lijn) var(--lijn) #fff; }
#product-product .tab-content { background: #fff; border: 1px solid var(--lijn); border-top: 0; border-radius: 0 0 var(--r) var(--r); padding: 24px; line-height: 1.65; }
#product-product .tab-content img { max-width: 100%; height: auto; }
#product-product .rating p { color: var(--zacht); }
#product-product .rating .fa-star, #product-product .rating .fa-star-o { color: var(--goud); }
#product-product > .row ~ h3 { font-family: var(--display); font-weight: 800; font-size: 28px; margin-top: 48px; }
@media (max-width: 767px) { #product-product h1 { font-size: 30px; } #product-product .list-unstyled h2 { font-size: 32px; } }

/* winkelwagen en afrekenen */
#checkout-cart h1, #checkout-checkout h1, #account-login h1, #account-register h1, #account-account h2 { font-size: 36px; }
#checkout-checkout .panel-heading a, #checkout-checkout .panel-title { color: var(--inkt); font-weight: 700; }
#checkout-cart .table img { border-radius: 8px; }

/* ---------- vertrouwen en footer ---------- */
.ki-trust { padding: 56px 0 48px; }
.ki-trust__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.ki-trust__item { display: flex; gap: 14px; align-items: flex-start; }
.ki-trust__item svg { color: var(--rood); flex-shrink: 0; }
.ki-trust__item strong { display: block; }
.ki-trust__item span { display: block; color: var(--zacht); font-size: 14px; margin-top: 4px; }
.ki-footer { background: var(--groen-donker); color: #E6F0EA; margin-top: 0; padding: 0; border: 0; }
.ki-footer a { color: #E6F0EA; }
.ki-footer a:hover, .ki-footer a:focus { color: #fff; }
.ki-footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 32px; padding-top: 56px; padding-bottom: 32px; font-size: 15px; }
.ki-footer h2 { font-family: var(--tekst); font-weight: 700; font-size: 16px; letter-spacing: 0; color: #fff; margin: 0 0 12px; }
.ki-footer li { margin-bottom: 8px; }
.ki-footer__name { display: block; font-family: var(--display); font-weight: 800; font-size: 22px; color: #fff; margin-bottom: 10px; }
.ki-footer .ki-btn { margin-top: 12px; padding: 11px 20px; font-size: 15px; }
.ki-footer .ki-btn--light { color: var(--groen-donker); }
.ki-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: 20px; padding-bottom: 32px; border-top: 1px solid var(--groen); font-size: 13px; color: var(--mint); }

/* default footer-marge en inhoud */
#content { min-height: 300px; }
footer hr { display: none; }

/* Bootstrap-clearfix (:before/:after op .container) mag geen flex-/grid-item worden */
.ki-header__row:before, .ki-header__row:after, .ki-hero:before, .ki-hero:after,
.ki-trust__grid:before, .ki-trust__grid:after, .ki-footer__grid:before, .ki-footer__grid:after,
.ki-footer__bottom:before, .ki-footer__bottom:after { display: none; content: none; }

/* tegels: productfoto's hebben een witte achtergrond */
.ki-tile__img { background: #fff; }
.ki-tile__img img { object-fit: contain; }
.ki-tile__ph { display: block; width: 100%; height: 100%; background: var(--tegel); }

/* mobiele header: logo en knoppen op één regel */
@media (max-width: 520px) {
  .ki-header__row { flex-wrap: wrap; column-gap: 8px; }
  .ki-logo { flex: 1 1 auto; min-width: 0; gap: 8px; }
  .ki-logo__text { font-size: 19px; white-space: nowrap; }
  .ki-logo svg { width: 32px; height: 32px; }
  #wishlist-total { display: none; }
  .ki-iconlink { padding: 6px; min-width: 40px; }
  .ki-cart { margin-left: 2px; }
  .ki-cartbtn { width: 44px; height: 44px; padding: 0; justify-content: center; border-radius: 22px; }
  .ki-cartbtn #cart-total { font-size: 0; }
  .ki-cartbtn #cart-total .fa { font-size: 18px; margin: 0; }
}

/* ---------- correcties op het default-stylesheet ---------- */
body, h1, h2, h3, h4, h5, h6, .btn, input, select, textarea { font-family: var(--tekst); }
h1, h2, .ki-display { font-family: var(--display); }
.ki-footer h2 { font-family: var(--tekst); }
#menu.ki-menu { background: #fff; background-image: none; border: 0; border-top: 1px solid var(--lijn); border-radius: 0; min-height: 0; padding: 0; margin: 0; box-shadow: none; filter: none; }
#menu.ki-menu .dropdown-menu { padding-bottom: 8px; }
header.ki-header { padding: 0; }
.ki-footer { margin-top: 0; padding-top: 0; border-top: 0; }
#cart > .btn.ki-cartbtn, #cart > .ki-cartbtn { font-size: 15px; line-height: 1.2; color: #fff; }
#cart.open > .ki-cartbtn { background: var(--rood-donker); color: #fff; }
#search.ki-search { margin-bottom: 0; }
#search.ki-search input { line-height: normal; }
.product-grid .product-thumb .caption, .product-list .product-thumb .caption { min-height: 0; padding: 16px 18px 8px; }
.product-thumb .button-group button + button { width: 44px; }
.product-thumb h4 { font-weight: 600; }
.thumbnails { list-style: none; padding: 0; }
#product-product .thumbnails > li { float: left; }
.product-thumb .button-group { width: auto; }
#content > h1, #content > h2 { margin-top: 4px; }
#product-category #content, #product-product #tab-description, #information-information #content { font-size: 16px; }
#information-information #content { max-width: 760px; line-height: 1.65; }
label { font-size: 14px; }
.form-control, .input-group input, .input-group select, .input-group .dropdown-menu { font-size: 16px; }
.input-group .input-group-addon { font-size: 14px; height: 44px; border-color: var(--lijn); background: var(--grond); }
#content { min-height: 300px; }
h4 { font-size: 17px; }
/* kaarten in categorie/zoeken/aanbiedingen even hoog */
.row:has(> .product-layout) { display: flex; flex-wrap: wrap; }
.row:has(> .product-layout):before, .row:has(> .product-layout):after { display: none; }
.row > .product-layout { display: flex; }
.row > .product-layout > .product-thumb { width: 100%; height: auto; }
.well { background: #fff; border: 1px solid var(--lijn); border-radius: var(--r-groot); box-shadow: none; padding: 24px; }
.well h2 { font-size: 26px; margin-top: 0; }
.btn { font-size: 15px; }
.btn-xs { font-size: 12px; padding: 2px 8px; }
select.form-control, textarea.form-control, input[type="text"].form-control, input[type="password"].form-control, input[type="date"].form-control,
input[type="number"].form-control, input[type="email"].form-control, input[type="search"].form-control, input[type="tel"].form-control { font-size: 16px; }

/* ki-ronde3: vergelijken weg, productcarrousels */
[onclick^="compare.add"], #compare-total, .product-compare, a[href*="product/compare"] { display: none !important; }
.ki-pb { margin-top: 48px; display: flex; flex-direction: column; gap: 40px; clear: both; }
.ki-pb h2 { font-size: 28px; margin: 0; }
.ki-pb h3 { font-size: 20px; margin: 0; font-family: var(--tekst); font-weight: 700; }
.ki-pb__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.ki-pb__head a { font-weight: 700; }
.ki-pb__same { background: var(--groen-licht); border: 2px solid var(--groen); border-radius: var(--r-groot); padding: 24px; }
.ki-pb__same h2 { color: var(--groen-donker); }
.ki-pb__title { margin-bottom: 20px !important; }
.ki-pb__group + .ki-pb__group { margin-top: 32px; }
.ki-rail-wrap { position: relative; }
.ki-rail { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 48px) / 4); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 2px 10px; scrollbar-width: thin; }
.ki-rail__item { scroll-snap-align: start; display: flex; }
.ki-rail .product-thumb { width: 100%; height: auto; margin: 0; }
.ki-rail .product-thumb .caption h4 { font-size: 15px; }
.ki-rail__btn { position: absolute; top: 38%; z-index: 2; width: 44px; height: 44px; border-radius: 22px; border: 1px solid var(--lijn); background: #fff; color: var(--inkt); font-size: 22px; box-shadow: 0 4px 14px rgba(29,29,27,.12); }
.ki-rail__btn:hover { color: var(--rood); }
.ki-rail__btn--prev { left: -14px; } .ki-rail__btn--next { right: -14px; }
@media (max-width: 991px) { .ki-rail { grid-auto-columns: calc((100% - 32px) / 3); } }
@media (max-width: 600px) {
  .ki-rail { grid-auto-columns: 70%; }
  .ki-rail__btn { display: none; }
  .ki-pb__same { padding: 16px; }
  .ki-pb h2 { font-size: 23px; }
}
/* mobiel: Bootstrap zet bij aanraakschermen een onzichtbare laag over de pagina die tikken op het submenu opvangt */
.ki-menu .dropdown-backdrop { display: none !important; }
@media (max-width: 767px) { .ki-menu__drop { position: relative; z-index: 1001; } }

/* ki-kerstpakketten-blok */
.ki-pakket { background: var(--groen-donker); color: #fff; border-radius: var(--r-groot); overflow: hidden; }
.ki-pakket__top { display: flex; flex-wrap: wrap; }
.ki-pakket__body { flex: 1 1 460px; padding: 48px 56px; display: flex; flex-direction: column; gap: 14px; }
.ki-pakket__label { align-self: flex-start; background: var(--rood); color: #fff; font-weight: 700; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; padding: 6px 12px; border-radius: 20px; }
.ki-pakket__body h2 { color: #fff; font-size: 40px; margin: 0; }
.ki-pakket__body p { color: #E6F0EA; font-size: 17px; max-width: 480px; margin: 0; }
.ki-pakket__usp { list-style: none; padding: 0; margin: 4px 0 6px; display: flex; flex-wrap: wrap; gap: 8px 20px; font-weight: 700; color: #ECD6A0; }
.ki-pakket__usp li::before { content: "\2713\00a0"; }
.ki-pakket__knoppen { display: flex; flex-wrap: wrap; gap: 12px; }
.ki-pakket__img { flex: 1 1 380px; min-height: 340px; background: #0F2E20 center / cover no-repeat; }
.ki-pakket__branches { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 24px; background: rgba(255,255,255,.06); }
.ki-pakket__branche { display: flex; align-items: center; gap: 12px; background: #fff; border-radius: var(--r); padding: 10px; color: var(--inkt); text-decoration: none; }
.ki-pakket__branche:hover, .ki-pakket__branche:focus { color: var(--rood); text-decoration: none; box-shadow: inset 0 0 0 2px var(--rood); }
.ki-pakket__branche img { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; flex: none; background: var(--tegel); }
.ki-pakket__branche strong { display: block; font-size: 15px; line-height: 1.25; }
.ki-pakket__branche small { display: block; color: var(--groen); font-weight: 700; font-size: 13px; margin-top: 2px; }
@media (max-width: 991px) { .ki-pakket__branches { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .ki-pakket__body { padding: 28px; } .ki-pakket__body h2 { font-size: 30px; } .ki-pakket__img { min-height: 220px; } .ki-pakket__branches { padding: 14px; gap: 8px; } }
@media (max-width: 420px) { .ki-pakket__branches { grid-template-columns: 1fr; } }
/* ki-winkelwagen-popup */
body.ki-popup-open { overflow: hidden; }
.ki-popup { position: fixed; inset: 0; z-index: 2000; background: rgba(20, 30, 25, .55); display: flex; align-items: center; justify-content: center; padding: 16px; animation: kiPopIn .18s ease-out; }
.ki-popup__box { position: relative; background: #fff; border-radius: var(--r-groot); width: 100%; max-width: 560px; max-height: calc(100vh - 32px); overflow-y: auto; padding: 28px; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.ki-popup__x { position: absolute; top: 10px; right: 12px; border: 0; background: none; font-size: 30px; line-height: 1; color: var(--zacht); padding: 6px 10px; cursor: pointer; }
.ki-popup__x:hover { color: var(--rood); }
.ki-popup__titel { font-family: var(--display); font-weight: 800; font-size: 22px; margin: 0 36px 18px 0; color: var(--groen-donker); display: flex; align-items: center; gap: 10px; }
.ki-popup__vink { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--groen); color: #fff; font-size: 16px; flex: none; }
.ki-popup__product { display: flex; gap: 14px; align-items: center; padding-bottom: 16px; border-bottom: 1px solid var(--lijn); }
.ki-popup__product img { width: 80px; height: 80px; object-fit: contain; border: 1px solid var(--lijn); border-radius: var(--r-klein); background: #fff; flex: none; }
.ki-popup__product a { color: var(--inkt); }
.ki-popup__product strong { display: block; line-height: 1.3; }
.ki-popup__product span { display: block; color: var(--zacht); margin-top: 4px; }
.ki-popup__samen { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px; padding: 14px 0; color: var(--zacht); }
.ki-popup__samen strong { color: var(--inkt); font-size: 17px; }
.ki-popup__knoppen { display: flex; gap: 10px; flex-wrap: wrap; }
.ki-popup__btn { flex: 1 1 200px; display: inline-flex; justify-content: center; align-items: center; gap: 8px; font-weight: 700; font-size: 17px; padding: 15px 20px; border-radius: 28px; border: 2px solid transparent; text-decoration: none; cursor: pointer; }
.ki-popup__btn--primary { background: var(--rood); color: #fff; }
.ki-popup__btn--primary:hover, .ki-popup__btn--primary:focus { background: var(--rood-donker); color: #fff; text-decoration: none; }
.ki-popup__btn--ghost { background: #fff; color: var(--groen); border-color: var(--groen); }
.ki-popup__btn--ghost:hover, .ki-popup__btn--ghost:focus { background: var(--groen-licht); color: var(--groen-donker); }
.ki-popup__usp { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 14px; color: var(--groen); font-weight: 600; }
.ki-popup__usp li::before { content: "\2713\00a0"; }
.ki-popup__extra { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--lijn); }
.ki-popup__kop { font-weight: 700; margin: 0 0 12px; }
.ki-popup__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ki-popup__sug { display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.ki-popup__sug a { color: var(--inkt); text-decoration: none; display: flex; flex-direction: column; gap: 6px; }
.ki-popup__sug a:hover span { color: var(--rood); }
.ki-popup__sug img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; border: 1px solid var(--lijn); border-radius: var(--r-klein); background: #fff; }
.ki-popup__sug span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; }
.ki-popup__prijs s { color: var(--zacht); } .ki-popup__prijs b { color: var(--rood); }
.ki-popup__plus { margin-top: auto; border: 1px solid var(--groen); background: #fff; color: var(--groen); border-radius: 20px; padding: 7px 10px; font-weight: 700; font-size: 13px; cursor: pointer; }
.ki-popup__plus:hover { background: var(--groen); color: #fff; }
.ki-popup__link { display: block; text-align: center; margin-top: 16px; font-size: 14px; }
@keyframes kiPopIn { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 600px) {
  .ki-popup { align-items: flex-end; padding: 0; }
  .ki-popup__box { border-radius: 20px 20px 0 0; max-height: 92vh; padding: 22px 18px calc(18px + env(safe-area-inset-bottom, 0px)); }
  .ki-popup__titel { font-size: 19px; }
  .ki-popup__grid { gap: 8px; }
}
/* ki-minicart */
#cart .dropdown-menu.ki-mini { min-width: 400px; max-width: calc(100vw - 24px); padding: 0; overflow: hidden; }
.ki-mini__body { padding: 18px 18px 14px; list-style: none; }
.ki-mini__kop { font-family: var(--display); font-weight: 800; font-size: 20px; margin-bottom: 10px; color: var(--inkt); }
.ki-mini__kop span { color: var(--zacht); font-family: var(--tekst); font-weight: 600; font-size: 16px; }
#cart .dropdown-menu li > .ki-mini__items { padding: 0 18px; }
.ki-mini__items { max-height: 300px; overflow-y: auto; margin: 0 -18px; padding: 0 18px; border-top: 1px solid var(--lijn); border-bottom: 1px solid var(--lijn); }
.ki-mini__item { display: grid; grid-template-columns: 64px 1fr auto 28px; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--lijn); }
.ki-mini__item:last-child { border-bottom: 0; }
.ki-mini__img img { width: 64px; height: 64px; object-fit: contain; border: 1px solid var(--lijn); border-radius: var(--r-klein); background: #fff; display: block; }
.ki-mini__info { min-width: 0; font-size: 14px; line-height: 1.3; }
.ki-mini__info a { color: var(--inkt); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ki-mini__info a:hover { color: var(--rood); }
.ki-mini__info small { display: block; color: var(--zacht); }
.ki-mini__aantal { display: block; color: var(--zacht); margin-top: 3px; }
.ki-mini__prijs { font-weight: 700; white-space: nowrap; }
.ki-mini__weg { border: 0; background: none; color: #A8A39B; padding: 4px; font-size: 16px; cursor: pointer; }
.ki-mini__weg:hover, .ki-mini__weg:focus { color: var(--rood); }
.ki-mini__totaal { display: flex; justify-content: space-between; align-items: baseline; padding-top: 14px; font-size: 17px; }
.ki-mini__totaal small { color: var(--zacht); font-size: 13px; }
.ki-mini__totaal strong { font-size: 22px; }
.ki-mini__verzend { margin: 2px 0 12px; font-size: 13px; color: var(--zacht); }
.ki-mini__afrekenen { display: flex; justify-content: center; align-items: center; gap: 8px; background: var(--rood); color: #fff !important; font-weight: 700; font-size: 17px; padding: 14px; border-radius: 28px; text-decoration: none !important; }
.ki-mini__afrekenen:hover, .ki-mini__afrekenen:focus { background: var(--rood-donker); }
.ki-mini__bekijk { display: block; text-align: center; margin-top: 10px; font-weight: 600; font-size: 14px; }
.ki-mini__usp { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 14px; margin: 12px 0 0; font-size: 13px; font-weight: 600; color: var(--groen); }
.ki-mini__leeg { text-align: center; }
.ki-mini__leeg p { margin: 4px 0 14px; color: var(--zacht); }
.ki-mini__leeg strong { color: var(--inkt); font-size: 17px; }
@media (max-width: 480px) { #cart .dropdown-menu.ki-mini { min-width: 0; width: calc(100vw - 24px); } .ki-mini__item { grid-template-columns: 52px 1fr auto 24px; gap: 10px; } .ki-mini__img img { width: 52px; height: 52px; } }