.vwe-occ-el-wrap{
  --bg-dark:#121212;
  --card-bg:#1e1e1e;
  --accent-yellow:#f1b400;

  --text-main:#ffffff;
  --text-muted:#a0a0a0;

  --filter-bg:#333333;
  --hover-bg:#4b4b4b;
  --filter-radius:8px;
  --filter-text:#AEAEAE;
  --filter-icon:#ffffff;

  --view-active-bg: #2D2C2F;
  --view-wrap-bg: var(--filter-bg);
  --view-inactive: var(--filter-text);
  --view-active-color:#ffffff;

  --bar-gap:12px;
  --grid-gap:24px;
  --card-radius:12px;
  --cta-radius:50px;

  --img-h:220px;
  --img-w-list:400px;
  --grid-min:350px;

  --cta-text:#000000;
  --cta-hover-scale:1.05;

  --page-node-size:35px;
  --page-node-radius:4px;
  --page-node-color: var(--filter-text);
  --page-node-hover-bg: var(--hover-bg);
  --page-node-active-bg: var(--hover-bg);
  --page-node-active-color: #ffffff;

  width:100%;
  color:var(--text-main);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Font Controls */
.vwe-occ-el-wrap .select-trigger,
.vwe-occ-el-wrap .option,
.vwe-occ-el-wrap .car-title,
.vwe-occ-el-wrap .spec-label,
.vwe-occ-el-wrap .spec-value,
.vwe-occ-el-wrap .main-price,
.vwe-occ-el-wrap .sub-price,
.vwe-occ-el-wrap .cta-btn,
.vwe-occ-el-wrap .page-node{
  font-family: inherit;
}

/* Controls */
.vwe-occ-el-wrap .controls-wrapper{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:24px;
  gap:12px;
  flex-wrap:wrap;
}
.vwe-occ-el-wrap .filters-group{
  display:flex;
  gap:var(--bar-gap);
  flex-wrap:nowrap;
  width: 90%;
}

/* Dropdown */
.vwe-occ-el-wrap .custom-select{
  position:relative;
  min-width:180px;
  user-select:none;
  width: 100%;
}

.vwe-occ-el-wrap .select-trigger{
  background:var(--filter-bg);
  padding:8px 16px;
  border-radius:var(--filter-radius);
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:14px;
  gap:12px;
  color:var(--filter-text);
  max-width: 100%;
}

/* Truncate text logic */
.vwe-occ-el-wrap .trigger-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 auto;
  min-width: 0; 
  text-align: left;
}

.vwe-occ-el-wrap .select-trigger:hover{background:var(--hover-bg);}

.vwe-occ-el-wrap .trigger-actions{ 
    display:flex; 
    align-items:center; 
    gap:10px; 
    flex: 0 0 auto; 
}

.vwe-occ-el-wrap .clear-x{
  display:none;
  font-weight:700;
  color:var(--filter-icon);
  cursor:pointer;
  font-size:18px;
  line-height:1;
}
.vwe-occ-el-wrap .custom-select.active .clear-x{display:inline-block;}

.vwe-occ-el-wrap .arrow{
  border:solid var(--filter-icon);
  border-width:0 2px 2px 0;
  display:inline-block;
  padding:3px;
  transform:rotate(45deg);
  transition:transform .2s ease;
}
.vwe-occ-el-wrap .custom-select.open .arrow{transform:rotate(-135deg);}

.vwe-occ-el-wrap .options-menu{
  position:absolute;
  top:calc(100% + 5px);
  left:0;
  width:100%;
  background:var(--filter-bg);
  border-radius:var(--filter-radius);
  overflow:hidden;
  display:none;
  z-index:100;
  box-shadow:0 10px 20px rgba(0,0,0,.5);
}
.vwe-occ-el-wrap .custom-select.open .options-menu{display:block;}
.vwe-occ-el-wrap .option{
  padding:12px 16px;
  cursor:pointer;
  font-size:14px;
  color:var(--filter-text);
}
.vwe-occ-el-wrap .option:hover{background:var(--hover-bg);}

/* View switch */
.vwe-occ-el-wrap .view-switch{
  display:flex;
  gap:16px;
  background:var(--view-wrap-bg);
  padding:6px;
  border-radius:var(--filter-radius);
}
.vwe-occ-el-wrap .view-btn{
  background:transparent;
  border:none;
  color:var(--view-inactive);
  padding:4px;
  cursor:pointer;
  border-radius:4px;
  display:flex;
  align-items:center;
}
.vwe-occ-el-wrap .view-btn svg{display:block;}
.vwe-occ-el-wrap .view-btn.active{
  border-radius:4px;
  background:var(--view-active-bg);
  color:var(--view-active-color);
}

/* Inventory Grid */
.vwe-occ-el-wrap .inventory-container{
  display:grid;
  gap:var(--grid-gap);
  transition:all .2s ease;
}
.vwe-occ-el-wrap .inventory-container.grid-view{
  grid-template-columns:repeat(auto-fill, minmax(var(--grid-min), 1fr));
}
.vwe-occ-el-wrap .inventory-container.list-view{
  grid-template-columns:1fr;
}

.vwe-occ-el-wrap .car-card{
  background:var(--card-bg);
  border-radius:var(--card-radius);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.vwe-occ-el-wrap .inventory-container.list-view .car-card{flex-direction:row;}

.vwe-occ-el-wrap .card-img{
  width:100%;
  height:var(--img-h);
  object-fit:cover;
  background:#2a2a2a;
}
.vwe-occ-el-wrap .inventory-container.list-view .card-img{
  width:var(--img-w-list);
  height:auto;
  min-height:100%;
}

.vwe-occ-el-wrap .card-content{
  padding:24px;
  display:flex;
  flex-direction:column;
  flex-grow:1;
}

.vwe-occ-el-wrap .car-title{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  margin:0 0 20px 0;
  font-size:20px;
  font-weight:600;
}

/* ===== SPECS: main container + 2 containers ===== */
.vwe-occ-el-wrap .specs-wrap{
  margin-top: 0;
}

.vwe-occ-el-wrap .specs-2col{
  display:flex;
  gap:24px;
  align-items:flex-start;
}

/* Left column (labels) */
.vwe-occ-el-wrap .specs-2col .spec-labels{
  flex: 0 0 156px;
  max-width: 156px;
  color: #EDEDED;
  line-height:28px;
}

.spec-labels{
    font-weight:400;
}


/* Right column (values) */
.vwe-occ-el-wrap .specs-2col .spec-values{
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 600;
  text-align:right;
}

 .spec-values{
     font-weight:600;
 }

.vwe-occ-el-wrap .specs-2col .spec-row{
  line-height: 1.4;
}

/* spec-rows alleen links uitlijnen in de LABEL-kolom */
.vwe-occ-el-wrap .specs-2col .spec-labels .spec-row{
  text-align: left;
}

/* GRID view (default): values rechts */
.vwe-occ-el-wrap .specs-2col .spec-values,
.vwe-occ-el-wrap .specs-2col .spec-values .spec-row{
  text-align: right;
}

/* LIST view: values links */
.vwe-occ-el-wrap .inventory-container.list-view .specs-2col .spec-values,
.vwe-occ-el-wrap .inventory-container.list-view .specs-2col .spec-values .spec-row{
  text-align: left;
}

/* These classes exist for Elementor Typography controls */
.vwe-occ-el-wrap .spec-label{ color: inherit; }
.vwe-occ-el-wrap .spec-value{ color: inherit; }

/* Footer */
.vwe-occ-el-wrap .card-footer{
  margin-top:24px;
  display:flex;
  gap:24px;
  flex-direction:column;
  justify-content:space-between;
  align-items:end;
}

.vwe-occ-el-wrap .price-group{
  display:flex;
  flex-direction:column;
  align-items:end;
}
.vwe-occ-el-wrap .price-group .main-price{
  display:block;
  font-size:22px;
  font-weight:700;
}
.vwe-occ-el-wrap .price-group .sub-price{
  font-size:12px;
  color:var(--text-muted);
}

.vwe-occ-el-wrap .cta-btn{
  background:var(--accent-yellow);
  color:#fff;
  border:none;
  padding:6px 16px;
  border-radius:var(--cta-radius);
  font-weight:700;
  cursor:pointer;
  transition:transform .2s ease;
  white-space:nowrap;
  text-decoration:none;
}

/* Pagination */
.vwe-occ-el-wrap .pagination{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  margin-top:50px;
  flex-wrap:wrap;
}
.vwe-occ-el-wrap .page-node{
  width:var(--page-node-size);
  height:var(--page-node-size);
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:var(--page-node-radius);
  cursor:pointer;
  background:transparent;
  color:var(--page-node-color);
  text-decoration:none;
}
.vwe-occ-el-wrap .page-node.active{
  background:var(--page-node-active-bg);
  color:var(--page-node-active-color);
}
.vwe-occ-el-wrap .page-node:hover:not(.active){
  background:var(--page-node-hover-bg);
  color:#fff;
}

/* Helpers */
.vwe-occ-el-wrap .is-hidden{display:none !important;}

/* Remove Elementor hover effects on view buttons */
.vwe-occ-el-wrap .view-switch .view-btn:hover,
.vwe-occ-el-wrap .view-switch .view-btn:focus,
.vwe-occ-el-wrap .view-switch .view-btn:focus-visible{
  background-color: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  outline: none !important;
}
.vwe-occ-el-wrap .view-switch .view-btn.active,
.vwe-occ-el-wrap .view-switch .view-btn.active:hover{
  background-color: var(--view-active-bg) !important;
  color: var(--view-active-color) !important;
}


/* ============================
   LIST/ROW VIEW DESKTOP (Default)
   ============================ */
.vwe-occ-el-wrap .inventory-container.list-view .card-content{
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0;
  column-gap: 24px;
}

.vwe-occ-el-wrap .inventory-container.list-view .car-title{
  flex: 0 0 100%;
  width: 100%;
  margin: 0 0 16px 0;
}

.vwe-occ-el-wrap .inventory-container.list-view .specs-wrap{
  flex: 1 1 auto;
  min-width: 0;
}

.vwe-occ-el-wrap .inventory-container.list-view .card-footer{
  flex: 0 0 auto;
  margin-top: 0;
  margin-left: auto;
  min-width: 220px;
}

/* FIXED HEIGHT ON DESKTOP */
.vwe-occ-el-wrap .inventory-container.list-view .car-card{
  height: 212px;
  max-height: 212px;
}

.vwe-occ-el-wrap .inventory-container.list-view .card-img{
  height: 212px;
  max-height: 212px;
  width: var(--img-w-list);
  object-fit: cover;
}

.vwe-occ-el-wrap .inventory-container.list-view .card-content{
  overflow: hidden;
  min-height: 0;
}

/* ============================
   MOBILE PHONES (Max 640px)
   ============================ */
@media (max-width: 640px){
  /* 1. Wrap filters */
  .vwe-occ-el-wrap .filters-group {
    flex-wrap: wrap;
    width: 100%;
  }

  /* 2. List view: Stack columns */
  .vwe-occ-el-wrap .inventory-container.list-view .card-content{
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 16px;
    /* FIX: Allow content to expand on phone */
    overflow: visible; 
  }
  
  .vwe-occ-el-wrap .inventory-container.list-view .card-footer{
    margin-left: 0;
    min-width: 0;
    align-items: flex-start;
  }
  
  .vwe-occ-el-wrap .price-group{
    align-items: flex-start;
  }

  /* 3. List view: Auto height (No cut-off) */
  .vwe-occ-el-wrap .inventory-container.list-view .car-card{
    height: auto;
    max-height: none;
    flex-direction: column; /* Ensure image is on top */
  }

  /* 4. List view: Full width image */
  .vwe-occ-el-wrap .inventory-container.list-view .card-img{
    height: var(--img-h);
    max-height: none;
    width: 100%;
  }
}