/* Motion Gallery Inventory 0.4.7 modular presentation layer.
   The proven mobile gallery composition from 0.3.2 is deliberately untouched. */

/* Offer grid and cards */
.mgi-inventory .mgi-grid,
.mgi-grid.mgi-latest,
.mgi-collection .mgi-grid{
  grid-template-columns:repeat(var(--mgi-v04-offer-columns,3),minmax(0,1fr))!important;
  gap:var(--mgi-v04-grid-gap,28px)!important;
}
.mgi-inventory .mgi-card,
.mgi-grid.mgi-latest .mgi-card,
.mgi-collection .mgi-card,
.mgi-v040-card{
  border-radius:var(--mgi-v04-card-radius,10px)!important;
  background:var(--mgi-v04-card-bg,#f3f2ef)!important;
  color:var(--mgi-v04-card-text,#111)!important;
  overflow:hidden;
}
.mgi-inventory .mgi-card-media,
.mgi-grid.mgi-latest .mgi-card-media,
.mgi-collection .mgi-card-media,
.mgi-v040-image-wrap{
  position:relative;
  overflow:hidden;
  aspect-ratio:var(--mgi-v04-image-ratio,4 / 3)!important;
  border-radius:var(--mgi-v04-card-radius,10px) var(--mgi-v04-card-radius,10px) 0 0;
}
.mgi-inventory .mgi-card-media>img,
.mgi-grid.mgi-latest .mgi-card-media>img,
.mgi-collection .mgi-card-media>img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .45s cubic-bezier(.2,.7,.2,1)!important;
}
@media (hover:hover){
  .mgi-inventory .mgi-card:hover .mgi-card-media>img,
  .mgi-grid.mgi-latest .mgi-card:hover .mgi-card-media>img,
  .mgi-collection .mgi-card:hover .mgi-card-media>img{
    transform:scale(var(--mgi-v04-hover-zoom,1.045))!important;
  }
}
.mgi-inventory .mgi-card-body,
.mgi-grid.mgi-latest .mgi-card-body,
.mgi-collection .mgi-card-body{
  background:var(--mgi-v04-card-bg,#f3f2ef)!important;
  color:var(--mgi-v04-card-text,#111)!important;
}
.mgi-inventory .mgi-card h3,
.mgi-grid.mgi-latest .mgi-card h3,
.mgi-collection .mgi-card h3{color:var(--mgi-v04-card-text,#111)!important}
.mgi-inventory .mgi-card-subtitle,
.mgi-inventory .mgi-card-vat,
.mgi-grid.mgi-latest .mgi-card-subtitle,
.mgi-grid.mgi-latest .mgi-card-vat,
.mgi-collection .mgi-card-subtitle,
.mgi-collection .mgi-card-vat{color:var(--mgi-v04-card-muted,#4b5560)!important}

.mgi-v040-meta-row{
  position:absolute!important;left:16px!important;right:16px!important;z-index:5!important;
  display:flex!important;align-items:center!important;gap:6px!important;pointer-events:none;
}
.mgi-v040-meta-row.is-top{top:16px!important;bottom:auto!important}
.mgi-v040-meta-row.is-bottom{top:auto!important;bottom:16px!important}
.mgi-inventory .mgi-card-facts span,
.mgi-grid.mgi-latest .mgi-card-facts span,
.mgi-collection .mgi-card-facts span,
.mgi-v040-chip{
  background:var(--mgi-v04-chip-bg,#171717)!important;
  color:var(--mgi-v04-chip-text,#fff)!important;
  border-radius:var(--mgi-v04-chip-radius,4px)!important;
  font-size:var(--mgi-v04-chip-font-size,14px)!important;
  line-height:1.1!important;padding:.65em .75em!important;border:0!important;
  box-shadow:none!important;white-space:nowrap!important;
}
.mgi-v040-filter-button{
  border:1px solid currentColor!important;border-radius:8px!important;padding:.75rem 1rem!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;min-height:44px!important;
}

@media(max-width:1050px) and (min-width:768px){
  .mgi-inventory .mgi-grid,
  .mgi-grid.mgi-latest,
  .mgi-collection .mgi-grid{
    grid-template-columns:repeat(var(--mgi-v04-tablet-columns,2),minmax(0,1fr))!important;
  }
}
@media(max-width:767px){
  .mgi-inventory .mgi-grid,.mgi-grid.mgi-latest,.mgi-collection .mgi-grid{grid-template-columns:1fr!important}
}

/* Detail page design tokens; desktop only for gallery dimensions/radii. */
@media(min-width:901px){
  .mgi-single .mgi-single-shell{width:min(var(--mgi-v04-detail-max,1760px),calc(100% - 48px))!important}
  .mgi-single .mgi-detail-layout{width:min(var(--mgi-v04-content-max,1280px),100%)!important}
  .mgi-single .mgi-gallery-seven .mgi-gallery-main{
    border-radius:var(--mgi-v04-gallery-radius,10px) 0 0 var(--mgi-v04-gallery-radius,10px)!important;
  }
  .mgi-single .mgi-gallery-side-item:nth-child(1){border-radius:0 var(--mgi-v04-gallery-radius,10px) 0 0!important}
  .mgi-single .mgi-gallery-side-item:nth-child(3){border-radius:0 0 var(--mgi-v04-gallery-radius,10px) 0!important}
}

/* Native Specificaties / Opties tabs */
.mgi-vehicle-info{max-width:var(--mgi-v04-content-max,1280px)}
.mgi-v040-detail-tabs{
  display:flex;gap:8px;margin:0 0 1.5rem;max-width:var(--mgi-v04-content-max,1280px);
  overflow-x:auto;padding-bottom:2px;
}
.mgi-v040-tab{
  appearance:none;border:1px solid rgba(255,255,255,.28);background:transparent;color:inherit;
  border-radius:999px;padding:.78rem 1.2rem;font:inherit;font-weight:600;cursor:pointer;
  transition:background .2s,color .2s,border-color .2s;white-space:nowrap;
}
.mgi-v040-tab:hover{border-color:currentColor}
.mgi-v040-tab.is-active{background:#f4f2ee;color:#151515;border-color:#f4f2ee}
.mgi-v040-tab-panel[hidden]{display:none!important}
.mgi-v040-options-panel{max-width:var(--mgi-v04-content-max,1280px)}
.mgi-v040-option-groups{display:grid;gap:2.25rem}
.mgi-v040-option-group{border-top:1px solid rgba(255,255,255,.18);padding-top:1.25rem;margin:0}
.mgi-v040-option-group h3,.mgi-v040-option-group summary{
  font-size:clamp(1.1rem,1.3vw,1.45rem);font-weight:650;margin:0 0 1rem;color:inherit;
}
.mgi-v040-option-group ul{
  list-style:none!important;margin:0!important;padding:0!important;
  display:grid;grid-template-columns:repeat(var(--mgi-v04-options-columns,2),minmax(0,1fr));gap:.65rem 2rem;
}
.mgi-v040-option-group li{position:relative;padding-left:1rem;line-height:1.5;color:inherit;break-inside:avoid}
.mgi-v040-option-group li:before{content:'–';position:absolute;left:0;opacity:.65}
.mgi-v040-option-group summary{display:flex;justify-content:space-between;align-items:center;cursor:pointer;list-style:none}
.mgi-v040-option-group summary::-webkit-details-marker{display:none}
.mgi-v040-group-count{font-size:.85em;opacity:.65;font-weight:500}
.mgi-v040-reorder-sections{display:flex;flex-direction:column}

@media(max-width:767px){
  .mgi-v040-option-group ul{grid-template-columns:1fr}
  .mgi-v040-detail-tabs{margin-top:0}
}


/* Safe, server-rendered detail sections. VWE blocks are sorted in PHP, so
 * their contents remain visible even when JavaScript is blocked or stale. */
.mgi-v040-stacked-part + .mgi-v040-stacked-part{margin-top:clamp(2.25rem,5vw,4.5rem)}
.mgi-custom-section .mgi-primary,.mgi-trust .mgi-primary{display:inline-flex;width:auto;margin-top:.5rem;text-decoration:none}
.mgi-standard-remarks .mgi-copy{opacity:.9}

/* 0.4.4 — server-side card visibility, configurable status labels and
 * consistent sold/highlight presentation. */
.mgi-inventory .mgi-card-facts span[hidden],
.mgi-grid.mgi-latest .mgi-card-facts span[hidden],
.mgi-collection .mgi-card-facts span[hidden],
.mgi-v040-chip[hidden]{display:none!important}

.mgi-inventory .mgi-card .mgi-badge,
.mgi-grid.mgi-latest .mgi-card .mgi-badge,
.mgi-collection .mgi-card .mgi-badge{
  position:absolute!important;z-index:7!important;margin:0!important;
  background:var(--mgi-v04-status-bg,rgba(23,23,23,.82))!important;
  color:var(--mgi-v04-status-text,#fff)!important;
  border:0!important;box-shadow:none!important;
  font-size:11px!important;font-weight:700!important;letter-spacing:.11em!important;
  line-height:1.2!important;text-transform:uppercase!important;
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
}
.mgi-inventory .mgi-card .mgi-badge--button,
.mgi-grid.mgi-latest .mgi-card .mgi-badge--button,
.mgi-collection .mgi-card .mgi-badge--button{
  display:inline-flex!important;width:auto!important;right:auto;bottom:auto;
  padding:8px 11px!important;border-radius:var(--mgi-v04-status-radius,4px)!important;
}
.mgi-inventory .mgi-card .mgi-badge--overlay,
.mgi-grid.mgi-latest .mgi-card .mgi-badge--overlay,
.mgi-collection .mgi-card .mgi-badge--overlay{
  display:block!important;left:0!important;right:0!important;width:auto!important;
  padding:10px 16px!important;border-radius:0!important;
}
.mgi-card .mgi-badge--pos-top-left{top:0!important;bottom:auto!important;left:0!important;right:auto!important;text-align:left}
.mgi-card .mgi-badge--pos-top-right{top:0!important;bottom:auto!important;left:auto!important;right:0!important;text-align:right}
.mgi-card .mgi-badge--pos-bottom-left{top:auto!important;bottom:0!important;left:0!important;right:auto!important;text-align:left}
.mgi-card .mgi-badge--pos-bottom-right{top:auto!important;bottom:0!important;left:auto!important;right:0!important;text-align:right}
.mgi-card .mgi-badge--button.mgi-badge--pos-top-left{top:14px!important;left:14px!important}
.mgi-card .mgi-badge--button.mgi-badge--pos-top-right{top:14px!important;right:14px!important}
.mgi-card .mgi-badge--button.mgi-badge--pos-bottom-left{bottom:14px!important;left:14px!important}
.mgi-card .mgi-badge--button.mgi-badge--pos-bottom-right{bottom:14px!important;right:14px!important}
/* When status and year/km/price use the same edge, the status keeps the
 * configured position and the information row moves inward. This makes an
 * overlay behave like a real overlay instead of an accidentally displaced bar. */
.mgi-card--has-facts.mgi-card--facts-top.mgi-card--badge-top-left .mgi-card-facts,
.mgi-card--has-facts.mgi-card--facts-top.mgi-card--badge-top-right .mgi-card-facts{top:60px!important;bottom:auto!important}
.mgi-card--has-facts.mgi-card--facts-bottom.mgi-card--badge-bottom-left .mgi-card-facts,
.mgi-card--has-facts.mgi-card--facts-bottom.mgi-card--badge-bottom-right .mgi-card-facts{top:auto!important;bottom:60px!important}

.mgi-single .mgi-highlights{
  grid-template-columns:repeat(var(--mgi-v04-highlights-columns,2),minmax(0,1fr))!important;
}
@media(max-width:767px){.mgi-single .mgi-highlights{grid-template-columns:1fr!important}}


/* 0.4.5 — a real overlay always spans the complete photo. Position only
 * controls top/bottom and text alignment; it may never collapse to a badge. */
.mgi-card .mgi-badge--overlay.mgi-badge--pos-top-left,
.mgi-card .mgi-badge--overlay.mgi-badge--pos-top-right{
  top:0!important;bottom:auto!important;left:0!important;right:0!important;
  width:100%!important;max-width:none!important;box-sizing:border-box!important;
}
.mgi-card .mgi-badge--overlay.mgi-badge--pos-bottom-left,
.mgi-card .mgi-badge--overlay.mgi-badge--pos-bottom-right{
  top:auto!important;bottom:0!important;left:0!important;right:0!important;
  width:100%!important;max-width:none!important;box-sizing:border-box!important;
}
.mgi-card .mgi-badge--overlay.mgi-badge--pos-top-left,
.mgi-card .mgi-badge--overlay.mgi-badge--pos-bottom-left{text-align:left!important}
.mgi-card .mgi-badge--overlay.mgi-badge--pos-top-right,
.mgi-card .mgi-badge--overlay.mgi-badge--pos-bottom-right{text-align:right!important}

/* 0.4.10 — refined desktop search/filter bar, while leaving the mobile drawer intact. */
.mgi-inventory .mgi-desktop-filterbar{
  display:grid;
  grid-template-columns:minmax(260px,1.7fr) minmax(165px,1fr) minmax(165px,1fr) minmax(180px,1fr);
  gap:12px;
  align-items:end;
  width:100%;
  margin:0;
}
.mgi-inventory .mgi-desktop-filterbar label{
  min-width:0;
  display:block;
}
.mgi-inventory .mgi-desktop-filterbar label>span{
  display:block;
  margin:0 0 7px;
  color:var(--mgi-muted,#c8c1b7)!important;
  font-size:11px;
  line-height:1.2;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.mgi-inventory .mgi-desktop-filterbar input[type="search"],
.mgi-inventory .mgi-desktop-filterbar select{
  width:100%;
  min-height:46px;
  border:1px solid var(--mgi-line,rgba(255,255,255,.18))!important;
  border-radius:7px!important;
  background:rgba(255,255,255,.045)!important;
  color:var(--mgi-ink,#f7f4ef)!important;
  box-shadow:none!important;
  font:inherit;
}
.mgi-inventory .mgi-desktop-filterbar input[type="search"]{
  padding:11px 14px!important;
  appearance:none;
  -webkit-appearance:none;
}
.mgi-inventory .mgi-desktop-filterbar input[type="search"]::placeholder{
  color:var(--mgi-muted,#c8c1b7)!important;
  opacity:.78;
}
.mgi-inventory .mgi-desktop-filterbar select{
  padding:11px 36px 11px 12px!important;
}
.mgi-inventory .mgi-desktop-filterbar select option{
  background:#fff;
  color:#171717;
}
.mgi-inventory .mgi-desktop-filterbar .mgi-clear-filters{
  grid-column:1/-1;
  justify-self:start;
  min-height:auto;
  padding:2px 0!important;
  margin-top:-2px;
  border:0!important;
  background:none!important;
  color:var(--mgi-ink,#f7f4ef)!important;
  text-decoration:underline;
  text-underline-offset:3px;
}
.mgi-inventory .mgi-desktop-filterbar .mgi-clear-filters[hidden]{display:none!important}
.mgi-inventory .mgi-mobile-filterbar{display:none}
@media(min-width:768px){
  .mgi-inventory .mgi-filter-toggle{display:none!important}
}
@media(max-width:980px) and (min-width:768px){
  .mgi-inventory .mgi-desktop-filterbar{
    grid-template-columns:minmax(220px,1.5fr) repeat(3,minmax(140px,1fr));
    gap:10px;
  }
}
@media(max-width:767px){
  .mgi-inventory .mgi-desktop-filterbar{display:none!important}
  .mgi-inventory .mgi-mobile-filterbar{display:block!important}
  .mgi-inventory .mgi-mobile-filterbar .mgi-clear-filters[hidden]{display:none!important}
}